@react-spectrum/datepicker 3.9.5 → 3.10.0

package/dist/DateRangePicker.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DateRangePicker.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 CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDateRangePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {RangeCalendar} from '@react-spectrum/calendar';\nimport React, {ReactElement, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePicker} from '@react-aria/datepicker';\nimport {useDateRangePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    isQuiet,\n    isDisabled,\n    autoFocus,\n    placeholderValue,\n    maxVisibleMonths = 1,\n    pageBehavior\n  } = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement>();\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDateRangePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(\n    styles,\n    'spectrum-InputGroup',\n    {\n      'spectrum-InputGroup--quiet': isQuiet,\n      'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n      'is-disabled': isDisabled,\n      'is-hovered': isHovered,\n      'is-focused': isFocused,\n      'focus-ring': isFocusVisible && !isFocusedButton\n    }\n  );\n\n  let fieldClassName = classNames(\n    styles,\n    'spectrum-InputGroup-input',\n    {\n      'is-disabled': isDisabled,\n      'is-invalid': isInvalid && !isDisabled\n    }\n  );\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    descriptionProps.id = null;\n  }\n\n  let placeholder: DateValue = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <Input\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={fieldClassName}\n          disableFocusRing>\n          <DatePickerField\n            {...startFieldProps}\n            data-testid=\"start-date\"\n            isQuiet={props.isQuiet}\n            inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />\n          <DateRangeDash />\n          <DatePickerField\n            {...endFieldProps}\n            data-testid=\"end-date\"\n            isQuiet={props.isQuiet}\n            inputClassName={classNames(\n              styles,\n              'spectrum-Datepicker-endField',\n              classNames(\n                datepickerStyles,\n                'react-spectrum-Datepicker-endField'\n              )\n            )} />\n        </Input>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n            <Content>\n              <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <RangeCalendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  pageBehavior={pageBehavior}\n                  UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />\n                {showTimeField &&\n                  <Flex gap=\"size-100\" marginTop=\"size-100\" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n                    <TimeField\n                      label={stringFormatter.format('startTime')}\n                      value={state.timeRange?.start || null}\n                      onChange={v => state.setTime('start', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                      flex />\n                    <TimeField\n                      label={stringFormatter.format('endTime')}\n                      value={state.timeRange?.end || null}\n                      onChange={v => state.setTime('end', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                      flex />\n                  </Flex>\n                }\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}\n\nfunction DateRangeDash() {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-testid=\"date-range-dash\"\n      className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} />\n  );\n}\n\n/**\n * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nconst _DateRangePicker = React.forwardRef(DateRangePicker) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_DateRangePicker as DateRangePicker};\n"],"names":[],"version":3,"file":"DateRangePicker.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DateRangePicker.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 CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDateRangePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {RangeCalendar} from '@react-spectrum/calendar';\nimport React, {ReactElement, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePicker} from '@react-aria/datepicker';\nimport {useDateRangePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    isQuiet,\n    isDisabled,\n    autoFocus,\n    placeholderValue,\n    maxVisibleMonths = 1,\n    pageBehavior\n  } = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement>(undefined);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDateRangePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(\n    styles,\n    'spectrum-InputGroup',\n    {\n      'spectrum-InputGroup--quiet': isQuiet,\n      'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n      'is-disabled': isDisabled,\n      'is-hovered': isHovered,\n      'is-focused': isFocused,\n      'focus-ring': isFocusVisible && !isFocusedButton\n    }\n  );\n\n  let fieldClassName = classNames(\n    styles,\n    'spectrum-InputGroup-input',\n    {\n      'is-disabled': isDisabled,\n      'is-invalid': isInvalid && !isDisabled\n    }\n  );\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    descriptionProps.id = null;\n  }\n\n  let placeholder: DateValue = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash\n  let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <Input\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={fieldClassName}\n          disableFocusRing\n          minWidth={approximateWidth}>\n          <DatePickerField\n            {...startFieldProps}\n            data-testid=\"start-date\"\n            isQuiet={props.isQuiet}\n            inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />\n          <DateRangeDash />\n          <DatePickerField\n            {...endFieldProps}\n            data-testid=\"end-date\"\n            isQuiet={props.isQuiet}\n            inputClassName={classNames(\n              styles,\n              'spectrum-Datepicker-endField',\n              classNames(\n                datepickerStyles,\n                'react-spectrum-Datepicker-endField'\n              )\n            )} />\n        </Input>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n            <Content>\n              <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <RangeCalendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  pageBehavior={pageBehavior}\n                  UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />\n                {showTimeField &&\n                  <Flex gap=\"size-100\" marginTop=\"size-100\" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n                    <TimeField\n                      label={stringFormatter.format('startTime')}\n                      value={state.timeRange?.start || null}\n                      onChange={v => state.setTime('start', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                      flex />\n                    <TimeField\n                      label={stringFormatter.format('endTime')}\n                      value={state.timeRange?.end || null}\n                      onChange={v => state.setTime('end', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                      flex />\n                  </Flex>\n                }\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}\n\nfunction DateRangeDash() {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-testid=\"date-range-dash\"\n      className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} />\n  );\n}\n\n/**\n * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nconst _DateRangePicker = React.forwardRef(DateRangePicker) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_DateRangePicker as DateRangePicker};\n"],"names":[],"version":3,"file":"DateRangePicker.module.js.map"}

package/dist/Input.main.js

@@ -1,6 +1,6 @@
-require("./styles.36ea4632.css");
+require("./styles.b562cf4b.css");
 var $91c3db8c6a21ca71$exports = require("./styles_css.main.js");
-require("./vars.3692148b.css");
+require("./vars.3d0e5be0.css");
 var $40cb3a00c193680f$exports = require("./textfield_vars_css.main.js");
 var $9cini$spectrumiconsuiAlertMedium = require("@spectrum-icons/ui/AlertMedium");
 var $9cini$spectrumiconsuiCheckmarkMedium = require("@spectrum-icons/ui/CheckmarkMedium");
