@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/InlineAlert.css

@@ -1,410 +1,341 @@
 @layer _.a {
-  ._Le11 {
+  ._Le12 {
     outline-style: none;
   }
 
-  ._Lf11 {
+  ._Lf12 {
     outline-style: solid;
   }
 
-  .Oh11 {
+  .Oh12 {
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  ._Mc11 {
+  ._Mc12 {
     outline-width: 2px;
   }
 
-  ._Kd11 {
+  ._Kd12 {
     outline-offset: 2px;
   }
 
-  .sg11 {
+  .sg12 {
     display: inline-block;
   }
 
-  ._Pc11 {
+  ._Pc12 {
     position: relative;
   }
 
-  ._oa11 {
+  ._oa12 {
     box-sizing: border-box;
   }
 
-  .Th11 {
+  .Th12 {
     padding-top: 24px;
   }
 
-  .Qh11 {
+  .Qh12 {
     padding-bottom: 24px;
   }
 
-  .Sh11 {
+  .Sh12 {
     padding-inline-start: 24px;
   }
 
-  .Rh11 {
+  .Rh12 {
     padding-inline-end: 24px;
   }
 
-  .oc11 {
+  .oc12 {
     border-start-start-radius: .625rem;
   }
 
-  .nc11 {
+  .nc12 {
     border-start-end-radius: .625rem;
   }
 
-  .kc11 {
+  .kc12 {
     border-end-start-radius: .625rem;
   }
 
-  .jc11 {
+  .jc12 {
     border-end-end-radius: .625rem;
   }
 
-  ._jf11 {
+  ._jf12 {
     border-style: solid;
   }
 
-  ._kc11 {
+  ._kc12 {
     border-top-width: 2px;
   }
 
-  .hc11 {
+  .hc12 {
     border-bottom-width: 2px;
   }
 
-  .mc11 {
+  .mc12 {
     border-inline-start-width: 2px;
   }
 
-  .lc11 {
+  .lc12 {
     border-inline-end-width: 2px;
   }
 
-  .ix11 {
+  .ix12 {
     border-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .il11 {
+  .il12 {
     border-color: var(--lightningcss-light, #0ba45d) var(--lightningcss-dark, #047c4b);
   }
 
-  .is11 {
+  .is12 {
     border-color: var(--lightningcss-light, #e86a00) var(--lightningcss-dark, #b94900);
   }
 
-  .it11 {
+  .it12 {
     border-color: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #df3422);
   }
 
-  .iy11 {
+  .iy12 {
     border-color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #afafaf);
   }
 
-  .iA11 {
+  .iA12 {
     border-color: #0000;
   }
 
-  .gG11 {
+  .gG12 {
     background-color: var(--lightningcss-light, #e5f0fe) var(--lightningcss-dark, #0c2175);
   }
 
-  .g211 {
+  .g212 {
     background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .gA11 {
+  .gA12 {
     background-color: var(--lightningcss-light, #d7f7e1) var(--lightningcss-dark, #003326);
   }
 
-  .g111 {
+  .g112 {
     background-color: var(--lightningcss-light, #05834e) var(--lightningcss-dark, #068850);
   }
 
-  .gV11 {
+  .gV12 {
     background-color: var(--lightningcss-light, #ffeccf) var(--lightningcss-dark, #501b00);
   }
 
-  .gQ11 {
+  .gQ12 {
     background-color: var(--lightningcss-light, #fc7d00) var(--lightningcss-dark, #e06400);
   }
 
-  .gU11 {
+  .gU12 {
     background-color: var(--lightningcss-light, #ffebe8) var(--lightningcss-dark, #571107);
   }
 
-  .gB11 {
+  .gB12 {
     background-color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #df3422);
   }
 
-  .gX11 {
+  .gX12 {
     background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
   }
 
-  .gI11 {
+  .gI12 {
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #393939);
   }
 
-  .g611 {
+  .g612 {
     background-color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #6d6d6d);
   }
 
-  .z2U5Crc11 {
-    grid-column-start: icon;
+  .__wa12 {
+    float: inline-end;
   }
 
-  .y2U5Crc11 {
-    grid-column-end: icon;
-  }
-
-  .B2U5Crc11 {
-    grid-row-start: icon;
-  }
-
-  .A2U5Crc11 {
-    grid-row-end: icon;
-  }
-
-  .-_8sjo0b-tm11 {
+  .-_8sjo0b-tm12 {
     --iconPrimary: var(--lightningcss-light, #d45b00) var(--lightningcss-dark, #e06400);
   }
 
-  .-_8sjo0b-tu11 {
+  .-_8sjo0b-tu12 {
     --iconPrimary: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #5681ff);
   }
 
-  .-_8sjo0b-tt11 {
+  .-_8sjo0b-tt12 {
     --iconPrimary: var(--lightningcss-light, #079355) var(--lightningcss-dark, #099d59);
   }
 
-  .-_8sjo0b-tq11 {
+  .-_8sjo0b-tq12 {
     --iconPrimary: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #fc432e);
   }
 
-  .-_8sjo0b-tf11 {
+  .-_8sjo0b-tf12 {
     --iconPrimary: var(--lightningcss-light, #8f8f8f) var(--lightningcss-dark, #8a8a8a);
   }
 
-  .-_8sjo0b-tw11 {
+  .-_8sjo0b-tw12 {
     --iconPrimary: white;
   }
 
-  .-_8sjo0b-tcwrnr11 {
+  .-_8sjo0b-tcwrnr12 {
     --iconPrimary: black;
   }
 
-  .se11 {
-    display: grid;
-  }
-
-  .qj11 {
-    column-gap: 1.5rem;
-  }
-
-  .Dxumf9b11 {
-    grid-template-columns: 1fr auto;
-  }
-
-  .EeeZzzb11 {
-    grid-template-rows: auto auto auto;
-  }
-
-  .Za11 {
-    width: 100%;
-  }
-
-  .CScDOab11 {
-    grid-template-areas: "heading icon"
-                         "content content";
-  }
-
-  .Jy11 {
+  .Jy12 {
     margin-top: 0;
   }
 
-  .zPCJngb11 {
-    grid-column-start: heading;
-  }
-
-  .yPCJngb11 {
-    grid-column-end: heading;
-  }
-
-  .BPCJngb11 {
-    grid-row-start: heading;
-  }
-
-  .APCJngb11 {
-    grid-row-end: heading;
-  }
-
-  .wd11 {
+  .wd12 {
     font-variation-settings: "wght" 700;
   }
 
-  .xd11 {
+  .xd12 {
     font-weight: 700;
   }
 
-  ._Fd11 {
+  ._Fd12 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .po11 {
+  .po12 {
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  .zk52g2d11 {
-    grid-column-start: content;
-  }
-
-  .yk52g2d11 {
-    grid-column-end: content;
-  }
-
-  .Bk52g2d11 {
-    grid-row-start: content;
-  }
-
-  .Ak52g2d11 {
-    grid-row-end: content;
-  }
-
-  .uk11 {
+  .uk12 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-c11 {
+  .-_6BNtrc-c12 {
     --fs: pow(1.125, 0);
   }
 
-  .vx11 {
+  .vx12 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .wb11 {
+  .wb12 {
     font-variation-settings: "wght" 400;
   }
 
-  .xb11 {
+  .xb12 {
     font-weight: 400;
   }
 
-  ._xa11 {
+  ._xa12 {
     font-synthesis-weight: none;
   }
 
-  ._Fb11 {
+  ._Fb12 {
     line-height: 1.5;
   }
 
-  .pt11 {
+  .pt12 {
     color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .px11 {
+  .px12 {
     color: #fff;
   }
 
-  .pg11 {
+  .pg12 {
     color: #000;
   }
 }
 
 @layer _.b {
-  .wX0cczbc11:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .wX0cczbc12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-variation-settings: "wght" 500;
   }
 
-  .xX0cczbc11:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbc12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 500;
   }
 
-  ._xX0cczba11:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._FezxGHba11:is(:lang(ar), :lang(he)) {
+  ._FezxGHba12:is(:lang(ar), :lang(he)) {
     line-height: 1.3;
   }
 
-  .uch11:lang(ar) {
+  .uch12:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUwec11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUwec12: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 {
-  .wfd11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .wfd12: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)) {
+  .xfd12: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)) {
+  ._xfa12: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)) {
+  ._FnuYUweb12: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) {
+  .udi12:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .wfX0cczbc11:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .wfX0cczbc12: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)) {
+  .xfX0cczbc12: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)) {
+  ._xfX0cczba12: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) {
+  .uea12: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 {
-  .ugb11:lang(ko) {
+  .ugb12:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd11:lang(zh) {
+  .uhd12:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje11:lang(zh-hant) {
+  .uje12: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 {
-  .u2NhKxcl11:lang(zh-HK) {
+  .u2NhKxcl12: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 {
-  .uic11:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic12: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/InlineAlert.css.map

@@ -1 +1 @@
-{"mappings":"ACyDoB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiEP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAoBG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjBA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBA;;;;EAAA;;;;;AAjBA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBA;;;;;AAjBA;EAAA;;;;EAAA;;;;EAAA;;;;EAiBA;;;;;AAjBA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["22171ecf279467c9","packages/@react-spectrum/s2/src/InlineAlert.tsx"],"sourcesContent":["@import \"05e5e4aa26bfa23e\";\n@import \"f0ba8200e7cea625\";\n@import \"0ad65d68fdf037be\";\n@import \"d57ae7ad1398d4b5\";\n@import \"11184415316db266\";\n","/*\n * Copyright 2023 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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport CheckmarkCircle from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';\nimport {ComponentType, createContext, forwardRef, ReactNode, useEffect, useRef} from 'react';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useFocusRing} from 'react-aria';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface InlineAlertProps extends DOMProps, StyleProps, InlineStylesProps, SlotProps {\n  /**\n   * The contents of the Inline Alert.\n   */\n  children: ReactNode,\n  /**\n   * Whether to automatically focus the Inline Alert when it first renders.\n   */\n  autoFocus?: boolean\n}\n\ninterface InlineStylesProps {\n  /**\n   * The semantic tone of a Inline Alert.\n   * @default neutral\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral',\n  /**\n   * The visual style of the Inline Alert.\n   * @default border\n   */\n  fillStyle?: 'border' | 'subtleFill' | 'boldFill'\n}\n\nexport const InlineAlertContext = createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({\n  ...focusRing(),\n  display: 'inline-block',\n  position: 'relative',\n  boxSizing: 'border-box',\n  padding: 24,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    fillStyle: {\n      border: {\n        variant: {\n          informative: 'informative-800',\n          positive: 'positive-700',\n          notice: 'notice-700',\n          negative: 'negative-800',\n          neutral: 'gray-700' // is there a semantic color name for neutral?\n        }\n      },\n      subtleFill: 'transparent',\n      boldFill: 'transparent'\n    }\n  },\n  backgroundColor: {\n    variant: {\n      informative: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'informative-subtle',\n          boldFill: 'informative'\n        }\n      },\n      positive: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'positive-subtle',\n          boldFill: 'positive'\n        }\n      },\n      notice: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'notice-subtle',\n          boldFill: 'notice'\n        }\n      },\n      negative: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'negative-subtle',\n          boldFill: 'negative'\n        }\n      },\n      neutral: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'neutral-subtle',\n          boldFill: 'neutral-subdued'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst icon = style<InlineStylesProps>({\n  gridArea: 'icon',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      fillStyle: {\n        border: {\n          variant: {\n            informative: 'informative',\n            positive: 'positive',\n            notice: 'notice',\n            negative: 'negative',\n            neutral: 'neutral'\n          }\n        },\n        subtleFill: {\n          variant: {\n            informative: 'informative',\n            positive: 'positive',\n            notice: 'negative',\n            negative: 'negative',\n            neutral: 'neutral'\n          }\n        },\n        boldFill: {\n          default: 'white',\n          variant: {\n            notice: 'black'\n          }\n        }\n      }\n    }\n  }\n});\n\nconst grid = style({\n  display: 'grid',\n  columnGap: 24,\n  gridTemplateColumns: '1fr auto',\n  gridTemplateRows: 'auto auto auto',\n  width: 'full',\n  gridTemplateAreas: [\n    'heading icon',\n    'content content'\n  ]\n});\n\nlet ICONS = {\n  informative: InfoCircle,\n  positive: CheckmarkCircle,\n  notice: NoticeSquare,\n  negative: AlertTriangle,\n  neutral: undefined\n};\n\nconst heading = style({\n  marginTop: 0,\n  gridArea: 'heading',\n  font: 'title-sm',\n  color: {\n    default: 'title',\n    fillStyle: {\n      boldFill: {\n        default: 'white',\n        variant: {\n          notice: 'black'\n        }\n      }\n    }\n  }\n});\n\nconst content = style({\n  gridArea: 'content',\n  font: 'body-sm',\n  color: {\n    default: 'body',\n    fillStyle: {\n      boldFill: {\n        default: 'white',\n        variant: {\n          notice: 'black'\n        }\n      }\n    }\n  }\n});\n\n/**\n * Inline alerts display a non-modal message associated with objects in a view.\n * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.\n */\nexport const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);\n  let {\n    children,\n    variant = 'neutral',\n    fillStyle = 'border',\n    autoFocus\n  } = props;\n\n  let domRef = useDOMRef(ref);\n\n  let Icon: ComponentType<any> | null | undefined = null;\n  let iconAlt = '';\n  if (variant in ICONS) {\n    Icon = ICONS[variant];\n    if (Icon) {\n      iconAlt = stringFormatter.format(`inlinealert.${variant}`);\n    }\n  }\n\n  let {isFocusVisible, focusProps} = useFocusRing({autoFocus: props.autoFocus});\n  let autoFocusRef = useRef(props.autoFocus);\n  useEffect(() => {\n    if (autoFocusRef.current && domRef.current) {\n      domRef.current.focus();\n    }\n    autoFocusRef.current = false;\n  }, [domRef]);\n\n  return (\n    <div\n      {...filterDOMProps(props)}\n      {...focusProps}\n      ref={domRef}\n      tabIndex={autoFocus ? -1 : undefined}\n      autoFocus={autoFocus}\n      role=\"alert\"\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + inlineAlert({\n        variant,\n        fillStyle,\n        isFocusVisible\n      }, props.styles)}>\n      <div\n        className={grid}>\n        <Provider\n          values={[\n            [HeadingContext, {styles: heading({fillStyle})}],\n            [ContentContext, {styles: content({fillStyle})}],\n            [IconContext, {styles: icon({variant, fillStyle})}]\n          ]}>\n          {Icon && <Icon aria-label={iconAlt} />}\n          {children}\n        </Provider>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"InlineAlert.css.map"}
+{"mappings":"ACyDoB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiEP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2CG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAhBA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBA;;;;EAAA;;;;;AAhBA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBA;;;;;AAhBA;EAAA;;;;EAAA;;;;EAAA;;;;EAgBA;;;;;AAhBA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["22171ecf279467c9","packages/@react-spectrum/s2/src/InlineAlert.tsx"],"sourcesContent":["@import \"05e5e4aa26bfa23e\";\n@import \"f0ba8200e7cea625\";\n@import \"0ad65d68fdf037be\";\n@import \"d57ae7ad1398d4b5\";\n","/*\n * Copyright 2023 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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport CheckmarkCircle from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';\nimport {ComponentType, createContext, forwardRef, ReactNode, useEffect, useRef} from 'react';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useFocusRing} from 'react-aria';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface InlineAlertProps extends DOMProps, StyleProps, InlineStylesProps, SlotProps {\n  /**\n   * The contents of the Inline Alert.\n   */\n  children: ReactNode,\n  /**\n   * Whether to automatically focus the Inline Alert when it first renders.\n   */\n  autoFocus?: boolean\n}\n\ninterface InlineStylesProps {\n  /**\n   * The semantic tone of a Inline Alert.\n   * @default neutral\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral',\n  /**\n   * The visual style of the Inline Alert.\n   * @default border\n   */\n  fillStyle?: 'border' | 'subtleFill' | 'boldFill'\n}\n\nexport const InlineAlertContext = createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({\n  ...focusRing(),\n  display: 'inline-block',\n  position: 'relative',\n  boxSizing: 'border-box',\n  padding: 24,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    fillStyle: {\n      border: {\n        variant: {\n          informative: 'informative-800',\n          positive: 'positive-700',\n          notice: 'notice-700',\n          negative: 'negative-800',\n          neutral: 'gray-700' // is there a semantic color name for neutral?\n        }\n      },\n      subtleFill: 'transparent',\n      boldFill: 'transparent'\n    }\n  },\n  backgroundColor: {\n    variant: {\n      informative: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'informative-subtle',\n          boldFill: 'informative'\n        }\n      },\n      positive: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'positive-subtle',\n          boldFill: 'positive'\n        }\n      },\n      notice: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'notice-subtle',\n          boldFill: 'notice'\n        }\n      },\n      negative: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'negative-subtle',\n          boldFill: 'negative'\n        }\n      },\n      neutral: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'neutral-subtle',\n          boldFill: 'neutral-subdued'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst icon = style<InlineStylesProps>({\n  float: 'inline-end',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      fillStyle: {\n        border: {\n          variant: {\n            informative: 'informative',\n            positive: 'positive',\n            notice: 'notice',\n            negative: 'negative',\n            neutral: 'neutral'\n          }\n        },\n        subtleFill: {\n          variant: {\n            informative: 'informative',\n            positive: 'positive',\n            notice: 'negative',\n            negative: 'negative',\n            neutral: 'neutral'\n          }\n        },\n        boldFill: {\n          default: 'white',\n          variant: {\n            notice: 'black'\n          }\n        }\n      }\n    }\n  }\n});\n\nlet ICONS = {\n  informative: InfoCircle,\n  positive: CheckmarkCircle,\n  notice: NoticeSquare,\n  negative: AlertTriangle,\n  neutral: undefined\n};\n\nconst heading = style({\n  marginTop: 0,\n  font: 'title-sm',\n  color: {\n    default: 'title',\n    fillStyle: {\n      boldFill: {\n        default: 'white',\n        variant: {\n          notice: 'black'\n        }\n      }\n    }\n  }\n});\n\nconst content = style({\n  font: 'body-sm',\n  color: {\n    default: 'body',\n    fillStyle: {\n      boldFill: {\n        default: 'white',\n        variant: {\n          notice: 'black'\n        }\n      }\n    }\n  }\n});\n\n/**\n * Inline alerts display a non-modal message associated with objects in a view.\n * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.\n */\nexport const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);\n  let {\n    children,\n    variant = 'neutral',\n    fillStyle = 'border',\n    autoFocus\n  } = props;\n\n  let domRef = useDOMRef(ref);\n\n  let Icon: ComponentType<any> | null | undefined = null;\n  let iconAlt = '';\n  if (variant in ICONS) {\n    Icon = ICONS[variant];\n    if (Icon) {\n      iconAlt = stringFormatter.format(`inlinealert.${variant}`);\n    }\n  }\n\n  let {isFocusVisible, focusProps} = useFocusRing({autoFocus: props.autoFocus});\n  let autoFocusRef = useRef(props.autoFocus);\n  useEffect(() => {\n    if (autoFocusRef.current && domRef.current) {\n      domRef.current.focus();\n    }\n    autoFocusRef.current = false;\n  }, [domRef]);\n\n  return (\n    <div\n      {...filterDOMProps(props)}\n      {...focusProps}\n      ref={domRef}\n      tabIndex={autoFocus ? -1 : undefined}\n      autoFocus={autoFocus}\n      role=\"alert\"\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + inlineAlert({\n        variant,\n        fillStyle,\n        isFocusVisible\n      }, props.styles)}>\n      <Provider\n        values={[\n          [HeadingContext, {styles: heading({fillStyle})}],\n          [ContentContext, {styles: content({fillStyle})}],\n          [IconContext, {styles: icon({variant, fillStyle})}]\n        ]}>\n        {Icon && <Icon aria-label={iconAlt} />}\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"InlineAlert.css.map"}