@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.10bf491

package/dist/fields/ConfirmPassword/index.js

@@ -1,36 +1,95 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { confirmPassword } from 'payload/shared';
+import React from 'react';
 import { useField } from '../../forms/useField/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { FieldError } from '../FieldError/index.js';
 import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
 import './index.scss';
-export const ConfirmPasswordField = (props)=>{
-    const { disabled: disabledFromProps, path = 'confirm-password' } = props;
-    const { t } = useTranslation();
-    const { disabled, setValue, showError, value } = useField({
-        path,
-        validate: (value, options)=>{
-            return confirmPassword(value, {
-                name: 'confirm-password',
-                type: 'text',
-                required: true,
-                ...options
-            });
-        }
+export const ConfirmPasswordField = props => {
+  const $ = _c(12);
+  const {
+    disabled: disabledFromProps,
+    path: t0
+  } = props;
+  const path = t0 === undefined ? "confirm-password" : t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== path) {
+    t1 = {
+      path,
+      validate: _temp
+    };
+    $[0] = path;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    disabled,
+    setValue,
+    showError,
+    value: value_0
+  } = useField(t1);
+  const t2 = showError && "error";
+  let t3;
+  if ($[2] !== t2) {
+    t3 = [fieldBaseClass, "confirm-password", t2].filter(Boolean);
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const t4 = t3.join(" ");
+  let t5;
+  if ($[4] !== disabled || $[5] !== disabledFromProps || $[6] !== path || $[7] !== setValue || $[8] !== t || $[9] !== t4 || $[10] !== value_0) {
+    t5 = _jsxs("div", {
+      className: t4,
+      children: [_jsx(FieldLabel, {
+        htmlFor: "field-confirm-password",
+        label: t("authentication:confirmPassword"),
+        required: true
+      }), _jsxs("div", {
+        className: `${fieldBaseClass}__wrap`,
+        children: [_jsx(FieldError, {
+          path
+        }), _jsx("input", {
+          "aria-label": t("authentication:confirmPassword"),
+          autoComplete: "off",
+          disabled: !!(disabled || disabledFromProps),
+          id: "field-confirm-password",
+          name: "confirm-password",
+          onChange: setValue,
+          type: "password",
+          value: value_0 || ""
+        })]
+      })]
     });
-    return <div className={[
-        fieldBaseClass,
-        'confirm-password',
-        showError && 'error'
-    ].filter(Boolean).join(' ')}>
-      <FieldLabel htmlFor="field-confirm-password" label={t('authentication:confirmPassword')} required/>
-      <div className={`${fieldBaseClass}__wrap`}>
-        <FieldError path={path}/>
-        <input aria-label={t('authentication:confirmPassword')} autoComplete="off" disabled={!!(disabled || disabledFromProps)} id="field-confirm-password" name="confirm-password" onChange={setValue} type="password" value={value || ''}/>
-      </div>
-    </div>;
+    $[4] = disabled;
+    $[5] = disabledFromProps;
+    $[6] = path;
+    $[7] = setValue;
+    $[8] = t;
+    $[9] = t4;
+    $[10] = value_0;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
 };
-
+function _temp(value, options) {
+  return confirmPassword(value, {
+    name: "confirm-password",
+    type: "text",
+    required: true,
+    ...options
+  });
+}
 //# sourceMappingURL=index.js.map

package/dist/fields/ConfirmPassword/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\n\nimport { confirmPassword } from 'payload/shared'\nimport React from 'react'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type ConfirmPasswordFieldProps = {\n  readonly disabled?: boolean\n  readonly path?: string\n}\n\nexport const ConfirmPasswordField: React.FC<ConfirmPasswordFieldProps> = (props) => {\n  const { disabled: disabledFromProps, path = 'confirm-password' } = props\n  const { t } = useTranslation()\n\n  const { disabled, setValue, showError, value } = useField({\n    path,\n    validate: (value, options) => {\n      return confirmPassword(value, {\n        name: 'confirm-password',\n        type: 'text',\n        required: true,\n        ...options,\n      })\n    },\n  })\n\n  return (\n    <div\n      className={[fieldBaseClass, 'confirm-password', showError && 'error']\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <FieldLabel\n        htmlFor=\"field-confirm-password\"\n        label={t('authentication:confirmPassword')}\n        required\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError path={path} />\n        <input\n          aria-label={t('authentication:confirmPassword')}\n          autoComplete=\"off\"\n          disabled={!!(disabled || disabledFromProps)}\n          id=\"field-confirm-password\"\n          name=\"confirm-password\"\n          onChange={setValue}\n          type=\"password\"\n          value={(value as string) || ''}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["confirmPassword","useField","useTranslation","FieldError","FieldLabel","fieldBaseClass","ConfirmPasswordField","props","disabled","disabledFromProps","path","t","setValue","showError","value","validate","options","name","type","required","div","className","filter","Boolean","join","htmlFor","label","input","aria-label","autoComplete","id","onChange"],"mappings":"AAAA;AAEA,SAASA,eAAe,QAAQ,iBAAgB;AAGhD,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,cAAc,QAAQ,qBAAoB;AACnD,OAAO,eAAc;AAOrB,OAAO,MAAMC,uBAA4D,CAACC;IACxE,MAAM,EAAEC,UAAUC,iBAAiB,EAAEC,OAAO,kBAAkB,EAAE,GAAGH;IACnE,MAAM,EAAEI,CAAC,EAAE,GAAGT;IAEd,MAAM,EAAEM,QAAQ,EAAEI,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGb,SAAS;QACxDS;QACAK,UAAU,CAACD,OAAOE;YAChB,OAAOhB,gBAAgBc,OAAO;gBAC5BG,MAAM;gBACNC,MAAM;gBACNC,UAAU;gBACV,GAAGH,OAAO;YACZ;QACF;IACF;IAEA,QACGI,IACCC,WAAW;QAAChB;QAAgB;QAAoBQ,aAAa;KAAQ,CAClES,MAAM,CAACC,SACPC,IAAI,CAAC,MACT;MACC,CAACpB,WACCqB,QAAQ,yBACRC,OAAOf,EAAE,mCACTQ,UACA;MACF,CAACC,IAAIC,WAAW,GAAGhB,eAAe,MAAM,CAAC,EAAE;QACzC,CAACF,WAAWO,MAAMA,OAAQ;QAC1B,CAACiB,MACCC,YAAYjB,EAAE,mCACdkB,aAAa,MACbrB,UAAU,CAAC,CAAEA,CAAAA,YAAYC,iBAAgB,GACzCqB,GAAG,yBACHb,KAAK,mBACLc,UAAUnB,UACVM,KAAK,WACLJ,OAAO,AAACA,SAAoB,KAC5B;MACJ,EAAEM,IAAI;IACR,EAAEA;AAEN,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","confirmPassword","React","useField","useTranslation","FieldError","FieldLabel","fieldBaseClass","ConfirmPasswordField","props","$","disabled","disabledFromProps","path","t0","undefined","t","t1","validate","_temp","setValue","showError","value","value_0","t2","t3","filter","Boolean","t4","join","t5","_jsxs","className","children","_jsx","htmlFor","label","required","autoComplete","id","name","onChange","type","options"],"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\n\nimport { confirmPassword } from 'payload/shared'\nimport React from 'react'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type ConfirmPasswordFieldProps = {\n  readonly disabled?: boolean\n  readonly path?: string\n}\n\nexport const ConfirmPasswordField: React.FC<ConfirmPasswordFieldProps> = (props) => {\n  const { disabled: disabledFromProps, path = 'confirm-password' } = props\n  const { t } = useTranslation()\n\n  const { disabled, setValue, showError, value } = useField({\n    path,\n    validate: (value, options) => {\n      return confirmPassword(value, {\n        name: 'confirm-password',\n        type: 'text',\n        required: true,\n        ...options,\n      })\n    },\n  })\n\n  return (\n    <div\n      className={[fieldBaseClass, 'confirm-password', showError && 'error']\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <FieldLabel\n        htmlFor=\"field-confirm-password\"\n        label={t('authentication:confirmPassword')}\n        required\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError path={path} />\n        <input\n          aria-label={t('authentication:confirmPassword')}\n          autoComplete=\"off\"\n          disabled={!!(disabled || disabledFromProps)}\n          id=\"field-confirm-password\"\n          name=\"confirm-password\"\n          onChange={setValue}\n          type=\"password\"\n          value={(value as string) || ''}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,eAAe,QAAQ;AAChC,OAAOC,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,UAAU,QAAQ;AAC3B,SAASC,UAAU,QAAQ;AAC3B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAOP,OAAO,MAAMC,oBAAA,GAA4DC,KAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EACvE;IAAAW,QAAA,EAAAC,iBAAA;IAAAC,IAAA,EAAAC;EAAA,IAAmEL,KAAA;EAA9B,MAAAI,IAAA,GAAAC,EAAyB,KAAAC,SAAA,GAAlB,kBAAkB,GAAzBD,EAAyB;EAC9D;IAAAE;EAAA,IAAcZ,cAAA;EAAA,IAAAa,EAAA;EAAA,IAAAP,CAAA,QAAAG,IAAA;IAE4CI,EAAA;MAAAJ,IAAA;MAAAK,QAAA,EAAAC;IAAA;IAU1DT,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAVA;IAAAC,QAAA;IAAAS,QAAA;IAAAC,SAAA;IAAAC,KAAA,EAAAC;EAAA,IAAiDpB,QAAA,CAASc,EAU1D;EAIoD,MAAAO,EAAA,GAAAH,SAAA,IAAa;EAAA,IAAAI,EAAA;EAAA,IAAAf,CAAA,QAAAc,EAAA;IAAlDC,EAAA,IAAAlB,cAAA,EAAiB,oBAAoBiB,EAAa,EAAAE,MAAA,CAAAC,OACnD;IAAAjB,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EADC,MAAAkB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAE,iBAAA,IAAAF,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAU,QAAA,IAAAV,CAAA,QAAAM,CAAA,IAAAN,CAAA,QAAAkB,EAAA,IAAAlB,CAAA,SAAAa,OAAA;IAHVO,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYJ,EAEH;MAAAK,QAAA,GAERC,IAAA,CAAA5B,UAAA;QAAA6B,OAAA,EACU;QAAAC,KAAA,EACDpB,CAAA,CAAE;QAAAqB,QAAA;MAAA,C,GAGXN,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAAzB,cAAA,QAAyB;QAAA0B,QAAA,GACvCC,IAAA,CAAA7B,UAAA;UAAAQ;QAAA,C,GACAqB,IAAA,CAAC;UAAA,cACalB,CAAA,CAAE;UAAAsB,YAAA,EACD;UAAA3B,QAAA,KACAA,QAAA,IAAYC,iBAAgB;UAAA2B,EAAA,EACtC;UAAAC,IAAA,EACE;UAAAC,QAAA,EACKrB,QAAA;UAAAsB,IAAA,EACL;UAAApB,KAAA,EACEA,OAAC,IAAoB;QAAA,C;;;;;;;;;;;;;;SApBlCQ,E;CAyBJ;AA1CyE,SAAAX,MAAAG,KAAA,EAAAqB,OAAA;EAAA,OAO5D1C,eAAA,CAAgBqB,KAAA;IAAAkB,IAAA,EACf;IAAAE,IAAA,EACA;IAAAL,QAAA;IAAA,GAEHM;EAAO,CACZ;AAAA","ignoreList":[]}

package/dist/fields/DateTime/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TZDateMini as TZDate } from '@date-fns/tz/date/mini';
 import { getTranslation } from '@payloadcms/translations';
 import { transpose } from 'date-fns';
@@ -18,142 +20,177 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
 const baseClass = 'date-time-field';
-const DateTimeFieldComponent = (props)=>{
-    const { field, field: { admin: { className, date: datePickerProps, description, placeholder } = {}, label, localized, required, timezone }, path: pathFromProps, readOnly, validate } = props;
-    const pickerAppearance = datePickerProps?.pickerAppearance || 'default';
-    // Get the user timezone so we can adjust the displayed value against it
-    const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    const { config } = useConfig();
-    const { i18n } = useTranslation();
-    const { dispatchFields, setModified } = useForm();
-    const memoizedValidate = useCallback((value, options)=>{
-        if (typeof validate === 'function') {
-            return validate(value, {
-                ...options,
-                required
-            });
-        }
-    }, [
-        validate,
+const DateTimeFieldComponent = props => {
+  const {
+    field,
+    field: {
+      admin: {
+        className,
+        date: datePickerProps,
+        description,
+        placeholder
+      } = {},
+      label,
+      localized,
+      required,
+      timezone
+    },
+    path: pathFromProps,
+    readOnly,
+    validate
+  } = props;
+  const pickerAppearance = datePickerProps?.pickerAppearance || 'default';
+  // Get the user timezone so we can adjust the displayed value against it
+  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const {
+    config
+  } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    dispatchFields,
+    setModified
+  } = useForm();
+  const memoizedValidate = useCallback((value, options) => {
+    if (typeof validate === 'function') {
+      return validate(value, {
+        ...options,
         required
-    ]);
-    const { customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {}, disabled, path, setValue, showError, value } = useField({
-        potentiallyStalePath: pathFromProps,
-        validate: memoizedValidate
-    });
-    const timezonePath = path + '_tz';
-    const timezoneField = useFormFields(([fields, _])=>fields?.[timezonePath]);
-    const supportedTimezones = useMemo(()=>{
-        if (timezone && typeof timezone === 'object' && timezone.supportedTimezones) {
-            return timezone.supportedTimezones;
-        }
-        return config.admin.timezones.supportedTimezones;
-    }, [
-        config.admin.timezones.supportedTimezones,
-        timezone
-    ]);
-    /**
-   * Date appearance doesn't include timestamps,
-   * which means we need to pin the time to always 12:00 for the selected date
-   */ const isDateOnly = [
-        'dayOnly',
-        'default',
-        'monthOnly'
-    ].includes(pickerAppearance);
-    const selectedTimezone = timezoneField?.value;
-    const timezoneRequired = required || timezone && typeof timezone === 'object' && timezone.required;
-    // The displayed value should be the original value, adjusted to the user's timezone
-    const displayedValue = useMemo(()=>{
-        if (timezone && selectedTimezone && userTimezone && value) {
-            // Create TZDate instances for the selected timezone and the user's timezone
-            // These instances allow us to transpose the date between timezones while keeping the same time value
-            const DateWithOriginalTz = TZDate.tz(selectedTimezone);
-            const DateWithUserTz = TZDate.tz(userTimezone);
-            const modifiedDate = new TZDate(value).withTimeZone(selectedTimezone);
-            // Transpose the date to the selected timezone
-            const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz);
-            // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone
-            const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz);
-            return dateWithUserTimezone.toISOString();
+      });
+    }
+  }, [validate, required]);
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled,
+    path,
+    setValue,
+    showError,
+    value: value_0
+  } = useField({
+    potentiallyStalePath: pathFromProps,
+    validate: memoizedValidate
+  });
+  const timezonePath = path + '_tz';
+  const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath]);
+  const supportedTimezones = useMemo(() => {
+    if (timezone && typeof timezone === 'object' && timezone.supportedTimezones) {
+      return timezone.supportedTimezones;
+    }
+    return config.admin.timezones.supportedTimezones;
+  }, [config.admin.timezones.supportedTimezones, timezone]);
+  /**
+  * Date appearance doesn't include timestamps,
+  * which means we need to pin the time to always 12:00 for the selected date
+  */
+  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance);
+  const selectedTimezone = timezoneField?.value;
+  const timezoneRequired = required || timezone && typeof timezone === 'object' && timezone.required;
+  // The displayed value should be the original value, adjusted to the user's timezone
+  const displayedValue = useMemo(() => {
+    if (timezone && selectedTimezone && userTimezone && value_0) {
+      // Create TZDate instances for the selected timezone and the user's timezone
+      // These instances allow us to transpose the date between timezones while keeping the same time value
+      const DateWithOriginalTz = TZDate.tz(selectedTimezone);
+      const DateWithUserTz = TZDate.tz(userTimezone);
+      const modifiedDate = new TZDate(value_0).withTimeZone(selectedTimezone);
+      // Transpose the date to the selected timezone
+      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz);
+      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone
+      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz);
+      return dateWithUserTimezone.toISOString();
+    }
+    return value_0;
+  }, [timezone, selectedTimezone, value_0, userTimezone]);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  const onChange = useCallback(incomingDate => {
+    if (!(readOnly || disabled)) {
+      if (timezone && selectedTimezone && incomingDate) {
+        // Create TZDate instances for the selected timezone
+        const TZDateWithSelectedTz = TZDate.tz(selectedTimezone);
+        if (isDateOnly) {
+          // We need to offset this hardcoded hour offset from the DatePicker elemenent
+          // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change
+          // const tzOffset = incomingDate.getTimezoneOffset() / 60
+          const incomingOffset = incomingDate.getTimezoneOffset() / 60;
+          const originalHour = incomingDate.getHours() + incomingOffset;
+          incomingDate.setHours(originalHour);
+          // Convert the original date as picked into the desired timezone.
+          const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz);
+          setValue(dateToSelectedTz.toISOString() || null);
+        } else {
+          // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor
+          const dateToUserTz = new TZDate(incomingDate);
+          // Transpose the date to the selected timezone
+          const dateWithTimezone_0 = transpose(dateToUserTz, TZDateWithSelectedTz);
+          setValue(dateWithTimezone_0.toISOString() || null);
         }
-        return value;
-    }, [
-        timezone,
-        selectedTimezone,
-        value,
-        userTimezone
-    ]);
-    const styles = useMemo(()=>mergeFieldStyles(field), [
-        field
-    ]);
-    const onChange = useCallback((incomingDate)=>{
-        if (!(readOnly || disabled)) {
-            if (timezone && selectedTimezone && incomingDate) {
-                // Create TZDate instances for the selected timezone
-                const TZDateWithSelectedTz = TZDate.tz(selectedTimezone);
-                if (isDateOnly) {
-                    // We need to offset this hardcoded hour offset from the DatePicker elemenent
-                    // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change
-                    // const tzOffset = incomingDate.getTimezoneOffset() / 60
-                    const incomingOffset = incomingDate.getTimezoneOffset() / 60;
-                    const originalHour = incomingDate.getHours() + incomingOffset;
-                    incomingDate.setHours(originalHour);
-                    // Convert the original date as picked into the desired timezone.
-                    const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz);
-                    setValue(dateToSelectedTz.toISOString() || null);
-                } else {
-                    // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor
-                    const dateToUserTz = new TZDate(incomingDate);
-                    // Transpose the date to the selected timezone
-                    const dateWithTimezone = transpose(dateToUserTz, TZDateWithSelectedTz);
-                    setValue(dateWithTimezone.toISOString() || null);
-                }
-            } else {
-                setValue(incomingDate?.toISOString() || null);
-            }
-        }
-    }, [
-        readOnly,
-        disabled,
-        timezone,
-        selectedTimezone,
-        isDateOnly,
-        setValue
-    ]);
-    const onChangeTimezone = useCallback((timezone)=>{
-        if (timezonePath) {
-            dispatchFields({
-                type: 'UPDATE',
-                path: timezonePath,
-                value: timezone
-            });
-            setModified(true);
-        }
-    }, [
-        dispatchFields,
-        setModified,
-        timezonePath
-    ]);
-    return <div className={[
-        fieldBaseClass,
-        baseClass,
-        className,
-        showError && `${baseClass}--has-error`,
-        (readOnly || disabled) && 'read-only'
-    ].filter(Boolean).join(' ')} style={styles}>
-      <RenderCustomComponent CustomComponent={Label} Fallback={<FieldLabel label={label} localized={localized} path={path} required={required}/>}/>
-      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\./g, '__')}`}>
-        <RenderCustomComponent CustomComponent={Error} Fallback={<FieldError path={path} showError={showError}/>}/>
-        {BeforeInput}
-        <DatePickerField {...datePickerProps} onChange={onChange} overrides={{
-        ...datePickerProps?.overrides
-    }} placeholder={getTranslation(placeholder, i18n)} readOnly={readOnly || disabled} value={displayedValue}/>
-        {timezone && supportedTimezones.length > 0 && <TimezonePicker id={`${path}-timezone-picker`} onChange={onChangeTimezone} options={supportedTimezones} readOnly={readOnly || disabled} required={timezoneRequired} selectedTimezone={selectedTimezone}/>}
-        {AfterInput}
-      </div>
-      <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
-    </div>;
+      } else {
+        setValue(incomingDate?.toISOString() || null);
+      }
+    }
+  }, [readOnly, disabled, timezone, selectedTimezone, isDateOnly, setValue]);
+  const onChangeTimezone = useCallback(timezone_0 => {
+    if (timezonePath) {
+      dispatchFields({
+        type: 'UPDATE',
+        path: timezonePath,
+        value: timezone_0
+      });
+      setModified(true);
+    }
+  }, [dispatchFields, setModified, timezonePath]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, className, showError && `${baseClass}--has-error`, (readOnly || disabled) && 'read-only'].filter(Boolean).join(' '),
+    style: styles,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Label,
+      Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        label: label,
+        localized: localized,
+        path: path,
+        required: required
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${fieldBaseClass}__wrap`,
+      id: `field-${path.replace(/\./g, '__')}`,
+      children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          path: path,
+          showError: showError
+        })
+      }), BeforeInput, /*#__PURE__*/_jsx(DatePickerField, {
+        ...datePickerProps,
+        onChange: onChange,
+        overrides: {
+          ...datePickerProps?.overrides
+        },
+        placeholder: getTranslation(placeholder, i18n),
+        readOnly: readOnly || disabled,
+        value: displayedValue
+      }), timezone && supportedTimezones.length > 0 && /*#__PURE__*/_jsx(TimezonePicker, {
+        id: `${path}-timezone-picker`,
+        onChange: onChangeTimezone,
+        options: supportedTimezones,
+        readOnly: readOnly || disabled,
+        required: timezoneRequired,
+        selectedTimezone: selectedTimezone
+      }), AfterInput]
+    }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Description,
+      Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+        description: description,
+        path: path
+      })
+    })]
+  });
 };
 export const DateTimeField = withCondition(DateTimeFieldComponent);
