@react-spectrum/label 3.16.5-nightly.4555 → 3.16.5-nightly.4560

package/dist/Field.main.js

@@ -0,0 +1,118 @@
+var $2d1b5114e5b358b6$exports = require("./HelpText.main.js");
+var $38a9afbd39356629$exports = require("./Label.main.js");
+require("./vars.d58685ae.css");
+var $eb2fc0ee655eff6b$exports = require("./fieldlabel_vars_css.main.js");
+var $bW4vJ$reactspectrumutils = require("@react-spectrum/utils");
+var $bW4vJ$reactspectrumlayout = require("@react-spectrum/layout");
+var $bW4vJ$reactariautils = require("@react-aria/utils");
+var $bW4vJ$react = require("react");
+var $bW4vJ$reactspectrumform = require("@react-spectrum/form");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "Field", () => $0e5410371a445d59$export$a455218a85c89869);
+/*
+ * Copyright 2020 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.
+ */ 
+
+
+
+
+
+
+
+function $0e5410371a445d59$var$Field(props, ref) {
+    let formProps = (0, $bW4vJ$reactspectrumform.useFormProps)(props);
+    let isInForm = formProps !== props;
+    props = formProps;
+    let { label: label, labelPosition: labelPosition = "top", labelAlign: labelAlign, isRequired: isRequired, necessityIndicator: necessityIndicator, includeNecessityIndicatorInAccessibilityName: includeNecessityIndicatorInAccessibilityName, validationState: validationState, isInvalid: isInvalid, description: description, errorMessage: errorMessage = (e)=>e.validationErrors.join(" "), validationErrors: validationErrors, validationDetails: validationDetails, isDisabled: isDisabled, showErrorIcon: showErrorIcon, contextualHelp: contextualHelp, children: children, labelProps: labelProps = {}, descriptionProps: // Not every component that uses <Field> supports help text.
+    descriptionProps = {}, errorMessageProps: errorMessageProps = {}, elementType: elementType, wrapperClassName: wrapperClassName, wrapperProps: wrapperProps = {}, ...otherProps } = props;
+    let { styleProps: styleProps } = (0, $bW4vJ$reactspectrumutils.useStyleProps)(otherProps);
+    let errorMessageString = null;
+    if (typeof errorMessage === "function") errorMessageString = isInvalid != null && validationErrors != null && validationDetails != null ? errorMessage({
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    }) : null;
+    else errorMessageString = errorMessage;
+    let hasHelpText = !!description || errorMessageString && (isInvalid || validationState === "invalid");
+    let contextualHelpId = (0, $bW4vJ$reactariautils.useId)();
+    let fallbackLabelPropsId = (0, $bW4vJ$reactariautils.useId)();
+    if (label && contextualHelp && !labelProps.id) labelProps.id = fallbackLabelPropsId;
+    let labelWrapperClass = (0, $bW4vJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($eb2fc0ee655eff6b$exports))), "spectrum-Field", {
+        "spectrum-Field--positionTop": labelPosition === "top",
+        "spectrum-Field--positionSide": labelPosition === "side",
+        "spectrum-Field--alignEnd": labelAlign === "end",
+        "spectrum-Field--hasContextualHelp": !!props.contextualHelp
+    }, styleProps.className, wrapperClassName);
+    children = /*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).cloneElement(children, (0, $bW4vJ$reactariautils.mergeProps)(children.props, {
+        className: (0, $bW4vJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($eb2fc0ee655eff6b$exports))), "spectrum-Field-field")
+    }));
+    let renderHelpText = ()=>/*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).createElement((0, $2d1b5114e5b358b6$exports.HelpText), {
+            descriptionProps: descriptionProps,
+            errorMessageProps: errorMessageProps,
+            description: description,
+            errorMessage: errorMessageString,
+            validationState: validationState,
+            isInvalid: isInvalid,
+            isDisabled: isDisabled,
+            showErrorIcon: showErrorIcon,
+            gridArea: (0, ($parcel$interopDefault($eb2fc0ee655eff6b$exports))).helpText
+        });
+    let renderChildren = ()=>{
+        if (labelPosition === "side") return /*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).createElement((0, $bW4vJ$reactspectrumlayout.Flex), {
+            direction: "column",
+            UNSAFE_className: (0, $bW4vJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($eb2fc0ee655eff6b$exports))), "spectrum-Field-wrapper")
+        }, children, hasHelpText && renderHelpText());
+        return /*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).createElement((0, ($parcel$interopDefault($bW4vJ$react))).Fragment, null, children, hasHelpText && renderHelpText());
+    };
+    let labelAndContextualHelp = /*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).createElement((0, ($parcel$interopDefault($bW4vJ$react))).Fragment, null, label && /*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).createElement((0, $38a9afbd39356629$exports.Label), {
+        ...labelProps,
+        labelPosition: labelPosition,
+        labelAlign: labelAlign,
+        isRequired: isRequired,
+        necessityIndicator: necessityIndicator,
+        includeNecessityIndicatorInAccessibilityName: includeNecessityIndicatorInAccessibilityName,
+        elementType: elementType
+    }, label), label && contextualHelp && /*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).createElement((0, $bW4vJ$reactspectrumutils.SlotProvider), {
+        slots: {
+            actionButton: {
+                UNSAFE_className: (0, $bW4vJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($eb2fc0ee655eff6b$exports))), "spectrum-Field-contextualHelp"),
+                id: contextualHelpId,
+                "aria-labelledby": (labelProps === null || labelProps === void 0 ? void 0 : labelProps.id) ? `${labelProps.id} ${contextualHelpId}` : undefined
+            }
+        }
+    }, contextualHelp));
+    // Need to add an extra wrapper for the label and contextual help if labelPosition is side,
+    // so that the table layout works inside forms.
+    if (isInForm && labelPosition === "side" && label && contextualHelp) labelAndContextualHelp = /*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).createElement("div", {
+        className: (0, $bW4vJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($eb2fc0ee655eff6b$exports))), "spectrum-Field-labelCell")
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).createElement("div", {
+        className: (0, $bW4vJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($eb2fc0ee655eff6b$exports))), "spectrum-Field-labelWrapper")
+    }, labelAndContextualHelp));
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).createElement("div", {
+        ...styleProps,
+        ...wrapperProps,
+        ref: ref,
+        className: labelWrapperClass
+    }, labelAndContextualHelp, renderChildren());
+}
+let $0e5410371a445d59$export$a455218a85c89869 = /*#__PURE__*/ (0, ($parcel$interopDefault($bW4vJ$react))).forwardRef($0e5410371a445d59$var$Field);
+
+
+//# sourceMappingURL=Field.main.js.map

