@react-spectrum/s2 1.3.1 → 1.5.0

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 += ' _Lf13';
-    else rules += ' _Le13';
-    rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _Kd13';
-    rules += ' sg13';
-    if (!position) rules += ' _Pc13';
-    rules += ' _oa13';
-    rules += ' Th13';
-    rules += ' Qh13';
-    rules += ' Sh13';
-    rules += ' Rh13';
-    rules += ' oc13';
-    rules += ' nc13';
-    rules += ' kc13';
-    rules += ' jc13';
-    rules += ' _jf13';
-    rules += ' _kc13';
-    rules += ' hc13';
-    rules += ' mc13';
-    rules += ' lc13';
-    if (props.fillStyle === "boldFill") rules += ' iA13';
-    else if (props.fillStyle === "subtleFill") rules += ' iA13';
+    if (props.isFocusVisible) rules += ' _Lf15';
+    else rules += ' _Le15';
+    rules += ' Oh15';
+    rules += ' Olc15';
+    rules += ' _Mc15';
+    rules += ' _Kd15';
+    rules += ' sg15';
+    if (!position) rules += ' _Pc15';
+    rules += ' _oa15';
+    rules += ' Th15';
+    rules += ' Qh15';
+    rules += ' Sh15';
+    rules += ' Rh15';
+    rules += ' oc15';
+    rules += ' nc15';
+    rules += ' kc15';
+    rules += ' jc15';
+    rules += ' _jf15';
+    rules += ' _kc15';
+    rules += ' hc15';
+    rules += ' mc15';
+    rules += ' lc15';
+    if (props.fillStyle === "boldFill") rules += ' iA15';
+    else if (props.fillStyle === "subtleFill") rules += ' iA15';
     else if (props.fillStyle === "border") {
-        if (props.variant === "neutral") rules += ' iy13';
-        else if (props.variant === "negative") rules += ' it13';
-        else if (props.variant === "notice") rules += ' is13';
-        else if (props.variant === "positive") rules += ' il13';
-        else if (props.variant === "informative") rules += ' ix13';
+        if (props.variant === "neutral") rules += ' iy15';
+        else if (props.variant === "negative") rules += ' it15';
+        else if (props.variant === "notice") rules += ' is15';
+        else if (props.variant === "positive") rules += ' il15';
+        else if (props.variant === "informative") rules += ' ix15';
     }
     if (props.variant === "neutral") {
-        if (props.fillStyle === "boldFill") rules += ' g613';
-        else if (props.fillStyle === "subtleFill") rules += ' gI13';
-        else if (props.fillStyle === "border") rules += ' gX13';
+        if (props.fillStyle === "boldFill") rules += ' g615';
+        else if (props.fillStyle === "subtleFill") rules += ' gI15';
+        else if (props.fillStyle === "border") rules += ' gX15';
     } else if (props.variant === "negative") {
-        if (props.fillStyle === "boldFill") rules += ' gB13';
-        else if (props.fillStyle === "subtleFill") rules += ' gU13';
-        else if (props.fillStyle === "border") rules += ' gX13';
+        if (props.fillStyle === "boldFill") rules += ' gB15';
+        else if (props.fillStyle === "subtleFill") rules += ' gU15';
+        else if (props.fillStyle === "border") rules += ' gX15';
     } else if (props.variant === "notice") {
-        if (props.fillStyle === "boldFill") rules += ' gQ13';
-        else if (props.fillStyle === "subtleFill") rules += ' gV13';
-        else if (props.fillStyle === "border") rules += ' gX13';
+        if (props.fillStyle === "boldFill") rules += ' gQ15';
+        else if (props.fillStyle === "subtleFill") rules += ' gV15';
+        else if (props.fillStyle === "border") rules += ' gX15';
     } else if (props.variant === "positive") {
-        if (props.fillStyle === "boldFill") rules += ' g113';
-        else if (props.fillStyle === "subtleFill") rules += ' gA13';
-        else if (props.fillStyle === "border") rules += ' gX13';
+        if (props.fillStyle === "boldFill") rules += ' g115';
+        else if (props.fillStyle === "subtleFill") rules += ' gA15';
+        else if (props.fillStyle === "border") rules += ' gX15';
     } else if (props.variant === "informative") {
-        if (props.fillStyle === "boldFill") rules += ' g213';
-        else if (props.fillStyle === "subtleFill") rules += ' gG13';
-        else if (props.fillStyle === "border") rules += ' gX13';
+        if (props.fillStyle === "boldFill") rules += ' g215';
+        else if (props.fillStyle === "subtleFill") rules += ' gG15';
+        else if (props.fillStyle === "border") rules += ' gX15';
     }
     return rules;
 };
 const $72bf3a9f94a75d9f$var$icon = function anonymous(props) {
     let rules = " ";
-    rules += ' __wa13';
+    rules += ' __wa15';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' -_8sjo0b-tcwrnr13';
-        else rules += ' -_8sjo0b-tw13';
+        if (props.variant === "notice") rules += ' -_8sjo0b-tcwrnr15';
+        else rules += ' -_8sjo0b-tw15';
     } else if (props.fillStyle === "subtleFill") {
-        if (props.variant === "neutral") rules += ' -_8sjo0b-tf13';
-        else if (props.variant === "negative") rules += ' -_8sjo0b-tq13';
-        else if (props.variant === "notice") rules += ' -_8sjo0b-tq13';
-        else if (props.variant === "positive") rules += ' -_8sjo0b-tt13';
-        else if (props.variant === "informative") rules += ' -_8sjo0b-tu13';
+        if (props.variant === "neutral") rules += ' -_8sjo0b-tf15';
+        else if (props.variant === "negative") rules += ' -_8sjo0b-tq15';
+        else if (props.variant === "notice") rules += ' -_8sjo0b-tq15';
+        else if (props.variant === "positive") rules += ' -_8sjo0b-tt15';
+        else if (props.variant === "informative") rules += ' -_8sjo0b-tu15';
     } else if (props.fillStyle === "border") {
-        if (props.variant === "neutral") rules += ' -_8sjo0b-tf13';
-        else if (props.variant === "negative") rules += ' -_8sjo0b-tq13';
-        else if (props.variant === "notice") rules += ' -_8sjo0b-tm13';
-        else if (props.variant === "positive") rules += ' -_8sjo0b-tt13';
-        else if (props.variant === "informative") rules += ' -_8sjo0b-tu13';
+        if (props.variant === "neutral") rules += ' -_8sjo0b-tf15';
+        else if (props.variant === "negative") rules += ' -_8sjo0b-tq15';
+        else if (props.variant === "notice") rules += ' -_8sjo0b-tm15';
+        else if (props.variant === "positive") rules += ' -_8sjo0b-tt15';
+        else if (props.variant === "informative") rules += ' -_8sjo0b-tu15';
     }
     return rules;
 };