@@ -77,29 +77,29 @@ function $c3ebc4931d9b9977$var$Input(props, ref) {
     // when there is enough space for the padding to be re-added. Ideally we'd
     // use a resize observer on a parent element, but it's hard to know _what_
     // parent element.
-    (0, $9cini$reactariautils.useEvent)((0, $9cini$react.useRef)(typeof window !== "undefined" ? window : null), "resize", onResize);
+    (0, $9cini$reactariautils.useEvent)((0, $9cini$react.useRef)(typeof window !== 'undefined' ? window : null), 'resize', onResize);
     let { focusProps: focusProps, isFocusVisible: isFocusVisible, isFocused: isFocused } = (0, $9cini$reactariafocus.useFocusRing)({
         isTextInput: true,
         within: true
     });
-    let isInvalid = validationState === "invalid" && !isDisabled;
-    let textfieldClass = (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield", {
-        "spectrum-Textfield--invalid": isInvalid,
-        "spectrum-Textfield--valid": validationState === "valid" && !isDisabled,
-        "spectrum-Textfield--quiet": isQuiet,
-        "focus-ring": isFocusVisible && !disableFocusRing
-    }, (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), "react-spectrum-Datepicker-field"), className);
-    let inputClass = (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-input", {
-        "is-disabled": isDisabled,
-        "is-focused": isFocused
-    }, (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), "react-spectrum-DateField-Input"), reservePadding && (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), "react-spectrum-Datepicker-input"), inputClassName);
-    let iconClass = (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-validationIcon");
+    let isInvalid = validationState === 'invalid' && !isDisabled;
+    let textfieldClass = (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield', {
+        'spectrum-Textfield--invalid': isInvalid,
+        'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
+        'spectrum-Textfield--quiet': isQuiet,
+        'focus-ring': isFocusVisible && !disableFocusRing
+    }, (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-field'), className);
+    let inputClass = (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-input', {
+        'is-disabled': isDisabled,
+        'is-focused': isFocused
+    }, (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-DateField-Input'), reservePadding && (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-input'), inputClassName);
+    let iconClass = (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($40cb3a00c193680f$exports))), 'spectrum-Textfield-validationIcon');
     let validationIcon = null;
-    if (validationState === "invalid" && !isDisabled) validationIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($9cini$react))).createElement((0, ($parcel$interopDefault($9cini$spectrumiconsuiAlertMedium))), {
+    if (validationState === 'invalid' && !isDisabled) validationIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($9cini$react))).createElement((0, ($parcel$interopDefault($9cini$spectrumiconsuiAlertMedium))), {
         "data-testid": "invalid-icon",
         UNSAFE_className: iconClass
     });
-    else if (validationState === "valid" && !isDisabled) validationIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($9cini$react))).createElement((0, ($parcel$interopDefault($9cini$spectrumiconsuiCheckmarkMedium))), {
+    else if (validationState === 'valid' && !isDisabled) validationIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($9cini$react))).createElement((0, ($parcel$interopDefault($9cini$spectrumiconsuiCheckmarkMedium))), {
         "data-testid": "valid-icon",
         UNSAFE_className: iconClass
     });
@@ -113,9 +113,15 @@ function $c3ebc4931d9b9977$var$Input(props, ref) {
         className: inputClass
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($9cini$react))).createElement("div", {
         role: "presentation",
-        className: (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), "react-spectrum-Datepicker-inputContents"),
+        className: (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-inputContents'),
         ref: (0, $9cini$reactariautils.mergeRefs)(ref, inputRef)
-    }, children)), validationIcon);
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($9cini$react))).createElement("div", {
+        role: "presentation",
+        className: (0, $9cini$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-inputSized'),
+        style: {
+            minWidth: props.minWidth
+        }
+    }, children))), validationIcon);
 }
 const $c3ebc4931d9b9977$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$interopDefault($9cini$react))).forwardRef($c3ebc4931d9b9977$var$Input);
 

