@react-spectrum/datepicker 3.11.0 → 3.12.0

package/dist/{vars.61240e3b.css → vars.ba84240a.css}

@@ -97,6 +97,7 @@
   border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
   padding: 3px var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) 5px calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150))  - 1px);
   text-indent: 0;
+  inline-size: 100%;
   height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
   vertical-align: top;
   font-size: var(--spectrum-textfield-text-size, var(--spectrum-alias-font-size-default));
@@ -106,7 +107,6 @@
   -webkit-appearance: none;
   -moz-appearance: textfield;
   outline: none;
-  inline-size: 100%;
   margin: 0;
   overflow: visible;
 }
@@ -199,10 +199,10 @@
 }
 
 .zo2IKa_spectrum-Textfield--multiline .zo2IKa_spectrum-Textfield-input {
+  height: auto;
   min-height: var(--spectrum-global-dimension-size-700);
   padding: 3px var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) 5px calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150))  - 1px);
   resize: none;
-  height: auto;
   overflow: auto;
 }
 
@@ -547,4 +547,4 @@
     border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
   }
 }
-/*# sourceMappingURL=vars.61240e3b.css.map */
+/*# sourceMappingURL=vars.ba84240a.css.map */

package/dist/{vars.61240e3b.css.map → vars.ba84240a.css.map}

@@ -1 +1 @@
-{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;AAQE;;;;;;AAWF;;;;;;;;;;;;;;;;;;;;AA4CE;;;;;;;;AAYA;;;;;;;AAWE;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAMA;;;;AAKF;;;;;AAME;;;;AAQF;;;;;AAOA;;;;;AAAA;;;;;AAOA;;;;AAIA;;;;;;;;AAUA;;;;;;;AASA;;;;AAIA;;;;AASF;;;;AAIA;;;;;AAKE;;;;AAIA;;;;;AAME;;;;AAOJ;;;;;;;;AAUE;;;;AAKF;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOA;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAaA;;;;AASE;;;;AAIE;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKF;;;;;AAQF;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAME;;;;AAiBF;;;;;;AAKE;;;;AAKA;;;;;AAIE;;;;AAMF;;;;;;AAKE;;;;AAMF;;;;AAME;;;;;AAMF;;;;;;;AASE;;;;AAKA;;;;AAdF;;;;;;;AASE;;;;AAKA;;;;AAKF;;;;AAGE;;;;AAcE;;;;;AAOJ;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAME;;;;;AAMF;;;;;AAOF;;;;AAGE;;;;AAIA;;;;AAIA;;;;AAME;;;;;AASA;;;;AASJ;;;;AAIA;;;;AAKF;EACE;;;;;;;;;;;;EAUE;;;;;EAKE;;;;;;EAKE","sources":["packages/@adobe/spectrum-css-temp/components/textfield/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.61240e3b.css.map"}
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;AAQE;;;;;;AAWF;;;;;;;;;;;;;;;;;;;;AA4CE;;;;;;;;AAYA;;;;;;;AAWE;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAMA;;;;AAKF;;;;;AAME;;;;AAQF;;;;;AAOA;;;;;AAAA;;;;;AAOA;;;;AAIA;;;;;;;;AAUA;;;;;;;AASA;;;;AAIA;;;;AASF;;;;AAIA;;;;;AAKE;;;;AAIA;;;;;AAME;;;;AAOJ;;;;;;;;AAUE;;;;AAKF;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOA;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAaA;;;;AASE;;;;AAIE;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKF;;;;;AAQF;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAME;;;;AAiBF;;;;;;AAKE;;;;AAKA;;;;;AAIE;;;;AAMF;;;;;;AAKE;;;;AAMF;;;;AAME;;;;;AAMF;;;;;;;AASE;;;;AAKA;;;;AAdF;;;;;;;AASE;;;;AAKA;;;;AAKF;;;;AAGE;;;;AAcE;;;;;AAOJ;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAME;;;;;AAMF;;;;;AAOF;;;;AAGE;;;;AAIA;;;;AAIA;;;;AAME;;;;;AASA;;;;AASJ;;;;AAIA;;;;AAKF;EACE;;;;;;;;;;;;EAUE;;;;;EAKE;;;;;;EAKE","sources":["packages/@adobe/spectrum-css-temp/components/textfield/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.ba84240a.css.map"}

package/dist/{vars.6aae6db6.css → vars.cf48e391.css}

@@ -79,10 +79,10 @@
 }
 
 .penpuW_spectrum-InputGroup {
+  block-size: max-content;
   min-width: calc(2.5 * var(--spectrum-dropdown-height, var(--spectrum-global-dimension-size-400)));
   border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
   flex-flow: row;
-  block-size: max-content;
   display: inline-flex;
   position: relative;
 }
@@ -646,4 +646,4 @@
     box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
   }
 }