-
 //# sourceMappingURL=index.js.map

package/dist/fields/DateTime/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/DateTime/index.tsx"],"sourcesContent":["'use client'\nimport type { DateFieldClientComponent, DateFieldValidation } from 'payload'\n\nimport { TZDateMini as TZDate } from '@date-fns/tz/date/mini'\nimport { getTranslation } from '@payloadcms/translations'\nimport { transpose } from 'date-fns'\nimport { useCallback, useMemo } from 'react'\n\nimport { DatePickerField } from '../../elements/DatePicker/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { TimezonePicker } from '../../elements/TimezonePicker/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm, useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport './index.scss'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'date-time-field'\n\nconst DateTimeFieldComponent: DateFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, date: datePickerProps, description, placeholder } = {},\n      label,\n      localized,\n      required,\n      timezone,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const pickerAppearance = datePickerProps?.pickerAppearance || 'default'\n\n  // Get the user timezone so we can adjust the displayed value against it\n  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone\n\n  const { config } = useConfig()\n  const { i18n } = useTranslation()\n  const { dispatchFields, setModified } = useForm()\n\n  const memoizedValidate: DateFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<string>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const timezonePath = path + '_tz'\n  const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath])\n\n  const supportedTimezones = useMemo(() => {\n    if (timezone && typeof timezone === 'object' && timezone.supportedTimezones) {\n      return timezone.supportedTimezones\n    }\n\n    return config.admin.timezones.supportedTimezones\n  }, [config.admin.timezones.supportedTimezones, timezone])\n\n  /**\n   * Date appearance doesn't include timestamps,\n   * which means we need to pin the time to always 12:00 for the selected date\n   */\n  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)\n  const selectedTimezone = timezoneField?.value as string\n  const timezoneRequired =\n    required || (timezone && typeof timezone === 'object' && timezone.required)\n\n  // The displayed value should be the original value, adjusted to the user's timezone\n  const displayedValue = useMemo(() => {\n    if (timezone && selectedTimezone && userTimezone && value) {\n      // Create TZDate instances for the selected timezone and the user's timezone\n      // These instances allow us to transpose the date between timezones while keeping the same time value\n      const DateWithOriginalTz = TZDate.tz(selectedTimezone)\n      const DateWithUserTz = TZDate.tz(userTimezone)\n\n      const modifiedDate = new TZDate(value).withTimeZone(selectedTimezone)\n\n      // Transpose the date to the selected timezone\n      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz)\n\n      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone\n      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz)\n\n      return dateWithUserTimezone.toISOString()\n    }\n\n    return value\n  }, [timezone, selectedTimezone, value, userTimezone])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const onChange = useCallback(\n    (incomingDate: Date) => {\n      if (!(readOnly || disabled)) {\n        if (timezone && selectedTimezone && incomingDate) {\n          // Create TZDate instances for the selected timezone\n          const TZDateWithSelectedTz = TZDate.tz(selectedTimezone)\n\n          if (isDateOnly) {\n            // We need to offset this hardcoded hour offset from the DatePicker elemenent\n            // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change\n            // const tzOffset = incomingDate.getTimezoneOffset() / 60\n            const incomingOffset = incomingDate.getTimezoneOffset() / 60\n            const originalHour = incomingDate.getHours() + incomingOffset\n            incomingDate.setHours(originalHour)\n\n            // Convert the original date as picked into the desired timezone.\n            const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz)\n\n            setValue(dateToSelectedTz.toISOString() || null)\n          } else {\n            // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor\n            const dateToUserTz = new TZDate(incomingDate)\n            // Transpose the date to the selected timezone\n            const dateWithTimezone = transpose(dateToUserTz, TZDateWithSelectedTz)\n\n            setValue(dateWithTimezone.toISOString() || null)\n          }\n        } else {\n          setValue(incomingDate?.toISOString() || null)\n        }\n      }\n    },\n    [readOnly, disabled, timezone, selectedTimezone, isDateOnly, setValue],\n  )\n\n  const onChangeTimezone = useCallback(\n    (timezone: string) => {\n      if (timezonePath) {\n        dispatchFields({\n          type: 'UPDATE',\n          path: timezonePath,\n          value: timezone,\n        })\n\n        setModified(true)\n      }\n    },\n    [dispatchFields, setModified, timezonePath],\n  )\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && `${baseClass}--has-error`,\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\\./g, '__')}`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <DatePickerField\n          {...datePickerProps}\n          onChange={onChange}\n          overrides={{\n            ...datePickerProps?.overrides,\n          }}\n          placeholder={getTranslation(placeholder, i18n)}\n          readOnly={readOnly || disabled}\n          value={displayedValue}\n        />\n        {timezone && supportedTimezones.length > 0 && (\n          <TimezonePicker\n            id={`${path}-timezone-picker`}\n            onChange={onChangeTimezone}\n            options={supportedTimezones}\n            readOnly={readOnly || disabled}\n            required={timezoneRequired}\n            selectedTimezone={selectedTimezone}\n          />\n        )}\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const DateTimeField = withCondition(DateTimeFieldComponent)\n"],"names":["TZDateMini","TZDate","getTranslation","transpose","useCallback","useMemo","DatePickerField","RenderCustomComponent","TimezonePicker","FieldDescription","FieldError","FieldLabel","useForm","useFormFields","useField","withCondition","useConfig","useTranslation","mergeFieldStyles","fieldBaseClass","baseClass","DateTimeFieldComponent","props","field","admin","className","date","datePickerProps","description","placeholder","label","localized","required","timezone","path","pathFromProps","readOnly","validate","pickerAppearance","userTimezone","Intl","DateTimeFormat","resolvedOptions","timeZone","config","i18n","dispatchFields","setModified","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","timezonePath","timezoneField","fields","_","supportedTimezones","timezones","isDateOnly","includes","selectedTimezone","timezoneRequired","displayedValue","DateWithOriginalTz","tz","DateWithUserTz","modifiedDate","withTimeZone","dateWithTimezone","dateWithUserTimezone","toISOString","styles","onChange","incomingDate","TZDateWithSelectedTz","incomingOffset","getTimezoneOffset","originalHour","getHours","setHours","dateToSelectedTz","dateToUserTz","onChangeTimezone","type","div","filter","Boolean","join","style","CustomComponent","Fallback","id","replace","overrides","length","DateTimeField"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["TZDateMini","TZDate","getTranslation","transpose","useCallback","useMemo","DatePickerField","RenderCustomComponent","TimezonePicker","FieldDescription","FieldError","FieldLabel","useForm","useFormFields","useField","withCondition","useConfig","useTranslation","mergeFieldStyles","fieldBaseClass","baseClass","DateTimeFieldComponent","props","field","admin","className","date","datePickerProps","description","placeholder","label","localized","required","timezone","path","pathFromProps","readOnly","validate","pickerAppearance","userTimezone","Intl","DateTimeFormat","resolvedOptions","timeZone","config","i18n","dispatchFields","setModified","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","timezonePath","timezoneField","fields","_","supportedTimezones","timezones","isDateOnly","includes","selectedTimezone","timezoneRequired","displayedValue","DateWithOriginalTz","tz","DateWithUserTz","modifiedDate","withTimeZone","dateWithTimezone","dateWithUserTimezone","toISOString","styles","onChange","incomingDate","TZDateWithSelectedTz","incomingOffset","getTimezoneOffset","originalHour","getHours","setHours","dateToSelectedTz","dateToUserTz","onChangeTimezone","type","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","id","replace","overrides","length","DateTimeField"],"sources":["../../../src/fields/DateTime/index.tsx"],"sourcesContent":["'use client'\nimport type { DateFieldClientComponent, DateFieldValidation } from 'payload'\n\nimport { TZDateMini as TZDate } from '@date-fns/tz/date/mini'\nimport { getTranslation } from '@payloadcms/translations'\nimport { transpose } from 'date-fns'\nimport { useCallback, useMemo } from 'react'\n\nimport { DatePickerField } from '../../elements/DatePicker/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { TimezonePicker } from '../../elements/TimezonePicker/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm, useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport './index.scss'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'date-time-field'\n\nconst DateTimeFieldComponent: DateFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, date: datePickerProps, description, placeholder } = {},\n      label,\n      localized,\n      required,\n      timezone,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const pickerAppearance = datePickerProps?.pickerAppearance || 'default'\n\n  // Get the user timezone so we can adjust the displayed value against it\n  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone\n\n  const { config } = useConfig()\n  const { i18n } = useTranslation()\n  const { dispatchFields, setModified } = useForm()\n\n  const memoizedValidate: DateFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<string>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const timezonePath = path + '_tz'\n  const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath])\n\n  const supportedTimezones = useMemo(() => {\n    if (timezone && typeof timezone === 'object' && timezone.supportedTimezones) {\n      return timezone.supportedTimezones\n    }\n\n    return config.admin.timezones.supportedTimezones\n  }, [config.admin.timezones.supportedTimezones, timezone])\n\n  /**\n   * Date appearance doesn't include timestamps,\n   * which means we need to pin the time to always 12:00 for the selected date\n   */\n  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)\n  const selectedTimezone = timezoneField?.value as string\n  const timezoneRequired =\n    required || (timezone && typeof timezone === 'object' && timezone.required)\n\n  // The displayed value should be the original value, adjusted to the user's timezone\n  const displayedValue = useMemo(() => {\n    if (timezone && selectedTimezone && userTimezone && value) {\n      // Create TZDate instances for the selected timezone and the user's timezone\n      // These instances allow us to transpose the date between timezones while keeping the same time value\n      const DateWithOriginalTz = TZDate.tz(selectedTimezone)\n      const DateWithUserTz = TZDate.tz(userTimezone)\n\n      const modifiedDate = new TZDate(value).withTimeZone(selectedTimezone)\n\n      // Transpose the date to the selected timezone\n      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz)\n\n      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone\n      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz)\n\n      return dateWithUserTimezone.toISOString()\n    }\n\n    return value\n  }, [timezone, selectedTimezone, value, userTimezone])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const onChange = useCallback(\n    (incomingDate: Date) => {\n      if (!(readOnly || disabled)) {\n        if (timezone && selectedTimezone && incomingDate) {\n          // Create TZDate instances for the selected timezone\n          const TZDateWithSelectedTz = TZDate.tz(selectedTimezone)\n\n          if (isDateOnly) {\n            // We need to offset this hardcoded hour offset from the DatePicker elemenent\n            // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change\n            // const tzOffset = incomingDate.getTimezoneOffset() / 60\n            const incomingOffset = incomingDate.getTimezoneOffset() / 60\n            const originalHour = incomingDate.getHours() + incomingOffset\n            incomingDate.setHours(originalHour)\n\n            // Convert the original date as picked into the desired timezone.\n            const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz)\n\n            setValue(dateToSelectedTz.toISOString() || null)\n          } else {\n            // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor\n            const dateToUserTz = new TZDate(incomingDate)\n            // Transpose the date to the selected timezone\n            const dateWithTimezone = transpose(dateToUserTz, TZDateWithSelectedTz)\n\n            setValue(dateWithTimezone.toISOString() || null)\n          }\n        } else {\n          setValue(incomingDate?.toISOString() || null)\n        }\n      }\n    },\n    [readOnly, disabled, timezone, selectedTimezone, isDateOnly, setValue],\n  )\n\n  const onChangeTimezone = useCallback(\n    (timezone: string) => {\n      if (timezonePath) {\n        dispatchFields({\n          type: 'UPDATE',\n          path: timezonePath,\n          value: timezone,\n        })\n\n        setModified(true)\n      }\n    },\n    [dispatchFields, setModified, timezonePath],\n  )\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && `${baseClass}--has-error`,\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\\./g, '__')}`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <DatePickerField\n          {...datePickerProps}\n          onChange={onChange}\n          overrides={{\n            ...datePickerProps?.overrides,\n          }}\n          placeholder={getTranslation(placeholder, i18n)}\n          readOnly={readOnly || disabled}\n          value={displayedValue}\n        />\n        {timezone && supportedTimezones.length > 0 && (\n          <TimezonePicker\n            id={`${path}-timezone-picker`}\n            onChange={onChangeTimezone}\n            options={supportedTimezones}\n            readOnly={readOnly || disabled}\n            required={timezoneRequired}\n            selectedTimezone={selectedTimezone}\n          />\n        )}\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const DateTimeField = withCondition(DateTimeFieldComponent)\n"],"mappings":"AAAA;;;AAGA,SAASA,UAAA,IAAcC,MAAM,QAAQ;AACrC,SAASC,cAAc,QAAQ;AAC/B,SAASC,SAAS,QAAQ;AAC1B,SAASC,WAAW,EAAEC,OAAO,QAAQ;AAErC,SAASC,eAAe,QAAQ;AAChC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,UAAU,QAAQ;AAC3B,SAASC,UAAU,QAAQ;AAC3B,SAASC,OAAO,EAAEC,aAAa,QAAQ;AACvC,SAASC,QAAQ,QAAQ;AACzB,OAAO;AACP,SAASC,aAAa,QAAQ;AAC9B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,MAAMC,sBAAA,GAAoDC,KAAA;EACxD,MAAM;IACJC,KAAK;IACLA,KAAA,EAAO;MACLC,KAAA,EAAO;QAAEC,SAAS;QAAEC,IAAA,EAAMC,eAAe;QAAEC,WAAW;QAAEC;MAAW,CAAE,GAAG,CAAC,CAAC;MAC1EC,KAAK;MACLC,SAAS;MACTC,QAAQ;MACRC;IAAQ,CACT;IACDC,IAAA,EAAMC,aAAa;IACnBC,QAAQ;IACRC;EAAQ,CACT,GAAGf,KAAA;EAEJ,MAAMgB,gBAAA,GAAmBX,eAAA,EAAiBW,gBAAA,IAAoB;EAE9D;EACA,MAAMC,YAAA,GAAeC,IAAA,CAAKC,cAAc,GAAGC,eAAe,GAAGC,QAAQ;EAErE,MAAM;IAAEC;EAAM,CAAE,GAAG5B,SAAA;EACnB,MAAM;IAAE6B;EAAI,CAAE,GAAG5B,cAAA;EACjB,MAAM;IAAE6B,cAAc;IAAEC;EAAW,CAAE,GAAGnC,OAAA;EAExC,MAAMoC,gBAAA,GAAwC5C,WAAA,CAC5C,CAAC6C,KAAA,EAAOC,OAAA;IACN,IAAI,OAAOb,QAAA,KAAa,YAAY;MAClC,OAAOA,QAAA,CAASY,KAAA,EAAO;QAAE,GAAGC,OAAO;QAAElB;MAAS;IAChD;EACF,GACA,CAACK,QAAA,EAAUL,QAAA,CAAS;EAGtB,MAAM;IACJmB,gBAAA,EAAkB;MAAEC,UAAU;MAAEC,WAAW;MAAEC,WAAW;MAAEC,KAAK;MAAEC;IAAK,CAAE,GAAG,CAAC,CAAC;IAC7EC,QAAQ;IACRvB,IAAI;IACJwB,QAAQ;IACRC,SAAS;IACTV,KAAK,EAALA;EAAK,CACN,GAAGnC,QAAA,CAAiB;IACnB8C,oBAAA,EAAsBzB,aAAA;IACtBE,QAAA,EAAUW;EACZ;EAEA,MAAMa,YAAA,GAAe3B,IAAA,GAAO;EAC5B,MAAM4B,aAAA,GAAgBjD,aAAA,CAAc,CAAC,CAACkD,MAAA,EAAQC,CAAA,CAAE,KAAKD,MAAA,GAASF,YAAA,CAAa;EAE3E,MAAMI,kBAAA,GAAqB5D,OAAA,CAAQ;IACjC,IAAI4B,QAAA,IAAY,OAAOA,QAAA,KAAa,YAAYA,QAAA,CAASgC,kBAAkB,EAAE;MAC3E,OAAOhC,QAAA,CAASgC,kBAAkB;IACpC;IAEA,OAAOrB,MAAA,CAAOpB,KAAK,CAAC0C,SAAS,CAACD,kBAAkB;EAClD,GAAG,CAACrB,MAAA,CAAOpB,KAAK,CAAC0C,SAAS,CAACD,kBAAkB,EAAEhC,QAAA,CAAS;EAExD;;;;EAIA,MAAMkC,UAAA,GAAa,CAAC,WAAW,WAAW,YAAY,CAACC,QAAQ,CAAC9B,gBAAA;EAChE,MAAM+B,gBAAA,GAAmBP,aAAA,EAAeb,KAAA;EACxC,MAAMqB,gBAAA,GACJtC,QAAA,IAAaC,QAAA,IAAY,OAAOA,QAAA,KAAa,YAAYA,QAAA,CAASD,QAAQ;EAE5E;EACA,MAAMuC,cAAA,GAAiBlE,OAAA,CAAQ;IAC7B,IAAI4B,QAAA,IAAYoC,gBAAA,IAAoB9B,YAAA,IAAgBU,OAAA,EAAO;MACzD;MACA;MACA,MAAMuB,kBAAA,GAAqBvE,MAAA,CAAOwE,EAAE,CAACJ,gBAAA;MACrC,MAAMK,cAAA,GAAiBzE,MAAA,CAAOwE,EAAE,CAAClC,YAAA;MAEjC,MAAMoC,YAAA,GAAe,IAAI1E,MAAA,CAAOgD,OAAA,EAAO2B,YAAY,CAACP,gBAAA;MAEpD;MACA,MAAMQ,gBAAA,GAAmB1E,SAAA,CAAUwE,YAAA,EAAcH,kBAAA;MAEjD;MACA,MAAMM,oBAAA,GAAuB3E,SAAA,CAAU0E,gBAAA,EAAkBH,cAAA;MAEzD,OAAOI,oBAAA,CAAqBC,WAAW;IACzC;IAEA,OAAO9B,OAAA;EACT,GAAG,CAAChB,QAAA,EAAUoC,gBAAA,EAAkBpB,OAAA,EAAOV,YAAA,CAAa;EAEpD,MAAMyC,MAAA,GAAS3E,OAAA,CAAQ,MAAMa,gBAAA,CAAiBK,KAAA,GAAQ,CAACA,KAAA,CAAM;EAE7D,MAAM0D,QAAA,GAAW7E,WAAA,CACd8E,YAAA;IACC,IAAI,EAAE9C,QAAA,IAAYqB,QAAO,GAAI;MAC3B,IAAIxB,QAAA,IAAYoC,gBAAA,IAAoBa,YAAA,EAAc;QAChD;QACA,MAAMC,oBAAA,GAAuBlF,MAAA,CAAOwE,EAAE,CAACJ,gBAAA;QAEvC,IAAIF,UAAA,EAAY;UACd;UACA;UACA;UACA,MAAMiB,cAAA,GAAiBF,YAAA,CAAaG,iBAAiB,KAAK;UAC1D,MAAMC,YAAA,GAAeJ,YAAA,CAAaK,QAAQ,KAAKH,cAAA;UAC/CF,YAAA,CAAaM,QAAQ,CAACF,YAAA;UAEtB;UACA,MAAMG,gBAAA,GAAmBtF,SAAA,CAAU+E,YAAA,EAAcC,oBAAA;UAEjDzB,QAAA,CAAS+B,gBAAA,CAAiBV,WAAW,MAAM;QAC7C,OAAO;UACL;UACA,MAAMW,YAAA,GAAe,IAAIzF,MAAA,CAAOiF,YAAA;UAChC;UACA,MAAML,kBAAA,GAAmB1E,SAAA,CAAUuF,YAAA,EAAcP,oBAAA;UAEjDzB,QAAA,CAASmB,kBAAA,CAAiBE,WAAW,MAAM;QAC7C;MACF,OAAO;QACLrB,QAAA,CAASwB,YAAA,EAAcH,WAAA,MAAiB;MAC1C;IACF;EACF,GACA,CAAC3C,QAAA,EAAUqB,QAAA,EAAUxB,QAAA,EAAUoC,gBAAA,EAAkBF,UAAA,EAAYT,QAAA,CAAS;EAGxE,MAAMiC,gBAAA,GAAmBvF,WAAA,CACtB6B,UAAA;IACC,IAAI4B,YAAA,EAAc;MAChBf,cAAA,CAAe;QACb8C,IAAA,EAAM;QACN1D,IAAA,EAAM2B,YAAA;QACNZ,KAAA,EAAOhB;MACT;MAEAc,WAAA,CAAY;IACd;EACF,GACA,CAACD,cAAA,EAAgBC,WAAA,EAAac,YAAA,CAAa;EAG7C,oBACEgC,KAAA,CAAC;IACCpE,SAAA,EAAW,CACTN,cAAA,EACAC,SAAA,EACAK,SAAA,EACAkC,SAAA,IAAa,GAAGvC,SAAA,aAAsB,EACrC,CAAAgB,QAAA,IAAYqB,QAAO,KAAM,YAC3B,CACEqC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRC,KAAA,EAAOjB,MAAA;4BAEPkB,IAAA,CAAC3F,qBAAA;MACC4F,eAAA,EAAiB3C,KAAA;MACjB4C,QAAA,eACEF,IAAA,CAACvF,UAAA;QAAWmB,KAAA,EAAOA,KAAA;QAAOC,SAAA,EAAWA,SAAA;QAAWG,IAAA,EAAMA,IAAA;QAAMF,QAAA,EAAUA;;qBAG1E6D,KAAA,CAAC;MAAIpE,SAAA,EAAW,GAAGN,cAAA,QAAsB;MAAEkF,EAAA,EAAI,SAASnE,IAAA,CAAKoE,OAAO,CAAC,OAAO,OAAO;8BACjFJ,IAAA,CAAC3F,qBAAA;QACC4F,eAAA,EAAiB5C,KAAA;QACjB6C,QAAA,eAAUF,IAAA,CAACxF,UAAA;UAAWwB,IAAA,EAAMA,IAAA;UAAMyB,SAAA,EAAWA;;UAE9CN,WAAA,E,aACD6C,IAAA,CAAC5F,eAAA;QACE,GAAGqB,eAAe;QACnBsD,QAAA,EAAUA,QAAA;QACVsB,SAAA,EAAW;UACT,GAAG5E,eAAA,EAAiB4E;QACtB;QACA1E,WAAA,EAAa3B,cAAA,CAAe2B,WAAA,EAAagB,IAAA;QACzCT,QAAA,EAAUA,QAAA,IAAYqB,QAAA;QACtBR,KAAA,EAAOsB;UAERtC,QAAA,IAAYgC,kBAAA,CAAmBuC,MAAM,GAAG,kBACvCN,IAAA,CAAC1F,cAAA;QACC6F,EAAA,EAAI,GAAGnE,IAAA,kBAAsB;QAC7B+C,QAAA,EAAUU,gBAAA;QACVzC,OAAA,EAASe,kBAAA;QACT7B,QAAA,EAAUA,QAAA,IAAYqB,QAAA;QACtBzB,QAAA,EAAUsC,gBAAA;QACVD,gBAAA,EAAkBA;UAGrBjB,UAAA;qBAEH8C,IAAA,CAAC3F,qBAAA;MACC4F,eAAA,EAAiB7C,WAAA;MACjB8C,QAAA,eAAUF,IAAA,CAACzF,gBAAA;QAAiBmB,WAAA,EAAaA,WAAA;QAAaM,IAAA,EAAMA;;;;AAIpE;AAEA,OAAO,MAAMuE,aAAA,GAAgB1F,aAAA,CAAcM,sBAAA","ignoreList":[]}