package/dist/Input.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/Input.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 Alert from '@spectrum-icons/ui/AlertMedium';\nimport Checkmark from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, useValueEffect} from '@react-spectrum/utils';\nimport datepickerStyles from './styles.css';\nimport {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport React, {useCallback, useRef} from 'react';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\n\nfunction Input(props, ref) {\n  let inputRef = useRef(null);\n  let {\n    isDisabled,\n    isQuiet,\n    inputClassName,\n    validationState,\n    children,\n    fieldProps,\n    className,\n    style,\n    disableFocusRing\n  } = props;\n\n  // Reserve padding for the error icon when the width of the input is unconstrained.\n  // When constrained, don't reserve space because adding it only when invalid will\n  // not cause a layout shift.\n  let [reservePadding, setReservePadding] = useValueEffect(false);\n  let onResize = useCallback(() => setReservePadding(function *(reservePadding) {\n    if (inputRef.current) {\n      if (reservePadding) {\n        // Try to collapse padding if the content is clipped.\n        if (inputRef.current.scrollWidth > inputRef.current.offsetWidth) {\n          let width = inputRef.current.parentElement.offsetWidth;\n          yield false;\n\n          // If removing padding causes a layout shift, add it back.\n          if (inputRef.current.parentElement.offsetWidth !== width) {\n            yield true;\n          }\n        }\n      } else {\n        // Try to add padding if the content is not clipped.\n        if (inputRef.current.offsetWidth >= inputRef.current.scrollWidth) {\n          let width = inputRef.current.parentElement.offsetWidth;\n          yield true;\n\n          // If adding padding does not change the width (i.e. width is constrained), remove it again.\n          if (inputRef.current.parentElement.offsetWidth === width) {\n            yield false;\n          }\n        }\n      }\n    }\n\n  }), [inputRef, setReservePadding]);\n\n  useLayoutEffect(onResize, [onResize]);\n  useResizeObserver({\n    ref: inputRef,\n    onResize\n  });\n\n  // We also need to listen for resize events of the window so we can detect\n  // when there is enough space for the padding to be re-added. Ideally we'd\n  // use a resize observer on a parent element, but it's hard to know _what_\n  // parent element.\n  useEvent(useRef(typeof window !== 'undefined' ? window : null), 'resize', onResize);\n\n  let {focusProps, isFocusVisible, isFocused} = useFocusRing({\n    isTextInput: true,\n    within: true\n  });\n\n  let isInvalid = validationState === 'invalid' && !isDisabled;\n  let textfieldClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield',\n    {\n      'spectrum-Textfield--invalid': isInvalid,\n      'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n      'spectrum-Textfield--quiet': isQuiet,\n      'focus-ring': isFocusVisible && !disableFocusRing\n    },\n    classNames(datepickerStyles, 'react-spectrum-Datepicker-field'),\n    className\n  );\n\n  let inputClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield-input',\n    {\n      'is-disabled': isDisabled,\n      'is-focused': isFocused\n    },\n    classNames(datepickerStyles, 'react-spectrum-DateField-Input'),\n    reservePadding && classNames(datepickerStyles, 'react-spectrum-Datepicker-input'),\n    inputClassName\n  );\n\n  let iconClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield-validationIcon'\n  );\n\n  let validationIcon = null;\n  if (validationState === 'invalid' && !isDisabled) {\n    validationIcon = <Alert data-testid=\"invalid-icon\" UNSAFE_className={iconClass} />;\n  } else if (validationState === 'valid' && !isDisabled) {\n    validationIcon = <Checkmark data-testid=\"valid-icon\" UNSAFE_className={iconClass} />;\n  }\n\n  return (\n    <div role=\"presentation\" {...mergeProps(fieldProps, focusProps)} className={textfieldClass} style={style}>\n      <div role=\"presentation\" className={inputClass}>\n        <div role=\"presentation\" className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputContents')} ref={mergeRefs(ref, inputRef)}>\n          {children}\n        </div>\n      </div>\n      {validationIcon}\n    </div>\n  );\n}\n\nconst _Input = React.forwardRef(Input);\nexport {_Input as Input};\n"],"names":[],"version":3,"file":"Input.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/Input.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 Alert from '@spectrum-icons/ui/AlertMedium';\nimport Checkmark from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, useValueEffect} from '@react-spectrum/utils';\nimport datepickerStyles from './styles.css';\nimport {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport React, {useCallback, useRef} from 'react';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\n\nfunction Input(props, ref) {\n  let inputRef = useRef(null);\n  let {\n    isDisabled,\n    isQuiet,\n    inputClassName,\n    validationState,\n    children,\n    fieldProps,\n    className,\n    style,\n    disableFocusRing\n  } = props;\n\n  // Reserve padding for the error icon when the width of the input is unconstrained.\n  // When constrained, don't reserve space because adding it only when invalid will\n  // not cause a layout shift.\n  let [reservePadding, setReservePadding] = useValueEffect(false);\n  let onResize = useCallback(() => setReservePadding(function *(reservePadding) {\n    if (inputRef.current) {\n      if (reservePadding) {\n        // Try to collapse padding if the content is clipped.\n        if (inputRef.current.scrollWidth > inputRef.current.offsetWidth) {\n          let width = inputRef.current.parentElement.offsetWidth;\n          yield false;\n\n          // If removing padding causes a layout shift, add it back.\n          if (inputRef.current.parentElement.offsetWidth !== width) {\n            yield true;\n          }\n        }\n      } else {\n        // Try to add padding if the content is not clipped.\n        if (inputRef.current.offsetWidth >= inputRef.current.scrollWidth) {\n          let width = inputRef.current.parentElement.offsetWidth;\n          yield true;\n\n          // If adding padding does not change the width (i.e. width is constrained), remove it again.\n          if (inputRef.current.parentElement.offsetWidth === width) {\n            yield false;\n          }\n        }\n      }\n    }\n\n  }), [inputRef, setReservePadding]);\n\n  useLayoutEffect(onResize, [onResize]);\n  useResizeObserver({\n    ref: inputRef,\n    onResize\n  });\n\n  // We also need to listen for resize events of the window so we can detect\n  // when there is enough space for the padding to be re-added. Ideally we'd\n  // use a resize observer on a parent element, but it's hard to know _what_\n  // parent element.\n  useEvent(useRef(typeof window !== 'undefined' ? window : null), 'resize', onResize);\n\n  let {focusProps, isFocusVisible, isFocused} = useFocusRing({\n    isTextInput: true,\n    within: true\n  });\n\n  let isInvalid = validationState === 'invalid' && !isDisabled;\n  let textfieldClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield',\n    {\n      'spectrum-Textfield--invalid': isInvalid,\n      'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n      'spectrum-Textfield--quiet': isQuiet,\n      'focus-ring': isFocusVisible && !disableFocusRing\n    },\n    classNames(datepickerStyles, 'react-spectrum-Datepicker-field'),\n    className\n  );\n\n  let inputClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield-input',\n    {\n      'is-disabled': isDisabled,\n      'is-focused': isFocused\n    },\n    classNames(datepickerStyles, 'react-spectrum-DateField-Input'),\n    reservePadding && classNames(datepickerStyles, 'react-spectrum-Datepicker-input'),\n    inputClassName\n  );\n\n  let iconClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield-validationIcon'\n  );\n\n  let validationIcon = null;\n  if (validationState === 'invalid' && !isDisabled) {\n    validationIcon = <Alert data-testid=\"invalid-icon\" UNSAFE_className={iconClass} />;\n  } else if (validationState === 'valid' && !isDisabled) {\n    validationIcon = <Checkmark data-testid=\"valid-icon\" UNSAFE_className={iconClass} />;\n  }\n\n  return (\n    <div role=\"presentation\" {...mergeProps(fieldProps, focusProps)} className={textfieldClass} style={style}>\n      <div role=\"presentation\" className={inputClass}>\n        <div\n          role=\"presentation\"\n          className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputContents')}\n          ref={mergeRefs(ref, inputRef)}>\n          <div\n            role=\"presentation\"\n            className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputSized')}\n            style={{minWidth: props.minWidth}}>\n            {children}\n          </div>\n        </div>\n      </div>\n      {validationIcon}\n    </div>\n  );\n}\n\nconst _Input = React.forwardRef(Input);\nexport {_Input as Input};\n"],"names":[],"version":3,"file":"Input.main.js.map"}

package/dist/Input.mjs

@@ -1,6 +1,6 @@
-import "./styles.36ea4632.css";
+import "./styles.b562cf4b.css";
 import $fVzF9$styles_cssmodulejs from "./styles_css.mjs";
-import "./vars.3692148b.css";
+import "./vars.3d0e5be0.css";
 import $fVzF9$textfield_vars_cssmodulejs from "./textfield_vars_css.mjs";
 import $fVzF9$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
 import $fVzF9$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
@@ -71,29 +71,29 @@ function $79348162c55d687f$var$Input(props, ref) {
     // when there is enough space for the padding to be re-added. Ideally we'd
     // use a resize observer on a parent element, but it's hard to know _what_
     // parent element.
-    (0, $fVzF9$useEvent)((0, $fVzF9$useRef)(typeof window !== "undefined" ? window : null), "resize", onResize);
+    (0, $fVzF9$useEvent)((0, $fVzF9$useRef)(typeof window !== 'undefined' ? window : null), 'resize', onResize);
     let { focusProps: focusProps, isFocusVisible: isFocusVisible, isFocused: isFocused } = (0, $fVzF9$useFocusRing)({
         isTextInput: true,
         within: true
     });
-    let isInvalid = validationState === "invalid" && !isDisabled;
-    let textfieldClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), "spectrum-Textfield", {
-        "spectrum-Textfield--invalid": isInvalid,
-        "spectrum-Textfield--valid": validationState === "valid" && !isDisabled,
-        "spectrum-Textfield--quiet": isQuiet,
-        "focus-ring": isFocusVisible && !disableFocusRing
-    }, (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), "react-spectrum-Datepicker-field"), className);
-    let inputClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), "spectrum-Textfield-input", {
-        "is-disabled": isDisabled,
-        "is-focused": isFocused
-    }, (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), "react-spectrum-DateField-Input"), reservePadding && (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), "react-spectrum-Datepicker-input"), inputClassName);
-    let iconClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), "spectrum-Textfield-validationIcon");
+    let isInvalid = validationState === 'invalid' && !isDisabled;
+    let textfieldClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), 'spectrum-Textfield', {
+        'spectrum-Textfield--invalid': isInvalid,
+        'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
+        'spectrum-Textfield--quiet': isQuiet,
+        'focus-ring': isFocusVisible && !disableFocusRing
+    }, (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), 'react-spectrum-Datepicker-field'), className);
+    let inputClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), 'spectrum-Textfield-input', {
+        'is-disabled': isDisabled,
+        'is-focused': isFocused
+    }, (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), 'react-spectrum-DateField-Input'), reservePadding && (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), 'react-spectrum-Datepicker-input'), inputClassName);
+    let iconClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), 'spectrum-Textfield-validationIcon');
     let validationIcon = null;
