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

package/dist/InlineAlert.cjs

@@ -53,106 +53,108 @@ $parcel$export(module.exports, "InlineAlert", () => $72bf3a9f94a75d9f$export$a3b
 
 const $72bf3a9f94a75d9f$export$c0de4eca0a8bf011 = /*#__PURE__*/ (0, $3stts$react.createContext)(null);
 const $72bf3a9f94a75d9f$var$inlineAlert = function anonymous(props, overrides) {
-    let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
-    rules += matches.join('');
-    let $V = false;
-    for (let p of matches)if (/^\s*V/.test(p)) $V = true;
-    if (props.isFocusVisible) rules += ' _Mb';
-    else rules += ' _Ma';
-    rules += ' da_____M';
-    rules += ' dx';
-    rules += ' _Oc';
-    rules += ' _N-3t1z';
-    rules += ' _0b';
-    if (!$V) rules += ' Vc';
-    rules += ' __oa';
-    rules += ' Eh';
-    rules += ' Fh';
-    rules += ' Ch';
-    rules += ' Dh';
-    rules += ' _wd';
-    rules += ' _xd';
-    rules += ' _yd';
-    rules += ' _zd';
-    rules += ' wa';
-    rules += ' uc';
+    let rules = " ";
+    let position = false;
+    let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
+    for (let p of matches){
+        if (p[1] === "K") position = true;
+        rules += p[0];
+    }
+    if (props.isFocusVisible) rules += ' tb';
+    else rules += ' ta';
+    rules += ' Bb';
+    rules += ' Bba';
+    rules += ' _ga';
+    rules += ' _ya';
+    rules += ' mg';
+    if (!position) rules += ' Ka';
+    rules += ' _qa';
+    rules += ' rc';
     rules += ' vc';
-    rules += ' sc';
-    rules += ' tc';
-    if (props.fillStyle === "boldFill") rules += ' ca';
-    else if (props.fillStyle === "subtleFill") rules += ' ca';
+    rules += ' od';
+    rules += ' nd';
+    rules += ' zd';
+    rules += ' xe';
+    rules += ' we';
+    rules += ' yd';
+    rules += ' Ra';
+    rules += ' _nb';
+    rules += ' _ma';
+    rules += ' _ta';
+    rules += ' _sa';
+    if (props.fillStyle === "boldFill") rules += ' qe';
+    else if (props.fillStyle === "subtleFill") rules += ' qe';
     else if (props.fillStyle === "border") {
-        if (props.variant === "neutral") rules += ' cm';
-        else if (props.variant === "negative") rules += ' cN';
-        else if (props.variant === "notice") rules += ' c2';
-        else if (props.variant === "positive") rules += ' c_4';
-        else if (props.variant === "informative") rules += ' cx';
+        if (props.variant === "neutral") rules += ' qz';
+        else if (props.variant === "negative") rules += ' qx';
+        else if (props.variant === "notice") rules += ' qw';
+        else if (props.variant === "positive") rules += ' qv';
+        else if (props.variant === "informative") rules += ' qp';
     }
     if (props.variant === "neutral") {
         if (props.fillStyle === "boldFill") {
-            if (props.isPressed) rules += ' b_____V';
-            else if (props.isFocusVisible) rules += ' b_____V';
-            else if (props.isHovered) rules += ' b_____V';
-            else rules += ' b_____U';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____W';
-        else if (props.fillStyle === "border") rules += ' bd';
+            if (props.isPressed) rules += ' cq';
+            else if (props.isFocusVisible) rules += ' cq';
+            else if (props.isHovered) rules += ' cq';
+            else rules += ' cC';
+        } else if (props.fillStyle === "subtleFill") rules += ' cG';
+        else if (props.fillStyle === "border") rules += ' cj';
     } else if (props.variant === "negative") {
         if (props.fillStyle === "boldFill") {
-            if (props.isPressed) rules += ' b_____Y';
-            else if (props.isFocusVisible) rules += ' b_____Y';
-            else if (props.isHovered) rules += ' b_____Y';
-            else rules += ' b_____X';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____Z';
-        else if (props.fillStyle === "border") rules += ' bd';
+            if (props.isPressed) rules += ' ci';
+            else if (props.isFocusVisible) rules += ' ci';
+            else if (props.isHovered) rules += ' ci';
+            else rules += ' cu';
+        } else if (props.fillStyle === "subtleFill") rules += ' cI';
+        else if (props.fillStyle === "border") rules += ' cj';
     } else if (props.variant === "notice") {
-        if (props.fillStyle === "boldFill") rules += ' b_____3';
-        else if (props.fillStyle === "subtleFill") rules += ' b_____4';
-        else if (props.fillStyle === "border") rules += ' bd';
+        if (props.fillStyle === "boldFill") rules += ' cH';
+        else if (props.fillStyle === "subtleFill") rules += ' cJ';
+        else if (props.fillStyle === "border") rules += ' cj';
     } else if (props.variant === "positive") {
         if (props.fillStyle === "boldFill") {
-            if (props.isPressed) rules += ' b_____1';
-            else if (props.isFocusVisible) rules += ' b_____1';
-            else if (props.isHovered) rules += ' b_____1';
-            else rules += ' b_____0';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____2';
-        else if (props.fillStyle === "border") rules += ' bd';
+            if (props.isPressed) rules += ' cp';
+            else if (props.isFocusVisible) rules += ' cp';
+            else if (props.isHovered) rules += ' cp';
+            else rules += ' cB';
+        } else if (props.fillStyle === "subtleFill") rules += ' cF';
+        else if (props.fillStyle === "border") rules += ' cj';
     } else if (props.variant === "informative") {
         if (props.fillStyle === "boldFill") {
-            if (props.isPressed) rules += ' b_____S';
-            else if (props.isFocusVisible) rules += ' b_____S';
-            else if (props.isHovered) rules += ' b_____S';
-            else rules += ' b_____R';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____T';
-        else if (props.fillStyle === "border") rules += ' bd';
+            if (props.isPressed) rules += ' cb';
+            else if (props.isFocusVisible) rules += ' cb';
+            else if (props.isHovered) rules += ' cb';
+            else rules += ' cl';
+        } else if (props.fillStyle === "subtleFill") rules += ' cA';
+        else if (props.fillStyle === "border") rules += ' cj';
     }
     return rules;
 };
 const $72bf3a9f94a75d9f$var$icon = function anonymous(props) {
-    let rules = " .";
-    rules += ' __b-qb5q8i';
-    rules += ' __c-qb5q8i';
-    rules += ' __d-qb5q8i';
-    rules += ' __e-qb5q8i';
+    let rules = " ";
+    rules += ' L2U5Crc';
+    rules += ' N2U5Crc';
+    rules += ' _f2U5Crc';
+    rules += ' _d2U5Crc';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' -rwx0fg_e-z';
-        else rules += ' -rwx0fg_e-A';
+        if (props.variant === "notice") rules += ' -_8sjo0b-Ok';
+        else rules += ' -_8sjo0b-Og';
     } else if (props.fillStyle === "subtleFill") {
-        if (props.variant === "neutral") rules += ' -rwx0fg_e-d';
-        else if (props.variant === "negative") rules += ' -rwx0fg_e-e';
-        else if (props.variant === "notice") rules += ' -rwx0fg_e-e';
-        else if (props.variant === "positive") rules += ' -rwx0fg_e-f';
-        else if (props.variant === "informative") rules += ' -rwx0fg_e-c';
+        if (props.variant === "neutral") rules += ' -_8sjo0b-Oc';
+        else if (props.variant === "negative") rules += ' -_8sjo0b-Ob';
+        else if (props.variant === "notice") rules += ' -_8sjo0b-Ob';
+        else if (props.variant === "positive") rules += ' -_8sjo0b-Oe';
+        else if (props.variant === "informative") rules += ' -_8sjo0b-Of';
     } else if (props.fillStyle === "border") {
-        if (props.variant === "neutral") rules += ' -rwx0fg_e-d';
-        else if (props.variant === "negative") rules += ' -rwx0fg_e-e';
-        else if (props.variant === "notice") rules += ' -rwx0fg_e-g';
-        else if (props.variant === "positive") rules += ' -rwx0fg_e-f';
-        else if (props.variant === "informative") rules += ' -rwx0fg_e-c';
+        if (props.variant === "neutral") rules += ' -_8sjo0b-Oc';
+        else if (props.variant === "negative") rules += ' -_8sjo0b-Ob';
+        else if (props.variant === "notice") rules += ' -_8sjo0b-Od';
+        else if (props.variant === "positive") rules += ' -_8sjo0b-Oe';
+        else if (props.variant === "informative") rules += ' -_8sjo0b-Of';
     }
     return rules;
 };