package/dist/Field.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/label/src/Field.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils';\nimport {Flex} from '@react-spectrum/layout';\nimport {HelpText} from './HelpText';\nimport {Label} from './Label';\nimport {LabelPosition} from '@react-types/shared';\nimport labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport React, {ReactNode, Ref, RefObject} from 'react';\nimport {SpectrumFieldProps} from '@react-types/label';\nimport {useFormProps} from '@react-spectrum/form';\n\nfunction Field(props: SpectrumFieldProps, ref: Ref<HTMLElement>) {\n  let formProps = useFormProps(props);\n  let isInForm = formProps !== props;\n  props = formProps;\n  let {\n    label,\n    labelPosition = 'top' as LabelPosition,\n    labelAlign,\n    isRequired,\n    necessityIndicator,\n    includeNecessityIndicatorInAccessibilityName,\n    validationState,\n    isInvalid,\n    description,\n    errorMessage = e => e.validationErrors.join(' '),\n    validationErrors,\n    validationDetails,\n    isDisabled,\n    showErrorIcon,\n    contextualHelp,\n    children,\n    labelProps = {},\n    // Not every component that uses <Field> supports help text.\n    descriptionProps = {},\n    errorMessageProps = {},\n    elementType,\n    wrapperClassName,\n    wrapperProps = {},\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(otherProps);\n  let errorMessageString: ReactNode = null;\n  if (typeof errorMessage === 'function') {\n    errorMessageString = isInvalid != null && validationErrors != null && validationDetails != null\n      ? errorMessage({\n        isInvalid,\n        validationErrors,\n        validationDetails\n      })\n      : null;\n  } else {\n    errorMessageString = errorMessage;\n  }\n  let hasHelpText = !!description || errorMessageString && (isInvalid || validationState === 'invalid');\n  let contextualHelpId = useId();\n\n  let fallbackLabelPropsId = useId();\n  if (label && contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  let labelWrapperClass = classNames(\n      labelStyles,\n      'spectrum-Field',\n    {\n      'spectrum-Field--positionTop': labelPosition === 'top',\n      'spectrum-Field--positionSide': labelPosition === 'side',\n      'spectrum-Field--alignEnd': labelAlign === 'end',\n      'spectrum-Field--hasContextualHelp': !!props.contextualHelp\n    },\n      styleProps.className,\n      wrapperClassName\n    );\n\n  children = React.cloneElement(children, mergeProps(children.props, {\n    className: classNames(\n        labelStyles,\n        'spectrum-Field-field'\n      )\n  }));\n\n  let renderHelpText = () => (\n    <HelpText\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      description={description}\n      errorMessage={errorMessageString}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      isDisabled={isDisabled}\n      showErrorIcon={showErrorIcon}\n      gridArea={labelStyles.helpText} />\n    );\n\n  let renderChildren = () => {\n    if (labelPosition === 'side') {\n      return (\n        <Flex direction=\"column\" UNSAFE_className={classNames(labelStyles, 'spectrum-Field-wrapper')}>\n          {children}\n          {hasHelpText && renderHelpText()}\n        </Flex>\n      );\n    }\n\n    return (\n      <>\n        {children}\n        {hasHelpText && renderHelpText()}\n      </>\n    );\n  };\n\n  let labelAndContextualHelp = (\n    <>\n      {label && (\n        <Label\n          {...labelProps}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          isRequired={isRequired}\n          necessityIndicator={necessityIndicator}\n          includeNecessityIndicatorInAccessibilityName={includeNecessityIndicatorInAccessibilityName}\n          elementType={elementType}>\n          {label}\n        </Label>\n      )}\n      {label && contextualHelp &&\n        <SlotProvider\n          slots={{\n            actionButton: {\n              UNSAFE_className: classNames(labelStyles, 'spectrum-Field-contextualHelp'),\n              id: contextualHelpId,\n              'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined\n            }\n          }}>\n          {contextualHelp}\n        </SlotProvider>\n      }\n    </>\n    );\n\n    // Need to add an extra wrapper for the label and contextual help if labelPosition is side,\n    // so that the table layout works inside forms.\n  if (isInForm && labelPosition === 'side' && label && contextualHelp) {\n    labelAndContextualHelp = (\n      <div className={classNames(labelStyles, 'spectrum-Field-labelCell')}>\n        <div className={classNames(labelStyles, 'spectrum-Field-labelWrapper')}>\n          {labelAndContextualHelp}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...styleProps}\n      {...wrapperProps}\n      ref={ref as RefObject<HTMLDivElement>}\n      className={labelWrapperClass}>\n      {labelAndContextualHelp}\n      {renderChildren()}\n    </div>\n  );\n}\n\nlet _Field = React.forwardRef(Field);\nexport {_Field as Field};\n"],"names":[],"version":3,"file":"Field.main.js.map"}

