@react-spectrum/s2 1.0.0 → 1.1.0

package/dist/DateField.cjs

@@ -31,31 +31,31 @@ $parcel$export(module.exports, "InvalidIndicator", () => $d19642654b699f84$expor
 
 
 const $d19642654b699f84$export$7b3e670c86da5fe8 = /*#__PURE__*/ (0, $fCG98$react.createContext)(null);
-const $d19642654b699f84$var$segmentContainer = " _ub1 _vb1 Na1 Fb1 _Na1 Pc1 -dLGswc-h3TDrc1 sd1 eb1 __Wb1";
+const $d19642654b699f84$var$segmentContainer = " _ub11 _vb11 Na11 Fb11 _Na11 Pc11 -dLGswc-h3TDrc11 sd11 eb11 __Wb11";
 const $d19642654b699f84$var$dateSegment = function anonymous(props) {
     let rules = " ";
-    rules += ' _Le1';
-    rules += ' -zNggOc-RWHrbc1';
-    if (props.isFocused) rules += ' g_h1';
-    else rules += ' g91';
-    if (props.isFocused) rules += ' gle1';
-    else rules += ' gl91';
-    if (props.isFocused) rules += ' px1';
-    if (props.isFocused) rules += ' ple1';
-    rules += ' oLvNfn1';
-    rules += ' nLvNfn1';
-    rules += ' kLvNfn1';
-    rules += ' jLvNfn1';
-    if (props.isPunctuation) rules += ' Sd1';
-    else rules += ' Sj1';
-    if (props.isPunctuation) rules += ' Rd1';
-    else rules += ' Rj1';
-    rules += ' Tj1';
-    rules += ' Qj1';
-    rules += ' _yb1';
+    rules += ' _Le11';
+    rules += ' -zNggOc-RWHrbc11';
+    if (props.isFocused) rules += ' g_h11';
+    else rules += ' g911';
+    if (props.isFocused) rules += ' gle11';
+    else rules += ' gl911';
+    if (props.isFocused) rules += ' px11';
+    if (props.isFocused) rules += ' ple11';
+    rules += ' oLvNfn11';
+    rules += ' nLvNfn11';
+    rules += ' kLvNfn11';
+    rules += ' jLvNfn11';
+    if (props.isPunctuation) rules += ' Sd11';
+    else rules += ' Sj11';
+    if (props.isPunctuation) rules += ' Rd11';
+    else rules += ' Rj11';
+    rules += ' Tj11';
+    rules += ' Qj11';
+    rules += ' _yb11';
     return rules;
 };
-const $d19642654b699f84$var$iconStyles = " sd1 eb1 _Cb1";
+const $d19642654b699f84$var$iconStyles = " sd11 eb11 _Cb11";
 const $d19642654b699f84$export$d9781c7894a82487 = /*#__PURE__*/ (0, $fCG98$react.forwardRef)(function DateField(props1, ref) {
     [props1, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props1, ref, $d19642654b699f84$export$7b3e670c86da5fe8);
     let { label: label, contextualHelp: contextualHelp, description: descriptionMessage, errorMessage: errorMessage, isRequired: isRequired, size: size = 'M', labelPosition: labelPosition = 'top', necessityIndicator: necessityIndicator, labelAlign: labelAlign = 'start', UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, styles: styles, ...dateFieldProps } = props1;
@@ -69,57 +69,57 @@ const $d19642654b699f84$export$d9781c7894a82487 = /*#__PURE__*/ (0, $fCG98$react
             let rules = " ";
             let gridColumnStart = false;
             let gridColumnEnd = false;
-            let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+            let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
             for (let p of matches){
                 if (p[1] === "z") gridColumnStart = true;
                 if (p[1] === "y") gridColumnEnd = true;
                 rules += p[0];
             }
-            rules += ' se1';
+            rules += ' se11';
             if (props.isInForm) {
-                if (!gridColumnStart) rules += ' z2mU1';
+                if (!gridColumnStart) rules += ' z2mU11';
             }
             if (props.isInForm) {
                 if (props.labelPosition === "side") {
-                    if (!gridColumnEnd) rules += ' yvoofG1';
+                    if (!gridColumnEnd) rules += ' yvoofG11';
                 }
             }
-            if (props.isInForm) rules += ' DLwlgod1';
+            if (props.isInForm) rules += ' DLwlgod11';
             else {
-                if (props.labelPosition === "side") rules += ' DPlN5qb1';
-                else if (props.labelPosition === "top") rules += ' DM8Mfn1';
+                if (props.labelPosition === "side") rules += ' DPlN5qb11';
+                else if (props.labelPosition === "top") rules += ' DM8Mfn11';
             }
-            if (props.labelPosition === "side") rules += ' EPlN5qb1';
-            else if (props.labelPosition === "top") rules += ' E4w1sLc1';
-            if (props.labelPosition === "side") rules += ' CbRM95c1';
-            else if (props.labelPosition === "top") rules += ' Cxaocre1';
+            if (props.labelPosition === "side") rules += ' EPlN5qb11';
+            else if (props.labelPosition === "top") rules += ' E4w1sLc11';
+            if (props.labelPosition === "side") rules += ' CbRM95c11';
+            else if (props.labelPosition === "top") rules += ' Cxaocre11';
             if (props.size === "XL") {
-                rules += ' -_6BNtrc-e1';
-                rules += ' vx1';
+                rules += ' -_6BNtrc-e11';
+                rules += ' vx11';
             } else if (props.size === "L") {
-                rules += ' -_6BNtrc-d1';
-                rules += ' vx1';
+                rules += ' -_6BNtrc-d11';
+                rules += ' vx11';
             } else if (props.size === "S") {
-                rules += ' -_6BNtrc-b1';
-                rules += ' vx1';
+                rules += ' -_6BNtrc-b11';
+                rules += ' vx11';
             } else if (props.size === "XS") {
-                rules += ' -_6BNtrc-a1';
-                rules += ' vx1';
+                rules += ' -_6BNtrc-a11';
+                rules += ' vx11';
             } else {
-                rules += ' -_6BNtrc-c1';
-                rules += ' vx1';
+                rules += ' -_6BNtrc-c11';
+                rules += ' vx11';
             }
-            rules += ' ea1';
-            rules += ' _Fd1';
-            rules += ' _FnuYUweb1';
-            if (props.size === "XL") rules += ' -BhX7R-Fz1';
-            else if (props.size === "L") rules += ' -BhX7R-Fv1';
-            else if (props.size === "S") rules += ' -BhX7R-Fp1';
-            else if (props.size === "XS") rules += ' -BhX7R-Fn1';
-            else rules += ' -BhX7R-Fx1';
-            rules += ' -AJjOLd-UVkF0Db1';
-            rules += ' qg1';
-            rules += ' __ca1';
+            rules += ' ea11';
+            rules += ' _Fd11';
+            rules += ' _FnuYUweb11';
+            if (props.size === "XL") rules += ' -BhX7R-Fz11';
+            else if (props.size === "L") rules += ' -BhX7R-Fv11';
+            else if (props.size === "S") rules += ' -BhX7R-Fp11';
+            else if (props.size === "XS") rules += ' -BhX7R-Fn11';
+            else rules += ' -BhX7R-Fx11';
+            rules += ' -AJjOLd-UVkF0Db11';
+            rules += ' qg11';
+            rules += ' __ca11';
             return rules;
         }({
             isInForm: !!formContext,
@@ -146,27 +146,27 @@ const $d19642654b699f84$export$d9781c7894a82487 = /*#__PURE__*/ (0, $fCG98$react
                         size: size,
                         styles: function anonymous(props) {
                             let rules = " ";
-                            rules += ' zXcEWr1';
-                            rules += ' yXcEWr1';
-                            rules += ' BXcEWr1';
-                            rules += ' AXcEWr1';
-                            if (props.size === "XL") rules += ' Nl1';
-                            else if (props.size === "L") rules += ' Nj1';
-                            else if (props.size === "S") rules += ' Nf1';
-                            else if (props.size === "XS") rules += ' Ne1';
-                            else rules += ' Nk1';
-                            if (props.isQuiet) rules += ' _qd1';
-                            else rules += ' _qtb1';
-                            if (props.size === "XL") rules += ' -Anxdcc-Zt1';
-                            else if (props.size === "L") rules += ' -Anxdcc-ZStdtne1';
-                            else if (props.size === "S") rules += ' -Anxdcc-Zr1';
-                            else rules += ' -Anxdcc-Z3fn9H1';
-                            rules += ' __v6TNLWb1';
-                            rules += ' __Wb1';
-                            rules += ' SMBFGYc1';
-                            rules += ' RfBFGYc1';
-                            rules += ' -S_-Sv1';
-                            rules += ' -R_-Rv1';
+                            rules += ' zXcEWr11';
+                            rules += ' yXcEWr11';
+                            rules += ' BXcEWr11';
+                            rules += ' AXcEWr11';
+                            if (props.size === "XL") rules += ' Nl11';
+                            else if (props.size === "L") rules += ' Nj11';
+                            else if (props.size === "S") rules += ' Nf11';
+                            else if (props.size === "XS") rules += ' Ne11';
+                            else rules += ' Nk11';
+                            if (props.isQuiet) rules += ' _qd11';
+                            else rules += ' _qtb11';
+                            if (props.size === "XL") rules += ' -Anxdcc-Zt11';
+                            else if (props.size === "L") rules += ' -Anxdcc-ZStdtne11';
+                            else if (props.size === "S") rules += ' -Anxdcc-Zr11';
+                            else rules += ' -Anxdcc-Z3fn9H11';
+                            rules += ' __v6TNLWb11';
+                            rules += ' __Wb11';
+                            rules += ' SMBFGYc11';
+                            rules += ' RfBFGYc11';
+                            rules += ' -S_-Sv11';
+                            rules += ' -R_-Rv11';
                             return rules;
                         }({
                             size: size

package/dist/DateField.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAkCM,MAAM,0DAAmB,CAAA,GAAA,0BAAY,EAA8D;AAE1G,MAAM;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AA0BN,MAAM;AAUC,MAAM,4CAA0B,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,UAC7E,MAAwB,EAAE,GAAwB;IAElD,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,QAAO,KAAK;IACnD,IAAI,SACF,KAAK,kBACL,cAAc,EACd,aAAa,kBAAkB,gBAC/B,YAAY,cACZ,UAAU,QACV,OAAO,oBACP,gBAAgB,2BAChB,kBAAkB,cAClB,aAAa,uBACb,YAAY,oBACZ,gBAAgB,UAChB,MAAM,EACN,GAAG,gBACJ,GAAG;IACJ,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,sCAAU;IAEvC,qBACE,gCAAC,CAAA,GAAA,oCAAY;QACX,KAAK;QACL,YAAY;QACX,GAAG,cAAc;QAClB,OAAO;QACP,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAC1E,UAAU,CAAC,CAAC;2BACZ;kBACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC;YACvB,qBACE;;kCACE,gCAAC,CAAA,GAAA,oCAAS;wBACR,YAAY;wBACZ,YAAY;wBACZ,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB;kCACf;;kCAGH,iCAAC,CAAA,GAAA,oCAAS;wBACR,MAAK;wBACL,YAAY;wBACZ,WAAW;wBACX,MAAM;wBACN,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;0BAIL;kCAAC;wBAAI;;0CACR,gCAAC;0CACC,cAAA,gCAAC;;0CAEH,gCAAC;gCAAiB,WAAW;gCAAW,YAAY;;;;kCAEtD,gCAAC,CAAA,GAAA,kCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;QAIT;;AAGN;AAEO,SAAS,wCAAmB,KAAwB;IACzD,qBAAO,gCAAC;QAAI,WAAW;kBAAmB,MAAM,QAAQ;;AAC1D;AAEO,SAAS,0CAAU,KAAuC;IAC/D,qBACE,gCAAC,CAAA,GAAA,oCAAY;QAAE,WAAU;QAAI,GAAG,KAAK;kBAClC,CAAC,wBACA,gCAAC,CAAA,GAAA,sCAAc;gBACb,SAAS;gBACT,WAAW,CAAC,cAAgB,kCAAY;wBAAC,GAAG,WAAW;wBAAE,eAAe,QAAQ,IAAI,KAAK;oBAAS;;;AAI5G;AAEO,SAAS,0CAAiB,KAAgD;IAC/E,OAAO,MAAM,SAAS,iBAAG,gCAAC;QAAI,WAAW;kBAAY,cAAA,gCAAC,CAAA,GAAA,wCAAa;YAAE,YAAY,MAAM,UAAU;;SAAa;AAChH","sources":["packages/@react-spectrum/s2/src/DateField.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {\n  DateField as AriaDateField,\n  DateFieldProps as AriaDateFieldProps,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  ContextValue,\n  DateInputProps,\n  DateSegmentRenderProps,\n  DateValue,\n  FormContext\n} from 'react-aria-components';\nimport {createContext, forwardRef, PropsWithChildren, ReactElement, Ref, useContext} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText} from './Field';\nimport {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface DateFieldProps<T extends DateValue> extends\n  Omit<AriaDateFieldProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n    /**\n     * The size of the DateField.\n     *\n     * @default 'M'\n     */\n    size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const DateFieldContext = createContext<ContextValue<Partial<DateFieldProps<any>>, HTMLDivElement>>(null);\n\nconst segmentContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: 'full',\n  overflowX: 'auto',\n  overflowY: 'hidden',\n  scrollbarWidth: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  textWrap: 'nowrap'\n});\n\nconst dateSegment = style<DateSegmentRenderProps & {isPunctuation: boolean}>({\n  outlineStyle: 'none',\n  caretColor: 'transparent',\n  backgroundColor: {\n    default: 'transparent',\n    isFocused: 'blue-800',\n    forcedColors: {\n      default: 'transparent',\n      isFocused: 'Highlight'\n    }\n  },\n  color: {\n    isFocused: 'white',\n    forcedColors: {\n      isFocused: 'HighlightText'\n    }\n  },\n  borderRadius: '[2px]',\n  paddingX: {\n    default: 2,\n    isPunctuation: 0\n  },\n  paddingY: 2,\n  forcedColorAdjust: 'none'\n});\n\nconst iconStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'end'\n});\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(\n  props: DateFieldProps<T>, ref: Ref<HTMLDivElement>\n): ReactElement {\n  [props, ref] = useSpectrumContextProps(props, ref, DateFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    ...dateFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n\n  return (\n    <AriaDateField\n      ref={ref}\n      isRequired={isRequired}\n      {...dateFieldProps}\n      style={UNSAFE_style}\n      className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, styles)}>\n      {({isDisabled, isInvalid}) => {\n        return (\n          <>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={contextualHelp}>\n              {label}\n            </FieldLabel>\n\n            <FieldGroup\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                textWrap: 'nowrap',\n                paddingX: 'edge-to-text'\n              })({size})}>\n              <DateInputContainer>\n                <DateInput />\n              </DateInputContainer>\n              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n          </>\n        );\n      }}\n    </AriaDateField>\n  );\n});\n\nexport function DateInputContainer(props: PropsWithChildren): ReactElement {\n  return <div className={segmentContainer}>{props.children}</div>;\n}\n\nexport function DateInput(props: Omit<DateInputProps, 'children'>): ReactElement {\n  return (\n    <AriaDateInput className=\"\" {...props}>\n      {(segment) => (\n        <AriaDateSegment\n          segment={segment}\n          className={(renderProps) => dateSegment({...renderProps, isPunctuation: segment.type === 'literal'})} />\n      )}\n    </AriaDateInput>\n  );\n}\n\nexport function InvalidIndicator(props: {isInvalid: boolean, isDisabled: boolean}): ReactElement | null {\n  return props.isInvalid ? <div className={iconStyles}><FieldErrorIcon isDisabled={props.isDisabled} /></div> : null;\n}\n"],"names":[],"version":3,"file":"DateField.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAkCM,MAAM,0DAAmB,CAAA,GAAA,0BAAY,EAA8D;AAE1G,MAAM;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AA0BN,MAAM;AAUC,MAAM,4CAA0B,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,UAC7E,MAAwB,EAAE,GAAwB;IAElD,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,QAAO,KAAK;IACnD,IAAI,SACF,KAAK,kBACL,cAAc,EACd,aAAa,kBAAkB,gBAC/B,YAAY,cACZ,UAAU,QACV,OAAO,oBACP,gBAAgB,2BAChB,kBAAkB,cAClB,aAAa,uBACb,YAAY,oBACZ,gBAAgB,UAChB,MAAM,EACN,GAAG,gBACJ,GAAG;IACJ,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,sCAAU;IAEvC,qBACE,gCAAC,CAAA,GAAA,oCAAY;QACX,KAAK;QACL,YAAY;QACX,GAAG,cAAc;QAClB,OAAO;QACP,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAC1E,UAAU,CAAC,CAAC;2BACZ;kBACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC;YACvB,qBACE;;kCACE,gCAAC,CAAA,GAAA,oCAAS;wBACR,YAAY;wBACZ,YAAY;wBACZ,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB;kCACf;;kCAGH,iCAAC,CAAA,GAAA,oCAAS;wBACR,MAAK;wBACL,YAAY;wBACZ,WAAW;wBACX,MAAM;wBACN,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;0BAIL;kCAAC;wBAAI;;0CACR,gCAAC;0CACC,cAAA,gCAAC;;0CAEH,gCAAC;gCAAiB,WAAW;gCAAW,YAAY;;;;kCAEtD,gCAAC,CAAA,GAAA,kCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;QAIT;;AAGN;AAEO,SAAS,wCAAmB,KAAwB;IACzD,qBAAO,gCAAC;QAAI,WAAW;kBAAmB,MAAM,QAAQ;;AAC1D;AAEO,SAAS,0CAAU,KAAuC;IAC/D,qBACE,gCAAC,CAAA,GAAA,oCAAY;QAAE,WAAU;QAAI,GAAG,KAAK;kBAClC,CAAC,wBACA,gCAAC,CAAA,GAAA,sCAAc;gBACb,SAAS;gBACT,WAAW,CAAC,cAAgB,kCAAY;wBAAC,GAAG,WAAW;wBAAE,eAAe,QAAQ,IAAI,KAAK;oBAAS;;;AAI5G;AAEO,SAAS,0CAAiB,KAAgD;IAC/E,OAAO,MAAM,SAAS,iBAAG,gCAAC;QAAI,WAAW;kBAAY,cAAA,gCAAC,CAAA,GAAA,wCAAa;YAAE,YAAY,MAAM,UAAU;;SAAa;AAChH","sources":["packages/@react-spectrum/s2/src/DateField.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {\n  DateField as AriaDateField,\n  DateFieldProps as AriaDateFieldProps,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  ContextValue,\n  DateInputProps,\n  DateSegmentRenderProps,\n  DateValue,\n  FormContext\n} from 'react-aria-components';\nimport {createContext, forwardRef, PropsWithChildren, ReactElement, Ref, useContext} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText} from './Field';\nimport {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface DateFieldProps<T extends DateValue> extends\n  Omit<AriaDateFieldProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n    /**\n     * The size of the DateField.\n     *\n     * @default 'M'\n     */\n    size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const DateFieldContext = createContext<ContextValue<Partial<DateFieldProps<any>>, HTMLDivElement>>(null);\n\nconst segmentContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: 'full',\n  overflowX: 'auto',\n  overflowY: 'hidden',\n  scrollbarWidth: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  textWrap: 'nowrap'\n});\n\nconst dateSegment = style<DateSegmentRenderProps & {isPunctuation: boolean}>({\n  outlineStyle: 'none',\n  caretColor: 'transparent',\n  backgroundColor: {\n    default: 'transparent',\n    isFocused: 'blue-800',\n    forcedColors: {\n      default: 'transparent',\n      isFocused: 'Highlight'\n    }\n  },\n  color: {\n    isFocused: 'white',\n    forcedColors: {\n      isFocused: 'HighlightText'\n    }\n  },\n  borderRadius: '[2px]',\n  paddingX: {\n    default: 2,\n    isPunctuation: 0\n  },\n  paddingY: 2,\n  forcedColorAdjust: 'none'\n});\n\nconst iconStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'end'\n});\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(\n  props: DateFieldProps<T>, ref: Ref<HTMLDivElement>\n): ReactElement {\n  [props, ref] = useSpectrumContextProps(props, ref, DateFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    ...dateFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n\n  return (\n    <AriaDateField\n      ref={ref}\n      isRequired={isRequired}\n      {...dateFieldProps}\n      style={UNSAFE_style}\n      className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, styles)}>\n      {({isDisabled, isInvalid}) => {\n        return (\n          <>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={contextualHelp}>\n              {label}\n            </FieldLabel>\n\n            <FieldGroup\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                textWrap: 'nowrap',\n                paddingX: 'edge-to-text'\n              })({size})}>\n              <DateInputContainer>\n                <DateInput />\n              </DateInputContainer>\n              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n          </>\n        );\n      }}\n    </AriaDateField>\n  );\n});\n\nexport function DateInputContainer(props: PropsWithChildren): ReactElement {\n  return <div className={segmentContainer}>{props.children}</div>;\n}\n\nexport function DateInput(props: Omit<DateInputProps, 'children'>): ReactElement {\n  return (\n    <AriaDateInput className=\"\" {...props}>\n      {(segment) => (\n        <AriaDateSegment\n          segment={segment}\n          className={(renderProps) => dateSegment({...renderProps, isPunctuation: segment.type === 'literal'})} />\n      )}\n    </AriaDateInput>\n  );\n}\n\nexport function InvalidIndicator(props: {isInvalid: boolean, isDisabled: boolean}): ReactElement | null {\n  return props.isInvalid ? <div className={iconStyles}><FieldErrorIcon isDisabled={props.isDisabled} /></div> : null;\n}\n"],"names":[],"version":3,"file":"DateField.cjs.map"}