@@ -144,55 +144,55 @@ let $72bf3a9f94a75d9f$var$ICONS = {
 };
 const $72bf3a9f94a75d9f$var$heading = function anonymous(props) {
     let rules = " ";
-    rules += ' Jy13';
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' -_6BNtrc-c13';
-    rules += ' vx13';
-    rules += ' xd13';
-    rules += ' _xa13';
-    rules += ' xX0cczbc13';
-    rules += ' _xX0cczba13';
-    rules += ' xfd13';
-    rules += ' _xfa13';
-    rules += ' xfX0cczbc13';
-    rules += ' _xfX0cczba13';
-    rules += ' _Fd13';
-    rules += ' _FnuYUweb13';
+    rules += ' Jy15';
+    rules += ' uk15';
+    rules += ' ucJ9TBTb15';
+    rules += ' ud3Euai15';
+    rules += ' uea15';
+    rules += ' ugb15';
+    rules += ' uhd15';
+    rules += ' uje15';
+    rules += ' u2NhKxcl15';
+    rules += ' uic15';
+    rules += ' -_6BNtrc-c15';
+    rules += ' vx15';
+    rules += ' xd15';
+    rules += ' _xa15';
+    rules += ' xX0cczbc15';
+    rules += ' _xX0cczba15';
+    rules += ' xfd15';
+    rules += ' _xfa15';
+    rules += ' xfX0cczbc15';
+    rules += ' _xfX0cczba15';
+    rules += ' _Fd15';
+    rules += ' _FnuYUweb15';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' pg13';
-        else rules += ' px13';
-    } else rules += ' po13';
+        if (props.variant === "notice") rules += ' pg15';
+        else rules += ' px15';
+    } else rules += ' po15';
     return rules;
 };
 const $72bf3a9f94a75d9f$var$content = function anonymous(props) {
     let rules = " ";
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' -_6BNtrc-c13';
-    rules += ' vx13';
-    rules += ' xb13';
-    rules += ' _xa13';
-    rules += ' _Fb13';
-    rules += ' _FnuYUwec13';
+    rules += ' uk15';
+    rules += ' ucJ9TBTb15';
+    rules += ' ud3Euai15';
+    rules += ' uea15';
+    rules += ' ugb15';
+    rules += ' uhd15';
+    rules += ' uje15';
+    rules += ' u2NhKxcl15';
+    rules += ' uic15';
+    rules += ' -_6BNtrc-c15';
+    rules += ' vx15';
+    rules += ' xb15';
+    rules += ' _xa15';
+    rules += ' _Fb15';
+    rules += ' _FnuYUwec15';
     if (props.fillStyle === "boldFill") {
-        if (props.variant === "notice") rules += ' pg13';
-        else rules += ' px13';
-    } else rules += ' pt13';
+        if (props.variant === "notice") rules += ' pg15';
+        else rules += ' px15';
+    } else rules += ' pt15';
     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;;;;;;;;;;;;;;;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,uEAA0B,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,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,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;qBACtD;uBACA;4BACA;QACF,GAAG,MAAM,MAAM;kBACf,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   * @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"}
+{"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"}