package/dist/Field.mjs

@@ -0,0 +1,113 @@
+import {HelpText as $8e50676506611310$export$a67c0bc59081311a} from "./HelpText.mjs";
+import {Label as $00af9ba397a66f43$export$b04be29aa201d4f5} from "./Label.mjs";
+import "./vars.d58685ae.css";
+import $c6ZG4$fieldlabel_vars_cssmodulejs from "./fieldlabel_vars_css.mjs";
+import {useStyleProps as $c6ZG4$useStyleProps, classNames as $c6ZG4$classNames, SlotProvider as $c6ZG4$SlotProvider} from "@react-spectrum/utils";
+import {Flex as $c6ZG4$Flex} from "@react-spectrum/layout";
+import {useId as $c6ZG4$useId, mergeProps as $c6ZG4$mergeProps} from "@react-aria/utils";
+import $c6ZG4$react from "react";
+import {useFormProps as $c6ZG4$useFormProps} from "@react-spectrum/form";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 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.
+ */ 
+
+
+
+
+
+
+
+function $b7ca5b4454a2009d$var$Field(props, ref) {
+    let formProps = (0, $c6ZG4$useFormProps)(props);
+    let isInForm = formProps !== props;
+    props = formProps;
+    let { label: label, labelPosition: labelPosition = "top", labelAlign: labelAlign, isRequired: isRequired, necessityIndicator: necessityIndicator, includeNecessityIndicatorInAccessibilityName: includeNecessityIndicatorInAccessibilityName, validationState: validationState, isInvalid: isInvalid, description: description, errorMessage: errorMessage = (e)=>e.validationErrors.join(" "), validationErrors: validationErrors, validationDetails: validationDetails, isDisabled: isDisabled, showErrorIcon: showErrorIcon, contextualHelp: contextualHelp, children: children, labelProps: labelProps = {}, descriptionProps: // Not every component that uses <Field> supports help text.
+    descriptionProps = {}, errorMessageProps: errorMessageProps = {}, elementType: elementType, wrapperClassName: wrapperClassName, wrapperProps: wrapperProps = {}, ...otherProps } = props;
+    let { styleProps: styleProps } = (0, $c6ZG4$useStyleProps)(otherProps);
+    let errorMessageString = null;
+    if (typeof errorMessage === "function") errorMessageString = isInvalid != null && validationErrors != null && validationDetails != null ? errorMessage({
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    }) : null;
+    else errorMessageString = errorMessage;
+    let hasHelpText = !!description || errorMessageString && (isInvalid || validationState === "invalid");
+    let contextualHelpId = (0, $c6ZG4$useId)();
+    let fallbackLabelPropsId = (0, $c6ZG4$useId)();
+    if (label && contextualHelp && !labelProps.id) labelProps.id = fallbackLabelPropsId;
+    let labelWrapperClass = (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field", {
+        "spectrum-Field--positionTop": labelPosition === "top",
+        "spectrum-Field--positionSide": labelPosition === "side",
+        "spectrum-Field--alignEnd": labelAlign === "end",
+        "spectrum-Field--hasContextualHelp": !!props.contextualHelp
+    }, styleProps.className, wrapperClassName);
+    children = /*#__PURE__*/ (0, $c6ZG4$react).cloneElement(children, (0, $c6ZG4$mergeProps)(children.props, {
+        className: (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field-field")
+    }));
+    let renderHelpText = ()=>/*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $8e50676506611310$export$a67c0bc59081311a), {
+            descriptionProps: descriptionProps,
+            errorMessageProps: errorMessageProps,
+            description: description,
+            errorMessage: errorMessageString,
+            validationState: validationState,
+            isInvalid: isInvalid,
+            isDisabled: isDisabled,
+            showErrorIcon: showErrorIcon,
+            gridArea: (0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))).helpText
+        });
+    let renderChildren = ()=>{
+        if (labelPosition === "side") return /*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $c6ZG4$Flex), {
+            direction: "column",
+            UNSAFE_className: (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field-wrapper")
+        }, children, hasHelpText && renderHelpText());
+        return /*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $c6ZG4$react).Fragment, null, children, hasHelpText && renderHelpText());
+    };
+    let labelAndContextualHelp = /*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $c6ZG4$react).Fragment, null, label && /*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $00af9ba397a66f43$export$b04be29aa201d4f5), {
+        ...labelProps,
+        labelPosition: labelPosition,
+        labelAlign: labelAlign,
+        isRequired: isRequired,
+        necessityIndicator: necessityIndicator,
+        includeNecessityIndicatorInAccessibilityName: includeNecessityIndicatorInAccessibilityName,
+        elementType: elementType
+    }, label), label && contextualHelp && /*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $c6ZG4$SlotProvider), {
+        slots: {
+            actionButton: {
+                UNSAFE_className: (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field-contextualHelp"),
+                id: contextualHelpId,
+                "aria-labelledby": (labelProps === null || labelProps === void 0 ? void 0 : labelProps.id) ? `${labelProps.id} ${contextualHelpId}` : undefined
+            }
+        }
+    }, contextualHelp));
+    // Need to add an extra wrapper for the label and contextual help if labelPosition is side,
+    // so that the table layout works inside forms.
+    if (isInForm && labelPosition === "side" && label && contextualHelp) labelAndContextualHelp = /*#__PURE__*/ (0, $c6ZG4$react).createElement("div", {
+        className: (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field-labelCell")
+    }, /*#__PURE__*/ (0, $c6ZG4$react).createElement("div", {
+        className: (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field-labelWrapper")
+    }, labelAndContextualHelp));
+    return /*#__PURE__*/ (0, $c6ZG4$react).createElement("div", {
+        ...styleProps,
+        ...wrapperProps,
+        ref: ref,
+        className: labelWrapperClass
+    }, labelAndContextualHelp, renderChildren());
+}
+let $b7ca5b4454a2009d$export$a455218a85c89869 = /*#__PURE__*/ (0, $c6ZG4$react).forwardRef($b7ca5b4454a2009d$var$Field);
+
+
+export {$b7ca5b4454a2009d$export$a455218a85c89869 as Field};
+//# sourceMappingURL=Field.mjs.map

package/dist/Field.module.js

@@ -0,0 +1,113 @@
+import {HelpText as $8e50676506611310$export$a67c0bc59081311a} from "./HelpText.module.js";
+import {Label as $00af9ba397a66f43$export$b04be29aa201d4f5} from "./Label.module.js";
+import "./vars.d58685ae.css";
+import $c6ZG4$fieldlabel_vars_cssmodulejs from "./fieldlabel_vars_css.module.js";
+import {useStyleProps as $c6ZG4$useStyleProps, classNames as $c6ZG4$classNames, SlotProvider as $c6ZG4$SlotProvider} from "@react-spectrum/utils";
+import {Flex as $c6ZG4$Flex} from "@react-spectrum/layout";
+import {useId as $c6ZG4$useId, mergeProps as $c6ZG4$mergeProps} from "@react-aria/utils";
+import $c6ZG4$react from "react";
+import {useFormProps as $c6ZG4$useFormProps} from "@react-spectrum/form";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 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.
+ */ 
+
+
+
+
+
+
+
+function $b7ca5b4454a2009d$var$Field(props, ref) {
+    let formProps = (0, $c6ZG4$useFormProps)(props);
+    let isInForm = formProps !== props;
+    props = formProps;
+    let { label: label, labelPosition: labelPosition = "top", labelAlign: labelAlign, isRequired: isRequired, necessityIndicator: necessityIndicator, includeNecessityIndicatorInAccessibilityName: includeNecessityIndicatorInAccessibilityName, validationState: validationState, isInvalid: isInvalid, description: description, errorMessage: errorMessage = (e)=>e.validationErrors.join(" "), validationErrors: validationErrors, validationDetails: validationDetails, isDisabled: isDisabled, showErrorIcon: showErrorIcon, contextualHelp: contextualHelp, children: children, labelProps: labelProps = {}, descriptionProps: // Not every component that uses <Field> supports help text.
+    descriptionProps = {}, errorMessageProps: errorMessageProps = {}, elementType: elementType, wrapperClassName: wrapperClassName, wrapperProps: wrapperProps = {}, ...otherProps } = props;
+    let { styleProps: styleProps } = (0, $c6ZG4$useStyleProps)(otherProps);
+    let errorMessageString = null;
+    if (typeof errorMessage === "function") errorMessageString = isInvalid != null && validationErrors != null && validationDetails != null ? errorMessage({
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    }) : null;
+    else errorMessageString = errorMessage;
+    let hasHelpText = !!description || errorMessageString && (isInvalid || validationState === "invalid");
+    let contextualHelpId = (0, $c6ZG4$useId)();
+    let fallbackLabelPropsId = (0, $c6ZG4$useId)();
+    if (label && contextualHelp && !labelProps.id) labelProps.id = fallbackLabelPropsId;
+    let labelWrapperClass = (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field", {
+        "spectrum-Field--positionTop": labelPosition === "top",
+        "spectrum-Field--positionSide": labelPosition === "side",
+        "spectrum-Field--alignEnd": labelAlign === "end",
+        "spectrum-Field--hasContextualHelp": !!props.contextualHelp
+    }, styleProps.className, wrapperClassName);
+    children = /*#__PURE__*/ (0, $c6ZG4$react).cloneElement(children, (0, $c6ZG4$mergeProps)(children.props, {
+        className: (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field-field")
+    }));
+    let renderHelpText = ()=>/*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $8e50676506611310$export$a67c0bc59081311a), {
+            descriptionProps: descriptionProps,
+            errorMessageProps: errorMessageProps,
+            description: description,
+            errorMessage: errorMessageString,
+            validationState: validationState,
+            isInvalid: isInvalid,
+            isDisabled: isDisabled,
+            showErrorIcon: showErrorIcon,
+            gridArea: (0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))).helpText
+        });
+    let renderChildren = ()=>{
+        if (labelPosition === "side") return /*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $c6ZG4$Flex), {
+            direction: "column",
+            UNSAFE_className: (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field-wrapper")
+        }, children, hasHelpText && renderHelpText());
+        return /*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $c6ZG4$react).Fragment, null, children, hasHelpText && renderHelpText());
+    };
+    let labelAndContextualHelp = /*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $c6ZG4$react).Fragment, null, label && /*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $00af9ba397a66f43$export$b04be29aa201d4f5), {
+        ...labelProps,
+        labelPosition: labelPosition,
+        labelAlign: labelAlign,
+        isRequired: isRequired,
+        necessityIndicator: necessityIndicator,
+        includeNecessityIndicatorInAccessibilityName: includeNecessityIndicatorInAccessibilityName,
+        elementType: elementType
+    }, label), label && contextualHelp && /*#__PURE__*/ (0, $c6ZG4$react).createElement((0, $c6ZG4$SlotProvider), {
+        slots: {
+            actionButton: {
+                UNSAFE_className: (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field-contextualHelp"),
+                id: contextualHelpId,
+                "aria-labelledby": (labelProps === null || labelProps === void 0 ? void 0 : labelProps.id) ? `${labelProps.id} ${contextualHelpId}` : undefined
+            }
+        }
+    }, contextualHelp));
+    // Need to add an extra wrapper for the label and contextual help if labelPosition is side,
+    // so that the table layout works inside forms.
+    if (isInForm && labelPosition === "side" && label && contextualHelp) labelAndContextualHelp = /*#__PURE__*/ (0, $c6ZG4$react).createElement("div", {
+        className: (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field-labelCell")
+    }, /*#__PURE__*/ (0, $c6ZG4$react).createElement("div", {
+        className: (0, $c6ZG4$classNames)((0, ($parcel$interopDefault($c6ZG4$fieldlabel_vars_cssmodulejs))), "spectrum-Field-labelWrapper")
+    }, labelAndContextualHelp));
+    return /*#__PURE__*/ (0, $c6ZG4$react).createElement("div", {
+        ...styleProps,
+        ...wrapperProps,
+        ref: ref,
+        className: labelWrapperClass
+    }, labelAndContextualHelp, renderChildren());
+}
+let $b7ca5b4454a2009d$export$a455218a85c89869 = /*#__PURE__*/ (0, $c6ZG4$react).forwardRef($b7ca5b4454a2009d$var$Field);
+
+
+export {$b7ca5b4454a2009d$export$a455218a85c89869 as Field};
+//# sourceMappingURL=Field.module.js.map

package/dist/Field.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/label/src/Field.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils';\nimport {Flex} from '@react-spectrum/layout';\nimport {HelpText} from './HelpText';\nimport {Label} from './Label';\nimport {LabelPosition} from '@react-types/shared';\nimport labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport React, {ReactNode, Ref, RefObject} from 'react';\nimport {SpectrumFieldProps} from '@react-types/label';\nimport {useFormProps} from '@react-spectrum/form';\n\nfunction Field(props: SpectrumFieldProps, ref: Ref<HTMLElement>) {\n  let formProps = useFormProps(props);\n  let isInForm = formProps !== props;\n  props = formProps;\n  let {\n    label,\n    labelPosition = 'top' as LabelPosition,\n    labelAlign,\n    isRequired,\n    necessityIndicator,\n    includeNecessityIndicatorInAccessibilityName,\n    validationState,\n    isInvalid,\n    description,\n    errorMessage = e => e.validationErrors.join(' '),\n    validationErrors,\n    validationDetails,\n    isDisabled,\n    showErrorIcon,\n    contextualHelp,\n    children,\n    labelProps = {},\n    // Not every component that uses <Field> supports help text.\n    descriptionProps = {},\n    errorMessageProps = {},\n    elementType,\n    wrapperClassName,\n    wrapperProps = {},\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(otherProps);\n  let errorMessageString: ReactNode = null;\n  if (typeof errorMessage === 'function') {\n    errorMessageString = isInvalid != null && validationErrors != null && validationDetails != null\n      ? errorMessage({\n        isInvalid,\n        validationErrors,\n        validationDetails\n      })\n      : null;\n  } else {\n    errorMessageString = errorMessage;\n  }\n  let hasHelpText = !!description || errorMessageString && (isInvalid || validationState === 'invalid');\n  let contextualHelpId = useId();\n\n  let fallbackLabelPropsId = useId();\n  if (label && contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  let labelWrapperClass = classNames(\n      labelStyles,\n      'spectrum-Field',\n    {\n      'spectrum-Field--positionTop': labelPosition === 'top',\n      'spectrum-Field--positionSide': labelPosition === 'side',\n      'spectrum-Field--alignEnd': labelAlign === 'end',\n      'spectrum-Field--hasContextualHelp': !!props.contextualHelp\n    },\n      styleProps.className,\n      wrapperClassName\n    );\n\n  children = React.cloneElement(children, mergeProps(children.props, {\n    className: classNames(\n        labelStyles,\n        'spectrum-Field-field'\n      )\n  }));\n\n  let renderHelpText = () => (\n    <HelpText\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      description={description}\n      errorMessage={errorMessageString}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      isDisabled={isDisabled}\n      showErrorIcon={showErrorIcon}\n      gridArea={labelStyles.helpText} />\n    );\n\n  let renderChildren = () => {\n    if (labelPosition === 'side') {\n      return (\n        <Flex direction=\"column\" UNSAFE_className={classNames(labelStyles, 'spectrum-Field-wrapper')}>\n          {children}\n          {hasHelpText && renderHelpText()}\n        </Flex>\n      );\n    }\n\n    return (\n      <>\n        {children}\n        {hasHelpText && renderHelpText()}\n      </>\n    );\n  };\n\n  let labelAndContextualHelp = (\n    <>\n      {label && (\n        <Label\n          {...labelProps}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          isRequired={isRequired}\n          necessityIndicator={necessityIndicator}\n          includeNecessityIndicatorInAccessibilityName={includeNecessityIndicatorInAccessibilityName}\n          elementType={elementType}>\n          {label}\n        </Label>\n      )}\n      {label && contextualHelp &&\n        <SlotProvider\n          slots={{\n            actionButton: {\n              UNSAFE_className: classNames(labelStyles, 'spectrum-Field-contextualHelp'),\n              id: contextualHelpId,\n              'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined\n            }\n          }}>\n          {contextualHelp}\n        </SlotProvider>\n      }\n    </>\n    );\n\n    // Need to add an extra wrapper for the label and contextual help if labelPosition is side,\n    // so that the table layout works inside forms.\n  if (isInForm && labelPosition === 'side' && label && contextualHelp) {\n    labelAndContextualHelp = (\n      <div className={classNames(labelStyles, 'spectrum-Field-labelCell')}>\n        <div className={classNames(labelStyles, 'spectrum-Field-labelWrapper')}>\n          {labelAndContextualHelp}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...styleProps}\n      {...wrapperProps}\n      ref={ref as RefObject<HTMLDivElement>}\n      className={labelWrapperClass}>\n      {labelAndContextualHelp}\n      {renderChildren()}\n    </div>\n  );\n}\n\nlet _Field = React.forwardRef(Field);\nexport {_Field as Field};\n"],"names":[],"version":3,"file":"Field.module.js.map"}

