@react-spectrum/datepicker 3.9.5 → 3.10.0

package/dist/utils.mjs

@@ -1,6 +1,6 @@
 import {createDOMRef as $d7JPl$createDOMRef} from "@react-spectrum/utils";
 import {createFocusManager as $d7JPl$createFocusManager} from "@react-aria/focus";
-import {useDateFormatter as $d7JPl$useDateFormatter} from "@react-aria/i18n";
+import {useDateFormatter as $d7JPl$useDateFormatter, useLocale as $d7JPl$useLocale} from "@react-aria/i18n";
 import {useDisplayNames as $d7JPl$useDisplayNames} from "@react-aria/datepicker";
 import {useMemo as $d7JPl$useMemo, useState as $d7JPl$useState, useRef as $d7JPl$useRef, useImperativeHandle as $d7JPl$useImperativeHandle} from "react";
 import {useLayoutEffect as $d7JPl$useLayoutEffect} from "@react-aria/utils";
@@ -25,16 +25,16 @@ import {useProvider as $d7JPl$useProvider} from "@react-spectrum/provider";
 
 function $04e96200274b03de$export$322f4580ccd8dde6(props) {
     let formatter = (0, $d7JPl$useDateFormatter)({
-        dateStyle: "short"
+        dateStyle: 'short'
     });
     let displayNames = (0, $d7JPl$useDisplayNames)();
     return (0, $d7JPl$useMemo)(()=>{
         if (props.description) return props.description;
         if (props.showFormatHelpText) return formatter.formatToParts(new Date()).map((s)=>{
-            if (s.type === "literal") return s.value;
+            if (s.type === 'literal') return s.value;
             return displayNames.of(s.type);
-        }).join(" ");
-        return "";
+        }).join(' ');
+        return '';
     }, [
         props.description,
         props.showFormatHelpText,
@@ -48,9 +48,9 @@ function $04e96200274b03de$export$12ce2869ce471b1f(maxVisibleMonths) {
     (0, $d7JPl$useLayoutEffect)(()=>{
         let onResize = ()=>setVisibleMonths($04e96200274b03de$var$getVisibleMonths(scale));
         onResize();
-        window.addEventListener("resize", onResize);
+        window.addEventListener('resize', onResize);
         return ()=>{
-            window.removeEventListener("resize", onResize);
+            window.removeEventListener('resize', onResize);
         };
     }, [
         scale
@@ -58,14 +58,14 @@ function $04e96200274b03de$export$12ce2869ce471b1f(maxVisibleMonths) {
     return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));
 }
 function $04e96200274b03de$var$getVisibleMonths(scale) {
-    if (typeof window === "undefined") return 1;
-    let monthWidth = scale === "large" ? 336 : 280;
-    let gap = scale === "large" ? 30 : 24;
-    let popoverPadding = scale === "large" ? 32 : 48;
+    if (typeof window === 'undefined') return 1;
+    let monthWidth = scale === 'large' ? 336 : 280;
+    let gap = scale === 'large' ? 30 : 24;
+    let popoverPadding = scale === 'large' ? 32 : 48;
     return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));
 }
 function $04e96200274b03de$export$71a23a36270e4bf0(ref) {
-    let domRef = (0, $d7JPl$useRef)();
+    let domRef = (0, $d7JPl$useRef)(undefined);
     (0, $d7JPl$useImperativeHandle)(ref, ()=>({
             ...(0, $d7JPl$createDOMRef)(domRef),
             focus () {
@@ -76,7 +76,21 @@ function $04e96200274b03de$export$71a23a36270e4bf0(ref) {
         }));
     return domRef;
 }
+function $04e96200274b03de$export$31e22e3c931fc056(state) {
+    var _useLocale;
+    let locale = (_useLocale = (0, $d7JPl$useLocale)()) === null || _useLocale === void 0 ? void 0 : _useLocale.locale;
+    let currentDate = new Date();
+    let formatedDate = state.getDateFormatter(locale, {
+        shouldForceLeadingZeros: true
+    }).format(currentDate, locale);
+    let totalCharacters = formatedDate.length;
+    // The max of two is for times with only hours.
+    // As the length of a date grows we need to proportionally increase the width.
+    // We use the character count with 'ch' units and add extra padding to accomate for
+    // dates with months and time dashes, which are wider characters.
+    return totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2);
+}
 
 
-export {$04e96200274b03de$export$322f4580ccd8dde6 as useFormatHelpText, $04e96200274b03de$export$12ce2869ce471b1f as useVisibleMonths, $04e96200274b03de$export$71a23a36270e4bf0 as useFocusManagerRef};
-//# sourceMappingURL=utils.mjs.map
+export {$04e96200274b03de$export$322f4580ccd8dde6 as useFormatHelpText, $04e96200274b03de$export$12ce2869ce471b1f as useVisibleMonths, $04e96200274b03de$export$71a23a36270e4bf0 as useFocusManagerRef, $04e96200274b03de$export$31e22e3c931fc056 as useFormattedDateWidth};
+//# sourceMappingURL=utils.module.js.map

package/dist/utils.module.js

@@ -1,6 +1,6 @@
 import {createDOMRef as $d7JPl$createDOMRef} from "@react-spectrum/utils";
 import {createFocusManager as $d7JPl$createFocusManager} from "@react-aria/focus";
-import {useDateFormatter as $d7JPl$useDateFormatter} from "@react-aria/i18n";
+import {useDateFormatter as $d7JPl$useDateFormatter, useLocale as $d7JPl$useLocale} from "@react-aria/i18n";
 import {useDisplayNames as $d7JPl$useDisplayNames} from "@react-aria/datepicker";
 import {useMemo as $d7JPl$useMemo, useState as $d7JPl$useState, useRef as $d7JPl$useRef, useImperativeHandle as $d7JPl$useImperativeHandle} from "react";
 import {useLayoutEffect as $d7JPl$useLayoutEffect} from "@react-aria/utils";
@@ -25,16 +25,16 @@ import {useProvider as $d7JPl$useProvider} from "@react-spectrum/provider";
 
 function $04e96200274b03de$export$322f4580ccd8dde6(props) {
     let formatter = (0, $d7JPl$useDateFormatter)({
-        dateStyle: "short"
+        dateStyle: 'short'
     });
     let displayNames = (0, $d7JPl$useDisplayNames)();
     return (0, $d7JPl$useMemo)(()=>{
         if (props.description) return props.description;
         if (props.showFormatHelpText) return formatter.formatToParts(new Date()).map((s)=>{
-            if (s.type === "literal") return s.value;
+            if (s.type === 'literal') return s.value;
             return displayNames.of(s.type);
-        }).join(" ");
-        return "";
+        }).join(' ');
+        return '';
     }, [
         props.description,
         props.showFormatHelpText,
@@ -48,9 +48,9 @@ function $04e96200274b03de$export$12ce2869ce471b1f(maxVisibleMonths) {
     (0, $d7JPl$useLayoutEffect)(()=>{
         let onResize = ()=>setVisibleMonths($04e96200274b03de$var$getVisibleMonths(scale));
         onResize();
-        window.addEventListener("resize", onResize);
+        window.addEventListener('resize', onResize);
         return ()=>{
-            window.removeEventListener("resize", onResize);
+            window.removeEventListener('resize', onResize);
         };
     }, [
         scale
@@ -58,14 +58,14 @@ function $04e96200274b03de$export$12ce2869ce471b1f(maxVisibleMonths) {
     return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));
 }
 function $04e96200274b03de$var$getVisibleMonths(scale) {
-    if (typeof window === "undefined") return 1;
-    let monthWidth = scale === "large" ? 336 : 280;
-    let gap = scale === "large" ? 30 : 24;
-    let popoverPadding = scale === "large" ? 32 : 48;
+    if (typeof window === 'undefined') return 1;
+    let monthWidth = scale === 'large' ? 336 : 280;
+    let gap = scale === 'large' ? 30 : 24;
+    let popoverPadding = scale === 'large' ? 32 : 48;
     return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));
 }
 function $04e96200274b03de$export$71a23a36270e4bf0(ref) {
-    let domRef = (0, $d7JPl$useRef)();
+    let domRef = (0, $d7JPl$useRef)(undefined);
     (0, $d7JPl$useImperativeHandle)(ref, ()=>({
             ...(0, $d7JPl$createDOMRef)(domRef),
             focus () {
@@ -76,7 +76,21 @@ function $04e96200274b03de$export$71a23a36270e4bf0(ref) {
         }));
     return domRef;
 }
+function $04e96200274b03de$export$31e22e3c931fc056(state) {
+    var _useLocale;
+    let locale = (_useLocale = (0, $d7JPl$useLocale)()) === null || _useLocale === void 0 ? void 0 : _useLocale.locale;
+    let currentDate = new Date();
+    let formatedDate = state.getDateFormatter(locale, {
+        shouldForceLeadingZeros: true
+    }).format(currentDate, locale);
+    let totalCharacters = formatedDate.length;
+    // The max of two is for times with only hours.
+    // As the length of a date grows we need to proportionally increase the width.
+    // We use the character count with 'ch' units and add extra padding to accomate for
+    // dates with months and time dashes, which are wider characters.
+    return totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2);
+}
 
 
-export {$04e96200274b03de$export$322f4580ccd8dde6 as useFormatHelpText, $04e96200274b03de$export$12ce2869ce471b1f as useVisibleMonths, $04e96200274b03de$export$71a23a36270e4bf0 as useFocusManagerRef};
+export {$04e96200274b03de$export$322f4580ccd8dde6 as useFormatHelpText, $04e96200274b03de$export$12ce2869ce471b1f as useVisibleMonths, $04e96200274b03de$export$71a23a36270e4bf0 as useFocusManagerRef, $04e96200274b03de$export$31e22e3c931fc056 as useFormattedDateWidth};
 //# sourceMappingURL=utils.module.js.map

package/dist/utils.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAWM,SAAS,0CAAkB,KAA8E;IAC9G,IAAI,YAAY,CAAA,GAAA,uBAAe,EAAE;QAAC,WAAW;IAAO;IACpD,IAAI,eAAe,CAAA,GAAA,sBAAc;IACjC,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,IAAI,MAAM,WAAW,EACnB,OAAO,MAAM,WAAW;QAG1B,IAAI,MAAM,kBAAkB,EAC1B,OAAO,UAAU,aAAa,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAA;YAC7C,IAAI,EAAE,IAAI,KAAK,WACb,OAAO,EAAE,KAAK;YAGhB,OAAO,aAAa,EAAE,CAAC,EAAE,IAAI;QAC/B,GAAG,IAAI,CAAC;QAGV,OAAO;IACT,GAAG;QAAC,MAAM,WAAW;QAAE,MAAM,kBAAkB;QAAE;QAAW;KAAa;AAC3E;AAEO,SAAS,0CAAiB,gBAAwB;IACvD,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,kBAAU;IACxB,IAAI,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,eAAO,EAAE,uCAAiB;IAClE,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,WAAW,IAAM,iBAAiB,uCAAiB;QACvD;QAEA,OAAO,gBAAgB,CAAC,UAAU;QAClC,OAAO;YACL,OAAO,mBAAmB,CAAC,UAAU;QACvC;IACF,GAAG;QAAC;KAAM;IAEV,OAAO,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,eAAe,kBAAkB;AAC/D;AAEA,SAAS,uCAAiB,KAAK;IAC7B,IAAI,OAAO,WAAW,aACpB,OAAO;IAET,IAAI,aAAa,UAAU,UAAU,MAAM;IAC3C,IAAI,MAAM,UAAU,UAAU,KAAK;IACnC,IAAI,iBAAiB,UAAU,UAAU,KAAK;IAC9C,OAAO,KAAK,KAAK,CAAC,AAAC,CAAA,OAAO,UAAU,GAAG,iBAAiB,CAAA,IAAM,CAAA,aAAa,GAAE;AAC/E;AAEO,SAAS,0CAAmB,GAA8B;IAC/D,IAAI,SAAS,CAAA,GAAA,aAAK;IAClB,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,mBAAW,EAAE,OAAO;YACvB;gBACE,CAAA,GAAA,yBAAiB,EAAE,QAAQ,UAAU,CAAC;oBAAC,UAAU;gBAAI;YACvD;QACF,CAAA;IACA,OAAO;AACT","sources":["packages/@react-spectrum/datepicker/src/utils.ts"],"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 */\nimport {createDOMRef} from '@react-spectrum/utils';\nimport {createFocusManager} from '@react-aria/focus';\nimport {FocusableRef} from '@react-types/shared';\nimport {SpectrumDatePickerBase} from '@react-types/datepicker';\nimport {useDateFormatter} from '@react-aria/i18n';\nimport {useDisplayNames} from '@react-aria/datepicker';\nimport {useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/provider';\n\nexport function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'description' | 'showFormatHelpText'>) {\n  let formatter = useDateFormatter({dateStyle: 'short'});\n  let displayNames = useDisplayNames();\n  return useMemo(() => {\n    if (props.description) {\n      return props.description;\n    }\n\n    if (props.showFormatHelpText) {\n      return formatter.formatToParts(new Date()).map(s => {\n        if (s.type === 'literal') {\n          return s.value;\n        }\n\n        return displayNames.of(s.type);\n      }).join(' ');\n    }\n\n    return '';\n  }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n}\n\nexport function useVisibleMonths(maxVisibleMonths: number) {\n  let {scale} = useProvider();\n  let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));\n  useLayoutEffect(() => {\n    let onResize = () => setVisibleMonths(getVisibleMonths(scale));\n    onResize();\n\n    window.addEventListener('resize', onResize);\n    return () => {\n      window.removeEventListener('resize', onResize);\n    };\n  }, [scale]);\n\n  return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n}\n\nfunction getVisibleMonths(scale) {\n  if (typeof window === 'undefined') {\n    return 1;\n  }\n  let monthWidth = scale === 'large' ? 336 : 280;\n  let gap = scale === 'large' ? 30 : 24;\n  let popoverPadding = scale === 'large' ? 32 : 48;\n  return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));\n}\n\nexport function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {\n  let domRef = useRef();\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      createFocusManager(domRef).focusFirst({tabbable: true});\n    }\n  }));\n  return domRef;\n}\n"],"names":[],"version":3,"file":"utils.module.js.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAWM,SAAS,0CAAkB,KAA8E;IAC9G,IAAI,YAAY,CAAA,GAAA,uBAAe,EAAE;QAAC,WAAW;IAAO;IACpD,IAAI,eAAe,CAAA,GAAA,sBAAc;IACjC,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,IAAI,MAAM,WAAW,EACnB,OAAO,MAAM,WAAW;QAG1B,IAAI,MAAM,kBAAkB,EAC1B,OAAO,UAAU,aAAa,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAA;YAC7C,IAAI,EAAE,IAAI,KAAK,WACb,OAAO,EAAE,KAAK;YAGhB,OAAO,aAAa,EAAE,CAAC,EAAE,IAAI;QAC/B,GAAG,IAAI,CAAC;QAGV,OAAO;IACT,GAAG;QAAC,MAAM,WAAW;QAAE,MAAM,kBAAkB;QAAE;QAAW;KAAa;AAC3E;AAEO,SAAS,0CAAiB,gBAAwB;IACvD,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,kBAAU;IACxB,IAAI,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,eAAO,EAAE,uCAAiB;IAClE,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,WAAW,IAAM,iBAAiB,uCAAiB;QACvD;QAEA,OAAO,gBAAgB,CAAC,UAAU;QAClC,OAAO;YACL,OAAO,mBAAmB,CAAC,UAAU;QACvC;IACF,GAAG;QAAC;KAAM;IAEV,OAAO,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,eAAe,kBAAkB;AAC/D;AAEA,SAAS,uCAAiB,KAAK;IAC7B,IAAI,OAAO,WAAW,aACpB,OAAO;IAET,IAAI,aAAa,UAAU,UAAU,MAAM;IAC3C,IAAI,MAAM,UAAU,UAAU,KAAK;IACnC,IAAI,iBAAiB,UAAU,UAAU,KAAK;IAC9C,OAAO,KAAK,KAAK,CAAC,AAAC,CAAA,OAAO,UAAU,GAAG,iBAAiB,CAAA,IAAM,CAAA,aAAa,GAAE;AAC/E;AAEO,SAAS,0CAAmB,GAA8B;IAC/D,IAAI,SAAS,CAAA,GAAA,aAAK,EAAE;IACpB,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,mBAAW,EAAE,OAAO;YACvB;gBACE,CAAA,GAAA,yBAAiB,EAAE,QAAQ,UAAU,CAAC;oBAAC,UAAU;gBAAI;YACvD;QACF,CAAA;IACA,OAAO;AACT;AAEO,SAAS,0CAAsB,KAAK;QAC5B;IAAb,IAAI,UAAS,aAAA,CAAA,GAAA,gBAAQ,iBAAR,iCAAA,WAAa,MAAM;IAChC,IAAI,cAAc,IAAI;IACtB,IAAI,eAAe,MAAM,gBAAgB,CAAC,QAAQ;QAAC,yBAAyB;IAAI,GAAG,MAAM,CAAC,aAAa;IACvG,IAAI,kBAAmB,aAAa,MAAM;IAE1C,+CAA+C;IAC/C,8EAA8E;IAC9E,mFAAmF;IACnF,iEAAiE;IACjE,OAAQ,kBAAkB,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,kBAAkB,IAAI;AACtE","sources":["packages/@react-spectrum/datepicker/src/utils.ts"],"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 */\nimport {createDOMRef} from '@react-spectrum/utils';\nimport {createFocusManager} from '@react-aria/focus';\nimport {FocusableRef} from '@react-types/shared';\nimport {SpectrumDatePickerBase} from '@react-types/datepicker';\nimport {useDateFormatter, useLocale} from '@react-aria/i18n';\nimport {useDisplayNames} from '@react-aria/datepicker';\nimport {useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/provider';\n\nexport function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'description' | 'showFormatHelpText'>) {\n  let formatter = useDateFormatter({dateStyle: 'short'});\n  let displayNames = useDisplayNames();\n  return useMemo(() => {\n    if (props.description) {\n      return props.description;\n    }\n\n    if (props.showFormatHelpText) {\n      return formatter.formatToParts(new Date()).map(s => {\n        if (s.type === 'literal') {\n          return s.value;\n        }\n\n        return displayNames.of(s.type);\n      }).join(' ');\n    }\n\n    return '';\n  }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n}\n\nexport function useVisibleMonths(maxVisibleMonths: number) {\n  let {scale} = useProvider();\n  let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));\n  useLayoutEffect(() => {\n    let onResize = () => setVisibleMonths(getVisibleMonths(scale));\n    onResize();\n\n    window.addEventListener('resize', onResize);\n    return () => {\n      window.removeEventListener('resize', onResize);\n    };\n  }, [scale]);\n\n  return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n}\n\nfunction getVisibleMonths(scale) {\n  if (typeof window === 'undefined') {\n    return 1;\n  }\n  let monthWidth = scale === 'large' ? 336 : 280;\n  let gap = scale === 'large' ? 30 : 24;\n  let popoverPadding = scale === 'large' ? 32 : 48;\n  return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));\n}\n\nexport function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {\n  let domRef = useRef(undefined);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      createFocusManager(domRef).focusFirst({tabbable: true});\n    }\n  }));\n  return domRef;\n}\n\nexport function useFormattedDateWidth(state) {\n  let locale = useLocale()?.locale;\n  let currentDate = new Date();\n  let formatedDate = state.getDateFormatter(locale, {shouldForceLeadingZeros: true}).format(currentDate, locale);\n  let totalCharacters =  formatedDate.length;\n\n  // The max of two is for times with only hours.\n  // As the length of a date grows we need to proportionally increase the width.\n  // We use the character count with 'ch' units and add extra padding to accomate for\n  // dates with months and time dashes, which are wider characters.\n  return (totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2));\n}\n"],"names":[],"version":3,"file":"utils.module.js.map"}

package/dist/{vars.3692148b.css → vars.3d0e5be0.css}

@@ -244,6 +244,7 @@
 }
 
 .YO3Nla_spectrum-Textfield-validationIcon {
+  box-sizing: content-box;
   pointer-events: all;
   transition: color var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
   padding-inline-end: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2);
