@react-spectrum/label 3.0.0-nightly-641446f65-240905

package/dist/vars.d58685ae.css

@@ -0,0 +1,271 @@
+.A-HlBa_i18nFontFamily {
+  font-synthesis: weight;
+  font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.A-HlBa_i18nFontFamily:lang(ar) {
+  font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.A-HlBa_i18nFontFamily:lang(he) {
+  font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.A-HlBa_i18nFontFamily:lang(zh) {
+  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+}
+
+.A-HlBa_i18nFontFamily:lang(zh-Hans) {
+  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+}
+
+.A-HlBa_i18nFontFamily:lang(zh-Hant) {
+  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+}
+
+.A-HlBa_i18nFontFamily:lang(zh-SG), .A-HlBa_i18nFontFamily:lang(zh-CN) {
+  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+}
+
+.A-HlBa_i18nFontFamily:lang(ko) {
+  font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+}
+
+.A-HlBa_i18nFontFamily:lang(ja) {
+  font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+}
+
+.A-HlBa_spectrum-FocusRing-ring {
+  --spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
+  --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
+  --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
+  --spectrum-focus-ring-border-size: 0px;
+  --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
+}
+
+.A-HlBa_spectrum-FocusRing-ring:after {
+  border-radius: calc(var(--spectrum-focus-ring-border-radius)  + var(--spectrum-focus-ring-gap));
+  content: "";
+  margin: calc(-1 * var(--spectrum-focus-ring-border-size));
+  pointer-events: none;
+  transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out, margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
+  display: block;
+  position: absolute;
+  inset: 0;
+}
+
+.A-HlBa_spectrum-FocusRing.A-HlBa_focus-ring:after {
+  margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
+  box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+}
+
+.A-HlBa_spectrum-FocusRing--quiet:after {
+  border-radius: 0;
+}
+
+.A-HlBa_spectrum-FocusRing--quiet.A-HlBa_focus-ring:after {
+  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size)) 0;
+  box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+}
+
+@media (forced-colors: active) {
+  .A-HlBa_spectrum-FocusRing, .A-HlBa_spectrum-FocusRing-ring, .A-HlBa_spectrum-FocusRing--quiet {
+    --spectrum-high-contrast-focus-ring-color: Highlight;
+  }
+
+  :is(.A-HlBa_spectrum-FocusRing, .A-HlBa_spectrum-FocusRing-ring, .A-HlBa_spectrum-FocusRing--quiet):after {
+    forced-color-adjust: none;
+  }
+}
+
+.A-HlBa_spectrum-FieldLabel {
+  box-sizing: border-box;
+  padding: var(--spectrum-fieldlabel-padding-top, var(--spectrum-global-dimension-size-50)) 0 var(--spectrum-fieldlabel-padding-bottom, var(--spectrum-global-dimension-size-65));
+  font-size: var(--spectrum-fieldlabel-text-size, var(--spectrum-global-dimension-font-size-75));
+  font-weight: var(--spectrum-fieldlabel-text-font-weight, var(--spectrum-global-font-weight-regular));
+  line-height: var(--spectrum-fieldlabel-text-line-height, var(--spectrum-global-font-line-height-small));
+  vertical-align: top;
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: auto;
+  font-smoothing: subpixel-antialiased;
+  text-align: start;
+  cursor: default;
+  flex: none;
+  display: flex;
+}
+
+.A-HlBa_spectrum-FieldLabel--positionSide {
+  padding-top: var(--spectrum-fieldlabel-side-padding-top, var(--spectrum-global-dimension-size-100));
+  padding-inline-end: var(--spectrum-fieldlabel-side-padding-x, var(--spectrum-global-dimension-size-100));
+  display: inline-flex;
+}
+
+.A-HlBa_spectrum-FieldLabel-requiredIcon {
+  margin-top: var(--spectrum-fieldlabel-asterisk-margin-y, var(--spectrum-global-dimension-size-50));
+  margin-inline-end: 0;
+  margin-bottom: 0;
+  margin-inline-start: var(--spectrum-fieldlabel-asterisk-gap, var(--spectrum-global-dimension-size-25));
+}
+
+.A-HlBa_spectrum-FieldLabel--alignEnd {
+  text-align: end;
+  justify-content: flex-end;
+}
+
+.A-HlBa_spectrum-Field {
+  --spectrum-field-default-width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
+  height: max-content;
+}
+
+.A-HlBa_spectrum-Field .A-HlBa_spectrum-Field-contextualHelp {
+  margin-inline-start: var(--spectrum-global-dimension-size-50);
+  margin-top: var(--spectrum-global-dimension-size-25);
+  grid-area: A-HlBa_contextualHelp;
+}
+
+.A-HlBa_spectrum-Field:where(.A-HlBa_spectrum-Field--positionTop) {
+  width: var(--spectrum-field-default-width);
+  grid-template: "A-HlBa_label A-HlBa_contextualHelp ."
+                 "A-HlBa_field A-HlBa_field A-HlBa_field" 1fr
+                 "A-HlBa_helpText A-HlBa_helpText A-HlBa_helpText"
+                 / auto auto minmax(0, 1fr);
+  align-content: start;
+  display: inline-grid;
+}
+
+.A-HlBa_spectrum-Field:where(.A-HlBa_spectrum-Field--positionTop) .A-HlBa_spectrum-Field-field {
+  grid-area: A-HlBa_field;
+  width: 100%;
+}
+
+.A-HlBa_spectrum-Field:where(.A-HlBa_spectrum-Field--positionTop).A-HlBa_spectrum-Field--alignEnd {
+  grid-template-columns: 1fr auto 0;
+}
+
+.A-HlBa_spectrum-Field:where(.A-HlBa_spectrum-Field--positionTop) .A-HlBa_spectrum-FieldLabel {
+  grid-area: A-HlBa_label;
+}
+
+.A-HlBa_spectrum-Field:where(.A-HlBa_spectrum-Field--positionSide) {
+  align-items: flex-start;
+  display: inline-flex;
+}
+
+.A-HlBa_spectrum-Field:where(.A-HlBa_spectrum-Field--positionSide) .A-HlBa_spectrum-Field-wrapper {
+  width: var(--spectrum-field-default-width);
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+}
+
+.A-HlBa_spectrum-Field:where(.A-HlBa_spectrum-Field--positionSide) .A-HlBa_spectrum-Field-wrapper .A-HlBa_spectrum-Field-field {
+  width: 100%;
+}
+
+.A-HlBa_spectrum-Field:where(.A-HlBa_spectrum-Field--positionSide) .A-HlBa_spectrum-Field-field {
+  flex: 1;
+  min-width: 0;
+}
+
+.A-HlBa_spectrum-Field:where(.A-HlBa_spectrum-Field--positionSide) .A-HlBa_spectrum-Field-contextualHelp {
+  margin-top: var(--spectrum-global-dimension-size-65);
+  margin-inline-end: var(--spectrum-fieldlabel-side-padding-x, var(--spectrum-global-dimension-size-100));
+}
+
+.A-HlBa_spectrum-Field.A-HlBa_spectrum-Field--hasContextualHelp .A-HlBa_spectrum-FieldLabel {
+  padding-inline-end: 0;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionSide {
+  border-collapse: separate;
+  border-spacing: 0 var(--spectrum-global-dimension-size-300);
+  margin: calc(var(--spectrum-global-dimension-size-250) * -1) 0;
+  text-align: start;
+  display: table;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionSide .A-HlBa_spectrum-Field {
+  width: 100%;
+  display: table-row;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionSide .A-HlBa_spectrum-Field:not(.A-HlBa_spectrum-Field--hasContextualHelp) .A-HlBa_spectrum-FieldLabel, .A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionSide .A-HlBa_spectrum-Field.A-HlBa_spectrum-Field--hasContextualHelp .A-HlBa_spectrum-Field-labelCell {
+  display: table-cell;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionSide .A-HlBa_spectrum-Field .A-HlBa_spectrum-Field-labelCell {
+  vertical-align: top;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionSide .A-HlBa_spectrum-Field.A-HlBa_spectrum-Field--alignEnd .A-HlBa_spectrum-Field-labelCell {
+  text-align: end;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionSide .A-HlBa_spectrum-Field .A-HlBa_spectrum-Field-labelWrapper {
+  display: inline-flex;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionSide .A-HlBa_spectrum-Field .A-HlBa_spectrum-Field-labelWrapper .A-HlBa_spectrum-FieldLabel {
+  flex: 1;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionSide .A-HlBa_spectrum-Field-wrapper {
+  width: 100%;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionSide .A-HlBa_spectrum-Field-field {
+  min-width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
+  width: auto;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionTop {
+  min-width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
+  flex-direction: column;
+  margin: 0;
+  display: flex;
+}
+
+.A-HlBa_spectrum-Form.A-HlBa_spectrum-Form--positionTop > * {
+  margin-top: var(--spectrum-global-dimension-size-100);
+  width: 100%;
+}
+
+.A-HlBa_spectrum-LabeledValue.A-HlBa_spectrum-Field--positionSide {
+  align-items: baseline;
+}
+
+.A-HlBa_spectrum-LabeledValue.A-HlBa_spectrum-Field--positionSide .A-HlBa_spectrum-Field-contextualHelp {
+  top: var(--spectrum-global-dimension-size-40);
+  margin-top: var(--spectrum-global-dimension-size-65);
+  position: relative;
+}
+
+.A-HlBa_spectrum-LabeledValue.A-HlBa_spectrum-Field--positionTop {
+  width: unset;
+}
+
+.A-HlBa_spectrum-LabeledValue .A-HlBa_spectrum-FieldLabel.A-HlBa_spectrum-FieldLabel {
+  padding-top: 0;
+}
+
+.A-HlBa_spectrum-LabeledValue .A-HlBa_spectrum-Field-wrapper.A-HlBa_spectrum-Field-wrapper {
+  width: unset;
+}
+
+.A-HlBa_spectrum-LabeledValue .A-HlBa_spectrum-Field-field {
+  word-break: break-word;
+  overflow: hidden;
+}
+
+.A-HlBa_spectrum-LabeledValue .A-HlBa_spectrum-Field-contextualHelp {
+  margin-top: calc(-1 * var(--spectrum-global-dimension-size-25));
+}
+
+.A-HlBa_spectrum-FieldLabel, .A-HlBa_spectrum-Form-itemLabel {
+  color: var(--spectrum-fieldlabel-text-color, var(--spectrum-alias-label-text-color));
+}
+
+:is(.A-HlBa_spectrum-FieldLabel, .A-HlBa_spectrum-Form-itemLabel).A-HlBa_is-disabled {
+  color: var(--spectrum-fieldlabel-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+}
+/*# sourceMappingURL=vars.d58685ae.css.map */

package/dist/vars.d58685ae.css.map

@@ -0,0 +1 @@
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;;;;;;;AAsBA;;;;;;AAMA;;;;;;;AAOA;;;;;AAUA;;;;;AAIE;;;;;;AAMA;;;;;;;;;;AAUE;;;;;AAMA;;;;AAIA;;;;AAOF;;;;;AAKE;;;;;;;AAaE;;;;AAMF;;;;;AAKA;;;;;AAOA;;;;AAaF;;;;;;;;AAOE;;;;;AAME;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAGE;;;;AAMJ;;;;AAIA;;;;;AAOF;;;;;;;AASE;;;;;AASF;;;;AAGE;;;;;;AAOF;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAkBF;;;;AAIE","sources":["packages/@adobe/spectrum-css-temp/components/fieldlabel/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.d58685ae.css.map"}

package/dist/zh-CN.main.js

@@ -0,0 +1,7 @@
+module.exports = {
+    "(optional)": `\u{FF08}\u{53EF}\u{9009}\u{FF09}`,
+    "(required)": `\u{FF08}\u{5FC5}\u{586B}\u{FF09}`
+};
+
+
+//# sourceMappingURL=zh-CN.main.js.map

package/dist/zh-CN.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,cAAc,CAAC,gCAAI,CAAC;IACtC,cAAc,CAAC,gCAAI,CAAC;AACtB","sources":["packages/@react-spectrum/label/intl/zh-CN.json"],"sourcesContent":["{\n  \"(optional)\": \"（可选）\",\n  \"(required)\": \"（必填）\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}

package/dist/zh-CN.mjs

@@ -0,0 +1,9 @@
+var $0128cc194bc107bb$exports = {};
+$0128cc194bc107bb$exports = {
+    "(optional)": `\u{FF08}\u{53EF}\u{9009}\u{FF09}`,
+    "(required)": `\u{FF08}\u{5FC5}\u{586B}\u{FF09}`
+};
+
+
+export {$0128cc194bc107bb$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js

@@ -0,0 +1,9 @@
+var $0128cc194bc107bb$exports = {};
+$0128cc194bc107bb$exports = {
+    "(optional)": `\u{FF08}\u{53EF}\u{9009}\u{FF09}`,
+    "(required)": `\u{FF08}\u{5FC5}\u{586B}\u{FF09}`
+};
+
+
+export {$0128cc194bc107bb$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,cAAc,CAAC,gCAAI,CAAC;IACtC,cAAc,CAAC,gCAAI,CAAC;AACtB","sources":["packages/@react-spectrum/label/intl/zh-CN.json"],"sourcesContent":["{\n  \"(optional)\": \"（可选）\",\n  \"(required)\": \"（必填）\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}

package/dist/zh-TW.main.js

@@ -0,0 +1,7 @@
+module.exports = {
+    "(optional)": `(\u{9078}\u{586B})`,
+    "(required)": `(\u{5FC5}\u{586B})`
+};
+
+
+//# sourceMappingURL=zh-TW.main.js.map

package/dist/zh-TW.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,cAAc,CAAC,kBAAI,CAAC;IACtC,cAAc,CAAC,kBAAI,CAAC;AACtB","sources":["packages/@react-spectrum/label/intl/zh-TW.json"],"sourcesContent":["{\n  \"(optional)\": \"(選填)\",\n  \"(required)\": \"(必填)\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}

package/dist/zh-TW.mjs

@@ -0,0 +1,9 @@
+var $c57738f6094a3d25$exports = {};
+$c57738f6094a3d25$exports = {
+    "(optional)": `(\u{9078}\u{586B})`,
+    "(required)": `(\u{5FC5}\u{586B})`
+};
+
+
+export {$c57738f6094a3d25$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -0,0 +1,9 @@
+var $c57738f6094a3d25$exports = {};
+$c57738f6094a3d25$exports = {
+    "(optional)": `(\u{9078}\u{586B})`,
+    "(required)": `(\u{5FC5}\u{586B})`
+};
+
+
+export {$c57738f6094a3d25$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,cAAc,CAAC,kBAAI,CAAC;IACtC,cAAc,CAAC,kBAAI,CAAC;AACtB","sources":["packages/@react-spectrum/label/intl/zh-TW.json"],"sourcesContent":["{\n  \"(optional)\": \"(選填)\",\n  \"(required)\": \"(必填)\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@react-spectrum/label",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "targets": {
+    "main": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    },
+    "module": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/i18n": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/form": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/layout": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/label": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@spectrum-icons/ui": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
+  },
+  "devDependencies": {
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "@react-spectrum/provider": "^3.0.0-nightly-641446f65-240905",
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "3.16.8"
+}

package/src/Field.tsx

@@ -0,0 +1,180 @@
+/*
+ * 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.
+ */
+
+import {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils';
+import {Flex} from '@react-spectrum/layout';
+import {HelpText} from './HelpText';
+import {Label} from './Label';
+import {LabelPosition, RefObject} from '@react-types/shared';
+import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
+import {mergeProps, useId} from '@react-aria/utils';
+import React, {ReactNode, Ref} from 'react';
+import {SpectrumFieldProps} from '@react-types/label';
+import {useFormProps} from '@react-spectrum/form';
+
+function Field(props: SpectrumFieldProps, ref: Ref<HTMLElement>) {
+  let formProps = useFormProps(props);
+  let isInForm = formProps !== props;
+  props = formProps;
+  let {
+    label,
+    labelPosition = 'top' as LabelPosition,
+    labelAlign,
+    isRequired,
+    necessityIndicator,
+    includeNecessityIndicatorInAccessibilityName,
+    validationState,
+    isInvalid,
+    description,
+    errorMessage = e => e.validationErrors.join(' '),
+    validationErrors,
+    validationDetails,
+    isDisabled,
+    showErrorIcon,
+    contextualHelp,
+    children,
+    labelProps = {},
+    // Not every component that uses <Field> supports help text.
+    descriptionProps = {},
+    errorMessageProps = {},
+    elementType,
+    wrapperClassName,
+    wrapperProps = {},
+    ...otherProps
+  } = props;
+  let {styleProps} = useStyleProps(otherProps);
+  let errorMessageString: ReactNode = null;
+  if (typeof errorMessage === 'function') {
+    errorMessageString = isInvalid != null && validationErrors != null && validationDetails != null
+      ? errorMessage({
+        isInvalid,
+        validationErrors,
+        validationDetails
+      })
+      : null;
+  } else {
+    errorMessageString = errorMessage;
+  }
+  let hasHelpText = !!description || errorMessageString && (isInvalid || validationState === 'invalid');
+  let contextualHelpId = useId();
+
+  let fallbackLabelPropsId = useId();
+  if (label && contextualHelp && !labelProps.id) {
+    labelProps.id = fallbackLabelPropsId;
+  }
+
+  let labelWrapperClass = classNames(
+      labelStyles,
+      '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 = React.cloneElement(children, mergeProps(children.props as any, {
+    className: classNames(
+        labelStyles,
+        'spectrum-Field-field'
+      )
+  }));
+
+  let renderHelpText = () => (
+    <HelpText
+      descriptionProps={descriptionProps}
+      errorMessageProps={errorMessageProps}
+      description={description}
+      errorMessage={errorMessageString}
+      validationState={validationState}
+      isInvalid={isInvalid}
+      isDisabled={isDisabled}
+      showErrorIcon={showErrorIcon}
+      gridArea={labelStyles.helpText} />
+    );
+
+  let renderChildren = () => {
+    if (labelPosition === 'side') {
+      return (
+        <Flex direction="column" UNSAFE_className={classNames(labelStyles, 'spectrum-Field-wrapper')}>
+          {children}
+          {hasHelpText && renderHelpText()}
+        </Flex>
+      );
+    }
+
+    return (
+      <>
+        {children}
+        {hasHelpText && renderHelpText()}
+      </>
+    );
+  };
+
+  let labelAndContextualHelp = (
+    <>
+      {label && (
+        <Label
+          {...labelProps}
+          labelPosition={labelPosition}
+          labelAlign={labelAlign}
+          isRequired={isRequired}
+          necessityIndicator={necessityIndicator}
+          includeNecessityIndicatorInAccessibilityName={includeNecessityIndicatorInAccessibilityName}
+          elementType={elementType}>
+          {label}
+        </Label>
+      )}
+      {label && contextualHelp &&
+        <SlotProvider
+          slots={{
+            actionButton: {
+              UNSAFE_className: classNames(labelStyles, 'spectrum-Field-contextualHelp'),
+              id: contextualHelpId,
+              'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined
+            }
+          }}>
+          {contextualHelp}
+        </SlotProvider>
+      }
+    </>
+    );
+
+    // 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 = (
+      <div className={classNames(labelStyles, 'spectrum-Field-labelCell')}>
+        <div className={classNames(labelStyles, 'spectrum-Field-labelWrapper')}>
+          {labelAndContextualHelp}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    (<div
+      {...styleProps}
+      {...wrapperProps}
+      ref={ref as RefObject<HTMLDivElement | null>}
+      className={labelWrapperClass}>
+      {labelAndContextualHelp}
+      {renderChildren()}
+    </div>)
+  );
+}
+
+let _Field = React.forwardRef(Field);
+export {_Field as Field};

package/src/HelpText.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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.
+ */
+
+import AlertMedium from '@spectrum-icons/ui/AlertMedium';
+import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {DOMRef, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation} from '@react-types/shared';
+import React, {HTMLAttributes, ReactNode} from 'react';
+import styles from '@adobe/spectrum-css-temp/components/helptext/vars.css';
+
+interface HelpTextProps extends Omit<SpectrumHelpTextProps, 'errorMessage'>, Omit<Validation<any>, 'validationState'>, SpectrumFieldValidation<any>, StyleProps {
+  /** Props for the help text description element. */
+  descriptionProps?: HTMLAttributes<HTMLElement>,
+  /** Props for the help text error message element. */
+  errorMessageProps?: HTMLAttributes<HTMLElement>,
+  /** An error message for the field. */
+  errorMessage?: ReactNode
+}
+
+function HelpText(props: HelpTextProps, ref: DOMRef<HTMLDivElement>) {
+  let {
+    description,
+    errorMessage,
+    validationState,
+    isInvalid,
+    isDisabled,
+    showErrorIcon,
+    descriptionProps,
+    errorMessageProps
+  } = props;
+  let domRef = useDOMRef(ref);
+  let isErrorMessage = errorMessage && (isInvalid || validationState === 'invalid');
+  let {styleProps} = useStyleProps(props);
+
+  return (
+    <div
+      {...styleProps}
+      className={classNames(
+        styles,
+        'spectrum-HelpText',
+        `spectrum-HelpText--${isErrorMessage ? 'negative' : 'neutral'}`,
+        {'is-disabled': isDisabled},
+        styleProps.className
+      )}
+      ref={domRef}>
+      {isErrorMessage ? (
+        <>
+          {showErrorIcon && <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-HelpText-validationIcon')} />}
+          <div {...errorMessageProps} className={classNames(styles, 'spectrum-HelpText-text')}>
+            {errorMessage}
+          </div>
+        </>
+      ) : (
+        <div {...descriptionProps} className={classNames(styles, 'spectrum-HelpText-text')}>
+          {description}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 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 _HelpText = React.forwardRef(HelpText);
+export {_HelpText as HelpText};