@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/IllustratedMessage.css

@@ -1,9 +1,9 @@
 @layer _.a {
-  .se13 {
+  .se15 {
     display: grid;
   }
 
-  .uk13 {
+  .uk15 {
     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;
@@ -11,15 +11,15 @@
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-a13 {
+  .-_6BNtrc-a15 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-e13 {
+  .-_6BNtrc-e15 {
     --fs: pow(1.125, 2);
   }
 
-  ._Fd13 {
+  ._Fd15 {
     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);
@@ -27,15 +27,15 @@
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .Li13 {
+  .Li15 {
     max-width: calc(23.75rem * var(--s2-scale));
   }
 
-  .Lj13 {
+  .Lj15 {
     max-width: calc(33rem * var(--s2-scale));
   }
 
-  .CPmblS13 {
+  .CPmblS15 {
     grid-template-areas: ". illustration ."
                          ". . ."
                          "heading heading heading"
@@ -44,282 +44,282 @@
                          ". buttonGroup .";
   }
 
-  .CLJajOe13 {
+  .CLJajOe15 {
     grid-template-areas: "illustration . heading"
                          "illustration . ."
                          "illustration . content"
                          "illustration . buttonGroup";
   }
 
-  .E02fTrb13 {
+  .E02fTrb15 {
     grid-template-rows: min-content calc(.75rem * var(--s2-scale)) min-content calc(.25rem * var(--s2-scale)) min-content min-content;
   }
 
-  .EdL79913 {
+  .EdL79915 {
     grid-template-rows: min-content calc(.5rem * var(--s2-scale)) min-content calc(.25rem * var(--s2-scale)) min-content min-content;
   }
 
-  .E6zxP8c13 {
+  .E6zxP8c15 {
     grid-template-rows: 1fr calc(.25rem * var(--s2-scale)) 1fr;
   }
 
-  .DrSmbR13 {
+  .DrSmbR15 {
     grid-template-columns: 1fr calc(.75rem * var(--s2-scale)) auto;
   }
 
-  ._Da13 {
+  ._Da15 {
     justify-items: center;
   }
 
-  ._Dc13 {
+  ._Dc15 {
     justify-items: start;
   }
 
-  ._Wa13 {
+  ._Wa15 {
     text-align: center;
   }
 
-  .zTZ8xtd13 {
+  .zTZ8xtd15 {
     grid-column-start: illustration;
   }
 
-  .yTZ8xtd13 {
+  .yTZ8xtd15 {
     grid-column-end: illustration;
   }
 
-  .BTZ8xtd13 {
+  .BTZ8xtd15 {
     grid-row-start: illustration;
   }
 
-  .ATZ8xtd13 {
+  .ATZ8xtd15 {
     grid-row-end: illustration;
   }
 
-  ._dc13 {
+  ._dc15 {
     align-self: center;
   }
 
-  .-_8sjo0b-pt13 {
+  .-_8sjo0b-pt15 {
     --iconPrimary: light-dark(#292929, #dbdbdb);
   }
 
-  .-_8sjo0b-pu13 {
+  .-_8sjo0b-pu15 {
     --iconPrimary: light-dark(#3b63fb, #5681ff);
   }
 
-  .zPCJngb13 {
+  .zPCJngb15 {
     grid-column-start: heading;
   }
 
-  .yPCJngb13 {
+  .yPCJngb15 {
     grid-column-end: heading;
   }
 
-  .BPCJngb13 {
+  .BPCJngb15 {
     grid-row-start: heading;
   }
 
-  .APCJngb13 {
+  .APCJngb15 {
     grid-row-end: heading;
   }
 
-  .-_6BNtrc-d13 {
+  .-_6BNtrc-d15 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-f13 {
+  .-_6BNtrc-f15 {
     --fs: pow(1.125, 3);
   }
 
-  .-_6BNtrc-g13 {
+  .-_6BNtrc-g15 {
     --fs: pow(1.125, 4);
   }
 
-  .xd13 {
+  .xd15 {
     font-weight: 700;
   }
 
-  ._Fd13 {
+  ._Fd15 {
     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);
   }
 
-  .po13 {
+  .po15 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  ._dd13 {
+  ._dd15 {
     align-self: end;
   }
 
-  .Jy13 {
+  .Jy15 {
     margin-top: 0;
   }
 
-  .Gy13 {
+  .Gy15 {
     margin-bottom: 0;
   }
 
-  .Iy13 {
+  .Iy15 {
     margin-inline-start: 0;
   }
 
-  .Hy13 {
+  .Hy15 {
     margin-inline-end: 0;
   }
 
-  .uk13 {
+  .uk15 {
     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;
   }
 
-  .-_6BNtrc-b13 {
+  .-_6BNtrc-b15 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c15 {
     --fs: pow(1.125, 0);
   }
 
-  .vx13 {
+  .vx15 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb13 {
+  .xb15 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa15 {
     font-synthesis-weight: none;
   }
 
-  ._Fb13 {
+  ._Fb15 {
     line-height: 1.5;
   }
 
-  .pt13 {
+  .pt15 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  .zk52g2d13 {
+  .zk52g2d15 {
     grid-column-start: content;
   }
 
-  .yk52g2d13 {
+  .yk52g2d15 {
     grid-column-end: content;
   }
 
-  .Bk52g2d13 {
+  .Bk52g2d15 {
     grid-row-start: content;
   }
 
-  .Ak52g2d13 {
+  .Ak52g2d15 {
     grid-row-end: content;
   }
 
-  ._de13 {
+  ._de15 {
     align-self: start;
   }
 
-  .zmlKpq13 {
+  .zmlKpq15 {
     grid-column-start: buttonGroup;
   }
 
-  .ymlKpq13 {
+  .ymlKpq15 {
     grid-column-end: buttonGroup;
   }
 
-  .BmlKpq13 {
+  .BmlKpq15 {
     grid-row-start: buttonGroup;
   }
 
-  .AmlKpq13 {
+  .AmlKpq15 {
     grid-row-end: buttonGroup;
   }
 
-  .JC13 {
+  .JC15 {
     margin-top: 1rem;
   }
 }
 
 @layer _.b {
-  .xX0cczbc13:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbc15:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 500;
   }
 
-  ._xX0cczba13:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba15:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb15:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUwec13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUwec15: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 {
-  .xfd13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfd15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 700;
   }
 
-  ._xfa13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfa15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .ud3Euai13:lang(he) {
+  .ud3Euai15:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .xfX0cczbc13:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfX0cczbc15:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 500;
   }
 
-  ._xfX0cczba13:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfX0cczba15:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .uea13:lang(ja) {
+  .uea15: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 {
-  .ugb13:lang(ko) {
+  .ugb15:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd15:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje15: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 {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl15: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 _.i {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic15: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;
   }
 }

package/dist/private/IllustratedMessage.css.map

@@ -1 +1 @@
-{"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;;;;EAYI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7FO;EAoEX;;;;EAAA;;;;EAAA;;;;EAaA;;;;EAAA;;;;;AAjFW;EAoEX;;;;EAAA;;;;EAaA;;;;;AAjFW;EAoEX;;;;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/slots';\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/filterDOMProps';\nimport {IllustrationContext} from './Icon';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\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":"ACoD2B;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2DN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcL;;;;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;;;;;AAlGO;EAyEX;;;;EAAA;;;;EAAA;;;;EAaA;;;;EAAA;;;;;AAtFW;EAyEX;;;;EAAA;;;;EAaA;;;;;AAtFW;EAyEX;;;;EAAA;;;;EAaA;;;;;AAtFW;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/slots';\nimport {\n  controlFont,\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} 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/filterDOMProps';\nimport {IllustrationContext} from './Icon';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\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\n  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  {\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  },\n  getAllowedOverrides({height: true})\n);\n\nconst illustration = style<\n  IllustratedMessageStyleProps & {isInDropZone?: boolean; isDropTarget?: boolean}\n>({\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 =\n  createContext<ContextValue<Partial<IllustratedMessageContextProps>, DOMRefValue<HTMLDivElement>>>(\n    null\n  );\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(\n  props: S2SpectrumIllustratedMessageProps,\n  ref: DOMRef<HTMLDivElement>\n) {\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={\n        UNSAFE_className +\n        illustratedMessage(\n          {\n            size: props.size || 'M',\n            orientation: props.orientation || 'vertical'\n          },\n          props.styles\n        )\n      }\n      ref={domRef}>\n      <Provider\n        values={[\n          [HeadingContext, {styles: heading({orientation, size})}],\n          [ContentContext, {styles: content({size})}],\n          [\n            IllustrationContext,\n            {\n              size: size === 'L' ? 'L' : 'M',\n              styles: illustration({orientation, size, isInDropZone, isDropTarget})\n            }\n          ],\n          [ButtonGroupContext, {styles: buttonGroup}]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"IllustratedMessage.css.map"}