@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/InlineAlert.mjs

@@ -53,78 +53,78 @@ const $fc2cf6b397804b9c$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 $fc2cf6b397804b9c$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;
 };
@@ -137,55 +137,55 @@ let $fc2cf6b397804b9c$var$ICONS = {
 };
 const $fc2cf6b397804b9c$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 $fc2cf6b397804b9c$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 $fc2cf6b397804b9c$export$a3b2c96db9b0eb71 = /*#__PURE__*/ (0, $7sfGs$forwardRef)(function InlineAlert(props, ref) {

package/dist/private/InlineAlert.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA+CM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAAwE;AAEtF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEN,MAAM;;;;;;;;;;;;;;;;;;;;;AAmCN,IAAI,8BAAQ;IACV,aAAa,CAAA,GAAA,wCAAS;IACtB,UAAU,CAAA,GAAA,wCAAc;IACxB,QAAQ,CAAA,GAAA,wCAAW;IACnB,UAAU,CAAA,GAAA,wCAAY;IACtB,SAAS;AACX;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAmBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC3D,KAAuB,EACvB,GAA2B;IAE3B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,WAAE,UAAU,sBAAW,YAAY,qBAAU,SAAS,EAAC,GAAG;IAEvE,IAAI,SAAS,CAAA,GAAA,yCAAQ,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,mBAAW,EAAE;QAAC,WAAW,MAAM,SAAS;IAAA;IAC3E,IAAI,eAAe,CAAA,GAAA,aAAK,EAAE,MAAM,SAAS;IACzC,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,aAAa,OAAO,IAAI,OAAO,OAAO,EACxC,OAAO,OAAO,CAAC,KAAK;QAEtB,aAAa,OAAO,GAAG;IACzB,GAAG;QAAC;KAAO;IAEX,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,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,iBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;uCAAC;wBAAS;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;uCAAC;wBAAS;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,QAAQ,2BAAK;qCAAC;uCAAS;wBAAS;oBAAE;iBAAE;aACpD;;gBACA,sBAAQ,gBAAC;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.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AA8CM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAAwE;AAEtF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEN,MAAM;;;;;;;;;;;;;;;;;;;;;AAmCN,IAAI,8BAAQ;IACV,aAAa,CAAA,GAAA,wCAAS;IACtB,UAAU,CAAA,GAAA,wCAAc;IACxB,QAAQ,CAAA,GAAA,wCAAW;IACnB,UAAU,CAAA,GAAA,wCAAY;IACtB,SAAS;AACX;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAmBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC3D,KAAuB,EACvB,GAA2B;IAE3B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,WAAE,UAAU,sBAAW,YAAY,qBAAU,SAAS,EAAC,GAAG;IAEvE,IAAI,SAAS,CAAA,GAAA,yCAAQ,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,mBAAW,EAAE;QAAC,WAAW,MAAM,SAAS;IAAA;IAC3E,IAAI,eAAe,CAAA,GAAA,aAAK,EAAE,MAAM,SAAS;IACzC,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,aAAa,OAAO,IAAI,OAAO,OAAO,EACxC,OAAO,OAAO,CAAC,KAAK;QAEtB,aAAa,OAAO,GAAG;IACzB,GAAG;QAAC;KAAO;IAEX,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,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,iBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;uCAAC;wBAAS;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;uCAAC;wBAAS;oBAAE;iBAAE;gBAChD;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,QAAQ,2BAAK;qCAAC;uCAAS;wBAAS;oBAAE;iBAAE;aACpD;;gBACA,sBAAQ,gBAAC;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.mjs.map"}

package/dist/private/LabeledValue.cjs

@@ -50,184 +50,184 @@ const $ad3c2d5408b92dda$var$fieldStyles = function anonymous(props, overrides) {
         if (p[1] === "y") gridColumnEnd = true;
         rules += p[0];
     }
-    rules += ' se131';
+    rules += ' se151';
     if (props.isInForm) {
-        if (!gridColumnStart) rules += ' z2mU131';
+        if (!gridColumnStart) rules += ' z2mU151';
     }
     if (props.isInForm) {
         if (props.labelPosition === "side") {
-            if (!gridColumnEnd) rules += ' yvoofG131';
+            if (!gridColumnEnd) rules += ' yvoofG151';
         }
     }
-    if (props.isInForm) rules += ' DLwlgod131';
+    if (props.isInForm) rules += ' DLwlgod151';
     else {
-        if (props.labelPosition === "side") rules += ' DPlN5qb131';
-        else if (props.labelPosition === "top") rules += ' DM8Mfn131';
+        if (props.labelPosition === "side") rules += ' DPlN5qb151';
+        else if (props.labelPosition === "top") rules += ' DM8Mfn151';
     }
-    if (props.labelPosition === "side") rules += ' EPlN5qb131';
-    else if (props.labelPosition === "top") rules += ' E4w1sLc131';
-    if (props.labelPosition === "side") rules += ' CbRM95c131';
-    else if (props.labelPosition === "top") rules += ' Cxaocre131';
+    if (props.labelPosition === "side") rules += ' EPlN5qb151';
+    else if (props.labelPosition === "top") rules += ' E4w1sLc151';
+    if (props.labelPosition === "side") rules += ' CbRM95c151';
+    else if (props.labelPosition === "top") rules += ' Cxaocre151';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-e151';
+        rules += ' vx151';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-d151';
+        rules += ' vx151';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-b151';
+        rules += ' vx151';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-a151';
+        rules += ' vx151';
     } else {
-        rules += ' -_6BNtrc-c131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-c151';
+        rules += ' vx151';
     }
-    rules += ' ea131';
-    rules += ' _Fd131';
-    rules += ' _FnuYUweb131';
-    if (props.size === "XL") rules += ' -BhX7R-Fz131';
-    else if (props.size === "L") rules += ' -BhX7R-Fv131';
-    else if (props.size === "S") rules += ' -BhX7R-Fp131';
-    else if (props.size === "XS") rules += ' -BhX7R-Fn131';
-    else rules += ' -BhX7R-Fx131';
-    rules += ' -AJjOLd-UVkF0Db131';
-    rules += ' qg131';
-    rules += ' __ca131';
+    rules += ' ea151';
+    rules += ' _Fd151';
+    rules += ' _FnuYUweb151';
+    if (props.size === "XL") rules += ' -BhX7R-Fz151';
+    else if (props.size === "L") rules += ' -BhX7R-Fv151';
+    else if (props.size === "S") rules += ' -BhX7R-Fp151';
+    else if (props.size === "XS") rules += ' -BhX7R-Fn151';
+    else rules += ' -BhX7R-Fx151';
+    rules += ' -AJjOLd-UVkF0Db151';
+    rules += ' qg151';
+    rules += ' __ca151';
     return rules;
 };
 const $ad3c2d5408b92dda$var$valueStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' zXcEWr131';
