@ruya.sa/ui 3.71.3

package/dist/fields/DateTime/index.js

@@ -0,0 +1,196 @@
+'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 '@ruya.sa/translations';
+import { transpose } from 'date-fns';
+import { useCallback, useMemo } from 'react';
+import { DatePickerField } from '../../elements/DatePicker/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { TimezonePicker } from '../../elements/TimezonePicker/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldError } from '../../fields/FieldError/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { useForm, useFormFields } from '../../forms/Form/context.js';
+import { useField } from '../../forms/useField/index.js';
+import './index.scss';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+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, 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);
+        }
+      } 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

@@ -0,0 +1 @@
+{"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 '@ruya.sa/payload'\n\nimport { TZDateMini as TZDate } from '@date-fns/tz/date/mini'\nimport { getTranslation } from '@ruya.sa/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":"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","ignoreList":[]}

package/dist/fields/DateTime/index.scss

@@ -0,0 +1,23 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  html[data-theme='light'] {
+    .date-time-field {
+      &--has-error {
+        .react-datepicker__input-container input {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .date-time-field {
+      &--has-error {
+        .react-datepicker__input-container input {
+          @include darkInputError;
+        }
+      }
+    }
+  }
+}

package/dist/fields/Email/index.d.ts

@@ -0,0 +1,10 @@
+import type { EmailFieldValidation } from '@ruya.sa/payload';
+import React from 'react';
+import './index.scss';
+export declare const EmailField: React.FC<{
+    readonly path: string;
+    readonly validate?: EmailFieldValidation;
+} & {
+    readonly field: Omit<import("@ruya.sa/payload").EmailFieldClient, "type"> & Partial<Pick<import("@ruya.sa/payload").EmailFieldClient, "type">>;
+} & Omit<import("@ruya.sa/payload").ClientComponentProps, "customComponents" | "field">>;
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/Email/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Email/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,oBAAoB,EACrB,MAAM,kBAAkB,CAAA;AAGzB,OAAO,KAA+B,MAAM,OAAO,CAAA;AAWnD,OAAO,cAAc,CAAA;AA8FrB,eAAO,MAAM,UAAU;;;;;wFAAqC,CAAA"}

package/dist/fields/Email/index.js

@@ -0,0 +1,103 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@ruya.sa/translations';
+import React, { useCallback, useMemo } from 'react';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldError } from '../../fields/FieldError/index.js';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { FieldLabel } from '../FieldLabel/index.js';
+import { mergeFieldStyles } from '../mergeFieldStyles.js';
+import { fieldBaseClass } from '../shared/index.js';
+import './index.scss';
+const EmailFieldComponent = props => {
+  const {
+    field,
+    field: {
+      admin: {
+        autoComplete,
+        className,
+        description,
+        placeholder
+      } = {},
+      label,
+      localized,
+      required
+    } = {},
+    path: pathFromProps,
+    readOnly,
+    validate
+  } = props;
+  const {
+    i18n
+  } = useTranslation();
+  const memoizedValidate = useCallback((value, options) => {
+    if (typeof validate === 'function') {
+      return validate(value, {
+        ...options,
+        required
+      });
+    }
+  }, [validate, required]);
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled,
+    path,
+    setValue,
+    showError,
+    value: value_0
+  } = useField({
+    potentiallyStalePath: pathFromProps,
+    validate: memoizedValidate
+  });
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, 'email', className, showError && '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`,
+      children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          path: path,
+          showError: showError
+        })
+      }), BeforeInput, /*#__PURE__*/_jsx("input", {
+        autoComplete: autoComplete,
+        disabled: readOnly || disabled,
+        id: `field-${path.replace(/\./g, '__')}`,
+        name: path,
+        onChange: setValue,
+        placeholder: getTranslation(placeholder, i18n),
+        required: required,
+        type: "email",
+        value: value_0 || ''
+      }), AfterInput]
+    }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Description,
+      Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+        description: description,
+        path: path
+      })
+    })]
+  });
+};
+export const EmailField = withCondition(EmailFieldComponent);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useMemo","RenderCustomComponent","FieldDescription","FieldError","useField","withCondition","useTranslation","FieldLabel","mergeFieldStyles","fieldBaseClass","EmailFieldComponent","props","field","admin","autoComplete","className","description","placeholder","label","localized","required","path","pathFromProps","readOnly","validate","i18n","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","styles","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","id","replace","name","onChange","type","EmailField"],"sources":["../../../src/fields/Email/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  EmailFieldClientComponent,\n  EmailFieldClientProps,\n  EmailFieldValidation,\n} from '@ruya.sa/payload'\n\nimport { getTranslation } from '@ruya.sa/translations'\nimport React, { useCallback, useMemo } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst EmailFieldComponent: EmailFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: {\n        autoComplete,\n        className,\n        description,\n        placeholder,\n      } = {} as EmailFieldClientProps['field']['admin'],\n      label,\n      localized,\n      required,\n    } = {} as EmailFieldClientProps['field'],\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const memoizedValidate: EmailFieldValidation = 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({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'email',\n        className,\n        showError && '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`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        {/* disable eslint here because the label is dynamic */}\n        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n        <input\n          autoComplete={autoComplete}\n          disabled={readOnly || disabled}\n          id={`field-${path.replace(/\\./g, '__')}`}\n          name={path}\n          onChange={setValue}\n          placeholder={getTranslation(placeholder, i18n)}\n          required={required}\n          type=\"email\"\n          value={(value as string) || ''}\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 EmailField = withCondition(EmailFieldComponent)\n"],"mappings":"AAAA;;;AAOA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,WAAW,EAAEC,OAAO,QAAQ;AAE5C,SAASC,qBAAqB,QAAQ;AACtC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,SAASC,UAAU,QAAQ;AAC3B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,mBAAA,GAAkDC,KAAA;EACtD,MAAM;IACJC,KAAK;IACLA,KAAA,EAAO;MACLC,KAAA,EAAO;QACLC,YAAY;QACZC,SAAS;QACTC,WAAW;QACXC;MAAW,CACZ,GAAG,CAAC,CAA4C;MACjDC,KAAK;MACLC,SAAS;MACTC;IAAQ,CACT,GAAG,CAAC,CAAmC;IACxCC,IAAA,EAAMC,aAAa;IACnBC,QAAQ;IACRC;EAAQ,CACT,GAAGb,KAAA;EAEJ,MAAM;IAAEc;EAAI,CAAE,GAAGnB,cAAA;EAEjB,MAAMoB,gBAAA,GAAyC3B,WAAA,CAC7C,CAAC4B,KAAA,EAAOC,OAAA;IACN,IAAI,OAAOJ,QAAA,KAAa,YAAY;MAClC,OAAOA,QAAA,CAASG,KAAA,EAAO;QAAE,GAAGC,OAAO;QAAER;MAAS;IAChD;EACF,GACA,CAACI,QAAA,EAAUJ,QAAA,CAAS;EAGtB,MAAM;IACJS,gBAAA,EAAkB;MAAEC,UAAU;MAAEC,WAAW;MAAEC,WAAW;MAAEC,KAAK;MAAEC;IAAK,CAAE,GAAG,CAAC,CAAC;IAC7EC,QAAQ;IACRd,IAAI;IACJe,QAAQ;IACRC,SAAS;IACTV,KAAK,EAALA;EAAK,CACN,GAAGvB,QAAA,CAAS;IACXkC,oBAAA,EAAsBhB,aAAA;IACtBE,QAAA,EAAUE;EACZ;EAEA,MAAMa,MAAA,GAASvC,OAAA,CAAQ,MAAMQ,gBAAA,CAAiBI,KAAA,GAAQ,CAACA,KAAA,CAAM;EAE7D,oBACE4B,KAAA,CAAC;IACCzB,SAAA,EAAW,CACTN,cAAA,EACA,SACAM,SAAA,EACAsB,SAAA,IAAa,SACZ,CAAAd,QAAA,IAAYY,QAAO,KAAM,YAC3B,CACEM,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRC,KAAA,EAAOL,MAAA;4BAEPM,IAAA,CAAC5C,qBAAA;MACC6C,eAAA,EAAiBZ,KAAA;MACjBa,QAAA,eACEF,IAAA,CAACtC,UAAA;QAAWW,KAAA,EAAOA,KAAA;QAAOC,SAAA,EAAWA,SAAA;QAAWE,IAAA,EAAMA,IAAA;QAAMD,QAAA,EAAUA;;qBAG1EoB,KAAA,CAAC;MAAIzB,SAAA,EAAW,GAAGN,cAAA,QAAsB;8BACvCoC,IAAA,CAAC5C,qBAAA;QACC6C,eAAA,EAAiBb,KAAA;QACjBc,QAAA,eAAUF,IAAA,CAAC1C,UAAA;UAAWkB,IAAA,EAAMA,IAAA;UAAMgB,SAAA,EAAWA;;UAE9CN,WAAA,E,aAGDc,IAAA,CAAC;QACC/B,YAAA,EAAcA,YAAA;QACdqB,QAAA,EAAUZ,QAAA,IAAYY,QAAA;QACtBa,EAAA,EAAI,SAAS3B,IAAA,CAAK4B,OAAO,CAAC,OAAO,OAAO;QACxCC,IAAA,EAAM7B,IAAA;QACN8B,QAAA,EAAUf,QAAA;QACVnB,WAAA,EAAapB,cAAA,CAAeoB,WAAA,EAAaQ,IAAA;QACzCL,QAAA,EAAUA,QAAA;QACVgC,IAAA,EAAK;QACLzB,KAAA,EAAOA,OAAC,IAAoB;UAE7BG,UAAA;qBAEHe,IAAA,CAAC5C,qBAAA;MACC6C,eAAA,EAAiBd,WAAA;MACjBe,QAAA,eAAUF,IAAA,CAAC3C,gBAAA;QAAiBc,WAAA,EAAaA,WAAA;QAAaK,IAAA,EAAMA;;;;AAIpE;AAEA,OAAO,MAAMgC,UAAA,GAAahD,aAAA,CAAcK,mBAAA","ignoreList":[]}

package/dist/fields/Email/index.scss

@@ -0,0 +1,37 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .field-type.email {
+    position: relative;
+
+    input {
+      @include formInput;
+    }
+
+    &.error {
+      input {
+        background-color: var(--theme-error-200);
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .field-type.email {
+      &.error {
+        input {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .field-type.email {
+      &.error {
+        input {
+          @include darkInputError;
+        }
+      }
+    }
+  }
+}

package/dist/fields/FieldDescription/index.d.ts

@@ -0,0 +1,5 @@
+import type { GenericDescriptionProps } from '@ruya.sa/payload';
+import React from 'react';
+import './index.scss';
+export declare const FieldDescription: React.FC<GenericDescriptionProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/FieldDescription/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldDescription/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuB9D,CAAA"}

package/dist/fields/FieldDescription/index.js

@@ -0,0 +1,52 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@ruya.sa/translations';
+import React from 'react';
+import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
+const baseClass = 'field-description';
+export const FieldDescription = props => {
+  const $ = _c(8);
+  const {
+    className,
+    description,
+    marginPlacement,
+    path
+  } = props;
+  const {
+    i18n
+  } = useTranslation();
+  if (description) {
+    const t0 = `field-description-${path?.replace(/\./g, "__")}`;
+    const t1 = marginPlacement && `${baseClass}--margin-${marginPlacement}`;
+    let t2;
+    if ($[0] !== className || $[1] !== t0 || $[2] !== t1) {
+      t2 = [baseClass, className, t0, t1].filter(Boolean);
+      $[0] = className;
+      $[1] = t0;
+      $[2] = t1;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    const t3 = t2.join(" ");
+    let t4;
+    if ($[4] !== description || $[5] !== i18n || $[6] !== t3) {
+      t4 = _jsx("div", {
+        className: t3,
+        children: getTranslation(description, i18n)
+      });
+      $[4] = description;
+      $[5] = i18n;
+      $[6] = t3;
+      $[7] = t4;
+    } else {
+      t4 = $[7];
+    }
+    return t4;
+  }
+  return null;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","baseClass","FieldDescription","props","$","className","description","marginPlacement","path","i18n","t0","replace","t1","t2","filter","Boolean","t3","join","t4","_jsx","children"],"sources":["../../../src/fields/FieldDescription/index.tsx"],"sourcesContent":["'use client'\nimport type { GenericDescriptionProps } from '@ruya.sa/payload'\n\nimport { getTranslation } from '@ruya.sa/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-description'\n\nexport const FieldDescription: React.FC<GenericDescriptionProps> = (props) => {\n  const { className, description, marginPlacement, path } = props\n\n  const { i18n } = useTranslation()\n\n  if (description) {\n    return (\n      <div\n        className={[\n          baseClass,\n          className,\n          `field-description-${path?.replace(/\\./g, '__')}`,\n          marginPlacement && `${baseClass}--margin-${marginPlacement}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {getTranslation(description, i18n)}\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAAsDC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACjE;IAAAQ,SAAA;IAAAC,WAAA;IAAAC,eAAA;IAAAC;EAAA,IAA0DL,KAAA;EAE1D;IAAAM;EAAA,IAAiBT,cAAA;EAAA,IAEbM,WAAA;IAMI,MAAAI,EAAA,wBAAqBF,IAAA,EAAAG,OAAA,QAAqB,OAAO;IACjD,MAAAC,EAAA,GAAAL,eAAA,IAAmB,GAAAN,SAAA,YAAwBM,eAAA,EAAiB;IAAA,IAAAM,EAAA;IAAA,IAAAT,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAQ,EAAA;MAJnDC,EAAA,IAAAZ,SAAA,EAETI,SAAA,EACAK,EAAiD,EACjDE,EAA4D,EAAAE,MAAA,CAAAC,OAEpD;MAAAX,CAAA,MAAAC,SAAA;MAAAD,CAAA,MAAAM,EAAA;MAAAN,CAAA,MAAAQ,EAAA;MAAAR,CAAA,MAAAS,EAAA;IAAA;MAAAA,EAAA,GAAAT,CAAA;IAAA;IANC,MAAAY,EAAA,GAAAH,EAMD,CAAAI,IAAA,CACF;IAAA,IAAAC,EAAA;IAAA,IAAAd,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAY,EAAA;MARVE,EAAA,GAAAC,IAAA,CAAC;QAAAd,SAAA,EACYW,EAOH;QAAAI,QAAA,EAEPtB,cAAA,CAAeQ,WAAA,EAAaG,IAAA;MAAA,C;;;;;;;;WAV/BS,E;;;CAgBN","ignoreList":[]}

package/dist/fields/FieldDescription/index.scss

@@ -0,0 +1,14 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .field-description {
+    display: flex;
+    color: var(--theme-elevation-400);
+    margin-top: calc(var(--base) / 4);
+
+    &--margin-bottom {
+      margin-top: 0;
+      margin-bottom: calc(var(--base) / 2);
+    }
+  }
+}

package/dist/fields/FieldError/index.d.ts

@@ -0,0 +1,5 @@
+import type { GenericErrorProps } from '@ruya.sa/payload';
+import React from 'react';
+import './index.scss';
+export declare const FieldError: React.FC<GenericErrorProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/FieldError/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldError/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyBlD,CAAA"}

package/dist/fields/FieldError/index.js

@@ -0,0 +1,67 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Tooltip } from '../../elements/Tooltip/index.js';
+import { useFormFields, useFormSubmitted } from '../../forms/Form/context.js';
+import './index.scss';
+const baseClass = 'field-error';
+export const FieldError = props => {
+  const $ = _c(8);
+  const {
+    alignCaret: t0,
+    message: messageFromProps,
+    path,
+    showError: showErrorFromProps
+  } = props;
+  const alignCaret = t0 === undefined ? "right" : t0;
+  const hasSubmitted = useFormSubmitted();
+  let t1;
+  if ($[0] !== path) {
+    t1 = t2 => {
+      const [fields] = t2;
+      return fields && fields?.[path] || null;
+    };
+    $[0] = path;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const field = useFormFields(t1);
+  let t2;
+  if ($[2] !== alignCaret || $[3] !== field || $[4] !== hasSubmitted || $[5] !== messageFromProps || $[6] !== showErrorFromProps) {
+    t2 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const {
+        errorMessage,
+        valid
+      } = field || {};
+      const message = messageFromProps || errorMessage;
+      const showMessage = showErrorFromProps || hasSubmitted && valid === false;
+      if (showMessage && message?.length) {
+        t2 = _jsx(Tooltip, {
+          alignCaret,
+          className: baseClass,
+          delay: 0,
+          staticPositioning: true,
+          children: message
+        });
+        break bb0;
+      }
+    }
+    $[2] = alignCaret;
+    $[3] = field;
+    $[4] = hasSubmitted;
+    $[5] = messageFromProps;
+    $[6] = showErrorFromProps;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  if (t2 !== Symbol.for("react.early_return_sentinel")) {
+    return t2;
+  }
+  return null;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","Tooltip","useFormFields","useFormSubmitted","baseClass","FieldError","props","$","alignCaret","t0","message","messageFromProps","path","showError","showErrorFromProps","undefined","hasSubmitted","t1","t2","fields","field","Symbol","for","errorMessage","valid","showMessage","length","_jsx","className","delay","staticPositioning","children"],"sources":["../../../src/fields/FieldError/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GenericErrorProps } from '@ruya.sa/payload'\n\nimport React from 'react'\n\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { useFormFields, useFormSubmitted } from '../../forms/Form/context.js'\nimport './index.scss'\n\nconst baseClass = 'field-error'\n\nexport const FieldError: React.FC<GenericErrorProps> = (props) => {\n  const {\n    alignCaret = 'right',\n    message: messageFromProps,\n    path,\n    showError: showErrorFromProps,\n  } = props\n\n  const hasSubmitted = useFormSubmitted()\n  const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)\n\n  const { errorMessage, valid } = field || {}\n\n  const message = messageFromProps || errorMessage\n  const showMessage = showErrorFromProps || (hasSubmitted && valid === false)\n\n  if (showMessage && message?.length) {\n    return (\n      <Tooltip alignCaret={alignCaret} className={baseClass} delay={0} staticPositioning>\n        {message}\n      </Tooltip>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,aAAa,EAAEC,gBAAgB,QAAQ;AAChD,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAA0CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACrD;IAAAS,UAAA,EAAAC,EAAA;IAAAC,OAAA,EAAAC,gBAAA;IAAAC,IAAA;IAAAC,SAAA,EAAAC;EAAA,IAKIR,KAAA;EAJF,MAAAE,UAAA,GAAAC,EAAoB,KAAAM,SAAA,GAAP,OAAO,GAApBN,EAAoB;EAMtB,MAAAO,YAAA,GAAqBb,gBAAA;EAAA,IAAAc,EAAA;EAAA,IAAAV,CAAA,QAAAK,IAAA;IACOK,EAAA,GAAAC,EAAA;MAAC,OAAAC,MAAA,IAAAD,EAAQ;MAAA,OAAKC,MAAC,IAAUA,MAAA,GAASP,IAAA,CAAK,QAAK;IAAA;IAAAL,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAxE,MAAAa,KAAA,GAAclB,aAAA,CAAce,EAA4C;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAa,KAAA,IAAAb,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAI,gBAAA,IAAAJ,CAAA,QAAAO,kBAAA;IASpEI,EAAA,GAAAG,MAAA,CAAAC,GAAA,8B;;MAPJ;QAAAC,YAAA;QAAAC;MAAA,IAAgCJ,KAAA,MAAU;MAE1C,MAAAV,OAAA,GAAgBC,gBAAA,IAAoBY,YAAA;MACpC,MAAAE,WAAA,GAAoBX,kBAAA,IAAuBE,YAAA,IAAgBQ,KAAA,UAAU;MAAA,IAEjEC,WAAA,IAAef,OAAA,EAAAgB,MAAS;QAExBR,EAAA,GAAAS,IAAA,CAAA1B,OAAA;UAAAO,UAAA;UAAAoB,SAAA,EAAAxB,SAAA;UAAAyB,KAAA;UAAAC,iBAAA;UAAAC,QAAA,EACGrB;QAAA,C;;;;;;;;;;;;;;;;;CAMT","ignoreList":[]}

package/dist/fields/FieldError/index.scss

@@ -0,0 +1,18 @@
+@import '../../scss/styles';
+
+@layer payload-default {
+  .field-error.tooltip {
+    font-family: var(--font-body);
+    left: auto;
+    max-width: 75%;
+    right: 0;
+    transform: translateY(calc(var(--caret-size) * -1));
+    color: var(--theme-error-950);
+    background-color: var(--theme-error-300);
+
+    &::after {
+      border-top-color: var(--theme-error-300);
+      border-bottom-color: var(--theme-error-300);
+    }
+  }
+}

package/dist/fields/FieldLabel/index.d.ts

@@ -0,0 +1,5 @@
+import type { GenericLabelProps } from '@ruya.sa/payload';
+import React from 'react';
+import './index.scss';
+export declare const FieldLabel: React.FC<GenericLabelProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/FieldLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsClD,CAAA"}