@@ -546,4 +547,4 @@
     border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
   }
 }
-/*# sourceMappingURL=vars.3692148b.css.map */
+/*# sourceMappingURL=vars.3d0e5be0.css.map */

package/dist/vars.3d0e5be0.css.map

@@ -0,0 +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.3d0e5be0.css.map"}

package/dist/zh-CN.mjs

@@ -7,4 +7,4 @@ $08d7bccfda7015e7$exports = {
 
 
 export {$08d7bccfda7015e7$exports as default};
-//# sourceMappingURL=zh-CN.mjs.map
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-TW.mjs

@@ -7,4 +7,4 @@ $c7c7bc6cc4226b9e$exports = {
 
 
 export {$c7c7bc6cc4226b9e$exports as default};
-//# sourceMappingURL=zh-TW.mjs.map
+//# sourceMappingURL=zh-TW.module.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/datepicker",
-  "version": "3.9.5",
+  "version": "3.10.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.5.3",
-    "@react-aria/datepicker": "^3.10.0",
-    "@react-aria/focus": "^3.17.0",
-    "@react-aria/i18n": "^3.11.0",
-    "@react-aria/interactions": "^3.21.2",
-    "@react-aria/utils": "^3.24.0",
-    "@react-spectrum/button": "^3.16.3",
-    "@react-spectrum/calendar": "^3.4.8",
-    "@react-spectrum/dialog": "^3.8.10",
-    "@react-spectrum/form": "^3.7.5",
-    "@react-spectrum/label": "^3.16.5",
-    "@react-spectrum/layout": "^3.6.4",
-    "@react-spectrum/utils": "^3.11.6",
-    "@react-spectrum/view": "^3.6.9",
-    "@react-stately/datepicker": "^3.9.3",
-    "@react-types/datepicker": "^3.7.3",
-    "@react-types/shared": "^3.23.0",
-    "@spectrum-icons/ui": "^3.6.6",
-    "@spectrum-icons/workflow": "^4.2.11",
+    "@internationalized/date": "^3.5.5",
+    "@react-aria/datepicker": "^3.11.0",
+    "@react-aria/focus": "^3.18.0",
+    "@react-aria/i18n": "^3.12.0",
+    "@react-aria/interactions": "^3.22.0",
+    "@react-aria/utils": "^3.25.0",
+    "@react-spectrum/button": "^3.16.5",
+    "@react-spectrum/calendar": "^3.4.10",
+    "@react-spectrum/dialog": "^3.8.12",
+    "@react-spectrum/form": "^3.7.7",
+    "@react-spectrum/label": "^3.16.7",
+    "@react-spectrum/layout": "^3.6.6",
+    "@react-spectrum/utils": "^3.11.8",
+    "@react-spectrum/view": "^3.6.11",
+    "@react-stately/datepicker": "^3.10.0",
+    "@react-types/datepicker": "^3.8.0",
+    "@react-types/shared": "^3.24.0",
+    "@spectrum-icons/ui": "^3.6.8",
+    "@spectrum-icons/workflow": "^4.2.13",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -63,11 +63,11 @@
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
+  "gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
 }

package/src/DateField.tsx

@@ -21,7 +21,7 @@ import {Input} from './Input';
 import React, {ReactElement, useRef} from 'react';
 import {useDateField} from '@react-aria/datepicker';
 import {useDateFieldState} from '@react-stately/datepicker';
-import {useFocusManagerRef, useFormatHelpText} from './utils';
+import {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth} from './utils';
 import {useFormProps} from '@react-spectrum/form';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
@@ -61,6 +61,8 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
 
   let validationState = state.validationState || (isInvalid ? 'invalid' : null);
 
+  let approximateWidth = useFormattedDateWidth(state) + 'ch';
+
   return (
     <Field
       {...props}
@@ -82,6 +84,7 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
         isQuiet={isQuiet}
         autoFocus={autoFocus}
         validationState={validationState}
+        minWidth={approximateWidth}
         className={classNames(datepickerStyles, 'react-spectrum-DateField')}>
         {state.segments.map((segment, i) =>
           (<DatePickerSegment

package/src/DatePicker.tsx

@@ -31,7 +31,7 @@ import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';
 import {TimeField} from './TimeField';
 import {useDatePicker} from '@react-aria/datepicker';
 import {useDatePickerState} from '@react-stately/datepicker';
-import {useFocusManagerRef, useFormatHelpText, useVisibleMonths} from './utils';
+import {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';
 import {useFocusRing} from '@react-aria/focus';
 import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
@@ -50,7 +50,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     pageBehavior
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
-  let targetRef = useRef<HTMLDivElement>();
+  let targetRef = useRef<HTMLDivElement>(undefined);
   let state = useDatePickerState({
     ...props,
     shouldCloseOnSelect: () => !state.hasTime
@@ -112,6 +112,8 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
   let visibleMonths = useVisibleMonths(maxVisibleMonths);
   let validationState = state.validationState || (isInvalid ? 'invalid' : null);
 
+  let approximateWidth = useFormattedDateWidth(state) + 'ch';
+
   return (
     <Field
       {...props}
@@ -136,7 +138,8 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
           validationState={validationState}
           className={classNames(styles, 'spectrum-InputGroup-field')}
           inputClassName={fieldClassName}
-          disableFocusRing>
+          disableFocusRing
+          minWidth={approximateWidth}>
           <DatePickerField
             {...fieldProps}
             data-testid="date-field"

package/src/DatePickerField.tsx

@@ -33,7 +33,7 @@ export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps
     isRequired,
     inputClassName
   } = props;
-  let ref = useRef();
+  let ref = useRef(undefined);
   let {locale} = useLocale();
   let state = useDateFieldState({
     ...props,
@@ -41,7 +41,7 @@ export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps
     createCalendar
   });
 
-  let inputRef = useRef();
+  let inputRef = useRef(undefined);
   let {fieldProps, inputProps} = useDateField({...props, inputRef}, state, ref);
 
   return (

package/src/DatePickerSegment.tsx

@@ -50,8 +50,9 @@ function LiteralSegment({segment}: LiteralSegmentProps) {
 }
 
 function EditableSegment({segment, state}: DatePickerSegmentProps) {
-  let ref = useRef();
+  let ref = useRef(undefined);
   let {segmentProps} = useDateSegment(segment, state, ref);
+
   return (
     <div
       {...segmentProps}
@@ -60,13 +61,9 @@ function EditableSegment({segment, state}: DatePickerSegmentProps) {
         'is-placeholder': segment.isPlaceholder,
         'is-read-only': !segment.isEditable
       })}
-      style={{
-        ...segmentProps.style,
-        minWidth: segment.maxValue != null ? String(segment.maxValue).length + 'ch' : null
-      }}
+      style={segmentProps.style}
       data-testid={segment.type}>
-      <span aria-hidden="true" className={classNames(styles, 'react-spectrum-DatePicker-placeholder')}>{segment.placeholder}</span>
-      {segment.isPlaceholder ? '' : segment.text}
+      {segment.isPlaceholder ? <span aria-hidden="true" className={classNames(styles, 'react-spectrum-DatePicker-placeholder')}>{segment.placeholder}</span> : segment.text}
     </div>
   );
 }

package/src/DateRangePicker.tsx

@@ -31,7 +31,7 @@ import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';
 import {TimeField} from './TimeField';
 import {useDateRangePicker} from '@react-aria/datepicker';
 import {useDateRangePickerState} from '@react-stately/datepicker';
-import {useFocusManagerRef, useFormatHelpText, useVisibleMonths} from './utils';
+import {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';
 import {useFocusRing} from '@react-aria/focus';
 import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
@@ -50,7 +50,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     pageBehavior
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
-  let targetRef = useRef<HTMLDivElement>();
+  let targetRef = useRef<HTMLDivElement>(undefined);
   let state = useDateRangePickerState({
     ...props,
     shouldCloseOnSelect: () => !state.hasTime
@@ -112,6 +112,9 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
   let visibleMonths = useVisibleMonths(maxVisibleMonths);
   let validationState = state.validationState || (isInvalid ? 'invalid' : null);
 
+  // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash
+  let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;
+
   return (
     <Field
       {...props}
@@ -136,7 +139,8 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
           validationState={validationState}
           className={classNames(styles, 'spectrum-InputGroup-field')}
           inputClassName={fieldClassName}
-          disableFocusRing>
+          disableFocusRing
+          minWidth={approximateWidth}>
           <DatePickerField
             {...startFieldProps}
             data-testid="start-date"

package/src/Input.tsx

@@ -124,8 +124,16 @@ function Input(props, ref) {
   return (
     <div role="presentation" {...mergeProps(fieldProps, focusProps)} className={textfieldClass} style={style}>
       <div role="presentation" className={inputClass}>
-        <div role="presentation" className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputContents')} ref={mergeRefs(ref, inputRef)}>
-          {children}
+        <div
+          role="presentation"
+          className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputContents')}
+          ref={mergeRefs(ref, inputRef)}>
+          <div
+            role="presentation"
+            className={classNames(datepickerStyles, 'react-spectrum-Datepicker-inputSized')}
+            style={{minWidth: props.minWidth}}>
+            {children}
+          </div>
         </div>
       </div>
       {validationIcon}

package/src/TimeField.tsx

@@ -18,7 +18,7 @@ import {FocusableRef} from '@react-types/shared';
 import {Input} from './Input';
 import React, {ReactElement, useRef} from 'react';
 import {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker';
-import {useFocusManagerRef} from './utils';
+import {useFocusManagerRef, useFormattedDateWidth} from './utils';
 import {useFormProps} from '@react-spectrum/form';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
@@ -52,6 +52,8 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
 
   let validationState = state.validationState || (isInvalid ? 'invalid' : null);
 
+  let approximateWidth = useFormattedDateWidth(state) + 'ch';
+
   return (
     <Field
       {...props}
@@ -72,6 +74,7 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
         isQuiet={isQuiet}
         autoFocus={autoFocus}
         validationState={validationState}
+        minWidth={approximateWidth}
         className={classNames(datepickerStyles, 'react-spectrum-TimeField')}>
         {state.segments.map((segment, i) =>
           (<DatePickerSegment

package/src/styles.css

@@ -76,6 +76,12 @@
   }
 }
 
+.react-spectrum-Datepicker-inputSized {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
 .react-spectrum-Datepicker-rangeDash {
   &:before {
     content: '–';
@@ -111,22 +117,12 @@
   }
 }
 
-.react-spectrum-DatePicker-placeholder {
-  display: block;
-  width: 100%;
-  text-align: center;
-  font-style: italic;
-  visibility: hidden;
-  height: 0;
-  pointer-events: none;
-}
-
 .react-spectrum-DatePicker-cell.is-placeholder {
   color: var(--spectrum-gray-600);
 
   .react-spectrum-DatePicker-placeholder {
-    visibility: visible;
-    height: auto;
+    text-align: center;
+    pointer-events: none;
   }
 }
 

package/src/utils.ts

@@ -13,7 +13,7 @@ import {createDOMRef} from '@react-spectrum/utils';
 import {createFocusManager} from '@react-aria/focus';
 import {FocusableRef} from '@react-types/shared';
 import {SpectrumDatePickerBase} from '@react-types/datepicker';
-import {useDateFormatter} from '@react-aria/i18n';
+import {useDateFormatter, useLocale} from '@react-aria/i18n';
 import {useDisplayNames} from '@react-aria/datepicker';
 import {useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {useLayoutEffect} from '@react-aria/utils';
@@ -68,7 +68,7 @@ function getVisibleMonths(scale) {
 }
 
 export function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {
-  let domRef = useRef();
+  let domRef = useRef(undefined);
   useImperativeHandle(ref, () => ({
     ...createDOMRef(domRef),
     focus() {
@@ -77,3 +77,16 @@ export function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {
   }));
   return domRef;
 }
+
+export function useFormattedDateWidth(state) {
+  let locale = useLocale()?.locale;
+  let currentDate = new Date();
+  let formatedDate = state.getDateFormatter(locale, {shouldForceLeadingZeros: true}).format(currentDate, locale);
+  let totalCharacters =  formatedDate.length;
+
+  // The max of two is for times with only hours.
+  // As the length of a date grows we need to proportionally increase the width.
+  // We use the character count with 'ch' units and add extra padding to accomate for
+  // dates with months and time dashes, which are wider characters.
+  return (totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2));
+}

package/dist/styles.36ea4632.css.map

@@ -1 +0,0 @@
-{"mappings":"AAYA;;;;;;AAMA;;;;;AAKA;;;;;;AAMA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAMA;;;;AAIA;;;;AAMA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAMA;;;;;;;;;AAQE;;;;;;AAQA;;;;AAKF;;;;;AAKA;;;;;;;AAMA;;;;;;;;;;;;AAWE;;;;AAOF;;;;;;;;;;AAUA;;;;AAGE;;;;;AAMF;;;;AAIA;;;;AAIA;;;;;;;AAOA;;;;AAIA;;;;;AAIE;;;;AAQA;;;;;AAQF;EACE;;;;EAGE;;;;;;AAOJ;;;;;;;;AAQA;EACE;;;;;;EAKA;;;;EAEE;;;;EAIF;;;;EAEE","sources":["packages/@react-spectrum/datepicker/src/styles.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.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper {\n   width: auto;\n   min-width: var(--spectrum-global-dimension-size-2000);\n   max-width: 100%;\n }\n\n.react-spectrum-Datepicker-startField {\n  width: auto;\n  padding-inline-end: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-endField {\n  width: auto;\n  flex: 1;\n  padding-inline-start: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-field ~ .react-spectrum-Datepicker-endField > .react-spectrum-Datepicker-input {\n  border-inline-start-width: 0;\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.react-spectrum-Datepicker-field.react-spectrum-Datepicker-field {\n  width: auto;\n}\n\n.react-spectrum-Datepicker-field .react-spectrum-DateField-Input {\n  line-height: var(--spectrum-body-4-text-line-height);\n}\n\n/* specificity war with .spectrum-Field--positionSide etc. */\n.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField {\n  min-width: var(--spectrum-global-dimension-size-2000);\n}\n\n.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField {\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input {\n  /* always reserve space for the validation icon */\n  padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  cursor: text;\n}\n\n.react-spectrum-Datepicker-inputContents {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.react-spectrum-Datepicker-rangeDash {\n  &:before {\n    content: '–';\n  }\n}\n\n.react-spectrum-Datepicker-segments {\n  display: flex;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-literal {\n  white-space: pre;\n  user-select: none;\n  color: var(--spectrum-textfield-text-color);\n}\n\n.react-spectrum-DatePicker-cell {\n  border: none;\n  background: none;\n  padding: 0 2px;\n  border-radius: var(--spectrum-alias-border-radius-small);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  box-sizing: content-box;\n  white-space: nowrap;\n  color: var(--spectrum-textfield-text-color);\n\n  &::selection {\n    /* hide the selection because there is no way to fully prevent it in Firefox */\n    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 */\n    background: transparent;\n  }\n}\n\n.react-spectrum-DatePicker-placeholder {\n  display: block;\n  width: 100%;\n  text-align: center;\n  font-style: italic;\n  visibility: hidden;\n  height: 0;\n  pointer-events: none;\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder {\n  color: var(--spectrum-gray-600);\n\n  .react-spectrum-DatePicker-placeholder {\n    visibility: visible;\n    height: auto;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder ~ .react-spectrum-Datepicker-literal {\n  color: var(--spectrum-global-color-gray-600);\n}\n\n.react-spectrum-DatePicker-cell.is-read-only {\n  color: var(--spectrum-global-color-gray-700);\n}\n\n.react-spectrum-DatePicker-cell:focus {\n  background-color: var(--spectrum-accent-background-color-default);\n  color: white;\n  caret-color: transparent;\n  outline: none;\n}\n\n.react-spectrum-Datepicker-dialog.react-spectrum-Datepicker-dialog {\n  width: auto;\n}\n\n.react-spectrum-Datepicker-dialogContent {\n  display: flex;\n  flex-direction: column;\n\n  .react-spectrum-Datepicker-calendar.is-invalid {\n    /* Only apply display: contents when the calendar is invalid, which allows us to move the\n     * error message below the time fields. Otherwise, don't do this because it breaks dragging\n     * the selected range on Android. */\n    display: contents;\n  }\n\n  /* Push the help text within the calendar down to the bottom of the dialog, below the time fields. */\n  :global(.spectrum-Calendar-helpText) {\n    order: 10;\n    margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding) 0 var(--spectrum-calendar-day-padding);\n  }\n}\n\n/* when displayed in a tray, reduce the padding of the dialog */\n@media (max-width: 700px) {\n  .react-spectrum-Datepicker-dialog {\n    --spectrum-dialog-padding-x: 8px;\n\n    .react-spectrum-Datepicker-dialogContent {\n      margin: 0 auto;\n      max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));\n    }\n  }\n}\n\n.react-spectrum-Datepicker-timeFields {\n  width: 100%;\n  min-width: calc(var(--spectrum-calendar-day-width) * 7);\n  max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));\n  padding: 0 var(--spectrum-calendar-day-padding);\n  box-sizing: border-box;\n}\n\n@media (forced-colors:active) {\n  .react-spectrum-DatePicker-cell:focus {\n    forced-color-adjust: none;\n    background-color: Highlight;\n    color: HighlightText;\n  }\n  .react-spectrum-DatePicker-cell.is-read-only {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n  .react-spectrum-DatePicker-cell.is-placeholder {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[],"version":3,"file":"styles.36ea4632.css.map"}

package/dist/vars.3692148b.css.map

@@ -1 +0,0 @@
-{"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;;;;;;;AASE;;;;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.3692148b.css.map"}