-    if (validationState === "invalid" && !isDisabled) validationIcon = /*#__PURE__*/ (0, $fVzF9$react).createElement((0, $fVzF9$spectrumiconsuiAlertMedium), {
+    if (validationState === 'invalid' && !isDisabled) validationIcon = /*#__PURE__*/ (0, $fVzF9$react).createElement((0, $fVzF9$spectrumiconsuiAlertMedium), {
         "data-testid": "invalid-icon",
         UNSAFE_className: iconClass
     });
-    else if (validationState === "valid" && !isDisabled) validationIcon = /*#__PURE__*/ (0, $fVzF9$react).createElement((0, $fVzF9$spectrumiconsuiCheckmarkMedium), {
+    else if (validationState === 'valid' && !isDisabled) validationIcon = /*#__PURE__*/ (0, $fVzF9$react).createElement((0, $fVzF9$spectrumiconsuiCheckmarkMedium), {
         "data-testid": "valid-icon",
         UNSAFE_className: iconClass
     });
@@ -107,12 +107,18 @@ function $79348162c55d687f$var$Input(props, ref) {
         className: inputClass
     }, /*#__PURE__*/ (0, $fVzF9$react).createElement("div", {
         role: "presentation",
-        className: (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), "react-spectrum-Datepicker-inputContents"),
+        className: (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), 'react-spectrum-Datepicker-inputContents'),
         ref: (0, $fVzF9$mergeRefs)(ref, inputRef)
-    }, children)), validationIcon);
+    }, /*#__PURE__*/ (0, $fVzF9$react).createElement("div", {
+        role: "presentation",
+        className: (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), 'react-spectrum-Datepicker-inputSized'),
+        style: {
+            minWidth: props.minWidth
+        }
+    }, children))), validationIcon);
 }
 const $79348162c55d687f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $fVzF9$react).forwardRef($79348162c55d687f$var$Input);
 
 
 export {$79348162c55d687f$export$f5b8910cec6cf069 as Input};
-//# sourceMappingURL=Input.mjs.map
+//# sourceMappingURL=Input.module.js.map

package/dist/Input.module.js

@@ -1,6 +1,6 @@
-import "./styles.36ea4632.css";
+import "./styles.b562cf4b.css";
 import $fVzF9$styles_cssmodulejs from "./styles_css.module.js";
-import "./vars.3692148b.css";
+import "./vars.3d0e5be0.css";
 import $fVzF9$textfield_vars_cssmodulejs from "./textfield_vars_css.module.js";
 import $fVzF9$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
 import $fVzF9$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
@@ -71,29 +71,29 @@ function $79348162c55d687f$var$Input(props, ref) {
     // when there is enough space for the padding to be re-added. Ideally we'd
     // use a resize observer on a parent element, but it's hard to know _what_
     // parent element.
-    (0, $fVzF9$useEvent)((0, $fVzF9$useRef)(typeof window !== "undefined" ? window : null), "resize", onResize);
+    (0, $fVzF9$useEvent)((0, $fVzF9$useRef)(typeof window !== 'undefined' ? window : null), 'resize', onResize);
     let { focusProps: focusProps, isFocusVisible: isFocusVisible, isFocused: isFocused } = (0, $fVzF9$useFocusRing)({
         isTextInput: true,
         within: true
     });
-    let isInvalid = validationState === "invalid" && !isDisabled;
-    let textfieldClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), "spectrum-Textfield", {
-        "spectrum-Textfield--invalid": isInvalid,
-        "spectrum-Textfield--valid": validationState === "valid" && !isDisabled,
-        "spectrum-Textfield--quiet": isQuiet,
-        "focus-ring": isFocusVisible && !disableFocusRing
-    }, (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), "react-spectrum-Datepicker-field"), className);
-    let inputClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), "spectrum-Textfield-input", {
-        "is-disabled": isDisabled,
-        "is-focused": isFocused
-    }, (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), "react-spectrum-DateField-Input"), reservePadding && (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), "react-spectrum-Datepicker-input"), inputClassName);
-    let iconClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), "spectrum-Textfield-validationIcon");
+    let isInvalid = validationState === 'invalid' && !isDisabled;
+    let textfieldClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), 'spectrum-Textfield', {
+        'spectrum-Textfield--invalid': isInvalid,
+        'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
+        'spectrum-Textfield--quiet': isQuiet,
+        'focus-ring': isFocusVisible && !disableFocusRing
+    }, (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), 'react-spectrum-Datepicker-field'), className);
+    let inputClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), 'spectrum-Textfield-input', {
+        'is-disabled': isDisabled,
+        'is-focused': isFocused
+    }, (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), 'react-spectrum-DateField-Input'), reservePadding && (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), 'react-spectrum-Datepicker-input'), inputClassName);
+    let iconClass = (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$textfield_vars_cssmodulejs))), 'spectrum-Textfield-validationIcon');
     let validationIcon = null;
-    if (validationState === "invalid" && !isDisabled) validationIcon = /*#__PURE__*/ (0, $fVzF9$react).createElement((0, $fVzF9$spectrumiconsuiAlertMedium), {
+    if (validationState === 'invalid' && !isDisabled) validationIcon = /*#__PURE__*/ (0, $fVzF9$react).createElement((0, $fVzF9$spectrumiconsuiAlertMedium), {
         "data-testid": "invalid-icon",
         UNSAFE_className: iconClass
     });
-    else if (validationState === "valid" && !isDisabled) validationIcon = /*#__PURE__*/ (0, $fVzF9$react).createElement((0, $fVzF9$spectrumiconsuiCheckmarkMedium), {
+    else if (validationState === 'valid' && !isDisabled) validationIcon = /*#__PURE__*/ (0, $fVzF9$react).createElement((0, $fVzF9$spectrumiconsuiCheckmarkMedium), {
         "data-testid": "valid-icon",
         UNSAFE_className: iconClass
     });
@@ -107,9 +107,15 @@ function $79348162c55d687f$var$Input(props, ref) {
         className: inputClass
     }, /*#__PURE__*/ (0, $fVzF9$react).createElement("div", {
         role: "presentation",
-        className: (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), "react-spectrum-Datepicker-inputContents"),
+        className: (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), 'react-spectrum-Datepicker-inputContents'),
         ref: (0, $fVzF9$mergeRefs)(ref, inputRef)
-    }, children)), validationIcon);
+    }, /*#__PURE__*/ (0, $fVzF9$react).createElement("div", {
+        role: "presentation",
+        className: (0, $fVzF9$classNames)((0, ($parcel$interopDefault($fVzF9$styles_cssmodulejs))), 'react-spectrum-Datepicker-inputSized'),
+        style: {
+            minWidth: props.minWidth
+        }
+    }, children))), validationIcon);
 }
 const $79348162c55d687f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $fVzF9$react).forwardRef($79348162c55d687f$var$Input);
 