-const $72bf3a9f94a75d9f$var$grid = " _0f jh __i-1j10eqz __j-1cy57v8 lb __k-fb6mkc";
+const $72bf3a9f94a75d9f$var$grid = " mb kf Sxumf9b _FeeZzzb fa _uScDOab";
 let $72bf3a9f94a75d9f$var$ICONS = {
     informative: (0, $0ed6e07b499b9797$exports.default),
     positive: (0, $6391be254c189366$exports.default),
@@ -161,55 +163,61 @@ let $72bf3a9f94a75d9f$var$ICONS = {
     neutral: undefined
 };
 const $72bf3a9f94a75d9f$var$heading = function anonymous(props) {
-    let rules = " .";
-    rules += ' Aa';
-    rules += ' __b-1c6tcyh';
-    rules += ' __c-1c6tcyh';
-    rules += ' __d-1c6tcyh';
-    rules += ' __e-1c6tcyh';
-    rules += ' _d-bc1l9oh';
-    rules += ' _d-1uotwbwg';
-    rules += ' _d-eo0c6sf';
-    rules += ' _d-enzzrge';
-    rules += ' _d-enzykdd';
-    rules += ' _d-enzwzjc';
-    rules += ' _d-enzrfpb';
-    rules += ' _da';
-    rules += ' _ebf';
-    rules += ' _ee';
-    rules += ' _f-1x99dlod';
-    rules += ' _fd';
-    rules += ' _g-1x99dlob';
-    rules += ' _ga';
+    let rules = " ";
+    rules += ' ja';
+    rules += ' LPCJngb';
+    rules += ' NPCJngb';
+    rules += ' _fPCJngb';
+    rules += ' _dPCJngb';
+    rules += ' bh';
+    rules += ' bdf';
+    rules += ' beg';
+    rules += ' bfa';
+    rules += ' bgb';
+    rules += ' bhd';
+    rules += ' bje';
+    rules += ' bic';
+    rules += ' aa';
+    rules += ' aab';
+    rules += ' Db';
+    rules += ' Eb';
+    rules += ' Ca';
+    rules += ' Dcb';
+    rules += ' Ecb';
+    rules += ' Cca';
+    rules += ' gb';
+    rules += ' gca';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' ab';
-        else rules += ' ac';
-    } else rules += ' ao';
+        if (props.variant === "notice") rules += ' dj';
+        else rules += ' dd';
+    } else rules += ' db';
     return rules;
 };
 const $72bf3a9f94a75d9f$var$content = function anonymous(props) {
-    let rules = " .";
-    rules += ' __b-drkpd0';
-    rules += ' __c-drkpd0';
-    rules += ' __d-drkpd0';
-    rules += ' __e-drkpd0';
-    rules += ' _d-bc1l9oh';
-    rules += ' _d-1uotwbwg';
-    rules += ' _d-eo0c6sf';
-    rules += ' _d-enzzrge';
-    rules += ' _d-enzykdd';
-    rules += ' _d-enzwzjc';
-    rules += ' _d-enzrfpb';
-    rules += ' _da';
-    rules += ' _ebf';
-    rules += ' _ee';
-    rules += ' _fb';
-    rules += ' _g-1x99dloc';
-    rules += ' _gb';
+    let rules = " ";
+    rules += ' Lk52g2d';
+    rules += ' Nk52g2d';
+    rules += ' _fk52g2d';
+    rules += ' _dk52g2d';
+    rules += ' bh';
+    rules += ' bdf';
+    rules += ' beg';
+    rules += ' bfa';
+    rules += ' bgb';
+    rules += ' bhd';
+    rules += ' bje';
+    rules += ' bic';
+    rules += ' aa';
+    rules += ' aab';
+    rules += ' Da';
+    rules += ' Ea';
+    rules += ' Ca';
+    rules += ' ga';
+    rules += ' gcc';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' ab';
-        else rules += ' ac';
-    } else rules += ' an';
+        if (props.variant === "notice") rules += ' dj';
+        else rules += ' dd';
+    } else rules += ' da';
     return rules;
 };
 const $72bf3a9f94a75d9f$export$a3b2c96db9b0eb71 = /*#__PURE__*/ (0, $3stts$react.forwardRef)(function InlineAlert(props, ref) {

package/dist/InlineAlert.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA6CM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAmCN,MAAM;AAYN,IAAI,8BAAQ;IACV,aAAa,CAAA,GAAA,iCAAS;IACtB,UAAU,CAAA,GAAA,iCAAc;IACxB,QAAQ,CAAA,GAAA,iCAAW;IACnB,UAAU,CAAA,GAAA,iCAAY;IACtB,SAAS;AACX;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;AAoBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,sBACV,YAAY,qBACZ,SAAS,EACV,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,OAA8C;IAClD,IAAI,UAAU;IACd,IAAI,WAAW,6BAAO;QACpB,OAAO,2BAAK,CAAC,QAAQ;QACrB,IAAI,MACF,UAAU,gBAAgB,MAAM,CAAC,CAAC,YAAY,EAAE,SAAS;IAE7D;IAEA,IAAI,kBAAC,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,6BAAW,EAAE;QAAC,WAAW,MAAM,SAAS;IAAA;IAC3E,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAE,MAAM,SAAS;IACzC,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,aAAa,OAAO,IAAI,OAAO,OAAO,EACxC,OAAO,OAAO,CAAC,KAAK;QAEtB,aAAa,OAAO,GAAG;IACzB,GAAG;QAAC;KAAO;IAEX,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,MAAM;QACxB,GAAG,UAAU;QACd,KAAK;QACL,UAAU,YAAY,KAAK;QAC3B,WAAW;QACX,MAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;qBACtD;uBACA;4BACA;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC;YACC,WAAW;sBACX,cAAA,iCAAC,CAAA,GAAA,mCAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,wCAAa;wBAAG;4BAAC,QAAQ,8BAAQ;2CAAC;4BAAS;wBAAE;qBAAE;oBAChD;wBAAC,CAAA,GAAA,wCAAa;wBAAG;4BAAC,QAAQ,8BAAQ;2CAAC;4BAAS;wBAAE;qBAAE;oBAChD;wBAAC,CAAA,GAAA,qCAAU;wBAAG;4BAAC,QAAQ,2BAAK;yCAAC;2CAAS;4BAAS;wBAAE;qBAAE;iBACpD;;oBACA,sBAAQ,gCAAC;wBAAK,cAAY;;oBAC1B;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/InlineAlert.tsx"],"sourcesContent":["/*\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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA6CM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAmCN,MAAM;AAYN,IAAI,8BAAQ;IACV,aAAa,CAAA,GAAA,iCAAS;IACtB,UAAU,CAAA,GAAA,iCAAc;IACxB,QAAQ,CAAA,GAAA,iCAAW;IACnB,UAAU,CAAA,GAAA,iCAAY;IACtB,SAAS;AACX;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,sBACV,YAAY,qBACZ,SAAS,EACV,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,OAA8C;IAClD,IAAI,UAAU;IACd,IAAI,WAAW,6BAAO;QACpB,OAAO,2BAAK,CAAC,QAAQ;QACrB,IAAI,MACF,UAAU,gBAAgB,MAAM,CAAC,CAAC,YAAY,EAAE,SAAS;IAE7D;IAEA,IAAI,kBAAC,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,6BAAW,EAAE;QAAC,WAAW,MAAM,SAAS;IAAA;IAC3E,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAE,MAAM,SAAS;IACzC,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,aAAa,OAAO,IAAI,OAAO,OAAO,EACxC,OAAO,OAAO,CAAC,KAAK;QAEtB,aAAa,OAAO,GAAG;IACzB,GAAG;QAAC;KAAO;IAEX,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,MAAM;QACxB,GAAG,UAAU;QACd,KAAK;QACL,UAAU,YAAY,KAAK;QAC3B,WAAW;QACX,MAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;qBACtD;uBACA;4BACA;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC;YACC,WAAW;sBACX,cAAA,iCAAC,CAAA,GAAA,mCAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,wCAAa;wBAAG;4BAAC,QAAQ,8BAAQ;2CAAC;4BAAS;wBAAE;qBAAE;oBAChD;wBAAC,CAAA,GAAA,wCAAa;wBAAG;4BAAC,QAAQ,8BAAQ;2CAAC;4BAAS;wBAAE;qBAAE;oBAChD;wBAAC,CAAA,GAAA,qCAAU;wBAAG;4BAAC,QAAQ,2BAAK;yCAAC;2CAAS;4BAAS;wBAAE;qBAAE;iBACpD;;oBACA,sBAAQ,gCAAC;wBAAK,cAAY;;oBAC1B;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/InlineAlert.tsx"],"sourcesContent":["/*\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.cjs.map"}