@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/InlineAlert.css

@@ -1,325 +1,325 @@
 @layer _.a {
-  ._Le13 {
+  ._Le15 {
     outline-style: none;
   }
 
-  ._Lf13 {
+  ._Lf15 {
     outline-style: solid;
   }
 
-  .Oh13 {
+  .Oh15 {
     outline-color: light-dark(#4b75ff, #4069fd);
   }
 
-  ._Mc13 {
+  ._Mc15 {
     outline-width: 2px;
   }
 
-  ._Kd13 {
+  ._Kd15 {
     outline-offset: 2px;
   }
 
-  .sg13 {
+  .sg15 {
     display: inline-block;
   }
 
-  ._Pc13 {
+  ._Pc15 {
     position: relative;
   }
 
-  ._oa13 {
+  ._oa15 {
     box-sizing: border-box;
   }
 
-  .Th13 {
+  .Th15 {
     padding-top: 24px;
   }
 
-  .Qh13 {
+  .Qh15 {
     padding-bottom: 24px;
   }
 
-  .Sh13 {
+  .Sh15 {
     padding-inline-start: 24px;
   }
 
-  .Rh13 {
+  .Rh15 {
     padding-inline-end: 24px;
   }
 
-  .oc13 {
+  .oc15 {
     border-start-start-radius: .625rem;
   }
 
-  .nc13 {
+  .nc15 {
     border-start-end-radius: .625rem;
   }
 
-  .kc13 {
+  .kc15 {
     border-end-start-radius: .625rem;
   }
 
-  .jc13 {
+  .jc15 {
     border-end-end-radius: .625rem;
   }
 
-  ._jf13 {
+  ._jf15 {
     border-style: solid;
   }
 
-  ._kc13 {
+  ._kc15 {
     border-top-width: 2px;
   }
 
-  .hc13 {
+  .hc15 {
     border-bottom-width: 2px;
   }
 
-  .mc13 {
+  .mc15 {
     border-inline-start-width: 2px;
   }
 
-  .lc13 {
+  .lc15 {
     border-inline-end-width: 2px;
   }
 
-  .ix13 {
+  .ix15 {
     border-color: light-dark(#4b75ff, #4069fd);
   }
 
-  .il13 {
+  .il15 {
     border-color: light-dark(#0ba45d, #047c4b);
   }
 
-  .is13 {
+  .is15 {
     border-color: light-dark(#e86a00, #b94900);
   }
 
-  .it13 {
+  .it15 {
     border-color: light-dark(#f03823, #df3422);
   }
 
-  .iy13 {
+  .iy15 {
     border-color: light-dark(#505050, #afafaf);
   }
 
-  .iA13 {
+  .iA15 {
     border-color: #0000;
   }
 
-  .gG13 {
+  .gG15 {
     background-color: light-dark(#e5f0fe, #0c2175);
   }
 
-  .g213 {
+  .g215 {
     background-color: light-dark(#3b63fb, #4069fd);
   }
 
-  .gA13 {
+  .gA15 {
     background-color: light-dark(#d7f7e1, #003326);
   }
 
-  .g113 {
+  .g115 {
     background-color: light-dark(#05834e, #068850);
   }
 
-  .gV13 {
+  .gV15 {
     background-color: light-dark(#ffeccf, #501b00);
   }
 
-  .gQ13 {
+  .gQ15 {
     background-color: light-dark(#fc7d00, #e06400);
   }
 
-  .gU13 {
+  .gU15 {
     background-color: light-dark(#ffebe8, #571107);
   }
 
-  .gB13 {
+  .gB15 {
     background-color: light-dark(#d73220, #df3422);
   }
 
-  .gX13 {
+  .gX15 {
     background-color: light-dark(#fff, #111);
   }
 
-  .gI13 {
+  .gI15 {
     background-color: light-dark(#e9e9e9, #393939);
   }
 
-  .g613 {
+  .g615 {
     background-color: light-dark(#505050, #6d6d6d);
   }
 
-  .__wa13 {
+  .__wa15 {
     float: inline-end;
   }
 
-  .-_8sjo0b-tm13 {
+  .-_8sjo0b-tm15 {
     --iconPrimary: light-dark(#d45b00, #e06400);
   }
 
-  .-_8sjo0b-tu13 {
+  .-_8sjo0b-tu15 {
     --iconPrimary: light-dark(#4b75ff, #5681ff);
   }
 
-  .-_8sjo0b-tt13 {
+  .-_8sjo0b-tt15 {
     --iconPrimary: light-dark(#079355, #099d59);
   }
 
-  .-_8sjo0b-tq13 {
+  .-_8sjo0b-tq15 {
     --iconPrimary: light-dark(#f03823, #fc432e);
   }
 
-  .-_8sjo0b-tf13 {
+  .-_8sjo0b-tf15 {
     --iconPrimary: light-dark(#8f8f8f, #8a8a8a);
   }
 
-  .-_8sjo0b-tw13 {
+  .-_8sjo0b-tw15 {
     --iconPrimary: white;
   }
 
-  .-_8sjo0b-tcwrnr13 {
+  .-_8sjo0b-tcwrnr15 {
     --iconPrimary: black;
   }
 
-  .Jy13 {
+  .Jy15 {
     margin-top: 0;
   }
 
-  .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);
   }
 
-  .po13 {
+  .po15 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  .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;
   }
 
-  .-_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);
   }
 
-  .px13 {
+  .px15 {
     color: #fff;
   }
 
-  .pg13 {
+  .pg15 {
     color: #000;
   }
 }
 
 @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 _.b.l {
   @media (forced-colors: active) {
-    .Olc13 {
+    .Olc15 {
       outline-color: highlight;
     }
   }
 }
 
 @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/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;;;;EA2CG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5HI;EA4GJ;;;;EAAA;;;;EAAA;;;;EAgBA;;;;EAAA;;;;;AA5HI;EAAA;IAAA;;;;;;AA4GJ;EAAA;;;;EAAA;;;;EAgBA;;;;;AAhBA;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/slots';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\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 './useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\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"}
+{"mappings":"AC2DoB;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;;;;EAoEP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2CG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/HI;EA+GJ;;;;EAAA;;;;EAAA;;;;EAgBA;;;;EAAA;;;;;AA/HI;EAAA;IAAA;;;;;;AA+GJ;EAAA;;;;EAAA;;;;EAgBA;;;;;AAhBA;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/slots';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\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';\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {useDOMRef} from './useDOMRef';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\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   *\n   * @default neutral\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral';\n  /**\n   * The visual style of the Inline Alert.\n   *\n   * @default border\n   */\n  fillStyle?: 'border' | 'subtleFill' | 'boldFill';\n}\n\nexport const InlineAlertContext =\n  createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>(\n  {\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  },\n  getAllowedOverrides()\n);\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. These are often used\n * in form validation, providing a place to aggregate feedback related to multiple fields.\n */\nexport const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(\n  props: InlineAlertProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);\n  let {children, variant = 'neutral', fillStyle = 'border', autoFocus} = 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={\n        (props.UNSAFE_className || '') +\n        inlineAlert(\n          {\n            variant,\n            fillStyle,\n            isFocusVisible\n          },\n          props.styles\n        )\n      }>\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"}