package/dist/DateField.css

@@ -1,313 +1,313 @@
 @layer _.a {
-  ._ub1 {
+  ._ub11 {
     flex-grow: 1;
   }
 
-  ._vb1 {
+  ._vb11 {
     flex-shrink: 1;
   }
 
-  .Na1 {
+  .Na11 {
     min-width: 0;
   }
 
-  .Fb1 {
+  .Fb11 {
     height: 100%;
   }
 
-  ._Na1 {
+  ._Na11 {
     overflow-x: auto;
   }
 
-  .Pc1 {
+  .Pc11 {
     overflow-y: hidden;
   }
 
-  .-dLGswc-h3TDrc1 {
+  .-dLGswc-h3TDrc11 {
     scrollbar-width: none;
   }
 
-  ._Le1 {
+  ._Le11 {
     outline-style: none;
   }
 
-  .-zNggOc-RWHrbc1 {
+  .-zNggOc-RWHrbc11 {
     caret-color: #0000;
   }
 
-  .g91 {
+  .g911 {
     background-color: #0000;
   }
 
-  .g_h1 {
+  .g_h11 {
     background-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .px1 {
+  .px11 {
     color: #fff;
   }
 
-  .oLvNfn1 {
+  .oLvNfn11 {
     border-start-start-radius: 2px;
   }
 
-  .nLvNfn1 {
+  .nLvNfn11 {
     border-start-end-radius: 2px;
   }
 
-  .kLvNfn1 {
+  .kLvNfn11 {
     border-end-start-radius: 2px;
   }
 
-  .jLvNfn1 {
+  .jLvNfn11 {
     border-end-end-radius: 2px;
   }
 
-  .Sj1 {
+  .Sj11 {
     padding-inline-start: 2px;
   }
 
-  .Sd1 {
+  .Sd11 {
     padding-inline-start: 0;
   }
 
-  .Rj1 {
+  .Rj11 {
     padding-inline-end: 2px;
   }
 
-  .Rd1 {
+  .Rd11 {
     padding-inline-end: 0;
   }
 
-  .Tj1 {
+  .Tj11 {
     padding-top: 2px;
   }
 
-  .Qj1 {
+  .Qj11 {
     padding-bottom: 2px;
   }
 
-  ._yb1 {
+  ._yb11 {
     forced-color-adjust: none;
   }
 
-  .sd1 {
+  .sd11 {
     display: flex;
   }
 
-  .eb1 {
+  .eb11 {
     align-items: center;
   }
 
-  ._Cb1 {
+  ._Cb11 {
     justify-content: end;
   }
 
-  .se1 {
+  .se11 {
     display: grid;
   }
 
-  .z2mU1 {
+  .z2mU11 {
     grid-column-start: 1;
   }
 
-  .yvoofG1 {
+  .yvoofG11 {
     grid-column-end: span 2;
   }
 
-  .DM8Mfn1 {
+  .DM8Mfn11 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb1 {
+  .DPlN5qb11 {
     grid-template-columns: auto 1fr;
   }
 
-  .DLwlgod1 {
+  .DLwlgod11 {
     grid-template-columns: subgrid;
   }
 
-  .E4w1sLc1 {
+  .E4w1sLc11 {
     grid-template-rows: auto 1fr auto;
   }
 
-  .EPlN5qb1 {
+  .EPlN5qb11 {
     grid-template-rows: auto 1fr;
   }
 
-  .Cxaocre1 {
+  .Cxaocre11 {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .CbRM95c1 {
+  .CbRM95c11 {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  .-_6BNtrc-c1 {
+  .-_6BNtrc-c11 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a1 {
+  .-_6BNtrc-a11 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b1 {
+  .-_6BNtrc-b11 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d1 {
+  .-_6BNtrc-d11 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e1 {
+  .-_6BNtrc-e11 {
     --fs: pow(1.125, 2);
   }
 
-  .vx1 {
+  .vx11 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .ea1 {
+  .ea11 {
     align-items: baseline;
   }
 
-  ._Fd1 {
+  ._Fd11 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .-BhX7R-Fx1 {
+  .-BhX7R-Fx11 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn1 {
+  .-BhX7R-Fn11 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp1 {
+  .-BhX7R-Fp11 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv1 {
+  .-BhX7R-Fv11 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz1 {
+  .-BhX7R-Fz11 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UVkF0Db1 {
+  .-AJjOLd-UVkF0Db11 {
     --field-gap: calc((var(--field-height)  - var(--_k, 0px)  - var(--h, 0px)  - 1lh) / 2);
   }
 
-  .qg1 {
+  .qg11 {
     column-gap: .75rem;
   }
 
-  .__ca1 {
+  .__ca11 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .zXcEWr1 {
+  .zXcEWr11 {
     grid-column-start: input;
   }
 
-  .yXcEWr1 {
+  .yXcEWr11 {
     grid-column-end: input;
   }
 
-  .BXcEWr1 {
+  .BXcEWr11 {
     grid-row-start: input;
   }
 
-  .AXcEWr1 {
+  .AXcEWr11 {
     grid-row-end: input;
   }
 
-  .Nk1 {
+  .Nk11 {
     min-width: calc(2rem * var(--s2-scale));
   }
 
-  .Ne1 {
+  .Ne11 {
     min-width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Nf1 {
+  .Nf11 {
     min-width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Nj1 {
+  .Nj11 {
     min-width: calc(2.5rem * var(--s2-scale));
   }
 
-  .Nl1 {
+  .Nl11 {
     min-width: calc(3rem * var(--s2-scale));
   }
 
-  ._qd1 {
+  ._qd11 {
     contain: none;
   }
 
-  .-Anxdcc-Z3fn9H1 {
+  .-Anxdcc-Z3fn9H11 {
     --defaultWidth: calc(13rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zr1 {
+  .-Anxdcc-Zr11 {
     --defaultWidth: calc(12rem * var(--s2-scale));
   }
 
-  .-Anxdcc-ZStdtne1 {
+  .-Anxdcc-ZStdtne11 {
     --defaultWidth: calc(14rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zt1 {
+  .-Anxdcc-Zt11 {
     --defaultWidth: calc(15rem * var(--s2-scale));
   }
 
-  .__v6TNLWb1 {
+  .__v6TNLWb11 {
     contain-intrinsic-width: calc(var(--defaultWidth)  - var(--S, 0px)  - var(--R, 0px)  - var(--m, 0px)  - var(--l, 0px));
   }
 
-  .__Wb1 {
+  .__Wb11 {
     text-wrap: nowrap;
   }
 
-  .SMBFGYc1 {
+  .SMBFGYc11 {
     padding-inline-start: var(--S);
   }
 
-  .RfBFGYc1 {
+  .RfBFGYc11 {
     padding-inline-end: var(--R);
   }
 
-  .-S_-Sv1 {
+  .-S_-Sv11 {
     --S: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .-R_-Rv1 {
+  .-R_-Rv11 {
     --R: calc(var(--F, var(--M)) * 3 / 8);
   }
 }
 
 @layer _.b {
-  ._FnuYUweb1:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .gl91 {
+    .gl911 {
       background-color: #0000;
     }
 
-    .gle1 {
+    .gle11 {
       background-color: highlight;
     }
 
-    .ple1 {
+    .ple11 {
       color: highlighttext;
     }
   }
@@ -315,7 +315,7 @@
 
 @layer _.b.t {
   @supports (contain-intrinsic-width: 1px) {
-    ._qtb1 {
+    ._qtb11 {
       contain: inline-size;
     }
   }

package/dist/DateField.css.map

@@ -1 +1 @@
-{"mappings":"AC8CyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BD;;;;EAAA;;;;EAAA;;;;EAqCyB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBtB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvFF;EA+DwB;;;;;AA/DxB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAuFE;EAAA;IAAA","sources":["6798416da6b91712","packages/@react-spectrum/s2/src/DateField.tsx"],"sourcesContent":["@import \"17848fadf7e86c1f\";\n@import \"69e720840f8f901c\";\n@import \"6c238fac11e9d6dc\";\n@import \"b9cad8e6ab24508c\";\n@import \"82b60e2fcc72616c\";\n","/*\n * Copyright 2024 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 {\n  DateField as AriaDateField,\n  DateFieldProps as AriaDateFieldProps,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  ContextValue,\n  DateInputProps,\n  DateSegmentRenderProps,\n  DateValue,\n  FormContext\n} from 'react-aria-components';\nimport {createContext, forwardRef, PropsWithChildren, ReactElement, Ref, useContext} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText} from './Field';\nimport {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface DateFieldProps<T extends DateValue> extends\n  Omit<AriaDateFieldProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n    /**\n     * The size of the DateField.\n     *\n     * @default 'M'\n     */\n    size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const DateFieldContext = createContext<ContextValue<Partial<DateFieldProps<any>>, HTMLDivElement>>(null);\n\nconst segmentContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: 'full',\n  overflowX: 'auto',\n  overflowY: 'hidden',\n  scrollbarWidth: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  textWrap: 'nowrap'\n});\n\nconst dateSegment = style<DateSegmentRenderProps & {isPunctuation: boolean}>({\n  outlineStyle: 'none',\n  caretColor: 'transparent',\n  backgroundColor: {\n    default: 'transparent',\n    isFocused: 'blue-800',\n    forcedColors: {\n      default: 'transparent',\n      isFocused: 'Highlight'\n    }\n  },\n  color: {\n    isFocused: 'white',\n    forcedColors: {\n      isFocused: 'HighlightText'\n    }\n  },\n  borderRadius: '[2px]',\n  paddingX: {\n    default: 2,\n    isPunctuation: 0\n  },\n  paddingY: 2,\n  forcedColorAdjust: 'none'\n});\n\nconst iconStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'end'\n});\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(\n  props: DateFieldProps<T>, ref: Ref<HTMLDivElement>\n): ReactElement {\n  [props, ref] = useSpectrumContextProps(props, ref, DateFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    ...dateFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n\n  return (\n    <AriaDateField\n      ref={ref}\n      isRequired={isRequired}\n      {...dateFieldProps}\n      style={UNSAFE_style}\n      className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, styles)}>\n      {({isDisabled, isInvalid}) => {\n        return (\n          <>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={contextualHelp}>\n              {label}\n            </FieldLabel>\n\n            <FieldGroup\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                textWrap: 'nowrap',\n                paddingX: 'edge-to-text'\n              })({size})}>\n              <DateInputContainer>\n                <DateInput />\n              </DateInputContainer>\n              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n          </>\n        );\n      }}\n    </AriaDateField>\n  );\n});\n\nexport function DateInputContainer(props: PropsWithChildren): ReactElement {\n  return <div className={segmentContainer}>{props.children}</div>;\n}\n\nexport function DateInput(props: Omit<DateInputProps, 'children'>): ReactElement {\n  return (\n    <AriaDateInput className=\"\" {...props}>\n      {(segment) => (\n        <AriaDateSegment\n          segment={segment}\n          className={(renderProps) => dateSegment({...renderProps, isPunctuation: segment.type === 'literal'})} />\n      )}\n    </AriaDateInput>\n  );\n}\n\nexport function InvalidIndicator(props: {isInvalid: boolean, isDisabled: boolean}): ReactElement | null {\n  return props.isInvalid ? <div className={iconStyles}><FieldErrorIcon isDisabled={props.isDisabled} /></div> : null;\n}\n"],"names":[],"version":3,"file":"DateField.css.map"}
+{"mappings":"AC8CyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BD;;;;EAAA;;;;EAAA;;;;EAqCyB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBtB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvFF;EA+DwB;;;;;AA/DxB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAuFE;EAAA;IAAA","sources":["6798416da6b91712","packages/@react-spectrum/s2/src/DateField.tsx"],"sourcesContent":["@import \"17848fadf7e86c1f\";\n@import \"69e720840f8f901c\";\n@import \"6c238fac11e9d6dc\";\n@import \"b9cad8e6ab24508c\";\n@import \"82b60e2fcc72616c\";\n","/*\n * Copyright 2024 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 {\n  DateField as AriaDateField,\n  DateFieldProps as AriaDateFieldProps,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  ContextValue,\n  DateInputProps,\n  DateSegmentRenderProps,\n  DateValue,\n  FormContext\n} from 'react-aria-components';\nimport {createContext, forwardRef, PropsWithChildren, ReactElement, Ref, useContext} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText} from './Field';\nimport {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface DateFieldProps<T extends DateValue> extends\n  Omit<AriaDateFieldProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n    /**\n     * The size of the DateField.\n     *\n     * @default 'M'\n     */\n    size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const DateFieldContext = createContext<ContextValue<Partial<DateFieldProps<any>>, HTMLDivElement>>(null);\n\nconst segmentContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: 'full',\n  overflowX: 'auto',\n  overflowY: 'hidden',\n  scrollbarWidth: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  textWrap: 'nowrap'\n});\n\nconst dateSegment = style<DateSegmentRenderProps & {isPunctuation: boolean}>({\n  outlineStyle: 'none',\n  caretColor: 'transparent',\n  backgroundColor: {\n    default: 'transparent',\n    isFocused: 'blue-800',\n    forcedColors: {\n      default: 'transparent',\n      isFocused: 'Highlight'\n    }\n  },\n  color: {\n    isFocused: 'white',\n    forcedColors: {\n      isFocused: 'HighlightText'\n    }\n  },\n  borderRadius: '[2px]',\n  paddingX: {\n    default: 2,\n    isPunctuation: 0\n  },\n  paddingY: 2,\n  forcedColorAdjust: 'none'\n});\n\nconst iconStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'end'\n});\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(\n  props: DateFieldProps<T>, ref: Ref<HTMLDivElement>\n): ReactElement {\n  [props, ref] = useSpectrumContextProps(props, ref, DateFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    ...dateFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n\n  return (\n    <AriaDateField\n      ref={ref}\n      isRequired={isRequired}\n      {...dateFieldProps}\n      style={UNSAFE_style}\n      className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, styles)}>\n      {({isDisabled, isInvalid}) => {\n        return (\n          <>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={contextualHelp}>\n              {label}\n            </FieldLabel>\n\n            <FieldGroup\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                textWrap: 'nowrap',\n                paddingX: 'edge-to-text'\n              })({size})}>\n              <DateInputContainer>\n                <DateInput />\n              </DateInputContainer>\n              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n          </>\n        );\n      }}\n    </AriaDateField>\n  );\n});\n\nexport function DateInputContainer(props: PropsWithChildren): ReactElement {\n  return <div className={segmentContainer}>{props.children}</div>;\n}\n\nexport function DateInput(props: Omit<DateInputProps, 'children'>): ReactElement {\n  return (\n    <AriaDateInput className=\"\" {...props}>\n      {(segment) => (\n        <AriaDateSegment\n          segment={segment}\n          className={(renderProps) => dateSegment({...renderProps, isPunctuation: segment.type === 'literal'})} />\n      )}\n    </AriaDateInput>\n  );\n}\n\nexport function InvalidIndicator(props: {isInvalid: boolean, isDisabled: boolean}): ReactElement | null {\n  return props.isInvalid ? <div className={iconStyles}><FieldErrorIcon isDisabled={props.isDisabled} /></div> : null;\n}\n"],"names":[],"version":3,"file":"DateField.css.map"}