package/dist/Input.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/Input.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 Alert from '@spectrum-icons/ui/AlertMedium';\nimport Checkmark from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, useValueEffect} from '@react-spectrum/utils';\nimport datepickerStyles from './styles.css';\nimport {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport React, {useCallback, useRef} from 'react';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\n\nfunction Input(props, ref) {\n  let inputRef = useRef(null);\n  let {\n    isDisabled,\n    isQuiet,\n    inputClassName,\n    validationState,\n    children,\n    fieldProps,\n    className,\n    style,\n    disableFocusRing\n  } = props;\n\n  // Reserve padding for the error icon when the width of the input is unconstrained.\n  // When constrained, don't reserve space because adding it only when invalid will\n  // not cause a layout shift.\n  let [reservePadding, setReservePadding] = useValueEffect(false);\n  let onResize = useCallback(() => setReservePadding(function *(reservePadding) {\n    if (inputRef.current) {\n      if (reservePadding) {\n        // Try to collapse padding if the content is clipped.\n        if (inputRef.current.scrollWidth > inputRef.current.offsetWidth) {\n          let width = inputRef.current.parentElement.offsetWidth;\n          yield false;\n\n          // If removing padding causes a layout shift, add it back.\n          if (inputRef.current.parentElement.offsetWidth !== width) {\n            yield true;\n          }\n        }\n      } else {\n        // Try to add padding if the content is not clipped.\n        if (inputRef.current.offsetWidth >= inputRef.current.scrollWidth) {\n          let width = inputRef.current.parentElement.offsetWidth;\n          yield true;\n\n          // If adding padding does not change the width (i.e. width is constrained), remove it again.\n          if (inputRef.current.parentElement.offsetWidth === width) {\n            yield false;\n          }\n        }\n      }\n    }\n\n  }), [inputRef, setReservePadding]);\n\n  useLayoutEffect(onResize, [onResize]);\n  useResizeObserver({\n    ref: inputRef,\n    onResize\n  });\n\n  // We also need to listen for resize events of the window so we can detect\n  // when there is enough space for the padding to be re-added. Ideally we'd\n  // use a resize observer on a parent element, but it's hard to know _what_\n  // parent element.\n  useEvent(useRef(typeof window !== 'undefined' ? window : null), 'resize', onResize);\n\n  let {focusProps, isFocusVisible, isFocused} = useFocusRing({\n    isTextInput: true,\n    within: true\n  });\n\n  let isInvalid = validationState === 'invalid' && !isDisabled;\n  let textfieldClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield',\n    {\n      'spectrum-Textfield--invalid': isInvalid,\n      'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n      'spectrum-Textfield--quiet': isQuiet,\n      'focus-ring': isFocusVisible && !disableFocusRing\n    },\n    classNames(datepickerStyles, 'react-spectrum-Datepicker-field'),\n    className\n  );\n\n  let inputClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield-input',\n    {\n      'is-disabled': isDisabled,\n      'is-focused': isFocused\n    },\n    classNames(datepickerStyles, 'react-spectrum-DateField-Input'),\n    reservePadding && classNames(datepickerStyles, 'react-spectrum-Datepicker-input'),\n    inputClassName\n  );\n\n  let iconClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield-validationIcon'\n  );\n\n  let validationIcon = null;\n  if (validationState === 'invalid' && !isDisabled) {\n    validationIcon = <Alert data-testid=\"invalid-icon\" UNSAFE_className={iconClass} />;\n  } else if (validationState === 'valid' && !isDisabled) {\n    validationIcon = <Checkmark data-testid=\"valid-icon\" UNSAFE_className={iconClass} />;\n  }\n\n  return (\n    <div role=\"presentation\" {...mergeProps(fieldProps, focusProps)} className={textfieldClass} style={style}>\n      <div role=\"presentation\" className={inputClass}>\n        <div role=\"presentation\" className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputContents')} ref={mergeRefs(ref, inputRef)}>\n          {children}\n        </div>\n      </div>\n      {validationIcon}\n    </div>\n  );\n}\n\nconst _Input = React.forwardRef(Input);\nexport {_Input as Input};\n"],"names":[],"version":3,"file":"Input.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/Input.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 Alert from '@spectrum-icons/ui/AlertMedium';\nimport Checkmark from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, useValueEffect} from '@react-spectrum/utils';\nimport datepickerStyles from './styles.css';\nimport {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport React, {useCallback, useRef} from 'react';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\n\nfunction Input(props, ref) {\n  let inputRef = useRef(null);\n  let {\n    isDisabled,\n    isQuiet,\n    inputClassName,\n    validationState,\n    children,\n    fieldProps,\n    className,\n    style,\n    disableFocusRing\n  } = props;\n\n  // Reserve padding for the error icon when the width of the input is unconstrained.\n  // When constrained, don't reserve space because adding it only when invalid will\n  // not cause a layout shift.\n  let [reservePadding, setReservePadding] = useValueEffect(false);\n  let onResize = useCallback(() => setReservePadding(function *(reservePadding) {\n    if (inputRef.current) {\n      if (reservePadding) {\n        // Try to collapse padding if the content is clipped.\n        if (inputRef.current.scrollWidth > inputRef.current.offsetWidth) {\n          let width = inputRef.current.parentElement.offsetWidth;\n          yield false;\n\n          // If removing padding causes a layout shift, add it back.\n          if (inputRef.current.parentElement.offsetWidth !== width) {\n            yield true;\n          }\n        }\n      } else {\n        // Try to add padding if the content is not clipped.\n        if (inputRef.current.offsetWidth >= inputRef.current.scrollWidth) {\n          let width = inputRef.current.parentElement.offsetWidth;\n          yield true;\n\n          // If adding padding does not change the width (i.e. width is constrained), remove it again.\n          if (inputRef.current.parentElement.offsetWidth === width) {\n            yield false;\n          }\n        }\n      }\n    }\n\n  }), [inputRef, setReservePadding]);\n\n  useLayoutEffect(onResize, [onResize]);\n  useResizeObserver({\n    ref: inputRef,\n    onResize\n  });\n\n  // We also need to listen for resize events of the window so we can detect\n  // when there is enough space for the padding to be re-added. Ideally we'd\n  // use a resize observer on a parent element, but it's hard to know _what_\n  // parent element.\n  useEvent(useRef(typeof window !== 'undefined' ? window : null), 'resize', onResize);\n\n  let {focusProps, isFocusVisible, isFocused} = useFocusRing({\n    isTextInput: true,\n    within: true\n  });\n\n  let isInvalid = validationState === 'invalid' && !isDisabled;\n  let textfieldClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield',\n    {\n      'spectrum-Textfield--invalid': isInvalid,\n      'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n      'spectrum-Textfield--quiet': isQuiet,\n      'focus-ring': isFocusVisible && !disableFocusRing\n    },\n    classNames(datepickerStyles, 'react-spectrum-Datepicker-field'),\n    className\n  );\n\n  let inputClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield-input',\n    {\n      'is-disabled': isDisabled,\n      'is-focused': isFocused\n    },\n    classNames(datepickerStyles, 'react-spectrum-DateField-Input'),\n    reservePadding && classNames(datepickerStyles, 'react-spectrum-Datepicker-input'),\n    inputClassName\n  );\n\n  let iconClass = classNames(\n    textfieldStyles,\n    'spectrum-Textfield-validationIcon'\n  );\n\n  let validationIcon = null;\n  if (validationState === 'invalid' && !isDisabled) {\n    validationIcon = <Alert data-testid=\"invalid-icon\" UNSAFE_className={iconClass} />;\n  } else if (validationState === 'valid' && !isDisabled) {\n    validationIcon = <Checkmark data-testid=\"valid-icon\" UNSAFE_className={iconClass} />;\n  }\n\n  return (\n    <div role=\"presentation\" {...mergeProps(fieldProps, focusProps)} className={textfieldClass} style={style}>\n      <div role=\"presentation\" className={inputClass}>\n        <div\n          role=\"presentation\"\n          className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputContents')}\n          ref={mergeRefs(ref, inputRef)}>\n          <div\n            role=\"presentation\"\n            className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputSized')}\n            style={{minWidth: props.minWidth}}>\n            {children}\n          </div>\n        </div>\n      </div>\n      {validationIcon}\n    </div>\n  );\n}\n\nconst _Input = React.forwardRef(Input);\nexport {_Input as Input};\n"],"names":[],"version":3,"file":"Input.module.js.map"}

package/dist/TimeField.main.js

@@ -1,5 +1,5 @@
 var $edac158d20ebe4a9$exports = require("./DatePickerSegment.main.js");
-require("./styles.36ea4632.css");
+require("./styles.b562cf4b.css");
 var $91c3db8c6a21ca71$exports = require("./styles_css.main.js");
 var $c3ebc4931d9b9977$exports = require("./Input.main.js");
 var $4d2e419f522adb48$exports = require("./utils.main.js");
@@ -60,7 +60,8 @@ function $740ff83729a8f317$var$TimeField(props, ref) {
         ...props,
         inputRef: inputRef
     }, state, fieldRef);
-    let validationState = state.validationState || (isInvalid ? "invalid" : null);
+    let validationState = state.validationState || (isInvalid ? 'invalid' : null);
+    let approximateWidth = (0, $4d2e419f522adb48$exports.useFormattedDateWidth)(state) + 'ch';
     return /*#__PURE__*/ (0, ($parcel$interopDefault($gfZkn$react))).createElement((0, $gfZkn$reactspectrumlabel.Field), {
         ...props,
         ref: domRef,
@@ -72,7 +73,7 @@ function $740ff83729a8f317$var$TimeField(props, ref) {
         isInvalid: isInvalid,
         validationErrors: validationErrors,
         validationDetails: validationDetails,
-        wrapperClassName: (0, $gfZkn$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), "react-spectrum-TimeField-fieldWrapper")
+        wrapperClassName: (0, $gfZkn$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-TimeField-fieldWrapper')
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($gfZkn$react))).createElement((0, $c3ebc4931d9b9977$exports.Input), {
         ref: fieldRef,
         fieldProps: fieldProps,
@@ -80,7 +81,8 @@ function $740ff83729a8f317$var$TimeField(props, ref) {
         isQuiet: isQuiet,
         autoFocus: autoFocus,
         validationState: validationState,
-        className: (0, $gfZkn$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), "react-spectrum-TimeField")
+        minWidth: approximateWidth,
+        className: (0, $gfZkn$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-TimeField')
     }, state.segments.map((segment, i)=>/*#__PURE__*/ (0, ($parcel$interopDefault($gfZkn$react))).createElement((0, $edac158d20ebe4a9$exports.DatePickerSegment), {
             key: i,
             segment: segment,

package/dist/TimeField.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AAiBD,SAAS,gCAA+B,KAAgC,EAAE,GAA8B;IACtG,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,IAAI,aACF,SAAS,cACT,UAAU,cACV,UAAU,cACV,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,4CAAiB,EAAE;IAChC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,+CAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,aAAE,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,uCAAW,EAAE;QAC3I,GAAG,KAAK;kBACR;IACF,GAAG,OAAO;IAEV,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,qBACE,0DAAC,CAAA,GAAA,+BAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB;QACjB,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;qBAC/C,0DAAC,CAAA,GAAA,+BAAI;QACH,KAAK;QACL,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,WAAW;QACX,iBAAiB;QACjB,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;OACvC,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC3B,0DAAC,CAAA,GAAA,2CAAgB;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAEhB,0DAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAIpC;AAEA;;;CAGC,GACD,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/datepicker/src/TimeField.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} from '@react-spectrum/utils';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '@react-spectrum/label';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker';\nimport {useFocusManagerRef} from './utils';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTimeField} from '@react-aria/datepicker';\nimport {useTimeFieldState} from '@react-stately/datepicker';\n\nfunction TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isQuiet\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  let {locale} = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale\n  });\n\n  let fieldRef = useRef(null);\n  let inputRef = useRef(null);\n  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useTimeField({\n    ...props,\n    inputRef\n  }, state, fieldRef);\n\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-TimeField-fieldWrapper')}>\n      <Input\n        ref={fieldRef}\n        fieldProps={fieldProps}\n        isDisabled={isDisabled}\n        isQuiet={isQuiet}\n        autoFocus={autoFocus}\n        validationState={validationState}\n        className={classNames(datepickerStyles, 'react-spectrum-TimeField')}>\n        {state.segments.map((segment, i) =>\n          (<DatePickerSegment\n            key={i}\n            segment={segment}\n            state={state}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired} />)\n        )}\n        <input {...inputProps} ref={inputRef} />\n      </Input>\n    </Field>\n  );\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeField = React.forwardRef(TimeField) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_TimeField as TimeField};\n"],"names":[],"version":3,"file":"TimeField.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AAiBD,SAAS,gCAA+B,KAAgC,EAAE,GAA8B;IACtG,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,IAAI,aACF,SAAS,cACT,UAAU,cACV,UAAU,cACV,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,4CAAiB,EAAE;IAChC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,+CAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,aAAE,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,uCAAW,EAAE;QAC3I,GAAG,KAAK;kBACR;IACF,GAAG,OAAO;IAEV,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,IAAI,mBAAmB,CAAA,GAAA,+CAAoB,EAAE,SAAS;IAEtD,qBACE,0DAAC,CAAA,GAAA,+BAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB;QACjB,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;qBAC/C,0DAAC,CAAA,GAAA,+BAAI;QACH,KAAK;QACL,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,WAAW;QACX,iBAAiB;QACjB,UAAU;QACV,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;OACvC,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC3B,0DAAC,CAAA,GAAA,2CAAgB;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAEhB,0DAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAIpC;AAEA;;;CAGC,GACD,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/datepicker/src/TimeField.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} from '@react-spectrum/utils';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '@react-spectrum/label';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker';\nimport {useFocusManagerRef, useFormattedDateWidth} from './utils';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTimeField} from '@react-aria/datepicker';\nimport {useTimeFieldState} from '@react-stately/datepicker';\n\nfunction TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isQuiet\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  let {locale} = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale\n  });\n\n  let fieldRef = useRef(null);\n  let inputRef = useRef(null);\n  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useTimeField({\n    ...props,\n    inputRef\n  }, state, fieldRef);\n\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-TimeField-fieldWrapper')}>\n      <Input\n        ref={fieldRef}\n        fieldProps={fieldProps}\n        isDisabled={isDisabled}\n        isQuiet={isQuiet}\n        autoFocus={autoFocus}\n        validationState={validationState}\n        minWidth={approximateWidth}\n        className={classNames(datepickerStyles, 'react-spectrum-TimeField')}>\n        {state.segments.map((segment, i) =>\n          (<DatePickerSegment\n            key={i}\n            segment={segment}\n            state={state}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired} />)\n        )}\n        <input {...inputProps} ref={inputRef} />\n      </Input>\n    </Field>\n  );\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeField = React.forwardRef(TimeField) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_TimeField as TimeField};\n"],"names":[],"version":3,"file":"TimeField.main.js.map"}