package/dist/HelpText.main.js

@@ -0,0 +1,57 @@
+require("./vars.0af2d804.css");
+var $680ab92507bf49aa$exports = require("./helptext_vars_css.main.js");
+var $7UMJk$spectrumiconsuiAlertMedium = require("@spectrum-icons/ui/AlertMedium");
+var $7UMJk$reactspectrumutils = require("@react-spectrum/utils");
+var $7UMJk$react = require("react");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "HelpText", () => $2d1b5114e5b358b6$export$a67c0bc59081311a);
+/*
+ * Copyright 2021 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.
+ */ 
+
+
+
+function $2d1b5114e5b358b6$var$HelpText(props, ref) {
+    let { description: description, errorMessage: errorMessage, validationState: validationState, isInvalid: isInvalid, isDisabled: isDisabled, showErrorIcon: showErrorIcon, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = props;
+    let domRef = (0, $7UMJk$reactspectrumutils.useDOMRef)(ref);
+    let isErrorMessage = errorMessage && (isInvalid || validationState === "invalid");
+    let { styleProps: styleProps } = (0, $7UMJk$reactspectrumutils.useStyleProps)(props);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($7UMJk$react))).createElement("div", {
+        ...styleProps,
+        className: (0, $7UMJk$reactspectrumutils.classNames)((0, ($parcel$interopDefault($680ab92507bf49aa$exports))), "spectrum-HelpText", `spectrum-HelpText--${isErrorMessage ? "negative" : "neutral"}`, {
+            "is-disabled": isDisabled
+        }, styleProps.className),
+        ref: domRef
+    }, isErrorMessage ? /*#__PURE__*/ (0, ($parcel$interopDefault($7UMJk$react))).createElement((0, ($parcel$interopDefault($7UMJk$react))).Fragment, null, showErrorIcon && /*#__PURE__*/ (0, ($parcel$interopDefault($7UMJk$react))).createElement((0, ($parcel$interopDefault($7UMJk$spectrumiconsuiAlertMedium))), {
+        UNSAFE_className: (0, $7UMJk$reactspectrumutils.classNames)((0, ($parcel$interopDefault($680ab92507bf49aa$exports))), "spectrum-HelpText-validationIcon")
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($7UMJk$react))).createElement("div", {
+        ...errorMessageProps,
+        className: (0, $7UMJk$reactspectrumutils.classNames)((0, ($parcel$interopDefault($680ab92507bf49aa$exports))), "spectrum-HelpText-text")
+    }, errorMessage)) : /*#__PURE__*/ (0, ($parcel$interopDefault($7UMJk$react))).createElement("div", {
+        ...descriptionProps,
+        className: (0, $7UMJk$reactspectrumutils.classNames)((0, ($parcel$interopDefault($680ab92507bf49aa$exports))), "spectrum-HelpText-text")
+    }, description));
+}
+/**
+ * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.
+ */ const $2d1b5114e5b358b6$export$a67c0bc59081311a = /*#__PURE__*/ (0, ($parcel$interopDefault($7UMJk$react))).forwardRef($2d1b5114e5b358b6$var$HelpText);
+
+
+//# sourceMappingURL=HelpText.main.js.map

