@react-spectrum/s2 0.2.1-nightly.4979

package/dist/IllustratedMessage.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAmCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;AAUC,MAAM,0DAA4B,CAAA,GAAA,oBAAY,EAAyC;AAE9F,SAAS,yCAAmB,KAAwC,EAAE,GAA2B;IAC/F,IAAI,YACF,QAAQ,eACR,cAAc,oBACd,OAAO,uBACP,mBAAmB,kBACnB,YAAY,EACZ,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,eAAe,CAAC,CAAC;IACrB,IAAI,eAAe,MAAM,IAAI,YAAY,GAAG;IAE5C,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC9B,OAAO;QACP,WAAW,mBAAmB,yCAAmB;YAC/C,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;QACpC,GAAG,MAAM,MAAM;QACf,KAAK;kBACL,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,WAAW,8BAAQ;yCAAC;kCAAa;wBAAI;oBAAE;iBAAE;gBAC3D;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,WAAW,8BAAQ;kCAAC;wBAAI;oBAAE;iBAAE;gBAC9C;oBAAC,CAAA,GAAA,yCAAkB;oBAAG;wBAAC,WAAW,mCAAa;yCAAC;kCAAa;0CAAM;0CAAc;wBAAY;oBAAE;iBAAE;gBACjG;oBAAC,CAAA,GAAA,yCAAiB;oBAAG;wBAAC,QAAQ;oBAAW;iBAAE;aAC5C;sBACA;;;AAIT;AAEA;;;CAGC,GACD,IAAI,4CAAsB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/IllustratedMessage.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {ButtonGroupContext} from './ButtonGroup';\nimport {ContentContext, HeadingContext} from './Content';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Illustration';\nimport {Provider} from 'react-aria-components';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface IllustratedMessageStyleProps {\n  /**\n   * The size of the IllustratedMessage.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * The direction that the IllustratedMessage should be laid out in.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\ninterface S2SpectrumIllustratedMessageProps extends DOMProps, UnsafeStyles, IllustratedMessageStyleProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the IllustratedMessage. */\n  children: ReactNode\n}\n\nconst illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?: boolean}>({\n  display: 'grid',\n  fontFamily: 'sans',\n  fontSize: 'control',\n  maxWidth: {\n    orientation: {\n      vertical: '[380px]',\n      horizontal: '[33rem]' // ask design about max width for horizontal because doesn't look great when L\n    }\n  },\n  gridTemplateAreas: {\n    orientation: {\n      vertical: [\n        '   .  illustration .   ',\n        '   .       .       .   ',\n        'heading heading heading',\n        '   .       .       .   ',\n        'content content content',\n        '   .  buttonGroup  .   '\n      ],\n      horizontal: [\n        'illustration . heading',\n        'illustration .    .   ',\n        'illustration . content',\n        'illustration . buttonGroup'\n      ]\n    }\n  },\n  gridTemplateRows: {\n    orientation: {\n      vertical: {\n        default: ['min-content', 12, 'min-content', 4, 'min-content', 'min-content'],\n        size: {\n          L: ['min-content', 8, 'min-content', 4, 'min-content', 'min-content']\n        }\n      },\n      horizontal: ['1fr', 4, '1fr']\n    }\n  },\n  gridTemplateColumns: {\n    orientation: {\n      horizontal: ['1fr', 12, 'auto']\n    }\n  },\n  justifyItems: {\n    orientation: {\n      vertical: 'center',\n      horizontal: 'start'\n    }\n  },\n  textAlign: {\n    orientation: {\n      vertical: 'center'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\nconst illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolean, isDropTarget?: boolean}>({\n  gridArea: 'illustration',\n  size: {\n    size: {\n      S: 96,\n      M: 96,\n      L: 160\n    }\n  },\n  alignSelf: 'center',\n  color: {\n    // TODO: ask design about what the color should be. Says gray-800 in the designs file, neutral in token spec, but different neutral in dropzone spec\n    default: 'gray-800',\n    isInDropZone: 'gray-500', // neutral doesn't seem to match the color in designs, opted for gray-500 instead\n    isDropTarget: 'accent'\n  }\n});\n\nconst heading = style<IllustratedMessageStyleProps>({\n  gridArea: 'heading',\n  font: {\n    size: {\n      S: 'title',\n      M: 'title-xl',\n      L: 'title-2xl'\n    }\n  },\n  alignSelf: 'end',\n  margin: 0\n});\n\nconst content = style({\n  font: {\n    size: {\n      S: 'body-xs',\n      M: 'body-sm',\n      L: 'body-sm'\n    }\n  },\n  gridArea: 'content',\n  alignSelf: 'start'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttonGroup',\n  marginTop: 16\n});\n\ninterface IllustratedMessageContextProps extends Omit<S2SpectrumIllustratedMessageProps, 'children'> {\n  isInDropZone?: boolean,\n  isDropTarget?: boolean\n}\n\nexport const IllustratedMessageContext = createContext<IllustratedMessageContextProps | null>(null);\n\nfunction IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    children,\n    orientation = 'horizontal',\n    size = 'M',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...otherProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n\n  let ctx = useContext(IllustratedMessageContext);\n  let isInDropZone = !!ctx;\n  let isDropTarget = ctx ? ctx.isDropTarget : false;\n\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      style={UNSAFE_style}\n      className={UNSAFE_className + illustratedMessage({\n        size: props.size || 'M',\n        orientation: props.orientation || 'vertical'\n      }, props.styles)}\n      ref={domRef}>\n      <Provider\n        values={[\n          [HeadingContext, {className: heading({orientation, size})}],\n          [ContentContext, {className: content({size})}],\n          [IllustrationContext, {className: illustration({orientation, size, isInDropZone, isDropTarget})}],\n          [ButtonGroupContext, {styles: buttonGroup}]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n}\n\n/**\n * An IllustratedMessage displays an illustration and a message, usually\n * for an empty state or an error page.\n */\nlet _IllustratedMessage = /*#__PURE__*/ forwardRef(IllustratedMessage);\nexport {_IllustratedMessage as IllustratedMessage};\n"],"names":[],"version":3,"file":"IllustratedMessage.mjs.map"}

package/dist/Illustration.cjs

@@ -0,0 +1,43 @@
+var $b9zDQ$react = require("react");
+var $b9zDQ$reactariacomponents = require("react-aria-components");
+var $b9zDQ$reactariautils = require("@react-aria/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "IllustrationContext", () => $79f6320f04a30534$export$207c7561471de4bd);
+$parcel$export(module.exports, "Illustration", () => $79f6320f04a30534$export$d43c2e2ca9b2c105);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+const $79f6320f04a30534$export$207c7561471de4bd = /*#__PURE__*/ (0, $b9zDQ$react.createContext)({});
+function $79f6320f04a30534$export$d43c2e2ca9b2c105(props) {
+    [props] = (0, $b9zDQ$reactariacomponents.useContextProps)(props, null, $79f6320f04a30534$export$207c7561471de4bd);
+    let { children: children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-hidden': ariaHidden, ...otherProps } = props;
+    let hasLabel = ariaLabel || ariaLabelledby;
+    if (!ariaHidden) ariaHidden = undefined;
+    return /*#__PURE__*/ (0, $b9zDQ$react.cloneElement)(children, {
+        ...(0, $b9zDQ$reactariautils.filterDOMProps)(otherProps),
+        focusable: 'false',
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-hidden': ariaHidden,
+        role: hasLabel ? 'img' : undefined,
+        ...props
+    });
+}
+
+
+//# sourceMappingURL=Illustration.cjs.map

package/dist/Illustration.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AA2BM,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAA6E,CAAC;AAEtH,SAAS,0CAAa,KAAwB;IACnD,CAAC,MAAM,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,MAAM;IAEvC,IAAI,YACF,QAAQ,EACR,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,eAAe,UAAU,EACzB,GAAG,YACJ,GAAG;IAEJ,IAAI,WAAW,aAAa;IAE5B,IAAI,CAAC,YACH,aAAa;IAGf,qBAAO,CAAA,GAAA,yBAAW,EAAE,UAAU;QAC5B,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;QAC7B,WAAW;QACX,cAAc;QACd,mBAAmB;QACnB,eAAe;QACf,MAAM,WAAW,QAAQ;QACzB,GAAG,KAAK;IACV;AACF","sources":["packages/@react-spectrum/s2/src/Illustration.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {AriaLabelingProps, DOMProps} from '@react-types/shared';\nimport {cloneElement, createContext, ReactElement, SVGAttributes} from 'react';\nimport {ContextValue, useContextProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\n\nexport interface IllustrationProps extends DOMProps, AriaLabelingProps {\n  /**\n   * A screen reader only label for the Illustration.\n   */\n  'aria-label'?: string,\n  /**\n   * The content to display. Should be an SVG.\n   */\n  children: ReactElement<any>,\n  /**\n   * A slot to place the illustration in.\n   * @default 'illustration'\n   */\n  slot?: string,\n  /**\n   * Indicates whether the element is exposed to an accessibility API.\n   */\n  'aria-hidden'?: boolean | 'false' | 'true'\n}\n\nexport const IllustrationContext = createContext<ContextValue<SVGAttributes<HTMLOrSVGImageElement>, HTMLOrSVGImageElement>>({});\n\nexport function Illustration(props: IllustrationProps) {\n  [props] = useContextProps(props, null, IllustrationContext);\n\n  let {\n    children,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-hidden': ariaHidden,\n    ...otherProps\n  } = props;\n\n  let hasLabel = ariaLabel || ariaLabelledby;\n\n  if (!ariaHidden) {\n    ariaHidden = undefined;\n  }\n\n  return cloneElement(children, {\n    ...filterDOMProps(otherProps),\n    focusable: 'false',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-hidden': ariaHidden,\n    role: hasLabel ? 'img' : undefined,\n    ...props\n  });\n}\n"],"names":[],"version":3,"file":"Illustration.cjs.map"}

package/dist/Illustration.mjs

@@ -0,0 +1,37 @@
+import {createContext as $kurqk$createContext, cloneElement as $kurqk$cloneElement} from "react";
+import {useContextProps as $kurqk$useContextProps} from "react-aria-components";
+import {filterDOMProps as $kurqk$filterDOMProps} from "@react-aria/utils";
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+const $a6a2be19a912add5$export$207c7561471de4bd = /*#__PURE__*/ (0, $kurqk$createContext)({});
+function $a6a2be19a912add5$export$d43c2e2ca9b2c105(props) {
+    [props] = (0, $kurqk$useContextProps)(props, null, $a6a2be19a912add5$export$207c7561471de4bd);
+    let { children: children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-hidden': ariaHidden, ...otherProps } = props;
+    let hasLabel = ariaLabel || ariaLabelledby;
+    if (!ariaHidden) ariaHidden = undefined;
+    return /*#__PURE__*/ (0, $kurqk$cloneElement)(children, {
+        ...(0, $kurqk$filterDOMProps)(otherProps),
+        focusable: 'false',
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-hidden': ariaHidden,
+        role: hasLabel ? 'img' : undefined,
+        ...props
+    });
+}
+
+
+export {$a6a2be19a912add5$export$207c7561471de4bd as IllustrationContext, $a6a2be19a912add5$export$d43c2e2ca9b2c105 as Illustration};
+//# sourceMappingURL=Illustration.mjs.map

package/dist/Illustration.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AA2BM,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAA6E,CAAC;AAEtH,SAAS,0CAAa,KAAwB;IACnD,CAAC,MAAM,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,MAAM;IAEvC,IAAI,YACF,QAAQ,EACR,cAAc,SAAS,EACvB,mBAAmB,cAAc,EACjC,eAAe,UAAU,EACzB,GAAG,YACJ,GAAG;IAEJ,IAAI,WAAW,aAAa;IAE5B,IAAI,CAAC,YACH,aAAa;IAGf,qBAAO,CAAA,GAAA,mBAAW,EAAE,UAAU;QAC5B,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC7B,WAAW;QACX,cAAc;QACd,mBAAmB;QACnB,eAAe;QACf,MAAM,WAAW,QAAQ;QACzB,GAAG,KAAK;IACV;AACF","sources":["packages/@react-spectrum/s2/src/Illustration.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {AriaLabelingProps, DOMProps} from '@react-types/shared';\nimport {cloneElement, createContext, ReactElement, SVGAttributes} from 'react';\nimport {ContextValue, useContextProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\n\nexport interface IllustrationProps extends DOMProps, AriaLabelingProps {\n  /**\n   * A screen reader only label for the Illustration.\n   */\n  'aria-label'?: string,\n  /**\n   * The content to display. Should be an SVG.\n   */\n  children: ReactElement<any>,\n  /**\n   * A slot to place the illustration in.\n   * @default 'illustration'\n   */\n  slot?: string,\n  /**\n   * Indicates whether the element is exposed to an accessibility API.\n   */\n  'aria-hidden'?: boolean | 'false' | 'true'\n}\n\nexport const IllustrationContext = createContext<ContextValue<SVGAttributes<HTMLOrSVGImageElement>, HTMLOrSVGImageElement>>({});\n\nexport function Illustration(props: IllustrationProps) {\n  [props] = useContextProps(props, null, IllustrationContext);\n\n  let {\n    children,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-hidden': ariaHidden,\n    ...otherProps\n  } = props;\n\n  let hasLabel = ariaLabel || ariaLabelledby;\n\n  if (!ariaHidden) {\n    ariaHidden = undefined;\n  }\n\n  return cloneElement(children, {\n    ...filterDOMProps(otherProps),\n    focusable: 'false',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-hidden': ariaHidden,\n    role: hasLabel ? 'img' : undefined,\n    ...props\n  });\n}\n"],"names":[],"version":3,"file":"Illustration.mjs.map"}

package/dist/InlineAlert.cjs

@@ -0,0 +1,289 @@
+require("./InlineAlert.css");
+var $7e7cdbd2b8ae2467$exports = require("../icons/AlertTriangle.cjs");
+var $6391be254c189366$exports = require("../icons/CheckmarkCircle.cjs");
+var $6367bc87eb7d24ad$exports = require("./Content.cjs");
+var $bde97c91243ed164$exports = require("../icons/Icon.cjs");
+var $0ed6e07b499b9797$exports = require("../icons/InfoCircle.cjs");
+var $e861f394b642505b$exports = require("../icons/AlertDiamond.cjs");
+var $3stts$reactjsxruntime = require("react/jsx-runtime");
+var $3stts$react = require("react");
+var $3stts$reactariautils = require("@react-aria/utils");
+var $3stts$reactariacomponents = require("react-aria-components");
+var $3stts$reactspectrumutils = require("@react-spectrum/utils");
+var $3stts$reactaria = require("react-aria");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "InlineAlert", () => $72bf3a9f94a75d9f$export$a3b2c96db9b0eb71);
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+const $72bf3a9f94a75d9f$var$inlineAlert = function anonymous(props, overrides) {
+    let rules = " .";
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|l|q|r|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W)[^\s]+/g) || [];
+    rules += matches.join('');
+    let $U = false;
+    let $r = false;
+    for (let p of matches){
+        if (/^\s*U/.test(p)) $U = true;
+        if (/^\s*r/.test(p)) $r = true;
+    }
+    if (props.isFocusVisible) rules += ' _Lb';
+    else rules += ' _La';
+    rules += ' da_____z';
+    rules += ' dx';
+    rules += ' _Nc';
+    rules += ' _M-3t1z';
+    rules += ' _Zb';
+    if (!$U) rules += ' Uc';
+    rules += ' __na';
+    if (!$r) {
+        rules += ' rbY';
+        rules += ' rV';
+    }
+    rules += ' Eg';
+    rules += ' Fg';
+    rules += ' Cg';
+    rules += ' Dg';
+    rules += ' _vd';
+    rules += ' _wd';
+    rules += ' _xd';
+    rules += ' _yd';
+    rules += ' wa';
+    rules += ' uc';
+    rules += ' vc';
+    rules += ' sc';
+    rules += ' tc';
+    if (props.fillStyle === "boldFill") rules += ' ca';
+    else if (props.fillStyle === "subtleFill") rules += ' ca';
+    else if (props.fillStyle === "border") {
+        if (props.variant === "neutral") rules += ' cm';
+        else if (props.variant === "negative") rules += ' cN';
+        else if (props.variant === "notice") rules += ' c2';
+        else if (props.variant === "positive") rules += ' c_4';
+        else if (props.variant === "informative") rules += ' cx';
+    }
+    if (props.variant === "neutral") {
+        if (props.fillStyle === "boldFill") {
+            if (props.isPressed) rules += ' b_____H';
+            else if (props.isFocusVisible) rules += ' b_____H';
+            else if (props.isHovered) rules += ' b_____H';
+            else rules += ' b_____G';
+        } else if (props.fillStyle === "subtleFill") rules += ' bg';
+        else if (props.fillStyle === "border") rules += ' bd';
+    } else if (props.variant === "negative") {
+        if (props.fillStyle === "boldFill") {
+            if (props.isPressed) rules += ' b_____J';
+            else if (props.isFocusVisible) rules += ' b_____J';
+            else if (props.isHovered) rules += ' b_____J';
+            else rules += ' b_____I';
+        } else if (props.fillStyle === "subtleFill") rules += ' bH';
+        else if (props.fillStyle === "border") rules += ' bd';
+    } else if (props.variant === "notice") {
+        if (props.fillStyle === "boldFill") rules += ' b_____M';
+        else if (props.fillStyle === "subtleFill") rules += ' bX';
+        else if (props.fillStyle === "border") rules += ' bd';
+    } else if (props.variant === "positive") {
+        if (props.fillStyle === "boldFill") {
+            if (props.isPressed) rules += ' b_____L';
+            else if (props.isFocusVisible) rules += ' b_____L';
+            else if (props.isHovered) rules += ' b_____L';
+            else rules += ' b_____K';
+        } else if (props.fillStyle === "subtleFill") rules += ' b_Z';
+        else if (props.fillStyle === "border") rules += ' bd';
+    } else if (props.variant === "informative") {
+        if (props.fillStyle === "boldFill") {
+            if (props.isPressed) rules += ' b_____F';
+            else if (props.isFocusVisible) rules += ' b_____F';
+            else if (props.isHovered) rules += ' b_____F';
+            else rules += ' b_____E';
+        } else if (props.fillStyle === "subtleFill") rules += ' br';
+        else if (props.fillStyle === "border") rules += ' bd';
+    }
+    return rules;
+};
+const $72bf3a9f94a75d9f$var$icon = function anonymous(props) {
+    let rules = " .";
+    rules += ' __a-ykjmzy';
+    rules += ' __b-ykjmzy';
+    rules += ' __c-ykjmzy';
+    rules += ' __d-ykjmzy';
+    if (props.fillStyle === "boldFill") {
+        if (props.variant === "notice") rules += ' -rwx0fg_e-w';
+        else rules += ' -rwx0fg_e-x';
+    } else if (props.fillStyle === "subtleFill") {
+        if (props.variant === "neutral") rules += ' -rwx0fg_e-d';
+        else if (props.variant === "negative") rules += ' -rwx0fg_e-e';
+        else if (props.variant === "notice") rules += ' -rwx0fg_e-e';
+        else if (props.variant === "positive") rules += ' -rwx0fg_e-f';
+        else if (props.variant === "informative") rules += ' -rwx0fg_e-c';
+    } else if (props.fillStyle === "border") {
+        if (props.variant === "neutral") rules += ' -rwx0fg_e-d';
+        else if (props.variant === "negative") rules += ' -rwx0fg_e-e';
+        else if (props.variant === "notice") rules += ' -rwx0fg_e-g';
+        else if (props.variant === "positive") rules += ' -rwx0fg_e-f';
+        else if (props.variant === "informative") rules += ' -rwx0fg_e-c';
+    }
+    return rules;
+};
+const $72bf3a9f94a75d9f$var$grid = " . _Zf jg __h-u2tns7 __i-ld1isw l2 __j-11zp5n8";
+let $72bf3a9f94a75d9f$var$ICONS = {
+    informative: (0, $0ed6e07b499b9797$exports.default),
+    positive: (0, $6391be254c189366$exports.default),
+    notice: (0, $e861f394b642505b$exports.default),
+    negative: (0, $7e7cdbd2b8ae2467$exports.default),
+    neutral: undefined
+};
+const $72bf3a9f94a75d9f$var$heading = function anonymous(props) {
+    let rules = " .";
+    rules += ' Aa';
+    rules += ' __a-go5hed';
+    rules += ' __b-go5hed';
+    rules += ' __c-go5hed';
+    rules += ' __d-go5hed';
+    rules += ' _c-bc1l9oh';
+    rules += ' _c-1uotwbwg';
+    rules += ' _c-eo0c6sf';
+    rules += ' _c-enzzrge';
+    rules += ' _c-enzykdd';
+    rules += ' _c-enzwzjc';
+    rules += ' _c-enzrfpb';
+    rules += ' _ca';
+    rules += ' _dbf';
+    rules += ' _de';
+    rules += ' _e-1x99dlod';
+    rules += ' _ed';
+    rules += ' _f-1x99dlob';
+    rules += ' _fa';
+    if (props.fillStyle === "boldFill") {
+        if (props.variant === "notice") rules += ' ab';
+        else rules += ' ac';
+    } else rules += ' ao';
+    return rules;
+};
+const $72bf3a9f94a75d9f$var$content = function anonymous(props) {
+    let rules = " .";
+    rules += ' __a-1mod4sg';
+    rules += ' __b-1mod4sg';
+    rules += ' __c-1mod4sg';
+    rules += ' __d-1mod4sg';
+    rules += ' _c-bc1l9oh';
+    rules += ' _c-1uotwbwg';
+    rules += ' _c-eo0c6sf';
+    rules += ' _c-enzzrge';
+    rules += ' _c-enzykdd';
+    rules += ' _c-enzwzjc';
+    rules += ' _c-enzrfpb';
+    rules += ' _ca';
+    rules += ' _dbf';
+    rules += ' _de';
+    rules += ' _eb';
+    rules += ' _f-1x99dloc';
+    rules += ' _fb';
+    if (props.fillStyle === "boldFill") {
+        if (props.variant === "notice") rules += ' ab';
+        else rules += ' ac';
+    } else rules += ' an';
+    return rules;
+};
+function $72bf3a9f94a75d9f$var$InlineAlert(props, ref) {
+    let { children: children, variant: variant = 'neutral', fillStyle: fillStyle = 'border', autoFocus: autoFocus } = props;
+    let domRef = (0, $3stts$reactspectrumutils.useDOMRef)(ref);
+    let Icon = null;
+    let iconAlt = '';
+    if (variant in $72bf3a9f94a75d9f$var$ICONS) {
+        Icon = $72bf3a9f94a75d9f$var$ICONS[variant];
+        iconAlt = variant;
+    }
+    let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $3stts$reactaria.useFocusRing)({
+        autoFocus: props.autoFocus
+    });
+    let autoFocusRef = (0, $3stts$react.useRef)(props.autoFocus);
+    (0, $3stts$react.useEffect)(()=>{
+        if (autoFocusRef.current && domRef.current) domRef.current.focus();
+        autoFocusRef.current = false;
+    }, [
+        domRef
+    ]);
+    return /*#__PURE__*/ (0, $3stts$reactjsxruntime.jsx)("div", {
+        ...(0, $3stts$reactariautils.filterDOMProps)(props),
+        ...focusProps,
+        ref: domRef,
+        tabIndex: autoFocus ? -1 : undefined,
+        autoFocus: autoFocus,
+        role: "alert",
+        style: props.UNSAFE_style,
+        className: (props.UNSAFE_className || '') + $72bf3a9f94a75d9f$var$inlineAlert({
+            variant: variant,
+            fillStyle: fillStyle,
+            isFocusVisible: isFocusVisible
+        }, props.styles),
+        children: /*#__PURE__*/ (0, $3stts$reactjsxruntime.jsx)("div", {
+            className: $72bf3a9f94a75d9f$var$grid,
+            children: /*#__PURE__*/ (0, $3stts$reactjsxruntime.jsxs)((0, $3stts$reactariacomponents.Provider), {
+                values: [
+                    [
+                        (0, $6367bc87eb7d24ad$exports.HeadingContext),
+                        {
+                            className: $72bf3a9f94a75d9f$var$heading({
+                                fillStyle: fillStyle
+                            })
+                        }
+                    ],
+                    [
+                        (0, $6367bc87eb7d24ad$exports.ContentContext),
+                        {
+                            className: $72bf3a9f94a75d9f$var$content({
+                                fillStyle: fillStyle
+                            })
+                        }
+                    ],
+                    [
+                        (0, $bde97c91243ed164$exports.IconContext),
+                        {
+                            styles: $72bf3a9f94a75d9f$var$icon({
+                                variant: variant,
+                                fillStyle: fillStyle
+                            })
+                        }
+                    ]
+                ],
+                children: [
+                    Icon && /*#__PURE__*/ (0, $3stts$reactjsxruntime.jsx)(Icon, {
+                        "aria-label": iconAlt
+                    }),
+                    children
+                ]
+            })
+        })
+    });
+}
+/**
+ * Inline alerts display a non-modal message associated with objects in a view.
+ * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
+ */ const $72bf3a9f94a75d9f$export$a3b2c96db9b0eb71 = /*#__PURE__*/ (0, $3stts$react.forwardRef)($72bf3a9f94a75d9f$var$InlineAlert);
+
+
+//# sourceMappingURL=InlineAlert.cjs.map

package/dist/InlineAlert.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AAyCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAmCN,MAAM;AAYN,IAAI,8BAAQ;IACV,aAAa,CAAA,GAAA,iCAAS;IACtB,UAAU,CAAA,GAAA,iCAAc;IACxB,QAAQ,CAAA,GAAA,iCAAW;IACnB,UAAU,CAAA,GAAA,iCAAY;IACtB,SAAS;AACX;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,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,UAAU;IACZ;IAEA,IAAI,kBAAC,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,6BAAW,EAAE;QAAC,WAAW,MAAM,SAAS;IAAA;IAC3E,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAE,MAAM,SAAS;IACzC,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,aAAa,OAAO,IAAI,OAAO,OAAO,EACxC,OAAO,OAAO,CAAC,KAAK;QAEtB,aAAa,OAAO,GAAG;IACzB,GAAG;QAAC;KAAO;IAEX,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,MAAM;QACxB,GAAG,UAAU;QACd,KAAK;QACL,UAAU,YAAY,KAAK;QAC3B,WAAW;QACX,MAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;qBACtD;uBACA;4BACA;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC;YACC,WAAW;sBACX,cAAA,iCAAC,CAAA,GAAA,mCAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,wCAAa;wBAAG;4BAAC,WAAW,8BAAQ;2CAAC;4BAAS;wBAAE;qBAAE;oBACnD;wBAAC,CAAA,GAAA,wCAAa;wBAAG;4BAAC,WAAW,8BAAQ;2CAAC;4BAAS;wBAAE;qBAAE;oBACnD;wBAAC,CAAA,GAAA,qCAAU;wBAAG;4BAAC,QAAQ,2BAAK;yCAAC;2CAAS;4BAAS;wBAAE;qBAAE;iBACpD;;oBACA,sBAAQ,gCAAC;wBAAK,cAAY;;oBAC1B;;;;;AAKX;AAEA;;;CAGC,GACD,MAAM,4CAAe,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","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, forwardRef, ReactNode, useEffect, useRef} from 'react';\nimport {ContentContext, HeadingContext} from './Content';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {Provider} from 'react-aria-components';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useFocusRing} from 'react-aria';\n\nexport interface InlineAlertProps extends DOMProps, StyleProps, InlineStylesProps {\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\nconst inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({\n  ...focusRing(),\n  display: 'inline-block',\n  position: 'relative',\n  boxSizing: 'border-box',\n  maxWidth: 320,\n  padding: 24,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    fillStyle: {\n      border: {\n        variant: {\n          informative: 'informative-800',\n          positive: 'positive-700',\n          notice: 'notice-700',\n          negative: 'negative-800',\n          neutral: 'gray-700' // is there a semantic color name for neutral?\n        }\n      },\n      subtleFill: 'transparent',\n      boldFill: 'transparent'\n    }\n  },\n  backgroundColor: {\n    variant: {\n      informative: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'informative-subtle',\n          boldFill: 'informative'\n        }\n      },\n      positive: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'positive-subtle',\n          boldFill: 'positive'\n        }\n      },\n      notice: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'notice-subtle',\n          boldFill: 'notice'\n        }\n      },\n      negative: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'negative-subtle',\n          boldFill: 'negative'\n        }\n      },\n      neutral: {\n        fillStyle: {\n          border: 'gray-25',\n          subtleFill: 'neutral-subtle',\n          boldFill: 'neutral-subdued'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nconst icon = style<InlineStylesProps>({\n  gridArea: 'icon',\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      fillStyle: {\n        border: {\n          variant: {\n            informative: 'informative',\n            positive: 'positive',\n            notice: 'notice',\n            negative: 'negative',\n            neutral: 'neutral'\n          }\n        },\n        subtleFill: {\n          variant: {\n            informative: 'informative',\n            positive: 'positive',\n            notice: 'negative',\n            negative: 'negative',\n            neutral: 'neutral'\n          }\n        },\n        boldFill: {\n          default: 'white',\n          variant: {\n            notice: 'black'\n          }\n        }\n      }\n    }\n  }\n});\n\nconst grid = style({\n  display: 'grid',\n  columnGap: 24,\n  gridTemplateColumns: '1fr auto',\n  gridTemplateRows: 'auto auto auto',\n  width: 'full',\n  gridTemplateAreas: [\n    'heading icon',\n    'content content'\n  ]\n});\n\nlet ICONS = {\n  informative: InfoCircle,\n  positive: CheckmarkCircle,\n  notice: NoticeSquare,\n  negative: AlertTriangle,\n  neutral: undefined\n};\n\nconst heading = style({\n  marginTop: 0,\n  gridArea: 'heading',\n  font: 'title-sm',\n  color: {\n    default: 'title',\n    fillStyle: {\n      boldFill: {\n        default: 'white',\n        variant: {\n          notice: 'black'\n        }\n      }\n    }\n  }\n});\n\nconst content = style({\n  gridArea: 'content',\n  font: 'body-sm',\n  color: {\n    default: 'body',\n    fillStyle: {\n      boldFill: {\n        default: 'white',\n        variant: {\n          notice: 'black'\n        }\n      }\n    }\n  }\n});\n\nfunction InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {\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    iconAlt = variant;\n  }\n\n  let {isFocusVisible, focusProps} = useFocusRing({autoFocus: props.autoFocus});\n  let autoFocusRef = useRef(props.autoFocus);\n  useEffect(() => {\n    if (autoFocusRef.current && domRef.current) {\n      domRef.current.focus();\n    }\n    autoFocusRef.current = false;\n  }, [domRef]);\n\n  return (\n    <div\n      {...filterDOMProps(props)}\n      {...focusProps}\n      ref={domRef}\n      tabIndex={autoFocus ? -1 : undefined}\n      autoFocus={autoFocus}\n      role=\"alert\"\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + inlineAlert({\n        variant,\n        fillStyle,\n        isFocusVisible\n      }, props.styles)}>\n      <div\n        className={grid}>\n        <Provider\n          values={[\n            [HeadingContext, {className: heading({fillStyle})}],\n            [ContentContext, {className: content({fillStyle})}],\n            [IconContext, {styles: icon({variant, fillStyle})}]\n          ]}>\n          {Icon && <Icon aria-label={iconAlt} />}\n          {children}\n        </Provider>\n      </div>\n    </div>\n  );\n}\n\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 */\nconst _InlineAlert = /*#__PURE__*/ forwardRef(InlineAlert);\nexport {_InlineAlert as InlineAlert};\n"],"names":[],"version":3,"file":"InlineAlert.cjs.map"}