-    rules += ' yXcEWr131';
-    rules += ' BXcEWr131';
-    rules += ' AXcEWr131';
-    if (props.size === "XL") rules += ' Nl131';
-    else if (props.size === "L") rules += ' Nj131';
-    else if (props.size === "S") rules += ' Nf131';
-    else if (props.size === "XS") rules += ' Ne131';
-    else rules += ' Nk131';
-    if (props.isQuiet) rules += ' _qd131';
-    else rules += ' _qtb131';
-    if (props.size === "XL") rules += ' -Anxdcc-Zt131';
-    else if (props.size === "L") rules += ' -Anxdcc-ZStdtne131';
-    else if (props.size === "S") rules += ' -Anxdcc-Zr131';
-    else rules += ' -Anxdcc-Z3fn9H131';
-    rules += ' __v6TNLWb131';
+    rules += ' zXcEWr151';
+    rules += ' yXcEWr151';
+    rules += ' BXcEWr151';
+    rules += ' AXcEWr151';
+    if (props.size === "XL") rules += ' Nl151';
+    else if (props.size === "L") rules += ' Nj151';
+    else if (props.size === "S") rules += ' Nf151';
+    else if (props.size === "XS") rules += ' Ne151';
+    else rules += ' Nk151';
+    if (props.isQuiet) rules += ' _qd151';
+    else rules += ' _qtb151';
+    if (props.size === "XL") rules += ' -Anxdcc-Zt151';
+    else if (props.size === "L") rules += ' -Anxdcc-ZStdtne151';
+    else if (props.size === "S") rules += ' -Anxdcc-Zr151';
+    else rules += ' -Anxdcc-Z3fn9H151';
+    rules += ' __v6TNLWb151';
     if (props.isInForm) {
-        if (props.size === "XL") rules += ' Mk131';
-        else if (props.size === "L") rules += ' Mh131';
-        else if (props.size === "S") rules += ' Mg131';
-        else if (props.size === "XS") rules += ' Mf131';
-        else rules += ' Mi131';
+        if (props.size === "XL") rules += ' Mk151';
+        else if (props.size === "L") rules += ' Mh151';
+        else if (props.size === "S") rules += ' Mg151';
+        else if (props.size === "XS") rules += ' Mf151';
+        else rules += ' Mi151';
     }
