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

package/dist/IllustratedMessage.css

@@ -1,25 +1,25 @@
 @layer _.a {
-  ._0f {
+  .mb {
     display: grid;
   }
 
-  ._ea {
+  .ai {
     font-size: .6875rem;
   }
 
-  ._ei {
+  .ah {
     font-size: 1.125rem;
   }
 
-  .r______x {
+  ._lv {
     max-width: calc(23.75rem * var(--s2-scale));
   }
 
-  .r________V {
+  ._lw {
     max-width: calc(33rem * var(--s2-scale));
   }
 
-  .__k-asng59 {
+  ._uPmblS {
     grid-template-areas: ". illustration ."
                          ". . ."
                          "heading heading heading"
@@ -28,319 +28,321 @@
                          ". buttonGroup .";
   }
 
-  .__k-1yexyzb {
+  ._uLJajOe {
     grid-template-areas: "illustration . heading"
                          "illustration . ."
                          "illustration . content"
                          "illustration . buttonGroup";
   }
 
-  .__j-1lbesf0 {
+  ._F4ICjXd {
     grid-template-rows: min-content .75rem min-content .25rem min-content min-content;
   }
 
-  .__j-fpm35d {
+  ._FbQCrs {
     grid-template-rows: min-content .5rem min-content .25rem min-content min-content;
   }
 
-  .__j-1g2tm43 {
+  ._FCIGjJc {
     grid-template-rows: 1fr .25rem 1fr;
   }
 
-  .__i-nxlg42 {
+  .SpdPjR {
     grid-template-columns: 1fr .75rem auto;
   }
 
-  ._4c {
+  .__ea {
     justify-items: center;
   }
 
-  ._4a {
+  .__eb {
     justify-items: start;
   }
 
-  ._kb {
+  ._Ec {
     text-align: center;
   }
 
-  .__b-1ljhker {
+  .LTZ8xtd {
     grid-column-start: illustration;
   }
 
-  .__c-1ljhker {
+  .NTZ8xtd {
     grid-column-end: illustration;
   }
 
-  .__d-1ljhker {
+  ._fTZ8xtd {
     grid-row-start: illustration;
   }
 
-  .__e-1ljhker {
+  ._dTZ8xtd {
     grid-row-end: illustration;
   }
 
-  .l_W {
+  .fx {
     width: calc(6rem * var(--s2-scale));
     width: calc(6rem * var(--s2-scale));
   }
 
-  .l__Y {
+  .fF {
     width: calc(10rem * var(--s2-scale));
   }
 
-  .k_W {
+  .ey {
     height: calc(6rem * var(--s2-scale));
     height: calc(6rem * var(--s2-scale));
   }
 
-  .k__Y {
+  .eB {
     height: calc(10rem * var(--s2-scale));
   }
 
-  ._5d {
+  ._Xa {
     align-self: center;
   }
 
-  .-rwx0fg_a-n {
+  .-_8sjo0b-da {
     --iconPrimary: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .-rwx0fg_a-o {
+  .-_8sjo0b-db {
     --iconPrimary: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  .-rwx0fg_a-y {
+  .-_8sjo0b-du {
     --iconPrimary: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #5681ff);
   }
 
-  .-rwx0fg_a-z {
+  .-_8sjo0b-di {
     --iconPrimary: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #6995fe);
   }
 
-  .__b-1c6tcyh {
+  .LPCJngb {
     grid-column-start: heading;
   }
 
-  .__c-1c6tcyh {
+  .NPCJngb {
     grid-column-end: heading;
   }
 
-  .__d-1c6tcyh {
+  ._fPCJngb {
     grid-row-start: heading;
   }
 
-  .__e-1c6tcyh {
+  ._dPCJngb {
     grid-row-end: heading;
   }
 
-  ._eg {
+  .ae {
     font-size: 1rem;
   }
 
-  ._ek {
+  .ak {
     font-size: 1.25rem;
   }
 
-  ._ej {
+  .ac {
     font-size: 1.375rem;
   }
 
-  ._fd {
+  .Db {
     font-variation-settings: "wght" 700;
-    font-synthesis-weight: none;
-    font-variation-settings: "wght" 700;
-    font-synthesis-weight: none;
-    font-variation-settings: "wght" 700;
-    font-synthesis-weight: none;
+  }
+
+  .Eb {
     font-weight: 700;
   }
 
-  ._ga {
+  .gb {
     line-height: 1.3;
   }
 
-  .ao {
+  .db {
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  ._5c {
+  ._Xb {
     align-self: end;
   }
 
-  .Aa {
+  .ja {
     margin-top: 0;
   }
 
-  .Ba {
+  .la {
     margin-bottom: 0;
   }
 
-  .ya {
+  .ha {
     margin-inline-start: 0;
   }
 
-  .za {
+  .ia {
     margin-inline-end: 0;
   }
 
-  ._da {
+  .bh {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._ec {
+  .af {
     font-size: .75rem;
   }
 
-  ._ee {
+  .aa {
     font-size: .875rem;
   }
 
-  ._fb {
+  .Da {
     font-variation-settings: "wght" 400;
-    font-synthesis-weight: none;
-    font-variation-settings: "wght" 400;
-    font-synthesis-weight: none;
-    font-variation-settings: "wght" 400;
-    font-synthesis-weight: none;
+  }
+
+  .Ea {
     font-weight: 400;
   }
 
-  ._gb {
+  .Ca {
+    font-synthesis-weight: none;
+  }
+
+  .ga {
     line-height: 1.5;
   }
 
-  .an {
+  .da {
     color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .__b-drkpd0 {
+  .Lk52g2d {
     grid-column-start: content;
   }
 
-  .__c-drkpd0 {
+  .Nk52g2d {
     grid-column-end: content;
   }
 
-  .__d-drkpd0 {
+  ._fk52g2d {
     grid-row-start: content;
   }
 
-  .__e-drkpd0 {
+  ._dk52g2d {
     grid-row-end: content;
   }
 
-  ._5b {
+  ._Xc {
     align-self: start;
   }
 
-  .__b-x3oos2 {
+  .LmlKpq {
     grid-column-start: buttonGroup;
   }
 
-  .__c-x3oos2 {
+  .NmlKpq {
     grid-column-end: buttonGroup;
   }
 
-  .__d-x3oos2 {
+  ._fmlKpq {
     grid-row-start: buttonGroup;
   }
 
-  .__e-x3oos2 {
+  ._dmlKpq {
     grid-row-end: buttonGroup;
   }
 
-  .Af {
+  .jc {
     margin-top: 1rem;
   }
 }
 
 @layer _.b {
-  ._f-1x99dlod:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
-    font-variation-settings: "wght" 700;
-    font-synthesis-weight: none;
-    font-variation-settings: "wght" 700;
-    font-synthesis-weight: none;
+  .Dcb:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-variation-settings: "wght" 700;
-    font-synthesis-weight: none;
+  }
+
+  .Ecb:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 700;
   }
 
-  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .Cca:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    font-synthesis-weight: none;
+  }
+
+  .gca:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 
-  ._d-enzrfpb:lang(ar) {
+  .bdf:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._g-1x99dloc:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .gcc:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.7;
   }
 }
 
 @layer _.c {
-  ._d-enzwzjc:lang(he) {
+  .beg:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._d-enzykdd:lang(ja) {
+  .bfa: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 {
-  ._d-enzzrge:lang(ko) {
+  .bgb:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._d-eo0c6sf:lang(zh) {
+  .bhd:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._d-1uotwbwg:lang(zh-hant) {
+  .bje: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 {
-  ._d-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .bic: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;
   }
 }
 
-@layer _.b.b {
+@layer _.b.a {
   @media not ((hover: hover) and (pointer: fine)) {
-    ._ebb {
+    .aaj {
       font-size: .8125rem;
     }
 
-    ._ebj {
+    .aac {
       font-size: 1.375rem;
     }
 
-    ._ebh {
+    .aad {
       font-size: 1.1875rem;
     }
 
-    ._ebl {
+    .aal {
       font-size: 1.5rem;
     }
 
-    ._ebm {
+    .aam {
       font-size: 1.6875rem;
     }
 
-    ._ebd {
+    .aag {
       font-size: .9375rem;
     }
 
-    ._ebf {
+    .aab {
       font-size: 1.0625rem;
     }
   }

package/dist/IllustratedMessage.css.map

@@ -1 +1 @@
-{"mappings":"AC8C2B;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyDN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBL;;;;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;;;;;AArGO;EA4EX;;;;;;;;;;EAAA;;;;EAaA;;;;EAAA;;;;;AAzFW;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IA4EX;;;;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 {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.css.map"}
+{"mappings":"AC8C2B;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyDN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBL;;;;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;;;;;AArGO;EA4EX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaA;;;;EAAA;;;;;AAzFW;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IA4EX;;;;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 {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.css.map"}