package/dist/HelpText.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAiBD,SAAS,+BAAS,KAAoB,EAAE,GAA2B;IACjE,IAAI,eACF,WAAW,gBACX,YAAY,mBACZ,eAAe,aACf,SAAS,cACT,UAAU,iBACV,aAAa,oBACb,gBAAgB,qBAChB,iBAAiB,EAClB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,iBAAiB,gBAAiB,CAAA,aAAa,oBAAoB,SAAQ;IAC/E,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,qBACE,0DAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,qBACA,CAAC,mBAAmB,EAAE,iBAAiB,aAAa,UAAU,CAAC,EAC/D;YAAC,eAAe;QAAU,GAC1B,WAAW,SAAS;QAEtB,KAAK;OACJ,+BACC,sHACG,+BAAiB,0DAAC,CAAA,GAAA,2DAAU;QAAE,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACpE,0DAAC;QAAK,GAAG,iBAAiB;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OACvD,+BAIL,0DAAC;QAAK,GAAG,gBAAgB;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OACtD;AAKX;AAEA;;CAEC,GACD,MAAM,0DAAY,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/label/src/HelpText.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation} from '@react-types/shared';\nimport React, {HTMLAttributes, ReactNode} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/helptext/vars.css';\n\ninterface HelpTextProps extends Omit<SpectrumHelpTextProps, 'errorMessage'>, Omit<Validation<any>, 'validationState'>, SpectrumFieldValidation<any>, StyleProps {\n  /** Props for the help text description element. */\n  descriptionProps?: HTMLAttributes<HTMLElement>,\n  /** Props for the help text error message element. */\n  errorMessageProps?: HTMLAttributes<HTMLElement>,\n  /** An error message for the field. */\n  errorMessage?: ReactNode\n}\n\nfunction HelpText(props: HelpTextProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    description,\n    errorMessage,\n    validationState,\n    isInvalid,\n    isDisabled,\n    showErrorIcon,\n    descriptionProps,\n    errorMessageProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let isErrorMessage = errorMessage && (isInvalid || validationState === 'invalid');\n  let {styleProps} = useStyleProps(props);\n\n  return (\n    <div\n      {...styleProps}\n      className={classNames(\n        styles,\n        'spectrum-HelpText',\n        `spectrum-HelpText--${isErrorMessage ? 'negative' : 'neutral'}`,\n        {'is-disabled': isDisabled},\n        styleProps.className\n      )}\n      ref={domRef}>\n      {isErrorMessage ? (\n        <>\n          {showErrorIcon && <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-HelpText-validationIcon')} />}\n          <div {...errorMessageProps} className={classNames(styles, 'spectrum-HelpText-text')}>\n            {errorMessage}\n          </div>\n        </>\n      ) : (\n        <div {...descriptionProps} className={classNames(styles, 'spectrum-HelpText-text')}>\n          {description}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.\n */\nconst _HelpText = React.forwardRef(HelpText);\nexport {_HelpText as HelpText};\n"],"names":[],"version":3,"file":"HelpText.main.js.map"}

package/dist/HelpText.mjs

@@ -0,0 +1,52 @@
+import "./vars.0af2d804.css";
+import $huWmf$helptext_vars_cssmodulejs from "./helptext_vars_css.mjs";
+import $huWmf$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
+import {useDOMRef as $huWmf$useDOMRef, useStyleProps as $huWmf$useStyleProps, classNames as $huWmf$classNames} from "@react-spectrum/utils";
+import $huWmf$react from "react";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2021 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.
+ */ 
+
+
+
+function $8e50676506611310$var$HelpText(props, ref) {
+    let { description: description, errorMessage: errorMessage, validationState: validationState, isInvalid: isInvalid, isDisabled: isDisabled, showErrorIcon: showErrorIcon, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = props;
+    let domRef = (0, $huWmf$useDOMRef)(ref);
+    let isErrorMessage = errorMessage && (isInvalid || validationState === "invalid");
+    let { styleProps: styleProps } = (0, $huWmf$useStyleProps)(props);
+    return /*#__PURE__*/ (0, $huWmf$react).createElement("div", {
+        ...styleProps,
+        className: (0, $huWmf$classNames)((0, ($parcel$interopDefault($huWmf$helptext_vars_cssmodulejs))), "spectrum-HelpText", `spectrum-HelpText--${isErrorMessage ? "negative" : "neutral"}`, {
+            "is-disabled": isDisabled
+        }, styleProps.className),
+        ref: domRef
+    }, isErrorMessage ? /*#__PURE__*/ (0, $huWmf$react).createElement((0, $huWmf$react).Fragment, null, showErrorIcon && /*#__PURE__*/ (0, $huWmf$react).createElement((0, $huWmf$spectrumiconsuiAlertMedium), {
+        UNSAFE_className: (0, $huWmf$classNames)((0, ($parcel$interopDefault($huWmf$helptext_vars_cssmodulejs))), "spectrum-HelpText-validationIcon")
+    }), /*#__PURE__*/ (0, $huWmf$react).createElement("div", {
+        ...errorMessageProps,
+        className: (0, $huWmf$classNames)((0, ($parcel$interopDefault($huWmf$helptext_vars_cssmodulejs))), "spectrum-HelpText-text")
+    }, errorMessage)) : /*#__PURE__*/ (0, $huWmf$react).createElement("div", {
+        ...descriptionProps,
+        className: (0, $huWmf$classNames)((0, ($parcel$interopDefault($huWmf$helptext_vars_cssmodulejs))), "spectrum-HelpText-text")
+    }, description));
+}
+/**
+ * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.
+ */ const $8e50676506611310$export$a67c0bc59081311a = /*#__PURE__*/ (0, $huWmf$react).forwardRef($8e50676506611310$var$HelpText);
+
+
+export {$8e50676506611310$export$a67c0bc59081311a as HelpText};
+//# sourceMappingURL=HelpText.mjs.map

package/dist/HelpText.module.js

@@ -0,0 +1,52 @@
+import "./vars.0af2d804.css";
+import $huWmf$helptext_vars_cssmodulejs from "./helptext_vars_css.module.js";
+import $huWmf$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
+import {useDOMRef as $huWmf$useDOMRef, useStyleProps as $huWmf$useStyleProps, classNames as $huWmf$classNames} from "@react-spectrum/utils";
+import $huWmf$react from "react";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2021 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.
+ */ 
+
+
+
+function $8e50676506611310$var$HelpText(props, ref) {
+    let { description: description, errorMessage: errorMessage, validationState: validationState, isInvalid: isInvalid, isDisabled: isDisabled, showErrorIcon: showErrorIcon, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = props;
+    let domRef = (0, $huWmf$useDOMRef)(ref);
+    let isErrorMessage = errorMessage && (isInvalid || validationState === "invalid");
+    let { styleProps: styleProps } = (0, $huWmf$useStyleProps)(props);
+    return /*#__PURE__*/ (0, $huWmf$react).createElement("div", {
+        ...styleProps,
+        className: (0, $huWmf$classNames)((0, ($parcel$interopDefault($huWmf$helptext_vars_cssmodulejs))), "spectrum-HelpText", `spectrum-HelpText--${isErrorMessage ? "negative" : "neutral"}`, {
+            "is-disabled": isDisabled
+        }, styleProps.className),
+        ref: domRef
+    }, isErrorMessage ? /*#__PURE__*/ (0, $huWmf$react).createElement((0, $huWmf$react).Fragment, null, showErrorIcon && /*#__PURE__*/ (0, $huWmf$react).createElement((0, $huWmf$spectrumiconsuiAlertMedium), {
+        UNSAFE_className: (0, $huWmf$classNames)((0, ($parcel$interopDefault($huWmf$helptext_vars_cssmodulejs))), "spectrum-HelpText-validationIcon")
+    }), /*#__PURE__*/ (0, $huWmf$react).createElement("div", {
+        ...errorMessageProps,
+        className: (0, $huWmf$classNames)((0, ($parcel$interopDefault($huWmf$helptext_vars_cssmodulejs))), "spectrum-HelpText-text")
+    }, errorMessage)) : /*#__PURE__*/ (0, $huWmf$react).createElement("div", {
+        ...descriptionProps,
+        className: (0, $huWmf$classNames)((0, ($parcel$interopDefault($huWmf$helptext_vars_cssmodulejs))), "spectrum-HelpText-text")
+    }, description));
+}
+/**
+ * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.
+ */ const $8e50676506611310$export$a67c0bc59081311a = /*#__PURE__*/ (0, $huWmf$react).forwardRef($8e50676506611310$var$HelpText);
+
+
+export {$8e50676506611310$export$a67c0bc59081311a as HelpText};
+//# sourceMappingURL=HelpText.module.js.map

package/dist/HelpText.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAiBD,SAAS,+BAAS,KAAoB,EAAE,GAA2B;IACjE,IAAI,eACF,WAAW,gBACX,YAAY,mBACZ,eAAe,aACf,SAAS,cACT,UAAU,iBACV,aAAa,oBACb,gBAAgB,qBAChB,iBAAiB,EAClB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,iBAAiB,gBAAiB,CAAA,aAAa,oBAAoB,SAAQ;IAC/E,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAEjC,qBACE,gCAAC;QACE,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,0DAAK,GACL,qBACA,CAAC,mBAAmB,EAAE,iBAAiB,aAAa,UAAU,CAAC,EAC/D;YAAC,eAAe;QAAU,GAC1B,WAAW,SAAS;QAEtB,KAAK;OACJ,+BACC,kEACG,+BAAiB,gCAAC,CAAA,GAAA,iCAAU;QAAE,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAK,GAAG;sBACpE,gCAAC;QAAK,GAAG,iBAAiB;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAK,GAAG;OACvD,+BAIL,gCAAC;QAAK,GAAG,gBAAgB;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAK,GAAG;OACtD;AAKX;AAEA;;CAEC,GACD,MAAM,0DAAY,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/label/src/HelpText.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation} from '@react-types/shared';\nimport React, {HTMLAttributes, ReactNode} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/helptext/vars.css';\n\ninterface HelpTextProps extends Omit<SpectrumHelpTextProps, 'errorMessage'>, Omit<Validation<any>, 'validationState'>, SpectrumFieldValidation<any>, StyleProps {\n  /** Props for the help text description element. */\n  descriptionProps?: HTMLAttributes<HTMLElement>,\n  /** Props for the help text error message element. */\n  errorMessageProps?: HTMLAttributes<HTMLElement>,\n  /** An error message for the field. */\n  errorMessage?: ReactNode\n}\n\nfunction HelpText(props: HelpTextProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    description,\n    errorMessage,\n    validationState,\n    isInvalid,\n    isDisabled,\n    showErrorIcon,\n    descriptionProps,\n    errorMessageProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let isErrorMessage = errorMessage && (isInvalid || validationState === 'invalid');\n  let {styleProps} = useStyleProps(props);\n\n  return (\n    <div\n      {...styleProps}\n      className={classNames(\n        styles,\n        'spectrum-HelpText',\n        `spectrum-HelpText--${isErrorMessage ? 'negative' : 'neutral'}`,\n        {'is-disabled': isDisabled},\n        styleProps.className\n      )}\n      ref={domRef}>\n      {isErrorMessage ? (\n        <>\n          {showErrorIcon && <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-HelpText-validationIcon')} />}\n          <div {...errorMessageProps} className={classNames(styles, 'spectrum-HelpText-text')}>\n            {errorMessage}\n          </div>\n        </>\n      ) : (\n        <div {...descriptionProps} className={classNames(styles, 'spectrum-HelpText-text')}>\n          {description}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.\n */\nconst _HelpText = React.forwardRef(HelpText);\nexport {_HelpText as HelpText};\n"],"names":[],"version":3,"file":"HelpText.module.js.map"}