@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/Image.mjs

@@ -50,21 +50,21 @@ function $dbd6f0b2503b938c$var$reducer(state, action) {
             return state;
     }
 }
-const $dbd6f0b2503b938c$var$wrapperStyles = " gH131 _Nc131 Pc131";
+const $dbd6f0b2503b938c$var$wrapperStyles = " gH151 _Nc151 Pc151";
 const $dbd6f0b2503b938c$var$imgStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' sb131';
-    rules += ' Za131';
-    rules += ' Fb131';
-    rules += ' _H40ub4c131';
-    rules += ' __D40ub4c131';
-    if (props.isRevealed) rules += ' _Ib131';
-    else rules += ' _Ia131';
-    if (props.isTransitioning) rules += ' Yf131';
-    else rules += ' Ye131';
-    rules += ' Xe131';
-    if (props.isTransitioning) rules += ' _2b131';
-    else rules += ' _2b131';
+    rules += ' sb151';
+    rules += ' Za151';
+    rules += ' Fb151';
+    rules += ' _H40ub4c151';
+    rules += ' __D40ub4c151';
+    if (props.isRevealed) rules += ' _Ib151';
+    else rules += ' _Ia151';
+    if (props.isTransitioning) rules += ' Yf151';
+    else rules += ' Ye151';
+    rules += ' Xe151';
+    if (props.isTransitioning) rules += ' _2b151';
+    else rules += ' _2b151';
     return rules;
 };
 const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwardRef)(function Image(props, domRef) {
@@ -162,7 +162,7 @@ const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwa
             })
         });
         if (Array.isArray(srcProp)) img = /*#__PURE__*/ (0, $5AH9h$jsxs)("picture", {
-            className: " _H40ub4c131 __D40ub4c131",
+            className: " _H40ub4c151 __D40ub4c151",
             children: [
                 srcProp.map((source, i)=>{
                     let { colorScheme: sourceColorScheme, ...sourceProps } = source;

package/dist/private/InlineAlert.cjs

@@ -60,78 +60,78 @@ const $72bf3a9f94a75d9f$var$inlineAlert = function anonymous(props, overrides) {
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf131';
-    else rules += ' _Le131';
-    rules += ' Oh131';
-    rules += ' Olc131';
-    rules += ' _Mc131';
-    rules += ' _Kd131';
-    rules += ' sg131';
-    if (!position) rules += ' _Pc131';
-    rules += ' _oa131';
-    rules += ' Th131';
-    rules += ' Qh131';
-    rules += ' Sh131';
-    rules += ' Rh131';
-    rules += ' oc131';
-    rules += ' nc131';
-    rules += ' kc131';
-    rules += ' jc131';
-    rules += ' _jf131';
-    rules += ' _kc131';
-    rules += ' hc131';
-    rules += ' mc131';
-    rules += ' lc131';
-    if (props.fillStyle === "boldFill") rules += ' iA131';
-    else if (props.fillStyle === "subtleFill") rules += ' iA131';
+    if (props.isFocusVisible) rules += ' _Lf151';
+    else rules += ' _Le151';
+    rules += ' Oh151';
+    rules += ' Olc151';
+    rules += ' _Mc151';
+    rules += ' _Kd151';
+    rules += ' sg151';
+    if (!position) rules += ' _Pc151';
+    rules += ' _oa151';
+    rules += ' Th151';
+    rules += ' Qh151';
+    rules += ' Sh151';
+    rules += ' Rh151';
+    rules += ' oc151';
+    rules += ' nc151';
+    rules += ' kc151';
+    rules += ' jc151';
+    rules += ' _jf151';
+    rules += ' _kc151';
+    rules += ' hc151';
+    rules += ' mc151';
+    rules += ' lc151';
+    if (props.fillStyle === "boldFill") rules += ' iA151';
+    else if (props.fillStyle === "subtleFill") rules += ' iA151';
     else if (props.fillStyle === "border") {
-        if (props.variant === "neutral") rules += ' iy131';
-        else if (props.variant === "negative") rules += ' it131';
-        else if (props.variant === "notice") rules += ' is131';
-        else if (props.variant === "positive") rules += ' il131';
-        else if (props.variant === "informative") rules += ' ix131';
+        if (props.variant === "neutral") rules += ' iy151';
+        else if (props.variant === "negative") rules += ' it151';
+        else if (props.variant === "notice") rules += ' is151';
+        else if (props.variant === "positive") rules += ' il151';
+        else if (props.variant === "informative") rules += ' ix151';
     }
     if (props.variant === "neutral") {
-        if (props.fillStyle === "boldFill") rules += ' g6131';
-        else if (props.fillStyle === "subtleFill") rules += ' gI131';
-        else if (props.fillStyle === "border") rules += ' gX131';
+        if (props.fillStyle === "boldFill") rules += ' g6151';
+        else if (props.fillStyle === "subtleFill") rules += ' gI151';
+        else if (props.fillStyle === "border") rules += ' gX151';
     } else if (props.variant === "negative") {
-        if (props.fillStyle === "boldFill") rules += ' gB131';
-        else if (props.fillStyle === "subtleFill") rules += ' gU131';
-        else if (props.fillStyle === "border") rules += ' gX131';
+        if (props.fillStyle === "boldFill") rules += ' gB151';
+        else if (props.fillStyle === "subtleFill") rules += ' gU151';
+        else if (props.fillStyle === "border") rules += ' gX151';
     } else if (props.variant === "notice") {
-        if (props.fillStyle === "boldFill") rules += ' gQ131';
-        else if (props.fillStyle === "subtleFill") rules += ' gV131';
-        else if (props.fillStyle === "border") rules += ' gX131';
+        if (props.fillStyle === "boldFill") rules += ' gQ151';
+        else if (props.fillStyle === "subtleFill") rules += ' gV151';
+        else if (props.fillStyle === "border") rules += ' gX151';
     } else if (props.variant === "positive") {
-        if (props.fillStyle === "boldFill") rules += ' g1131';
-        else if (props.fillStyle === "subtleFill") rules += ' gA131';
-        else if (props.fillStyle === "border") rules += ' gX131';
+        if (props.fillStyle === "boldFill") rules += ' g1151';
+        else if (props.fillStyle === "subtleFill") rules += ' gA151';
+        else if (props.fillStyle === "border") rules += ' gX151';
     } else if (props.variant === "informative") {
-        if (props.fillStyle === "boldFill") rules += ' g2131';
-        else if (props.fillStyle === "subtleFill") rules += ' gG131';
-        else if (props.fillStyle === "border") rules += ' gX131';
+        if (props.fillStyle === "boldFill") rules += ' g2151';
+        else if (props.fillStyle === "subtleFill") rules += ' gG151';
+        else if (props.fillStyle === "border") rules += ' gX151';
     }
     return rules;
 };
 const $72bf3a9f94a75d9f$var$icon = function anonymous(props) {
     let rules = " ";
-    rules += ' __wa131';
+    rules += ' __wa151';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' -_8sjo0b-tcwrnr131';
-        else rules += ' -_8sjo0b-tw131';
+        if (props.variant === "notice") rules += ' -_8sjo0b-tcwrnr151';
+        else rules += ' -_8sjo0b-tw151';
     } else if (props.fillStyle === "subtleFill") {
-        if (props.variant === "neutral") rules += ' -_8sjo0b-tf131';
-        else if (props.variant === "negative") rules += ' -_8sjo0b-tq131';
-        else if (props.variant === "notice") rules += ' -_8sjo0b-tq131';
-        else if (props.variant === "positive") rules += ' -_8sjo0b-tt131';
-        else if (props.variant === "informative") rules += ' -_8sjo0b-tu131';
+        if (props.variant === "neutral") rules += ' -_8sjo0b-tf151';
+        else if (props.variant === "negative") rules += ' -_8sjo0b-tq151';
+        else if (props.variant === "notice") rules += ' -_8sjo0b-tq151';
+        else if (props.variant === "positive") rules += ' -_8sjo0b-tt151';
+        else if (props.variant === "informative") rules += ' -_8sjo0b-tu151';
     } else if (props.fillStyle === "border") {
-        if (props.variant === "neutral") rules += ' -_8sjo0b-tf131';
-        else if (props.variant === "negative") rules += ' -_8sjo0b-tq131';
-        else if (props.variant === "notice") rules += ' -_8sjo0b-tm131';
-        else if (props.variant === "positive") rules += ' -_8sjo0b-tt131';
-        else if (props.variant === "informative") rules += ' -_8sjo0b-tu131';
+        if (props.variant === "neutral") rules += ' -_8sjo0b-tf151';
+        else if (props.variant === "negative") rules += ' -_8sjo0b-tq151';
+        else if (props.variant === "notice") rules += ' -_8sjo0b-tm151';
+        else if (props.variant === "positive") rules += ' -_8sjo0b-tt151';
+        else if (props.variant === "informative") rules += ' -_8sjo0b-tu151';
     }
     return rules;
 };
@@ -144,55 +144,55 @@ let $72bf3a9f94a75d9f$var$ICONS = {
 };
 const $72bf3a9f94a75d9f$var$heading = function anonymous(props) {
     let rules = " ";
-    rules += ' Jy131';
-    rules += ' uk131';
-    rules += ' ucJ9TBTb131';
-    rules += ' ud3Euai131';
-    rules += ' uea131';
-    rules += ' ugb131';
-    rules += ' uhd131';
-    rules += ' uje131';
-    rules += ' u2NhKxcl131';
-    rules += ' uic131';
-    rules += ' -_6BNtrc-c131';
-    rules += ' vx131';
-    rules += ' xd131';
-    rules += ' _xa131';
-    rules += ' xX0cczbc131';
-    rules += ' _xX0cczba131';
-    rules += ' xfd131';
-    rules += ' _xfa131';
-    rules += ' xfX0cczbc131';
-    rules += ' _xfX0cczba131';
-    rules += ' _Fd131';
-    rules += ' _FnuYUweb131';
+    rules += ' Jy151';
+    rules += ' uk151';
+    rules += ' ucJ9TBTb151';
+    rules += ' ud3Euai151';
+    rules += ' uea151';
+    rules += ' ugb151';
+    rules += ' uhd151';
+    rules += ' uje151';
+    rules += ' u2NhKxcl151';
+    rules += ' uic151';
+    rules += ' -_6BNtrc-c151';
+    rules += ' vx151';
+    rules += ' xd151';
+    rules += ' _xa151';
+    rules += ' xX0cczbc151';
+    rules += ' _xX0cczba151';
+    rules += ' xfd151';
+    rules += ' _xfa151';
+    rules += ' xfX0cczbc151';
+    rules += ' _xfX0cczba151';
+    rules += ' _Fd151';
+    rules += ' _FnuYUweb151';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' pg131';
-        else rules += ' px131';
-    } else rules += ' po131';
+        if (props.variant === "notice") rules += ' pg151';
+        else rules += ' px151';
+    } else rules += ' po151';
     return rules;
 };
 const $72bf3a9f94a75d9f$var$content = function anonymous(props) {
     let rules = " ";
-    rules += ' uk131';
-    rules += ' ucJ9TBTb131';
-    rules += ' ud3Euai131';
-    rules += ' uea131';
-    rules += ' ugb131';
-    rules += ' uhd131';
-    rules += ' uje131';
-    rules += ' u2NhKxcl131';
-    rules += ' uic131';
-    rules += ' -_6BNtrc-c131';
-    rules += ' vx131';
-    rules += ' xb131';
-    rules += ' _xa131';
-    rules += ' _Fb131';
-    rules += ' _FnuYUwec131';
+    rules += ' uk151';
+    rules += ' ucJ9TBTb151';
+    rules += ' ud3Euai151';
+    rules += ' uea151';
+    rules += ' ugb151';
+    rules += ' uhd151';
+    rules += ' uje151';
+    rules += ' u2NhKxcl151';
+    rules += ' uic151';
+    rules += ' -_6BNtrc-c151';
+    rules += ' vx151';
+    rules += ' xb151';
+    rules += ' _xa151';
+    rules += ' _Fb151';
+    rules += ' _FnuYUwec151';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' pg131';
-        else rules += ' px131';
-    } else rules += ' pt131';
+        if (props.variant === "notice") rules += ' pg151';
+        else rules += ' px151';
+    } else rules += ' pt151';
     return rules;
 };
 const $72bf3a9f94a75d9f$export$a3b2c96db9b0eb71 = /*#__PURE__*/ (0, $3stts$react.forwardRef)(function InlineAlert(props, ref) {

package/dist/private/InlineAlert.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA+CM,MAAM,0DACX,CAAA,GAAA,0BAAY,EAAwE;AAEtF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEN,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,YAC3D,KAAuB,EACvB,GAA2B;IAE3B,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,WAAE,UAAU,sBAAW,YAAY,qBAAU,SAAS,EAAC,GAAG;IAEvE,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,yCAAW,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,6CAAa,EAAE,MAAM;QACxB,GAAG,UAAU;QACd,KAAK;QACL,UAAU,YAAY,KAAK;QAC3B,WAAW;QACX,MAAK;QACL,OAAO,MAAM,YAAY;QACzB,WACE,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,kCACE;qBACE;uBACA;4BACA;QACF,GACA,MAAM,MAAM;kBAGhB,cAAA,iCAAC,CAAA,GAAA,wCAAO;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/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   *\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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA8CM,MAAM,0DACX,CAAA,GAAA,0BAAY,EAAwE;AAEtF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEN,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,YAC3D,KAAuB,EACvB,GAA2B;IAE3B,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,WAAE,UAAU,sBAAW,YAAY,qBAAU,SAAS,EAAC,GAAG;IAEvE,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,yCAAW,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,6CAAa,EAAE,MAAM;QACxB,GAAG,UAAU;QACd,KAAK;QACL,UAAU,YAAY,KAAK;QAC3B,WAAW;QACX,MAAK;QACL,OAAO,MAAM,YAAY;QACzB,WACE,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,kCACE;qBACE;uBACA;4BACA;QACF,GACA,MAAM,MAAM;kBAGhB,cAAA,iCAAC,CAAA,GAAA,wCAAO;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/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.cjs.map"}