-/*# sourceMappingURL=vars.6aae6db6.css.map */
+/*# sourceMappingURL=vars.cf48e391.css.map */

package/dist/{vars.6aae6db6.css.map → vars.cf48e391.css.map}

@@ -1 +1 @@
-{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;AAWE;;;;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAaE;;;;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAaA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;AAMA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAMA;;;;;AAME;;;;;;;AAOE;;;;;;;AAQA;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASF;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKE;;;;AAMA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;;AAMA;;;;AAGE;;;;AASE;;;;;AAMF;;;;;;AAME;;;;;AAKA;;;;AAKA;;;;;;;AAQF;;;;;;;;AAME;;;;;;;;;;AAYA;;;;;;;AAYE;;;;;AAMA;;;;AAmBN;;;;;AAKI;;;;AAOE;;;;AAcA;;;;AAWF;;;;AAME;;;;AAOA;;;;AASA;;;;AAQJ;;;;AAgBA;;;;AAKF;;;;AAQM;;;;AAqBA;;;;AAgBA;;;;AAQA;;;;AAME;;;;AAOA;;;;AAQF;;;;AAgBF;;;;AAMA;;;;AAMF;;;;AAGE;;;;AAUA;;;;AAME;;;;AACE;;;;AAOF;;;;AAIE;;;;;AAQJ;;;;AAII;;;;AAEE;;;;AAIE;;;;AAKJ;;;;AAQR;EACE;;;;;;;;;;;;;;;;EAeE;;;;;;EAKA;;;;;;;;;;;;;;;;EAiBE;;;;EAeI;;;;EAQF;;;;EAQF;;;;EAIF;;;;EAuBE;;;;EAGA","sources":["packages/@adobe/spectrum-css-temp/components/inputgroup/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.6aae6db6.css.map"}
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;AAWE;;;;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAaE;;;;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAaA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;AAMA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAMA;;;;;AAME;;;;;;;AAOE;;;;;;;AAQA;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASF;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKE;;;;AAMA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;;AAMA;;;;AAGE;;;;AASE;;;;;AAMF;;;;;;AAME;;;;;AAKA;;;;AAKA;;;;;;;AAQF;;;;;;;;AAME;;;;;;;;;;AAYA;;;;;;;AAYE;;;;;AAMA;;;;AAmBN;;;;;AAKI;;;;AAOE;;;;AAcA;;;;AAWF;;;;AAME;;;;AAOA;;;;AASA;;;;AAQJ;;;;AAgBA;;;;AAKF;;;;AAQM;;;;AAqBA;;;;AAgBA;;;;AAQA;;;;AAME;;;;AAOA;;;;AAQF;;;;AAgBF;;;;AAMA;;;;AAMF;;;;AAGE;;;;AAUA;;;;AAME;;;;AACE;;;;AAOF;;;;AAIE;;;;;AAQJ;;;;AAII;;;;AAEE;;;;AAIE;;;;AAKJ;;;;AAQR;EACE;;;;;;;;;;;;;;;;EAeE;;;;;;EAKA;;;;;;;;;;;;;;;;EAiBE;;;;EAeI;;;;EAQF;;;;EAQF;;;;EAIF;;;;EAuBE;;;;EAGA","sources":["packages/@adobe/spectrum-css-temp/components/inputgroup/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.cf48e391.css.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/datepicker",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,25 +36,25 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.6.0",
-    "@react-aria/datepicker": "^3.12.0",
-    "@react-aria/focus": "^3.19.0",
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/interactions": "^3.22.5",
-    "@react-aria/utils": "^3.26.0",
-    "@react-spectrum/button": "^3.16.9",
-    "@react-spectrum/calendar": "^3.5.0",
-    "@react-spectrum/dialog": "^3.8.16",
-    "@react-spectrum/form": "^3.7.10",
-    "@react-spectrum/label": "^3.16.10",
-    "@react-spectrum/layout": "^3.6.10",
-    "@react-spectrum/utils": "^3.12.0",
-    "@react-spectrum/view": "^3.6.14",
-    "@react-stately/datepicker": "^3.11.0",
-    "@react-types/datepicker": "^3.9.0",
-    "@react-types/shared": "^3.26.0",
-    "@spectrum-icons/ui": "^3.6.11",
-    "@spectrum-icons/workflow": "^4.2.16",
+    "@internationalized/date": "^3.7.0",
+    "@react-aria/datepicker": "^3.13.0",
+    "@react-aria/focus": "^3.19.1",
+    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/interactions": "^3.23.0",
+    "@react-aria/utils": "^3.27.0",
+    "@react-spectrum/button": "^3.16.10",
+    "@react-spectrum/calendar": "^3.6.0",
+    "@react-spectrum/dialog": "^3.8.17",
+    "@react-spectrum/form": "^3.7.11",
+    "@react-spectrum/label": "^3.16.11",
+    "@react-spectrum/layout": "^3.6.11",
+    "@react-spectrum/utils": "^3.12.1",
+    "@react-spectrum/view": "^3.6.15",
+    "@react-stately/datepicker": "^3.12.0",
+    "@react-types/datepicker": "^3.10.0",
+    "@react-types/shared": "^3.27.0",
+    "@spectrum-icons/ui": "^3.6.12",
+    "@spectrum-icons/workflow": "^4.2.17",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
 }