-    rules += ' sd131';
-    rules += ' eb131';
+    rules += ' sd151';
+    rules += ' eb151';
     if (props.size === "XL") {
-        rules += ' uk131';
-        rules += ' ucJ9TBTb131';
-        rules += ' ud3Euai131';
-        rules += ' uea131';
-        rules += ' ugb131';
-        rules += ' uhd131';
-        rules += ' uje131';
-        rules += ' u2NhKxcl131';
-        rules += ' uic131';
+        rules += ' uk151';
+        rules += ' ucJ9TBTb151';
+        rules += ' ud3Euai151';
+        rules += ' uea151';
+        rules += ' ugb151';
+        rules += ' uhd151';
+        rules += ' uje151';
+        rules += ' u2NhKxcl151';
+        rules += ' uic151';
     } else if (props.size === "L") {
-        rules += ' uk131';
-        rules += ' ucJ9TBTb131';
-        rules += ' ud3Euai131';
-        rules += ' uea131';
-        rules += ' ugb131';
-        rules += ' uhd131';
-        rules += ' uje131';
-        rules += ' u2NhKxcl131';
-        rules += ' uic131';
+        rules += ' uk151';
+        rules += ' ucJ9TBTb151';
+        rules += ' ud3Euai151';
+        rules += ' uea151';
+        rules += ' ugb151';
+        rules += ' uhd151';
+        rules += ' uje151';
+        rules += ' u2NhKxcl151';
+        rules += ' uic151';
     } else if (props.size === "S") {
-        rules += ' uk131';
-        rules += ' ucJ9TBTb131';
-        rules += ' ud3Euai131';
-        rules += ' uea131';
-        rules += ' ugb131';
-        rules += ' uhd131';
-        rules += ' uje131';
-        rules += ' u2NhKxcl131';
-        rules += ' uic131';
+        rules += ' uk151';
+        rules += ' ucJ9TBTb151';
+        rules += ' ud3Euai151';
+        rules += ' uea151';
+        rules += ' ugb151';
+        rules += ' uhd151';
+        rules += ' uje151';
+        rules += ' u2NhKxcl151';
+        rules += ' uic151';
     } else if (props.size === "XS") {
-        rules += ' uk131';
-        rules += ' ucJ9TBTb131';
-        rules += ' ud3Euai131';
-        rules += ' uea131';
-        rules += ' ugb131';
-        rules += ' uhd131';
-        rules += ' uje131';
-        rules += ' u2NhKxcl131';
-        rules += ' uic131';
+        rules += ' uk151';
+        rules += ' ucJ9TBTb151';
+        rules += ' ud3Euai151';
+        rules += ' uea151';
+        rules += ' ugb151';
+        rules += ' uhd151';
+        rules += ' uje151';
+        rules += ' u2NhKxcl151';
+        rules += ' uic151';
     } else {
-        rules += ' uk131';
-        rules += ' ucJ9TBTb131';
-        rules += ' ud3Euai131';
-        rules += ' uea131';
-        rules += ' ugb131';
-        rules += ' uhd131';
-        rules += ' uje131';
-        rules += ' u2NhKxcl131';
-        rules += ' uic131';
+        rules += ' uk151';
+        rules += ' ucJ9TBTb151';
+        rules += ' ud3Euai151';
+        rules += ' uea151';
+        rules += ' ugb151';
+        rules += ' uhd151';
+        rules += ' uje151';
+        rules += ' u2NhKxcl151';
+        rules += ' uic151';
     }
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-e151';
+        rules += ' vx151';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-d151';
+        rules += ' vx151';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-b151';
+        rules += ' vx151';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-a151';
+        rules += ' vx151';
     } else {
-        rules += ' -_6BNtrc-c131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-c151';
+        rules += ' vx151';
     }
     if (props.size === "XL") {
-        rules += ' xb131';
-        rules += ' _xa131';
+        rules += ' xb151';
+        rules += ' _xa151';
     } else if (props.size === "L") {
-        rules += ' xb131';
-        rules += ' _xa131';
+        rules += ' xb151';
+        rules += ' _xa151';
     } else if (props.size === "S") {
-        rules += ' xb131';
-        rules += ' _xa131';
+        rules += ' xb151';
+        rules += ' _xa151';
     } else if (props.size === "XS") {
-        rules += ' xb131';
-        rules += ' _xa131';
+        rules += ' xb151';
+        rules += ' _xa151';
     } else {
-        rules += ' xb131';
-        rules += ' _xa131';
+        rules += ' xb151';
+        rules += ' _xa151';
     }
     if (props.size === "XL") {
-        rules += ' _Fd131';
-        rules += ' _FnuYUweb131';
+        rules += ' _Fd151';
+        rules += ' _FnuYUweb151';
     } else if (props.size === "L") {
-        rules += ' _Fd131';
-        rules += ' _FnuYUweb131';
+        rules += ' _Fd151';
+        rules += ' _FnuYUweb151';
     } else if (props.size === "S") {
-        rules += ' _Fd131';
-        rules += ' _FnuYUweb131';
+        rules += ' _Fd151';
+        rules += ' _FnuYUweb151';
     } else if (props.size === "XS") {
-        rules += ' _Fd131';
-        rules += ' _FnuYUweb131';
+        rules += ' _Fd151';
+        rules += ' _FnuYUweb151';
     } else {
-        rules += ' _Fd131';
-        rules += ' _FnuYUweb131';
+        rules += ' _Fd151';
+        rules += ' _FnuYUweb151';
     }
-    if (props.size === "XL") rules += ' pt131';
-    else if (props.size === "L") rules += ' pt131';
-    else if (props.size === "S") rules += ' pt131';
-    else if (props.size === "XS") rules += ' pt131';
-    else rules += ' pt131';
+    if (props.size === "XL") rules += ' pt151';
+    else if (props.size === "L") rules += ' pt151';
+    else if (props.size === "S") rules += ' pt151';
+    else if (props.size === "XS") rules += ' pt151';
+    else rules += ' pt151';
     return rules;
 };
 const $ad3c2d5408b92dda$export$d1328f67a56fa517 = /*#__PURE__*/ (0, $cDYdk$react.forwardRef)(function LabeledValue(props, ref) {