package/dist/TimeField.mjs

@@ -1,8 +1,8 @@
 import {DatePickerSegment as $cfa347761f172638$export$6388987c5223b54e} from "./DatePickerSegment.mjs";
-import "./styles.36ea4632.css";
+import "./styles.b562cf4b.css";
 import $immgY$styles_cssmodulejs from "./styles_css.mjs";
 import {Input as $79348162c55d687f$export$f5b8910cec6cf069} from "./Input.mjs";
-import {useFocusManagerRef as $04e96200274b03de$export$71a23a36270e4bf0} from "./utils.mjs";
+import {useFocusManagerRef as $04e96200274b03de$export$71a23a36270e4bf0, useFormattedDateWidth as $04e96200274b03de$export$31e22e3c931fc056} from "./utils.mjs";
 import {classNames as $immgY$classNames} from "@react-spectrum/utils";
 import {Field as $immgY$Field} from "@react-spectrum/label";
 import $immgY$react, {useRef as $immgY$useRef} from "react";
@@ -54,7 +54,8 @@ function $f0a04554754386b6$var$TimeField(props, ref) {
         ...props,
         inputRef: inputRef
     }, state, fieldRef);
-    let validationState = state.validationState || (isInvalid ? "invalid" : null);
+    let validationState = state.validationState || (isInvalid ? 'invalid' : null);
+    let approximateWidth = (0, $04e96200274b03de$export$31e22e3c931fc056)(state) + 'ch';
     return /*#__PURE__*/ (0, $immgY$react).createElement((0, $immgY$Field), {
         ...props,
         ref: domRef,
@@ -66,7 +67,7 @@ function $f0a04554754386b6$var$TimeField(props, ref) {
         isInvalid: isInvalid,
         validationErrors: validationErrors,
         validationDetails: validationDetails,
-        wrapperClassName: (0, $immgY$classNames)((0, ($parcel$interopDefault($immgY$styles_cssmodulejs))), "react-spectrum-TimeField-fieldWrapper")
+        wrapperClassName: (0, $immgY$classNames)((0, ($parcel$interopDefault($immgY$styles_cssmodulejs))), 'react-spectrum-TimeField-fieldWrapper')
     }, /*#__PURE__*/ (0, $immgY$react).createElement((0, $79348162c55d687f$export$f5b8910cec6cf069), {
         ref: fieldRef,
         fieldProps: fieldProps,
@@ -74,7 +75,8 @@ function $f0a04554754386b6$var$TimeField(props, ref) {
         isQuiet: isQuiet,
         autoFocus: autoFocus,
         validationState: validationState,
-        className: (0, $immgY$classNames)((0, ($parcel$interopDefault($immgY$styles_cssmodulejs))), "react-spectrum-TimeField")
+        minWidth: approximateWidth,
+        className: (0, $immgY$classNames)((0, ($parcel$interopDefault($immgY$styles_cssmodulejs))), 'react-spectrum-TimeField')
     }, state.segments.map((segment, i)=>/*#__PURE__*/ (0, $immgY$react).createElement((0, $cfa347761f172638$export$6388987c5223b54e), {
             key: i,
             segment: segment,
@@ -94,4 +96,4 @@ function $f0a04554754386b6$var$TimeField(props, ref) {
 
 
 export {$f0a04554754386b6$export$5eaee2322dd727eb as TimeField};
-//# sourceMappingURL=TimeField.mjs.map
+//# sourceMappingURL=TimeField.module.js.map

package/dist/TimeField.module.js

@@ -1,8 +1,8 @@
 import {DatePickerSegment as $cfa347761f172638$export$6388987c5223b54e} from "./DatePickerSegment.module.js";
-import "./styles.36ea4632.css";
+import "./styles.b562cf4b.css";
 import $immgY$styles_cssmodulejs from "./styles_css.module.js";
 import {Input as $79348162c55d687f$export$f5b8910cec6cf069} from "./Input.module.js";
-import {useFocusManagerRef as $04e96200274b03de$export$71a23a36270e4bf0} from "./utils.module.js";
+import {useFocusManagerRef as $04e96200274b03de$export$71a23a36270e4bf0, useFormattedDateWidth as $04e96200274b03de$export$31e22e3c931fc056} from "./utils.module.js";
 import {classNames as $immgY$classNames} from "@react-spectrum/utils";
 import {Field as $immgY$Field} from "@react-spectrum/label";
 import $immgY$react, {useRef as $immgY$useRef} from "react";
@@ -54,7 +54,8 @@ function $f0a04554754386b6$var$TimeField(props, ref) {
         ...props,
         inputRef: inputRef
     }, state, fieldRef);
-    let validationState = state.validationState || (isInvalid ? "invalid" : null);
+    let validationState = state.validationState || (isInvalid ? 'invalid' : null);
+    let approximateWidth = (0, $04e96200274b03de$export$31e22e3c931fc056)(state) + 'ch';
     return /*#__PURE__*/ (0, $immgY$react).createElement((0, $immgY$Field), {
         ...props,
         ref: domRef,
@@ -66,7 +67,7 @@ function $f0a04554754386b6$var$TimeField(props, ref) {
         isInvalid: isInvalid,
         validationErrors: validationErrors,
         validationDetails: validationDetails,
-        wrapperClassName: (0, $immgY$classNames)((0, ($parcel$interopDefault($immgY$styles_cssmodulejs))), "react-spectrum-TimeField-fieldWrapper")
+        wrapperClassName: (0, $immgY$classNames)((0, ($parcel$interopDefault($immgY$styles_cssmodulejs))), 'react-spectrum-TimeField-fieldWrapper')
     }, /*#__PURE__*/ (0, $immgY$react).createElement((0, $79348162c55d687f$export$f5b8910cec6cf069), {
         ref: fieldRef,
         fieldProps: fieldProps,
@@ -74,7 +75,8 @@ function $f0a04554754386b6$var$TimeField(props, ref) {
         isQuiet: isQuiet,
         autoFocus: autoFocus,
         validationState: validationState,
-        className: (0, $immgY$classNames)((0, ($parcel$interopDefault($immgY$styles_cssmodulejs))), "react-spectrum-TimeField")
+        minWidth: approximateWidth,
+        className: (0, $immgY$classNames)((0, ($parcel$interopDefault($immgY$styles_cssmodulejs))), 'react-spectrum-TimeField')
     }, state.segments.map((segment, i)=>/*#__PURE__*/ (0, $immgY$react).createElement((0, $cfa347761f172638$export$6388987c5223b54e), {
             key: i,
             segment: segment,

package/dist/TimeField.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AAiBD,SAAS,gCAA+B,KAAgC,EAAE,GAA8B;IACtG,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,IAAI,aACF,SAAS,cACT,UAAU,cACV,UAAU,cACV,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,yCAAiB,EAAE;IAChC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,aAAE,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAC3I,GAAG,KAAK;kBACR;IACF,GAAG,OAAO;IAEV,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,qBACE,gCAAC,CAAA,GAAA,YAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB;QACjB,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;qBAC/C,gCAAC,CAAA,GAAA,yCAAI;QACH,KAAK;QACL,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,WAAW;QACX,iBAAiB;QACjB,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;OACvC,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC3B,gCAAC,CAAA,GAAA,yCAAgB;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAEhB,gCAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAIpC;AAEA;;;CAGC,GACD,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/datepicker/src/TimeField.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} from '@react-spectrum/utils';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '@react-spectrum/label';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker';\nimport {useFocusManagerRef} from './utils';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTimeField} from '@react-aria/datepicker';\nimport {useTimeFieldState} from '@react-stately/datepicker';\n\nfunction TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isQuiet\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  let {locale} = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale\n  });\n\n  let fieldRef = useRef(null);\n  let inputRef = useRef(null);\n  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useTimeField({\n    ...props,\n    inputRef\n  }, state, fieldRef);\n\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-TimeField-fieldWrapper')}>\n      <Input\n        ref={fieldRef}\n        fieldProps={fieldProps}\n        isDisabled={isDisabled}\n        isQuiet={isQuiet}\n        autoFocus={autoFocus}\n        validationState={validationState}\n        className={classNames(datepickerStyles, 'react-spectrum-TimeField')}>\n        {state.segments.map((segment, i) =>\n          (<DatePickerSegment\n            key={i}\n            segment={segment}\n            state={state}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired} />)\n        )}\n        <input {...inputProps} ref={inputRef} />\n      </Input>\n    </Field>\n  );\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeField = React.forwardRef(TimeField) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_TimeField as TimeField};\n"],"names":[],"version":3,"file":"TimeField.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AAiBD,SAAS,gCAA+B,KAAgC,EAAE,GAA8B;IACtG,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,IAAI,aACF,SAAS,cACT,UAAU,cACV,UAAU,cACV,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,yCAAiB,EAAE;IAChC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,aAAE,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAC3I,GAAG,KAAK;kBACR;IACF,GAAG,OAAO;IAEV,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,IAAI,mBAAmB,CAAA,GAAA,yCAAoB,EAAE,SAAS;IAEtD,qBACE,gCAAC,CAAA,GAAA,YAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB;QACjB,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;qBAC/C,gCAAC,CAAA,GAAA,yCAAI;QACH,KAAK;QACL,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,WAAW;QACX,iBAAiB;QACjB,UAAU;QACV,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;OACvC,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC3B,gCAAC,CAAA,GAAA,yCAAgB;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAEhB,gCAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAIpC;AAEA;;;CAGC,GACD,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/datepicker/src/TimeField.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} from '@react-spectrum/utils';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '@react-spectrum/label';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker';\nimport {useFocusManagerRef, useFormattedDateWidth} from './utils';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTimeField} from '@react-aria/datepicker';\nimport {useTimeFieldState} from '@react-stately/datepicker';\n\nfunction TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isQuiet\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  let {locale} = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale\n  });\n\n  let fieldRef = useRef(null);\n  let inputRef = useRef(null);\n  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useTimeField({\n    ...props,\n    inputRef\n  }, state, fieldRef);\n\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-TimeField-fieldWrapper')}>\n      <Input\n        ref={fieldRef}\n        fieldProps={fieldProps}\n        isDisabled={isDisabled}\n        isQuiet={isQuiet}\n        autoFocus={autoFocus}\n        validationState={validationState}\n        minWidth={approximateWidth}\n        className={classNames(datepickerStyles, 'react-spectrum-TimeField')}>\n        {state.segments.map((segment, i) =>\n          (<DatePickerSegment\n            key={i}\n            segment={segment}\n            state={state}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired} />)\n        )}\n        <input {...inputProps} ref={inputRef} />\n      </Input>\n    </Field>\n  );\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nconst _TimeField = React.forwardRef(TimeField) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_TimeField as TimeField};\n"],"names":[],"version":3,"file":"TimeField.module.js.map"}

package/dist/ar-AE.mjs

@@ -7,4 +7,4 @@ $557f7da83617ebdf$exports = {
 
 
 export {$557f7da83617ebdf$exports as default};
-//# sourceMappingURL=ar-AE.mjs.map
+//# sourceMappingURL=ar-AE.module.js.map

package/dist/bg-BG.mjs

@@ -7,4 +7,4 @@ $d9d9d0bb24b4de48$exports = {
 
 
 export {$d9d9d0bb24b4de48$exports as default};
-//# sourceMappingURL=bg-BG.mjs.map
+//# sourceMappingURL=bg-BG.module.js.map

package/dist/cs-CZ.mjs

@@ -7,4 +7,4 @@ $957f034d30ca532a$exports = {
 
 
 export {$957f034d30ca532a$exports as default};
-//# sourceMappingURL=cs-CZ.mjs.map
+//# sourceMappingURL=cs-CZ.module.js.map

package/dist/da-DK.mjs

@@ -7,4 +7,4 @@ $b5644a9daaf97251$exports = {
 
 
 export {$b5644a9daaf97251$exports as default};
-//# sourceMappingURL=da-DK.mjs.map
+//# sourceMappingURL=da-DK.module.js.map

package/dist/de-DE.mjs

@@ -7,4 +7,4 @@ $7766b8cb542dd7d4$exports = {
 
 
 export {$7766b8cb542dd7d4$exports as default};
-//# sourceMappingURL=de-DE.mjs.map
+//# sourceMappingURL=de-DE.module.js.map