package/src/DateField.tsx

@@ -26,7 +26,11 @@ import {useFormProps} from '@react-spectrum/form';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: FocusableRef<HTMLElement>) {
+/**
+ * DateFields allow users to enter and edit date and time values using a keyboard.
+ * Each part of a date value is displayed in an individually editable segment.
+ */
+export const DateField = React.forwardRef(function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
@@ -99,11 +103,4 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
       </Input>
     </Field>
   );
-}
-
-/**
- * DateFields allow users to enter and edit date and time values using a keyboard.
- * Each part of a date value is displayed in an individually editable segment.
- */
-const _DateField = React.forwardRef(DateField) as <T extends DateValue>(props: SpectrumDateFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
-export {_DateField as DateField};
+}) as <T extends DateValue>(props: SpectrumDateFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;

package/src/DatePicker.tsx

@@ -38,7 +38,10 @@ import {useHover} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {
+/**
+ * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ */
+export const DatePicker = React.forwardRef(function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
@@ -47,7 +50,8 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     isDisabled,
     placeholderValue,
     maxVisibleMonths = 1,
-    pageBehavior
+    pageBehavior,
+    firstDayOfWeek
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
   let targetRef = useRef<HTMLDivElement | null>(null);
@@ -168,6 +172,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
                   {...calendarProps}
                   visibleMonths={visibleMonths}
                   pageBehavior={pageBehavior}
+                  firstDayOfWeek={firstDayOfWeek}
                   UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />
                 {showTimeField &&
                   <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
@@ -191,10 +196,4 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
       </div>
     </Field>
   );
-}
-
-/**
- * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
- */
-const _DatePicker = React.forwardRef(DatePicker) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
-export {_DatePicker as DatePicker};
+}) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;

package/src/DateRangePicker.tsx

@@ -38,7 +38,11 @@ import {useHover} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {
+/**
+ * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
+ * to enter or select a date and time range.
+ */
+export const DateRangePicker = React.forwardRef(function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
@@ -47,7 +51,8 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     autoFocus,
     placeholderValue,
     maxVisibleMonths = 1,
-    pageBehavior
+    pageBehavior,
+    firstDayOfWeek
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
   let targetRef = useRef<HTMLDivElement | null>(null);
@@ -183,6 +188,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
                   {...calendarProps}
                   visibleMonths={visibleMonths}
                   pageBehavior={pageBehavior}
+                  firstDayOfWeek={firstDayOfWeek}
                   UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />
                 {showTimeField &&
                   <Flex gap="size-100" marginTop="size-100" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
@@ -217,7 +223,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
       </div>
     </Field>
   );
-}
+}) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
 
 function DateRangeDash() {
   return (
@@ -227,10 +233,3 @@ function DateRangeDash() {
       className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} />
   );
 }
-
-/**
- * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
- * to enter or select a date and time range.
- */
-const _DateRangePicker = React.forwardRef(DateRangePicker) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
-export {_DateRangePicker as DateRangePicker};

package/src/Input.tsx

@@ -19,7 +19,7 @@ import React, {ReactElement, useCallback, useRef} from 'react';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useFocusRing} from '@react-aria/focus';
 
-function Input(props, ref) {
+export const Input = React.forwardRef(function Input(props: any, ref: any) {
   let inputRef = useRef<HTMLInputElement | null>(null);
   let {
     isDisabled,
@@ -139,7 +139,4 @@ function Input(props, ref) {
       {validationIcon}
     </div>
   );
-}
-
-const _Input = React.forwardRef(Input);
-export {_Input as Input};
+});

package/src/TimeField.tsx

@@ -25,7 +25,11 @@ import {useProviderProps} from '@react-spectrum/provider';
 import {useTimeField} from '@react-aria/datepicker';
 import {useTimeFieldState} from '@react-stately/datepicker';
 
-function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {
+/**
+ * TimeFields allow users to enter and edit time values using a keyboard.
+ * Each part of the time is displayed in an individually editable segment.
+ */
+export const TimeField = React.forwardRef(function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
@@ -89,11 +93,4 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
       </Input>
     </Field>
   );
-}
-
-/**
- * TimeFields allow users to enter and edit time values using a keyboard.
- * Each part of the time is displayed in an individually editable segment.
- */
-const _TimeField = React.forwardRef(TimeField) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
-export {_TimeField as TimeField};
+}) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;