@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/InlineAlert.cjs

@@ -55,89 +55,85 @@ const $72bf3a9f94a75d9f$export$c0de4eca0a8bf011 = /*#__PURE__*/ (0, $3stts$react
 const $72bf3a9f94a75d9f$var$inlineAlert = function anonymous(props, overrides) {
     let rules = " ";
     let position = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf11';
-    else rules += ' _Le11';
-    rules += ' Oh11';
-    rules += ' _Mc11';
-    rules += ' _Kd11';
-    rules += ' sg11';
-    if (!position) rules += ' _Pc11';
-    rules += ' _oa11';
-    rules += ' Th11';
-    rules += ' Qh11';
-    rules += ' Sh11';
-    rules += ' Rh11';
-    rules += ' oc11';
-    rules += ' nc11';
-    rules += ' kc11';
-    rules += ' jc11';
-    rules += ' _jf11';
-    rules += ' _kc11';
-    rules += ' hc11';
-    rules += ' mc11';
-    rules += ' lc11';
-    if (props.fillStyle === "boldFill") rules += ' iA11';
-    else if (props.fillStyle === "subtleFill") rules += ' iA11';
+    if (props.isFocusVisible) rules += ' _Lf12';
+    else rules += ' _Le12';
+    rules += ' Oh12';
+    rules += ' _Mc12';
+    rules += ' _Kd12';
+    rules += ' sg12';
+    if (!position) rules += ' _Pc12';
+    rules += ' _oa12';
+    rules += ' Th12';
+    rules += ' Qh12';
+    rules += ' Sh12';
+    rules += ' Rh12';
+    rules += ' oc12';
+    rules += ' nc12';
+    rules += ' kc12';
+    rules += ' jc12';
+    rules += ' _jf12';
+    rules += ' _kc12';
+    rules += ' hc12';
+    rules += ' mc12';
+    rules += ' lc12';
+    if (props.fillStyle === "boldFill") rules += ' iA12';
+    else if (props.fillStyle === "subtleFill") rules += ' iA12';
     else if (props.fillStyle === "border") {
-        if (props.variant === "neutral") rules += ' iy11';
-        else if (props.variant === "negative") rules += ' it11';
-        else if (props.variant === "notice") rules += ' is11';
-        else if (props.variant === "positive") rules += ' il11';
-        else if (props.variant === "informative") rules += ' ix11';
+        if (props.variant === "neutral") rules += ' iy12';
+        else if (props.variant === "negative") rules += ' it12';
+        else if (props.variant === "notice") rules += ' is12';
+        else if (props.variant === "positive") rules += ' il12';
+        else if (props.variant === "informative") rules += ' ix12';
     }
     if (props.variant === "neutral") {
-        if (props.fillStyle === "boldFill") rules += ' g611';
-        else if (props.fillStyle === "subtleFill") rules += ' gI11';
-        else if (props.fillStyle === "border") rules += ' gX11';
+        if (props.fillStyle === "boldFill") rules += ' g612';
+        else if (props.fillStyle === "subtleFill") rules += ' gI12';
+        else if (props.fillStyle === "border") rules += ' gX12';
     } else if (props.variant === "negative") {
-        if (props.fillStyle === "boldFill") rules += ' gB11';
-        else if (props.fillStyle === "subtleFill") rules += ' gU11';
-        else if (props.fillStyle === "border") rules += ' gX11';
+        if (props.fillStyle === "boldFill") rules += ' gB12';
+        else if (props.fillStyle === "subtleFill") rules += ' gU12';
+        else if (props.fillStyle === "border") rules += ' gX12';
     } else if (props.variant === "notice") {
-        if (props.fillStyle === "boldFill") rules += ' gQ11';
-        else if (props.fillStyle === "subtleFill") rules += ' gV11';
-        else if (props.fillStyle === "border") rules += ' gX11';
+        if (props.fillStyle === "boldFill") rules += ' gQ12';
+        else if (props.fillStyle === "subtleFill") rules += ' gV12';
+        else if (props.fillStyle === "border") rules += ' gX12';
     } else if (props.variant === "positive") {
-        if (props.fillStyle === "boldFill") rules += ' g111';
-        else if (props.fillStyle === "subtleFill") rules += ' gA11';
-        else if (props.fillStyle === "border") rules += ' gX11';
+        if (props.fillStyle === "boldFill") rules += ' g112';
+        else if (props.fillStyle === "subtleFill") rules += ' gA12';
+        else if (props.fillStyle === "border") rules += ' gX12';
     } else if (props.variant === "informative") {
-        if (props.fillStyle === "boldFill") rules += ' g211';
-        else if (props.fillStyle === "subtleFill") rules += ' gG11';
-        else if (props.fillStyle === "border") rules += ' gX11';
+        if (props.fillStyle === "boldFill") rules += ' g212';
+        else if (props.fillStyle === "subtleFill") rules += ' gG12';
+        else if (props.fillStyle === "border") rules += ' gX12';
     }
     return rules;
 };
 const $72bf3a9f94a75d9f$var$icon = function anonymous(props) {
     let rules = " ";
-    rules += ' z2U5Crc11';
-    rules += ' y2U5Crc11';
-    rules += ' B2U5Crc11';
-    rules += ' A2U5Crc11';
+    rules += ' __wa12';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' -_8sjo0b-tcwrnr11';
-        else rules += ' -_8sjo0b-tw11';
+        if (props.variant === "notice") rules += ' -_8sjo0b-tcwrnr12';
+        else rules += ' -_8sjo0b-tw12';
     } else if (props.fillStyle === "subtleFill") {
-        if (props.variant === "neutral") rules += ' -_8sjo0b-tf11';
-        else if (props.variant === "negative") rules += ' -_8sjo0b-tq11';
-        else if (props.variant === "notice") rules += ' -_8sjo0b-tq11';
-        else if (props.variant === "positive") rules += ' -_8sjo0b-tt11';
-        else if (props.variant === "informative") rules += ' -_8sjo0b-tu11';
+        if (props.variant === "neutral") rules += ' -_8sjo0b-tf12';
+        else if (props.variant === "negative") rules += ' -_8sjo0b-tq12';
+        else if (props.variant === "notice") rules += ' -_8sjo0b-tq12';
+        else if (props.variant === "positive") rules += ' -_8sjo0b-tt12';
+        else if (props.variant === "informative") rules += ' -_8sjo0b-tu12';
     } else if (props.fillStyle === "border") {
-        if (props.variant === "neutral") rules += ' -_8sjo0b-tf11';
-        else if (props.variant === "negative") rules += ' -_8sjo0b-tq11';
-        else if (props.variant === "notice") rules += ' -_8sjo0b-tm11';
-        else if (props.variant === "positive") rules += ' -_8sjo0b-tt11';
-        else if (props.variant === "informative") rules += ' -_8sjo0b-tu11';
+        if (props.variant === "neutral") rules += ' -_8sjo0b-tf12';
+        else if (props.variant === "negative") rules += ' -_8sjo0b-tq12';
+        else if (props.variant === "notice") rules += ' -_8sjo0b-tm12';
+        else if (props.variant === "positive") rules += ' -_8sjo0b-tt12';
+        else if (props.variant === "informative") rules += ' -_8sjo0b-tu12';
     }
     return rules;
 };
