@contentful/f36-datetime 4.0.0

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2018-present Contentful GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# @contentful/f36-datetime
+
+Date time package contains couple of components and utils:
+
+- [DateTime](./src/DateTime)
+- [RelativeDateTime](./src/RelativeDateTime)
+- [date utils](./src/utils)

package/dist/main.js

@@ -0,0 +1,137 @@
+var $iSxHR$react = require("react");
+var $iSxHR$dayjs = require("dayjs");
+var $iSxHR$dayjspluginutc = require("dayjs/plugin/utc");
+var $iSxHR$dayjspluginrelativeTime = require("dayjs/plugin/relativeTime");
+var $iSxHR$dayjsplugincalendar = require("dayjs/plugin/calendar");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "DateTime", () => $8c9ef2783da7ec5f$export$82f9ebd9adeba146);
+$parcel$export(module.exports, "RelativeDateTime", () => $de66f20f0f273947$export$6de14fd95adb1c8a);
+$parcel$export(module.exports, "formatDateAndTime", () => $fe3d2807f48471b7$export$de4eb09f10f9c95e);
+$parcel$export(module.exports, "formatMachineReadableDateTime", () => $fe3d2807f48471b7$export$5fb913e47d486079);
+
+
+
+($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjspluginutc)));
+function $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, format = 'full') {
+    let template;
+    switch(format){
+        case 'day':
+            template = 'DD MMM YYYY'; // 17 Aug 2021
+            break;
+        case 'weekday':
+            template = 'ddd, DD MMM'; // Tue, 17 Aug
+            break;
+        case 'time':
+            template = 'h:mm A'; // 3:45 PM
+            break;
+        default:
+            template = 'ddd, DD MMM YYYY [at] h:mm A';
+    }
+    return ($parcel$interopDefault($iSxHR$dayjs))(date).format(template);
+}
+function $fe3d2807f48471b7$export$5fb913e47d486079(date, format = 'full') {
+    let template;
+    switch(format){
+        case 'day':
+            template = 'YYYY-MM-DD'; // 2019-08-24
+            break;
+        case 'weekday':
+            template = 'MM-DD'; // 08-24
+            break;
+        case 'time':
+            template = 'HH:mm:ss.SSS'; // 15:44:07.000
+            break;
+        default:
+            template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]';
+    }
+    return ($parcel$interopDefault($iSxHR$dayjs))(date).utc().format(template);
+}
+const $fe3d2807f48471b7$export$3ae94a2503e890a1 = (date)=>{
+    return $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, 'day');
+};
+const $fe3d2807f48471b7$export$3203edd9e5edd663 = (date)=>{
+    return $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, 'time');
+};
+const $fe3d2807f48471b7$export$b89623867a65b725 = (date)=>{
+    return $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, 'weekday');
+};
+
+
+
+
+
+($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjspluginutc)));
+($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjspluginrelativeTime)));
+($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjsplugincalendar)));
+function $4e7e5146bc048e19$export$68534c3ecebfa124(date, baseDate = new Date()) {
+    return ($parcel$interopDefault($iSxHR$dayjs))(date).from(baseDate);
+}
+function $4e7e5146bc048e19$export$aa1a2def90bfd930(date, baseDate = new Date()) {
+    const isToday = ($parcel$interopDefault($iSxHR$dayjs))(date).isSame(baseDate, 'day');
+    if (!isToday) // if the date is not today, we display it with "Yesterday", "Tomorrow", etc.
+    // and if the date is not in the current week then it will display "17 Aug 2021"
+    return ($parcel$interopDefault($iSxHR$dayjs))(date).calendar(baseDate, {
+        sameElse: 'DD MMM YYYY'
+    });
+     // returns "... ago"
+    return $4e7e5146bc048e19$export$68534c3ecebfa124(date, baseDate);
+}
+
+
+
+const $8c9ef2783da7ec5f$var$_DateTime = ({ date: date , format: format = 'full' , testId: testId = 'cf-ui-date-time' , ...otherProps }, ref)=>{
+    const machineReadableDate = $fe3d2807f48471b7$export$5fb913e47d486079(date);
+    return(/*#__PURE__*/ ($parcel$interopDefault($iSxHR$react)).createElement("time", {
+        dateTime: machineReadableDate,
+        "data-test-id": testId,
+        ...otherProps,
+        ref: ref
+    }, $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, format)));
+};
+const $8c9ef2783da7ec5f$export$82f9ebd9adeba146 = /*#__PURE__*/ ($parcel$interopDefault($iSxHR$react)).forwardRef($8c9ef2783da7ec5f$var$_DateTime);
+
+
+
+
+
+
+
+
+($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjspluginutc)));
+($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjspluginrelativeTime)));
+($parcel$interopDefault($iSxHR$dayjs)).extend(($parcel$interopDefault($iSxHR$dayjsplugincalendar)));
+const $de66f20f0f273947$var$_RelativeDateTime = ({ date: date , baseDate: baseDate , isRelativeToCurrentWeek: isRelativeToCurrentWeek = false , testId: testId = 'cf-ui-relative-date-time' , ...otherProps }, ref)=>{
+    const now = new Date();
+    const referenceDate = baseDate !== null && baseDate !== void 0 ? baseDate : now;
+    const dayjsDate = ($parcel$interopDefault($iSxHR$dayjs))(date);
+    const machineReadableDate = $fe3d2807f48471b7$export$5fb913e47d486079(date);
+    let relativeDate;
+    if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) /**
+     * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc
+     * or, if the date is not in the current week, it displays "17 Aug 2021"
+     *
+     * check formatRelativeToCurrentWeekDateTime for more details
+     */ relativeDate = $4e7e5146bc048e19$export$aa1a2def90bfd930(date, referenceDate);
+    else // otherwise we display it with "... ago" or "in ..." notation
+    relativeDate = $4e7e5146bc048e19$export$68534c3ecebfa124(date, referenceDate);
+    return(/*#__PURE__*/ ($parcel$interopDefault($iSxHR$react)).createElement("time", {
+        dateTime: machineReadableDate,
+        "data-test-id": testId,
+        ...otherProps,
+        ref: ref
+    }, relativeDate));
+};
+const $de66f20f0f273947$export$6de14fd95adb1c8a = /*#__PURE__*/ ($parcel$interopDefault($iSxHR$react)).forwardRef($de66f20f0f273947$var$_RelativeDateTime);
+
+
+
+
+
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/components/datetime/src/index.ts","packages/components/datetime/src/DateTime/DateTime.tsx","packages/components/datetime/src/utils/index.ts","packages/components/datetime/src/utils/formatDateTimeUtils.ts","packages/components/datetime/src/utils/relativeDateTimeUtils.ts","packages/components/datetime/src/RelativeDateTime/RelativeDateTime.tsx"],"sourcesContent":["export { DateTime } from './DateTime/DateTime';\nexport type { DateTimeProps } from './DateTime/DateTime';\nexport { RelativeDateTime } from './RelativeDateTime/RelativeDateTime';\nexport type { RelativeDateTimeProps } from './RelativeDateTime/RelativeDateTime';\nexport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n","import React from 'react';\nimport {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { DateType, DateFormat } from '../types';\nimport { formatDateAndTime, formatMachineReadableDateTime } from '../utils';\n\ninterface DateTimeOwnProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * The format in which the date will be presented\n   *\n   * @default full\n   **/\n  format?: DateFormat;\n}\n\nexport type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;\n\nconst _DateTime = (\n  {\n    date,\n    format = 'full',\n    testId = 'cf-ui-date-time',\n    ...otherProps\n  }: ExpandProps<DateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {formatDateAndTime(date, format)}\n    </time>\n  );\n};\n\n/**\n * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag\n */\nexport const DateTime = React.forwardRef(_DateTime);\n","export {\n  formatDateAndTime,\n  formatMachineReadableDateTime,\n  formatDate,\n  formatTime,\n  formatWeekdayDate,\n} from './formatDateTimeUtils';\n\nexport {\n  formatRelativeDateTime,\n  formatRelativeToCurrentWeekDateTime,\n} from './relativeDateTimeUtils';\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\ndayjs.extend(utcPlugin);\n\nimport type { DateType, DateFormat } from '../types';\n\n/**\n * A funtion that will return a formatted date string. The format will dependend on the option\n * passed in the second argument.\n * By default, it will return a string with Forma 36’s \"full\" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00') // returns \"Tue, 17 Aug 2021 at 3:45 PM\"\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns \"17 Aug 2021\"\n */\nexport function formatDateAndTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'DD MMM YYYY'; // 17 Aug 2021\n      break;\n    case 'weekday':\n      template = 'ddd, DD MMM'; // Tue, 17 Aug\n      break;\n    case 'time':\n      template = 'h:mm A'; // 3:45 PM\n      break;\n    default:\n      template = 'ddd, DD MMM YYYY [at] h:mm A'; // Tue, 17 Aug 2021 at 3:45 PM\n  }\n\n  return dayjs(date).format(template);\n}\n\n/**\n * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag\n * By default, it will return a string with \"YYYY-MM-DDTHH:mm:ss.SSS[Z]\" format\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z\n *\n * @example\n * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13\n */\nexport function formatMachineReadableDateTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'YYYY-MM-DD'; // 2019-08-24\n      break;\n    case 'weekday':\n      template = 'MM-DD'; // 08-24\n      break;\n    case 'time':\n      template = 'HH:mm:ss.SSS'; // 15:44:07.000\n      break;\n    default:\n      template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]'; // 2019-08-24T15:44:07.000Z\n  }\n\n  return dayjs(date).utc().format(template);\n}\n\n/**\n * @example\n * > formatDate(date)\n * 13 Aug 2019\n */\nexport const formatDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'day');\n};\n\n/**\n * @example\n * > formatTime(date)\n * 8:00 AM\n */\nexport const formatTime = (date: DateType): string => {\n  return formatDateAndTime(date, 'time');\n};\n\n/**\n * @example\n * > formatWeekdayDate(date)\n * Mon, 12 Aug\n */\nexport const formatWeekdayDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'weekday');\n};\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  return dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  const isToday = dayjs(date).isSame(baseDate, 'day');\n\n  if (!isToday) {\n    // if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n    // and if the date is not in the current week then it will display \"17 Aug 2021\"\n    return dayjs(date).calendar(baseDate, {\n      sameElse: 'DD MMM YYYY',\n    });\n  }\n\n  // returns \"... ago\"\n  return formatRelativeDateTime(date, baseDate);\n}\n","import React from 'react';\nimport {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\nimport {\n  formatMachineReadableDateTime,\n  formatRelativeDateTime,\n  formatRelativeToCurrentWeekDateTime,\n} from '../utils';\n\ninterface RelativeDateTimeInternalProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * If a value is passed to baseDate, then the component will compare both dates and return the time between them.\n   * If no value is passed then the date will be compared to \"now\"\n   *\n   * @default \"Now\"\n   */\n  baseDate?: DateType;\n  /**\n   * Sets the date to be relative only if it is in the current week\n   * @default false\n   */\n  isRelativeToCurrentWeek?: boolean;\n}\n\nexport type RelativeDateTimeProps = PropsWithHTMLElement<\n  RelativeDateTimeInternalProps,\n  'time'\n>;\n\nconst _RelativeDateTime = (\n  {\n    date,\n    baseDate,\n    isRelativeToCurrentWeek = false,\n    testId = 'cf-ui-relative-date-time',\n    ...otherProps\n  }: ExpandProps<RelativeDateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const now = new Date();\n  const referenceDate = baseDate ?? now;\n  const dayjsDate = dayjs(date);\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  let relativeDate: string;\n\n  if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) {\n    /**\n     * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc\n     * or, if the date is not in the current week, it displays \"17 Aug 2021\"\n     *\n     * check formatRelativeToCurrentWeekDateTime for more details\n     */\n    relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);\n  } else {\n    // otherwise we display it with \"... ago\" or \"in ...\" notation\n    relativeDate = formatRelativeDateTime(date, referenceDate);\n  }\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {relativeDate}\n    </time>\n  );\n};\n\n/**\n * The RelativeDateTime will show a `date` relative to \"now\" or to the `baseDate`\n * (e.g. in a day, in one month, one month ago, etc).\n */\nexport const RelativeDateTime = React.forwardRef(_RelativeDateTime);\n"],"names":["DateTime","DateTimeProps","RelativeDateTime","RelativeDateTimeProps","formatDateAndTime","formatMachineReadableDateTime","React","CommonProps","PropsWithHTMLElement","ExpandProps","DateType","DateFormat","DateTimeOwnProps","date","format","_DateTime","testId","otherProps","ref","Ref","HTMLTimeElement","machineReadableDate","forwardRef","formatDate","formatTime","formatWeekdayDate","formatRelativeDateTime","formatRelativeToCurrentWeekDateTime","dayjs","utcPlugin","extend","template","utc","relativeTime","calendarPlugin","baseDate","Date","from","isToday","isSame","calendar","sameElse","RelativeDateTimeInternalProps","isRelativeToCurrentWeek","_RelativeDateTime","now","referenceDate","dayjsDate","relativeDate"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -0,0 +1,127 @@
+import $fUYts$react from "react";
+import $fUYts$dayjs from "dayjs";
+import $fUYts$dayjspluginutc from "dayjs/plugin/utc";
+import $fUYts$dayjspluginrelativeTime from "dayjs/plugin/relativeTime";
+import $fUYts$dayjsplugincalendar from "dayjs/plugin/calendar";
+
+
+
+
+$fUYts$dayjs.extend($fUYts$dayjspluginutc);
+function $ee655ad1301c8997$export$de4eb09f10f9c95e(date, format = 'full') {
+    let template;
+    switch(format){
+        case 'day':
+            template = 'DD MMM YYYY'; // 17 Aug 2021
+            break;
+        case 'weekday':
+            template = 'ddd, DD MMM'; // Tue, 17 Aug
+            break;
+        case 'time':
+            template = 'h:mm A'; // 3:45 PM
+            break;
+        default:
+            template = 'ddd, DD MMM YYYY [at] h:mm A';
+    }
+    return $fUYts$dayjs(date).format(template);
+}
+function $ee655ad1301c8997$export$5fb913e47d486079(date, format = 'full') {
+    let template;
+    switch(format){
+        case 'day':
+            template = 'YYYY-MM-DD'; // 2019-08-24
+            break;
+        case 'weekday':
+            template = 'MM-DD'; // 08-24
+            break;
+        case 'time':
+            template = 'HH:mm:ss.SSS'; // 15:44:07.000
+            break;
+        default:
+            template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]';
+    }
+    return $fUYts$dayjs(date).utc().format(template);
+}
+const $ee655ad1301c8997$export$3ae94a2503e890a1 = (date)=>{
+    return $ee655ad1301c8997$export$de4eb09f10f9c95e(date, 'day');
+};
+const $ee655ad1301c8997$export$3203edd9e5edd663 = (date)=>{
+    return $ee655ad1301c8997$export$de4eb09f10f9c95e(date, 'time');
+};
+const $ee655ad1301c8997$export$b89623867a65b725 = (date)=>{
+    return $ee655ad1301c8997$export$de4eb09f10f9c95e(date, 'weekday');
+};
+
+
+
+
+
+$fUYts$dayjs.extend($fUYts$dayjspluginutc);
+$fUYts$dayjs.extend($fUYts$dayjspluginrelativeTime);
+$fUYts$dayjs.extend($fUYts$dayjsplugincalendar);
+function $162585a33f185f78$export$68534c3ecebfa124(date, baseDate = new Date()) {
+    return $fUYts$dayjs(date).from(baseDate);
+}
+function $162585a33f185f78$export$aa1a2def90bfd930(date, baseDate = new Date()) {
+    const isToday = $fUYts$dayjs(date).isSame(baseDate, 'day');
+    if (!isToday) // if the date is not today, we display it with "Yesterday", "Tomorrow", etc.
+    // and if the date is not in the current week then it will display "17 Aug 2021"
+    return $fUYts$dayjs(date).calendar(baseDate, {
+        sameElse: 'DD MMM YYYY'
+    });
+     // returns "... ago"
+    return $162585a33f185f78$export$68534c3ecebfa124(date, baseDate);
+}
+
+
+
+const $02aa7794cdab25f9$var$_DateTime = ({ date: date , format: format = 'full' , testId: testId = 'cf-ui-date-time' , ...otherProps }, ref)=>{
+    const machineReadableDate = $ee655ad1301c8997$export$5fb913e47d486079(date);
+    return(/*#__PURE__*/ $fUYts$react.createElement("time", {
+        dateTime: machineReadableDate,
+        "data-test-id": testId,
+        ...otherProps,
+        ref: ref
+    }, $ee655ad1301c8997$export$de4eb09f10f9c95e(date, format)));
+};
+const $02aa7794cdab25f9$export$82f9ebd9adeba146 = /*#__PURE__*/ $fUYts$react.forwardRef($02aa7794cdab25f9$var$_DateTime);
+
+
+
+
+
+
+
+
+$fUYts$dayjs.extend($fUYts$dayjspluginutc);
+$fUYts$dayjs.extend($fUYts$dayjspluginrelativeTime);
+$fUYts$dayjs.extend($fUYts$dayjsplugincalendar);
+const $f5a0093d268a4b59$var$_RelativeDateTime = ({ date: date , baseDate: baseDate , isRelativeToCurrentWeek: isRelativeToCurrentWeek = false , testId: testId = 'cf-ui-relative-date-time' , ...otherProps }, ref)=>{
+    const now = new Date();
+    const referenceDate = baseDate !== null && baseDate !== void 0 ? baseDate : now;
+    const dayjsDate = $fUYts$dayjs(date);
+    const machineReadableDate = $ee655ad1301c8997$export$5fb913e47d486079(date);
+    let relativeDate;
+    if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) /**
+     * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc
+     * or, if the date is not in the current week, it displays "17 Aug 2021"
+     *
+     * check formatRelativeToCurrentWeekDateTime for more details
+     */ relativeDate = $162585a33f185f78$export$aa1a2def90bfd930(date, referenceDate);
+    else // otherwise we display it with "... ago" or "in ..." notation
+    relativeDate = $162585a33f185f78$export$68534c3ecebfa124(date, referenceDate);
+    return(/*#__PURE__*/ $fUYts$react.createElement("time", {
+        dateTime: machineReadableDate,
+        "data-test-id": testId,
+        ...otherProps,
+        ref: ref
+    }, relativeDate));
+};
+const $f5a0093d268a4b59$export$6de14fd95adb1c8a = /*#__PURE__*/ $fUYts$react.forwardRef($f5a0093d268a4b59$var$_RelativeDateTime);
+
+
+
+
+
+export {$02aa7794cdab25f9$export$82f9ebd9adeba146 as DateTime, $f5a0093d268a4b59$export$6de14fd95adb1c8a as RelativeDateTime, $ee655ad1301c8997$export$de4eb09f10f9c95e as formatDateAndTime, $ee655ad1301c8997$export$5fb913e47d486079 as formatMachineReadableDateTime};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/components/datetime/src/index.ts","packages/components/datetime/src/DateTime/DateTime.tsx","packages/components/datetime/src/utils/index.ts","packages/components/datetime/src/utils/formatDateTimeUtils.ts","packages/components/datetime/src/utils/relativeDateTimeUtils.ts","packages/components/datetime/src/RelativeDateTime/RelativeDateTime.tsx"],"sourcesContent":["export { DateTime } from './DateTime/DateTime';\nexport type { DateTimeProps } from './DateTime/DateTime';\nexport { RelativeDateTime } from './RelativeDateTime/RelativeDateTime';\nexport type { RelativeDateTimeProps } from './RelativeDateTime/RelativeDateTime';\nexport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n","import React from 'react';\nimport {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { DateType, DateFormat } from '../types';\nimport { formatDateAndTime, formatMachineReadableDateTime } from '../utils';\n\ninterface DateTimeOwnProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * The format in which the date will be presented\n   *\n   * @default full\n   **/\n  format?: DateFormat;\n}\n\nexport type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;\n\nconst _DateTime = (\n  {\n    date,\n    format = 'full',\n    testId = 'cf-ui-date-time',\n    ...otherProps\n  }: ExpandProps<DateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {formatDateAndTime(date, format)}\n    </time>\n  );\n};\n\n/**\n * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag\n */\nexport const DateTime = React.forwardRef(_DateTime);\n","export {\n  formatDateAndTime,\n  formatMachineReadableDateTime,\n  formatDate,\n  formatTime,\n  formatWeekdayDate,\n} from './formatDateTimeUtils';\n\nexport {\n  formatRelativeDateTime,\n  formatRelativeToCurrentWeekDateTime,\n} from './relativeDateTimeUtils';\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\ndayjs.extend(utcPlugin);\n\nimport type { DateType, DateFormat } from '../types';\n\n/**\n * A funtion that will return a formatted date string. The format will dependend on the option\n * passed in the second argument.\n * By default, it will return a string with Forma 36’s \"full\" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00') // returns \"Tue, 17 Aug 2021 at 3:45 PM\"\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns \"17 Aug 2021\"\n */\nexport function formatDateAndTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'DD MMM YYYY'; // 17 Aug 2021\n      break;\n    case 'weekday':\n      template = 'ddd, DD MMM'; // Tue, 17 Aug\n      break;\n    case 'time':\n      template = 'h:mm A'; // 3:45 PM\n      break;\n    default:\n      template = 'ddd, DD MMM YYYY [at] h:mm A'; // Tue, 17 Aug 2021 at 3:45 PM\n  }\n\n  return dayjs(date).format(template);\n}\n\n/**\n * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag\n * By default, it will return a string with \"YYYY-MM-DDTHH:mm:ss.SSS[Z]\" format\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z\n *\n * @example\n * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13\n */\nexport function formatMachineReadableDateTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'YYYY-MM-DD'; // 2019-08-24\n      break;\n    case 'weekday':\n      template = 'MM-DD'; // 08-24\n      break;\n    case 'time':\n      template = 'HH:mm:ss.SSS'; // 15:44:07.000\n      break;\n    default:\n      template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]'; // 2019-08-24T15:44:07.000Z\n  }\n\n  return dayjs(date).utc().format(template);\n}\n\n/**\n * @example\n * > formatDate(date)\n * 13 Aug 2019\n */\nexport const formatDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'day');\n};\n\n/**\n * @example\n * > formatTime(date)\n * 8:00 AM\n */\nexport const formatTime = (date: DateType): string => {\n  return formatDateAndTime(date, 'time');\n};\n\n/**\n * @example\n * > formatWeekdayDate(date)\n * Mon, 12 Aug\n */\nexport const formatWeekdayDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'weekday');\n};\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  return dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  const isToday = dayjs(date).isSame(baseDate, 'day');\n\n  if (!isToday) {\n    // if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n    // and if the date is not in the current week then it will display \"17 Aug 2021\"\n    return dayjs(date).calendar(baseDate, {\n      sameElse: 'DD MMM YYYY',\n    });\n  }\n\n  // returns \"... ago\"\n  return formatRelativeDateTime(date, baseDate);\n}\n","import React from 'react';\nimport {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\nimport {\n  formatMachineReadableDateTime,\n  formatRelativeDateTime,\n  formatRelativeToCurrentWeekDateTime,\n} from '../utils';\n\ninterface RelativeDateTimeInternalProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * If a value is passed to baseDate, then the component will compare both dates and return the time between them.\n   * If no value is passed then the date will be compared to \"now\"\n   *\n   * @default \"Now\"\n   */\n  baseDate?: DateType;\n  /**\n   * Sets the date to be relative only if it is in the current week\n   * @default false\n   */\n  isRelativeToCurrentWeek?: boolean;\n}\n\nexport type RelativeDateTimeProps = PropsWithHTMLElement<\n  RelativeDateTimeInternalProps,\n  'time'\n>;\n\nconst _RelativeDateTime = (\n  {\n    date,\n    baseDate,\n    isRelativeToCurrentWeek = false,\n    testId = 'cf-ui-relative-date-time',\n    ...otherProps\n  }: ExpandProps<RelativeDateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const now = new Date();\n  const referenceDate = baseDate ?? now;\n  const dayjsDate = dayjs(date);\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  let relativeDate: string;\n\n  if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) {\n    /**\n     * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc\n     * or, if the date is not in the current week, it displays \"17 Aug 2021\"\n     *\n     * check formatRelativeToCurrentWeekDateTime for more details\n     */\n    relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);\n  } else {\n    // otherwise we display it with \"... ago\" or \"in ...\" notation\n    relativeDate = formatRelativeDateTime(date, referenceDate);\n  }\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {relativeDate}\n    </time>\n  );\n};\n\n/**\n * The RelativeDateTime will show a `date` relative to \"now\" or to the `baseDate`\n * (e.g. in a day, in one month, one month ago, etc).\n */\nexport const RelativeDateTime = React.forwardRef(_RelativeDateTime);\n"],"names":["DateTime","DateTimeProps","RelativeDateTime","RelativeDateTimeProps","formatDateAndTime","formatMachineReadableDateTime","React","CommonProps","PropsWithHTMLElement","ExpandProps","DateType","DateFormat","DateTimeOwnProps","date","format","_DateTime","testId","otherProps","ref","Ref","HTMLTimeElement","machineReadableDate","forwardRef","formatDate","formatTime","formatWeekdayDate","formatRelativeDateTime","formatRelativeToCurrentWeekDateTime","dayjs","utcPlugin","extend","template","utc","relativeTime","calendarPlugin","baseDate","Date","from","isToday","isSame","calendar","sameElse","RelativeDateTimeInternalProps","isRelativeToCurrentWeek","_RelativeDateTime","now","referenceDate","dayjsDate","relativeDate"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -0,0 +1,603 @@
+import React from "react";
+import { CommonProps, PropsWithHTMLElement } from "@contentful/f36-core";
+type DateType = Date | string | number;
+type DateFormat = 'full' | 'time' | 'weekday' | 'day';
+/**
+ * A funtion that will return a formatted date string. The format will dependend on the option
+ * passed in the second argument.
+ * By default, it will return a string with Forma 36’s "full" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)
+ *
+ * @param {DateType} date - the date to be formatted
+ * @param {DateFormat} format - the desired format ("full", "day", "weekday", or "time")
+ * @returns a formatted date
+ *
+ * @example
+ * formatDateAndTime('2021-08-17T15:45:00') // returns "Tue, 17 Aug 2021 at 3:45 PM"
+ *
+ * @example
+ * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns "17 Aug 2021"
+ */
+export function formatDateAndTime(date: DateType, format?: DateFormat): string;
+/**
+ * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag
+ * By default, it will return a string with "YYYY-MM-DDTHH:mm:ss.SSS[Z]" format
+ *
+ * @param {DateType} date - the date to be formatted
+ * @param {DateFormat} format - the desired format ("full", "day", "weekday", or "time")
+ * @returns a formatted date
+ *
+ * @example
+ * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z
+ *
+ * @example
+ * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13
+ */
+export function formatMachineReadableDateTime(date: DateType, format?: DateFormat): string;
+interface DateTimeOwnProps extends CommonProps {
+    /**
+     * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number
+     */
+    date: DateType;
+    /**
+     * The format in which the date will be presented
+     *
+     * @default full
+     **/
+    format?: DateFormat;
+}
+export type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;
+/**
+ * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag
+ */
+export const DateTime: React.ForwardRefExoticComponent<{
+    slot?: string;
+    title?: string;
+    key?: React.Key;
+    dateTime?: string;
+    defaultChecked?: boolean;
+    defaultValue?: string | number | readonly string[];
+    suppressContentEditableWarning?: boolean;
+    suppressHydrationWarning?: boolean;
+    accessKey?: string;
+    contentEditable?: (boolean | "true" | "false") | "inherit";
+    contextMenu?: string;
+    dir?: string;
+    draggable?: boolean | "true" | "false";
+    hidden?: boolean;
+    id?: string;
+    lang?: string;
+    placeholder?: string;
+    spellCheck?: boolean | "true" | "false";
+    tabIndex?: number;
+    translate?: "yes" | "no";
+    radioGroup?: string;
+    role?: string;
+    about?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    resource?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    autoSave?: string;
+    color?: string;
+    itemProp?: string;
+    itemScope?: boolean;
+    itemType?: string;
+    itemID?: string;
+    itemRef?: string;
+    results?: number;
+    security?: string;
+    unselectable?: "on" | "off";
+    inputMode?: "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+    is?: string;
+    'aria-activedescendant'?: string;
+    'aria-atomic'?: boolean | "true" | "false";
+    'aria-autocomplete'?: "none" | "inline" | "list" | "both";
+    'aria-busy'?: boolean | "true" | "false";
+    'aria-checked'?: boolean | "true" | "false" | "mixed";
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colspan'?: number;
+    'aria-controls'?: string;
+    'aria-current'?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location";
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    'aria-disabled'?: boolean | "true" | "false";
+    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup";
+    'aria-errormessage'?: string;
+    'aria-expanded'?: boolean | "true" | "false";
+    'aria-flowto'?: string;
+    'aria-grabbed'?: boolean | "true" | "false";
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | "grid";
+    'aria-hidden'?: boolean | "true" | "false";
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
+    'aria-keyshortcuts'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-level'?: number;
+    'aria-live'?: "off" | "assertive" | "polite";
+    'aria-modal'?: boolean | "true" | "false";
+    'aria-multiline'?: boolean | "true" | "false";
+    'aria-multiselectable'?: boolean | "true" | "false";
+    'aria-orientation'?: "horizontal" | "vertical";
+    'aria-owns'?: string;
+    'aria-placeholder'?: string;
+    'aria-posinset'?: number;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed";
+    'aria-readonly'?: boolean | "true" | "false";
+    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    'aria-required'?: boolean | "true" | "false";
+    'aria-roledescription'?: string;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowspan'?: number;
+    'aria-selected'?: boolean | "true" | "false";
+    'aria-setsize'?: number;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other";
+    'aria-valuemax'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    children?: React.ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
+    onCopy?: React.ClipboardEventHandler<HTMLElement>;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onCut?: React.ClipboardEventHandler<HTMLElement>;
+    onCutCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onPaste?: React.ClipboardEventHandler<HTMLElement>;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionStart?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement>;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onFocusCapture?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    onBlurCapture?: React.FocusEventHandler<HTMLElement>;
+    onChange?: React.FormEventHandler<HTMLElement>;
+    onChangeCapture?: React.FormEventHandler<HTMLElement>;
+    onBeforeInput?: React.FormEventHandler<HTMLElement>;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLElement>;
+    onInput?: React.FormEventHandler<HTMLElement>;
+    onInputCapture?: React.FormEventHandler<HTMLElement>;
+    onReset?: React.FormEventHandler<HTMLElement>;
+    onResetCapture?: React.FormEventHandler<HTMLElement>;
+    onSubmit?: React.FormEventHandler<HTMLElement>;
+    onSubmitCapture?: React.FormEventHandler<HTMLElement>;
+    onInvalid?: React.FormEventHandler<HTMLElement>;
+    onInvalidCapture?: React.FormEventHandler<HTMLElement>;
+    onLoad?: React.ReactEventHandler<HTMLElement>;
+    onLoadCapture?: React.ReactEventHandler<HTMLElement>;
+    onError?: React.ReactEventHandler<HTMLElement>;
+    onErrorCapture?: React.ReactEventHandler<HTMLElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onAbort?: React.ReactEventHandler<HTMLElement>;
+    onAbortCapture?: React.ReactEventHandler<HTMLElement>;
+    onCanPlay?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement>;
+    onDurationChange?: React.ReactEventHandler<HTMLElement>;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onEmptied?: React.ReactEventHandler<HTMLElement>;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLElement>;
+    onEncrypted?: React.ReactEventHandler<HTMLElement>;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLElement>;
+    onEnded?: React.ReactEventHandler<HTMLElement>;
+    onEndedCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadedData?: React.ReactEventHandler<HTMLElement>;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLElement>;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadStart?: React.ReactEventHandler<HTMLElement>;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLElement>;
+    onPause?: React.ReactEventHandler<HTMLElement>;
+    onPauseCapture?: React.ReactEventHandler<HTMLElement>;
+    onPlay?: React.ReactEventHandler<HTMLElement>;
+    onPlayCapture?: React.ReactEventHandler<HTMLElement>;
+    onPlaying?: React.ReactEventHandler<HTMLElement>;
+    onPlayingCapture?: React.ReactEventHandler<HTMLElement>;
+    onProgress?: React.ReactEventHandler<HTMLElement>;
+    onProgressCapture?: React.ReactEventHandler<HTMLElement>;
+    onRateChange?: React.ReactEventHandler<HTMLElement>;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onSeeked?: React.ReactEventHandler<HTMLElement>;
+    onSeekedCapture?: React.ReactEventHandler<HTMLElement>;
+    onSeeking?: React.ReactEventHandler<HTMLElement>;
+    onSeekingCapture?: React.ReactEventHandler<HTMLElement>;
+    onStalled?: React.ReactEventHandler<HTMLElement>;
+    onStalledCapture?: React.ReactEventHandler<HTMLElement>;
+    onSuspend?: React.ReactEventHandler<HTMLElement>;
+    onSuspendCapture?: React.ReactEventHandler<HTMLElement>;
+    onTimeUpdate?: React.ReactEventHandler<HTMLElement>;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement>;
+    onVolumeChange?: React.ReactEventHandler<HTMLElement>;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onWaiting?: React.ReactEventHandler<HTMLElement>;
+    onWaitingCapture?: React.ReactEventHandler<HTMLElement>;
+    onAuxClick?: React.MouseEventHandler<HTMLElement>;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onContextMenu?: React.MouseEventHandler<HTMLElement>;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLElement>;
+    onDoubleClick?: React.MouseEventHandler<HTMLElement>;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onDrag?: React.DragEventHandler<HTMLElement>;
+    onDragCapture?: React.DragEventHandler<HTMLElement>;
+    onDragEnd?: React.DragEventHandler<HTMLElement>;
+    onDragEndCapture?: React.DragEventHandler<HTMLElement>;
+    onDragEnter?: React.DragEventHandler<HTMLElement>;
+    onDragEnterCapture?: React.DragEventHandler<HTMLElement>;
+    onDragExit?: React.DragEventHandler<HTMLElement>;
+    onDragExitCapture?: React.DragEventHandler<HTMLElement>;
+    onDragLeave?: React.DragEventHandler<HTMLElement>;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLElement>;
+    onDragOver?: React.DragEventHandler<HTMLElement>;
+    onDragOverCapture?: React.DragEventHandler<HTMLElement>;
+    onDragStart?: React.DragEventHandler<HTMLElement>;
+    onDragStartCapture?: React.DragEventHandler<HTMLElement>;
+    onDrop?: React.DragEventHandler<HTMLElement>;
+    onDropCapture?: React.DragEventHandler<HTMLElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLElement>;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+    onMouseMove?: React.MouseEventHandler<HTMLElement>;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseOut?: React.MouseEventHandler<HTMLElement>;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLElement>;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseUp?: React.MouseEventHandler<HTMLElement>;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLElement>;
+    onSelect?: React.ReactEventHandler<HTMLElement>;
+    onSelectCapture?: React.ReactEventHandler<HTMLElement>;
+    onTouchCancel?: React.TouchEventHandler<HTMLElement>;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchEnd?: React.TouchEventHandler<HTMLElement>;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchMove?: React.TouchEventHandler<HTMLElement>;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLElement>;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLElement>;
+    onPointerDown?: React.PointerEventHandler<HTMLElement>;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerMove?: React.PointerEventHandler<HTMLElement>;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerUp?: React.PointerEventHandler<HTMLElement>;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerCancel?: React.PointerEventHandler<HTMLElement>;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement>;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerOver?: React.PointerEventHandler<HTMLElement>;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerOut?: React.PointerEventHandler<HTMLElement>;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLElement>;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLElement>;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLElement>;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
+    onScroll?: React.UIEventHandler<HTMLElement>;
+    onScrollCapture?: React.UIEventHandler<HTMLElement>;
+    onWheel?: React.WheelEventHandler<HTMLElement>;
+    onWheelCapture?: React.WheelEventHandler<HTMLElement>;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement>;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement>;
+    date: DateType;
+    format?: DateFormat;
+    className?: string;
+    testId?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLTimeElement>>;
+interface RelativeDateTimeInternalProps extends CommonProps {
+    /**
+     * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number
+     */
+    date: DateType;
+    /**
+     * If a value is passed to baseDate, then the component will compare both dates and return the time between them.
+     * If no value is passed then the date will be compared to "now"
+     *
+     * @default "Now"
+     */
+    baseDate?: DateType;
+    /**
+     * Sets the date to be relative only if it is in the current week
+     * @default false
+     */
+    isRelativeToCurrentWeek?: boolean;
+}
+export type RelativeDateTimeProps = PropsWithHTMLElement<RelativeDateTimeInternalProps, 'time'>;
+/**
+ * The RelativeDateTime will show a `date` relative to "now" or to the `baseDate`
+ * (e.g. in a day, in one month, one month ago, etc).
+ */
+export const RelativeDateTime: React.ForwardRefExoticComponent<{
+    slot?: string;
+    title?: string;
+    key?: React.Key;
+    dateTime?: string;
+    defaultChecked?: boolean;
+    defaultValue?: string | number | readonly string[];
+    suppressContentEditableWarning?: boolean;
+    suppressHydrationWarning?: boolean;
+    accessKey?: string;
+    contentEditable?: (boolean | "true" | "false") | "inherit";
+    contextMenu?: string;
+    dir?: string;
+    draggable?: boolean | "true" | "false";
+    hidden?: boolean;
+    id?: string;
+    lang?: string;
+    placeholder?: string;
+    spellCheck?: boolean | "true" | "false";
+    tabIndex?: number;
+    translate?: "yes" | "no";
+    radioGroup?: string;
+    role?: string;
+    about?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    resource?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    autoSave?: string;
+    color?: string;
+    itemProp?: string;
+    itemScope?: boolean;
+    itemType?: string;
+    itemID?: string;
+    itemRef?: string;
+    results?: number;
+    security?: string;
+    unselectable?: "on" | "off";
+    inputMode?: "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+    is?: string;
+    'aria-activedescendant'?: string;
+    'aria-atomic'?: boolean | "true" | "false";
+    'aria-autocomplete'?: "none" | "inline" | "list" | "both";
+    'aria-busy'?: boolean | "true" | "false";
+    'aria-checked'?: boolean | "true" | "false" | "mixed";
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colspan'?: number;
+    'aria-controls'?: string;
+    'aria-current'?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location";
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    'aria-disabled'?: boolean | "true" | "false";
+    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup";
+    'aria-errormessage'?: string;
+    'aria-expanded'?: boolean | "true" | "false";
+    'aria-flowto'?: string;
+    'aria-grabbed'?: boolean | "true" | "false";
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | "grid";
+    'aria-hidden'?: boolean | "true" | "false";
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
+    'aria-keyshortcuts'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-level'?: number;
+    'aria-live'?: "off" | "assertive" | "polite";
+    'aria-modal'?: boolean | "true" | "false";
+    'aria-multiline'?: boolean | "true" | "false";
+    'aria-multiselectable'?: boolean | "true" | "false";
+    'aria-orientation'?: "horizontal" | "vertical";
+    'aria-owns'?: string;
+    'aria-placeholder'?: string;
+    'aria-posinset'?: number;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed";
+    'aria-readonly'?: boolean | "true" | "false";
+    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    'aria-required'?: boolean | "true" | "false";
+    'aria-roledescription'?: string;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowspan'?: number;
+    'aria-selected'?: boolean | "true" | "false";
+    'aria-setsize'?: number;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other";
+    'aria-valuemax'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    children?: React.ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
+    onCopy?: React.ClipboardEventHandler<HTMLElement>;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onCut?: React.ClipboardEventHandler<HTMLElement>;
+    onCutCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onPaste?: React.ClipboardEventHandler<HTMLElement>;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionStart?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement>;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onFocusCapture?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    onBlurCapture?: React.FocusEventHandler<HTMLElement>;
+    onChange?: React.FormEventHandler<HTMLElement>;
+    onChangeCapture?: React.FormEventHandler<HTMLElement>;
+    onBeforeInput?: React.FormEventHandler<HTMLElement>;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLElement>;
+    onInput?: React.FormEventHandler<HTMLElement>;
+    onInputCapture?: React.FormEventHandler<HTMLElement>;
+    onReset?: React.FormEventHandler<HTMLElement>;
+    onResetCapture?: React.FormEventHandler<HTMLElement>;
+    onSubmit?: React.FormEventHandler<HTMLElement>;
+    onSubmitCapture?: React.FormEventHandler<HTMLElement>;
+    onInvalid?: React.FormEventHandler<HTMLElement>;
+    onInvalidCapture?: React.FormEventHandler<HTMLElement>;
+    onLoad?: React.ReactEventHandler<HTMLElement>;
+    onLoadCapture?: React.ReactEventHandler<HTMLElement>;
+    onError?: React.ReactEventHandler<HTMLElement>;
+    onErrorCapture?: React.ReactEventHandler<HTMLElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onAbort?: React.ReactEventHandler<HTMLElement>;
+    onAbortCapture?: React.ReactEventHandler<HTMLElement>;
+    onCanPlay?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement>;
+    onDurationChange?: React.ReactEventHandler<HTMLElement>;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onEmptied?: React.ReactEventHandler<HTMLElement>;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLElement>;
+    onEncrypted?: React.ReactEventHandler<HTMLElement>;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLElement>;
+    onEnded?: React.ReactEventHandler<HTMLElement>;
+    onEndedCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadedData?: React.ReactEventHandler<HTMLElement>;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLElement>;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadStart?: React.ReactEventHandler<HTMLElement>;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLElement>;
+    onPause?: React.ReactEventHandler<HTMLElement>;
+    onPauseCapture?: React.ReactEventHandler<HTMLElement>;
+    onPlay?: React.ReactEventHandler<HTMLElement>;
+    onPlayCapture?: React.ReactEventHandler<HTMLElement>;
+    onPlaying?: React.ReactEventHandler<HTMLElement>;
+    onPlayingCapture?: React.ReactEventHandler<HTMLElement>;
+    onProgress?: React.ReactEventHandler<HTMLElement>;
+    onProgressCapture?: React.ReactEventHandler<HTMLElement>;
+    onRateChange?: React.ReactEventHandler<HTMLElement>;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onSeeked?: React.ReactEventHandler<HTMLElement>;
+    onSeekedCapture?: React.ReactEventHandler<HTMLElement>;
+    onSeeking?: React.ReactEventHandler<HTMLElement>;
+    onSeekingCapture?: React.ReactEventHandler<HTMLElement>;
+    onStalled?: React.ReactEventHandler<HTMLElement>;
+    onStalledCapture?: React.ReactEventHandler<HTMLElement>;
+    onSuspend?: React.ReactEventHandler<HTMLElement>;
+    onSuspendCapture?: React.ReactEventHandler<HTMLElement>;
+    onTimeUpdate?: React.ReactEventHandler<HTMLElement>;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement>;
+    onVolumeChange?: React.ReactEventHandler<HTMLElement>;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onWaiting?: React.ReactEventHandler<HTMLElement>;
+    onWaitingCapture?: React.ReactEventHandler<HTMLElement>;
+    onAuxClick?: React.MouseEventHandler<HTMLElement>;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onContextMenu?: React.MouseEventHandler<HTMLElement>;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLElement>;
+    onDoubleClick?: React.MouseEventHandler<HTMLElement>;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onDrag?: React.DragEventHandler<HTMLElement>;
+    onDragCapture?: React.DragEventHandler<HTMLElement>;
+    onDragEnd?: React.DragEventHandler<HTMLElement>;
+    onDragEndCapture?: React.DragEventHandler<HTMLElement>;
+    onDragEnter?: React.DragEventHandler<HTMLElement>;
+    onDragEnterCapture?: React.DragEventHandler<HTMLElement>;
+    onDragExit?: React.DragEventHandler<HTMLElement>;
+    onDragExitCapture?: React.DragEventHandler<HTMLElement>;
+    onDragLeave?: React.DragEventHandler<HTMLElement>;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLElement>;
+    onDragOver?: React.DragEventHandler<HTMLElement>;
+    onDragOverCapture?: React.DragEventHandler<HTMLElement>;
+    onDragStart?: React.DragEventHandler<HTMLElement>;
+    onDragStartCapture?: React.DragEventHandler<HTMLElement>;
+    onDrop?: React.DragEventHandler<HTMLElement>;
+    onDropCapture?: React.DragEventHandler<HTMLElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLElement>;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+    onMouseMove?: React.MouseEventHandler<HTMLElement>;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseOut?: React.MouseEventHandler<HTMLElement>;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLElement>;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseUp?: React.MouseEventHandler<HTMLElement>;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLElement>;
+    onSelect?: React.ReactEventHandler<HTMLElement>;
+    onSelectCapture?: React.ReactEventHandler<HTMLElement>;
+    onTouchCancel?: React.TouchEventHandler<HTMLElement>;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchEnd?: React.TouchEventHandler<HTMLElement>;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchMove?: React.TouchEventHandler<HTMLElement>;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLElement>;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLElement>;
+    onPointerDown?: React.PointerEventHandler<HTMLElement>;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerMove?: React.PointerEventHandler<HTMLElement>;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerUp?: React.PointerEventHandler<HTMLElement>;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerCancel?: React.PointerEventHandler<HTMLElement>;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement>;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerOver?: React.PointerEventHandler<HTMLElement>;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerOut?: React.PointerEventHandler<HTMLElement>;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLElement>;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLElement>;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLElement>;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
+    onScroll?: React.UIEventHandler<HTMLElement>;
+    onScrollCapture?: React.UIEventHandler<HTMLElement>;
+    onWheel?: React.WheelEventHandler<HTMLElement>;
+    onWheelCapture?: React.WheelEventHandler<HTMLElement>;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement>;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement>;
+    date: DateType;
+    baseDate?: DateType;
+    isRelativeToCurrentWeek?: boolean;
+    className?: string;
+    testId?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLTimeElement>>;
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;AAAA,gBAAuB,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9C,kBAAyB,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC;ACI7D;;;;;;;;;;;;;;GAcG;AACH,kCACE,IAAI,EAAE,QAAQ,EACd,MAAM,GAAE,UAAmB,GAC1B,MAAM,CAkBR;AAED;;;;;;;;;;;;;GAaG;AACH,8CACE,IAAI,EAAE,QAAQ,EACd,MAAM,GAAE,UAAmB,GAC1B,MAAM,CAkBR;AGrED,0BAA2B,SAAQ,WAAW;IAC5C;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;QAII;IACJ,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,4BAA4B,qBAAqB,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAyB3E;;GAEG;AACH,OAAO,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UArCL,QAAQ;aAML,UAAU;;;;yCA+B8B,CAAC;AC7BpD,uCAAwC,SAAQ,WAAW;IACzD;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,oCAAoC,qBAClC,6BAA6B,EAC7B,MAAM,CACP,CAAC;AA4CF;;;GAGG;AACH,OAAO,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAlEL,QAAQ;eAOH,QAAQ;8BAKO,OAAO;;;;yCAsDgC,CAAC","sources":["packages/components/datetime/src/src/types.ts","packages/components/datetime/src/src/utils/formatDateTimeUtils.ts","packages/components/datetime/src/src/utils/relativeDateTimeUtils.ts","packages/components/datetime/src/src/utils/index.ts","packages/components/datetime/src/src/DateTime/DateTime.tsx","packages/components/datetime/src/src/RelativeDateTime/RelativeDateTime.tsx","packages/components/datetime/src/src/index.ts","packages/components/datetime/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"export { DateTime } from './DateTime/DateTime';\nexport type { DateTimeProps } from './DateTime/DateTime';\nexport { RelativeDateTime } from './RelativeDateTime/RelativeDateTime';\nexport type { RelativeDateTimeProps } from './RelativeDateTime/RelativeDateTime';\nexport { formatDateAndTime, formatMachineReadableDateTime } from './utils';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@contentful/f36-datetime",
+  "version": "4.0.0",
+  "description": "Forma 36: DateTime component",
+  "scripts": {
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@contentful/f36-core": "^4.0.0",
+    "@contentful/f36-tokens": "^4.0.0",
+    "dayjs": "^1.10.6",
+    "emotion": "^10.0.17"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "browserslist": "extends @contentful/browserslist-config",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/forma-36"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "01d931c77410619d05cd00dbb3b5acc5d8ae2cdf"
+}