@react-spectrum/s2 0.5.0 → 0.6.0

package/dist/IllustratedMessage.css

@@ -1,13 +1,13 @@
 @layer _.a {
-  ._Zf {
+  ._0f {
     display: grid;
   }
 
-  ._da {
+  ._ea {
     font-size: .6875rem;
   }
 
-  ._di {
+  ._ei {
     font-size: 1.125rem;
   }
 
@@ -19,7 +19,7 @@
     max-width: calc(33rem * var(--s2-scale));
   }
 
-  .__j-tu9mw5 {
+  .__k-asng59 {
     grid-template-areas: ". illustration ."
                          ". . ."
                          "heading heading heading"
@@ -28,54 +28,54 @@
                          ". buttonGroup .";
   }
 
-  .__j-1t3dvev {
+  .__k-1yexyzb {
     grid-template-areas: "illustration . heading"
                          "illustration . ."
                          "illustration . content"
                          "illustration . buttonGroup";
   }
 
-  .__i-fd9mh8 {
+  .__j-1lbesf0 {
     grid-template-rows: min-content .75rem min-content .25rem min-content min-content;
   }
 
-  .__i-xadfxd {
+  .__j-fpm35d {
     grid-template-rows: min-content .5rem min-content .25rem min-content min-content;
   }
 
-  .__i-1efftez {
+  .__j-1g2tm43 {
     grid-template-rows: 1fr .25rem 1fr;
   }
 
-  .__h-883psa {
+  .__i-nxlg42 {
     grid-template-columns: 1fr .75rem auto;
   }
 
-  ._3c {
+  ._4c {
     justify-items: center;
   }
 
-  ._3a {
+  ._4a {
     justify-items: start;
   }
 
-  ._jb {
+  ._kb {
     text-align: center;
   }
 
-  .__a-1e6vo9b {
+  .__b-1ljhker {
     grid-column-start: illustration;
   }
 
-  .__b-1e6vo9b {
+  .__c-1ljhker {
     grid-column-end: illustration;
   }
 
-  .__c-1e6vo9b {
+  .__d-1ljhker {
     grid-row-start: illustration;
   }
 
-  .__d-1e6vo9b {
+  .__e-1ljhker {
     grid-row-end: illustration;
   }
 
@@ -97,7 +97,7 @@
     height: calc(10rem * var(--s2-scale));
   }
 
-  ._4d {
+  ._5d {
     align-self: center;
   }
 
@@ -117,35 +117,35 @@
     --iconPrimary: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #6995fe);
   }
 
-  .__a-go5hed {
+  .__b-1c6tcyh {
     grid-column-start: heading;
   }
 
-  .__b-go5hed {
+  .__c-1c6tcyh {
     grid-column-end: heading;
   }
 
-  .__c-go5hed {
+  .__d-1c6tcyh {
     grid-row-start: heading;
   }
 
-  .__d-go5hed {
+  .__e-1c6tcyh {
     grid-row-end: heading;
   }
 
-  ._dg {
+  ._eg {
     font-size: 1rem;
   }
 
-  ._dk {
+  ._ek {
     font-size: 1.25rem;
   }
 
-  ._dj {
+  ._ej {
     font-size: 1.375rem;
   }
 
-  ._ed {
+  ._fd {
     font-variation-settings: "wght" 700;
     font-synthesis-weight: none;
     font-variation-settings: "wght" 700;
@@ -155,7 +155,7 @@
     font-weight: 700;
   }
 
-  ._fa {
+  ._ga {
     line-height: 1.3;
   }
 
@@ -163,7 +163,7 @@
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  ._4c {
+  ._5c {
     align-self: end;
   }
 
@@ -183,19 +183,19 @@
     margin-inline-end: 0;
   }
 
-  ._ca {
+  ._da {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._dc {
+  ._ec {
     font-size: .75rem;
   }
 
-  ._de {
+  ._ee {
     font-size: .875rem;
   }
 
-  ._eb {
+  ._fb {
     font-variation-settings: "wght" 400;
     font-synthesis-weight: none;
     font-variation-settings: "wght" 400;
@@ -205,7 +205,7 @@
     font-weight: 400;
   }
 
-  ._fb {
+  ._gb {
     line-height: 1.5;
   }
 
@@ -213,39 +213,39 @@
     color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .__a-1mod4sg {
+  .__b-drkpd0 {
     grid-column-start: content;
   }
 
-  .__b-1mod4sg {
+  .__c-drkpd0 {
     grid-column-end: content;
   }
 
-  .__c-1mod4sg {
+  .__d-drkpd0 {
     grid-row-start: content;
   }
 
-  .__d-1mod4sg {
+  .__e-drkpd0 {
     grid-row-end: content;
   }
 
-  ._4b {
+  ._5b {
     align-self: start;
   }
 
-  .__a-3yyxn2 {
+  .__b-x3oos2 {
     grid-column-start: buttonGroup;
   }
 
-  .__b-3yyxn2 {
+  .__c-x3oos2 {
     grid-column-end: buttonGroup;
   }
 
-  .__c-3yyxn2 {
+  .__d-x3oos2 {
     grid-row-start: buttonGroup;
   }
 
-  .__d-3yyxn2 {
+  .__e-x3oos2 {
     grid-row-end: buttonGroup;
   }
 
@@ -255,7 +255,7 @@
 }
 
 @layer _.b {
-  ._e-1x99dlod:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._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;
@@ -265,51 +265,51 @@
     font-weight: 700;
   }
 
-  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 
-  ._c-enzrfpb:lang(ar) {
+  ._d-enzrfpb:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._f-1x99dloc:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._g-1x99dloc:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.7;
   }
 }
 
 @layer _.c {
-  ._c-enzwzjc:lang(he) {
+  ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._c-enzykdd:lang(ja) {
+  ._d-enzykdd: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 {
-  ._c-enzzrge:lang(ko) {
+  ._d-enzzrge:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._c-eo0c6sf:lang(zh) {
+  ._d-eo0c6sf:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._c-1uotwbwg:lang(zh-hant) {
+  ._d-1uotwbwg: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 {
-  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._d-bc1l9oh: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;
   }
 }
@@ -318,31 +318,31 @@
 
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    ._dbb {
+    ._ebb {
       font-size: .8125rem;
     }
 
-    ._dbj {
+    ._ebj {
       font-size: 1.375rem;
     }
 
-    ._dbh {
+    ._ebh {
       font-size: 1.1875rem;
     }
 
-    ._dbl {
+    ._ebl {
       font-size: 1.5rem;
     }
 
-    ._dbm {
+    ._ebm {
       font-size: 1.6875rem;
     }
 
-    ._dbd {
+    ._ebd {
       font-size: .9375rem;
     }
 
-    ._dbf {
+    ._ebf {
       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;;AAAA;EAAA;IAAA;;;;IAAA;;;;IA4EX;;;;IAAA;;;;IAAA;;;;IAaA;;;;IAAA;;;;;;AAhCK","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<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.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;;;;EAYI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArGO;EA4EX;;;;;;;;;;EAAA;;;;EAaA;;;;EAAA;;;;;AAzFW;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IA4EX;;;;IAAA;;;;IAAA;;;;IAaA;;;;IAAA;;;;;;AAhCK","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<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"}