-const $72bf3a9f94a75d9f$var$grid = " se11 qj11 Dxumf9b11 EeeZzzb11 Za11 CScDOab11";
 let $72bf3a9f94a75d9f$var$ICONS = {
     informative: (0, $0ed6e07b499b9797$exports.default),
     positive: (0, $6391be254c189366$exports.default),
@@ -147,69 +143,61 @@ let $72bf3a9f94a75d9f$var$ICONS = {
 };
 const $72bf3a9f94a75d9f$var$heading = function anonymous(props) {
     let rules = " ";
-    rules += ' Jy11';
-    rules += ' zPCJngb11';
-    rules += ' yPCJngb11';
-    rules += ' BPCJngb11';
-    rules += ' APCJngb11';
-    rules += ' uk11';
-    rules += ' uch11';
-    rules += ' udi11';
-    rules += ' uea11';
-    rules += ' ugb11';
-    rules += ' uhd11';
-    rules += ' uje11';
-    rules += ' u2NhKxcl11';
-    rules += ' uic11';
-    rules += ' -_6BNtrc-c11';
-    rules += ' vx11';
-    rules += ' wd11';
-    rules += ' xd11';
-    rules += ' _xa11';
-    rules += ' wX0cczbc11';
-    rules += ' xX0cczbc11';
-    rules += ' _xX0cczba11';
-    rules += ' wfd11';
-    rules += ' xfd11';
-    rules += ' _xfa11';
-    rules += ' wfX0cczbc11';
-    rules += ' xfX0cczbc11';
-    rules += ' _xfX0cczba11';
-    rules += ' _Fd11';
-    rules += ' _FezxGHba11';
-    rules += ' _FnuYUweb11';
+    rules += ' Jy12';
+    rules += ' uk12';
+    rules += ' uch12';
+    rules += ' udi12';
+    rules += ' uea12';
+    rules += ' ugb12';
+    rules += ' uhd12';
+    rules += ' uje12';
+    rules += ' u2NhKxcl12';
+    rules += ' uic12';
+    rules += ' -_6BNtrc-c12';
+    rules += ' vx12';
+    rules += ' wd12';
+    rules += ' xd12';
+    rules += ' _xa12';
+    rules += ' wX0cczbc12';
+    rules += ' xX0cczbc12';
+    rules += ' _xX0cczba12';
+    rules += ' wfd12';
+    rules += ' xfd12';
+    rules += ' _xfa12';
+    rules += ' wfX0cczbc12';
+    rules += ' xfX0cczbc12';
+    rules += ' _xfX0cczba12';
+    rules += ' _Fd12';
+    rules += ' _FezxGHba12';
+    rules += ' _FnuYUweb12';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' pg11';
-        else rules += ' px11';
-    } else rules += ' po11';
+        if (props.variant === "notice") rules += ' pg12';
+        else rules += ' px12';
+    } else rules += ' po12';
     return rules;
 };
 const $72bf3a9f94a75d9f$var$content = function anonymous(props) {
     let rules = " ";
-    rules += ' zk52g2d11';
-    rules += ' yk52g2d11';
-    rules += ' Bk52g2d11';
-    rules += ' Ak52g2d11';
-    rules += ' uk11';
-    rules += ' uch11';
-    rules += ' udi11';
-    rules += ' uea11';
-    rules += ' ugb11';
-    rules += ' uhd11';
-    rules += ' uje11';
-    rules += ' u2NhKxcl11';
-    rules += ' uic11';
-    rules += ' -_6BNtrc-c11';
-    rules += ' vx11';
-    rules += ' wb11';
-    rules += ' xb11';
-    rules += ' _xa11';
-    rules += ' _Fb11';
-    rules += ' _FnuYUwec11';
+    rules += ' uk12';
+    rules += ' uch12';
+    rules += ' udi12';
+    rules += ' uea12';
+    rules += ' ugb12';
+    rules += ' uhd12';
+    rules += ' uje12';
+    rules += ' u2NhKxcl12';
+    rules += ' uic12';
+    rules += ' -_6BNtrc-c12';
+    rules += ' vx12';
+    rules += ' wb12';
+    rules += ' xb12';
+    rules += ' _xa12';
+    rules += ' _Fb12';
+    rules += ' _FnuYUwec12';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' pg11';
-        else rules += ' px11';
-    } else rules += ' pt11';
+        if (props.variant === "notice") rules += ' pg12';
+        else rules += ' px12';
+    } else rules += ' pt12';
     return rules;
 };
 const $72bf3a9f94a75d9f$export$a3b2c96db9b0eb71 = /*#__PURE__*/ (0, $3stts$react.forwardRef)(function InlineAlert(props, ref) {
@@ -246,43 +234,40 @@ const $72bf3a9f94a75d9f$export$a3b2c96db9b0eb71 = /*#__PURE__*/ (0, $3stts$react
             fillStyle: fillStyle,
             isFocusVisible: isFocusVisible
         }, props.styles),
-        children: /*#__PURE__*/ (0, $3stts$reactjsxruntime.jsx)("div", {
-            className: $72bf3a9f94a75d9f$var$grid,
-            children: /*#__PURE__*/ (0, $3stts$reactjsxruntime.jsxs)((0, $3stts$reactariacomponents.Provider), {
-                values: [
-                    [
-                        (0, $6367bc87eb7d24ad$exports.HeadingContext),
-                        {
-                            styles: $72bf3a9f94a75d9f$var$heading({
-                                fillStyle: fillStyle
-                            })
-                        }
-                    ],
-                    [
-                        (0, $6367bc87eb7d24ad$exports.ContentContext),
-                        {
-                            styles: $72bf3a9f94a75d9f$var$content({
-                                fillStyle: fillStyle
-                            })
-                        }
-                    ],
-                    [
-                        (0, $bde97c91243ed164$exports.IconContext),
-                        {
-                            styles: $72bf3a9f94a75d9f$var$icon({
-                                variant: variant,
-                                fillStyle: fillStyle
-                            })
-                        }
-                    ]
+        children: /*#__PURE__*/ (0, $3stts$reactjsxruntime.jsxs)((0, $3stts$reactariacomponents.Provider), {
+            values: [
+                [
+                    (0, $6367bc87eb7d24ad$exports.HeadingContext),
+                    {
+                        styles: $72bf3a9f94a75d9f$var$heading({
+                            fillStyle: fillStyle
+                        })
+                    }
                 ],
-                children: [
-                    Icon && /*#__PURE__*/ (0, $3stts$reactjsxruntime.jsx)(Icon, {
-                        "aria-label": iconAlt
-                    }),
-                    children
+                [
+                    (0, $6367bc87eb7d24ad$exports.ContentContext),
+                    {
+                        styles: $72bf3a9f94a75d9f$var$content({
+                            fillStyle: fillStyle
+                        })
+                    }
+                ],
+                [
+                    (0, $bde97c91243ed164$exports.IconContext),
+                    {
+                        styles: $72bf3a9f94a75d9f$var$icon({
+                            variant: variant,
+                            fillStyle: fillStyle
+                        })
+                    }
                 ]
-            })
+            ],
+            children: [
+                Icon && /*#__PURE__*/ (0, $3stts$reactjsxruntime.jsx)(Icon, {
+                    "aria-label": iconAlt
+                }),
+                children
+            ]
         })
     });
 });

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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAmBC,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,iCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,wCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;uCAAC;wBAAS;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,wCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;uCAAC;wBAAS;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,QAAQ,2BAAK;qCAAC;uCAAS;wBAAS;oBAAE;iBAAE;aACpD;;gBACA,sBAAQ,gCAAC;oBAAK,cAAY;;gBAC1B;;;;AAIT","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  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.cjs.map"}