@genexus/genexus-ide-ui 1.0.19 → 1.0.20

package/dist/components/gx-ide-start-page.js

@@ -1,13 +1,2508 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getIconPath } from './assets-manager.js';
 import { L as Locale } from './locale.js';
-import { c as config } from './config.js';
-import { f as formatDate, h as hiChar } from './helpers.js';
-import { d as defineCustomElement$4 } from './gx-ide-empty-state2.js';
-import { d as defineCustomElement$3 } from './ide-loader.js';
-import { d as defineCustomElement$2 } from './recent-news.js';
+import { d as defineCustomElement$3 } from './gx-ide-empty-state2.js';
+import { d as defineCustomElement$2 } from './ide-loader.js';
 
-const startPageCss = ":root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n/* - - - - - - - - - - - - - - - - -\nNew classes for Chameleon + Mercury\n- - - - - - - - - - - - - - - - - */\n:host {\n  display: grid;\n  block-size: 100%;\n}\n\n.card-regular {\n  background-color: var(--mer-surface__elevation--01);\n  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);\n  border-radius: var(--mer-border__radius--md);\n  padding: var(--mer-spacing--md) var(--mer-spacing--md);\n  display: grid;\n}\n\n.card-small {\n  background-color: var(--mer-surface__elevation--02);\n  border-radius: var(--mer-border__radius--sm);\n  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.card-small--actionable:hover {\n  background-color: var(--mer-color__neutral-gray--600);\n}\n.card-small--actionable:active {\n  background-color: var(--mer-color__neutral-gray--650);\n}\n.card-small:focus-visible {\n  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);\n  outline-offset: var(--focus__outline-offset);\n}\n\n.empty-state {\n  block-size: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: var(--mer-spacing--sm);\n  text-align: center;\n}\n.empty-state__title, .empty-state__button, .empty-state__link {\n  max-inline-size: 300px;\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-1 {\n  opacity: 1;\n}\n\n.display-contents {\n  display: contents;\n}\n\n/* - - - - - - - - - - - - - - - - - - - \nOld classes (Gemini) to be removed soon\n- - - - - - - - - - - - - - - - - - - */\n/* - - - - - - - - - - - - - - - - - - - \nOld classes (Gemini) to be removed soon\n- - - - - - - - - - - - - - - - - - - */\n/* Helper Classes */\n.gxi-hidden {\n  display: none !important;\n}\n\n.gxi-full-height {\n  height: 100%;\n}\n\n.gxi-overflow-auto {\n  overflow: auto;\n}\n\n.gxi-display-flex {\n  display: flex;\n}\n\n.align-start {\n  display: flex;\n  align-items: start;\n}\n\n.align-center {\n  display: flex;\n  align-items: center;\n}\n\n.align-end {\n  display: flex;\n  align-items: end;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.justify-start {\n  display: flex;\n  justify-content: start;\n}\n\n.justify-center {\n  display: flex;\n  justify-content: center;\n}\n\n.justify-end {\n  display: flex;\n  justify-content: end;\n}\n\n/* Grids */\n.grid {\n  display: grid;\n  grid-row-gap: var(--gx-ide-grid-row-gap);\n  grid-column-gap: var(--gx-ide-grid-column-gap);\n  grid-template-rows: auto;\n}\n\nch-grid-cell {\n  display: flex;\n}\n\nch-grid {\n  overflow: auto;\n  height: 100%;\n}\n\nch-grid-column {\n  /*to be removed when this works inside a component with shadow: true*/\n  z-index: 99;\n  border-bottom: 1px solid var(--mer-color__neutral-gray--800);\n}\n\nch-grid-column:first-child {\n  padding-inline-start: var(--gx-ide-container__padding) !important;\n}\n\nch-grid-column:last-child {\n  padding-inline-end: var(--gx-ide-container__padding) !important;\n}\n\nch-grid-cell {\n  --mer-spacing--xs: var(--gx-ide-container__padding);\n}\n\n/*--- Layout ---*/\n.layout {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n  box-sizing: border-box;\n}\n.layout--two-cols {\n  grid-template-columns: 1fr 1fr;\n}\n.layout--space-above {\n  padding-block-start: var(--mer-spacing--lg);\n}\n\n/*Gxg Tabs*/\ngxg-tabs {\n  box-shadow: none;\n}\n\n/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/\n:host(.gx-ide-component) {\n  height: 100% !important;\n  display: flex !important;\n  flex-direction: column !important;\n}\n\n/*stylize the top bar*/\n:host(:focus-within) gx-ide-top-bar::part(wrapper) {\n  background-color: var(--color-secondary-enabled);\n}\n\n/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */\n.gx-ide-main-wrapper {\n  color: var(--gx-ide-component-text-color);\n  font-weight: var(--mer-font__weight--regular);\n  font-size: var(--mer-font__size--xs);\n  font-family: var(--mer-font-family--primary);\n  height: 100%;\n  background-color: var(--gx-ide-component-background-color);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  box-sizing: border-box;\n}\n\n/*This is the main element. This is the one that take the remaining vertical space*/\n.gx-ide-main {\n  flex-grow: 1;\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-main::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gx-ide-main::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gx-ide-main::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gx-ide-main::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gx-ide-main::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n.gx-ide-overflow {\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gx-ide-overflow::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gx-ide-overflow::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gx-ide-overflow::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gx-ide-overflow::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n.tree-view-primary {\n  font-size: var(--mer-font__size--2xs);\n}\n\np {\n  margin: 0;\n  font-size: var(--mer-font__size--xxs);\n}\n\n/* - - - - - - - - - - - - - - - - - -\nNew : For Mercury\n- - - - - - - - - - - - - - - - - - */\n.buttons-container {\n  display: flex;\n  gap: var(--mer-spacing--xs);\n}\n\n/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n.hiChar {\n  color: var(--mer-color__primary--200);\n  filter: brightness(1.3);\n}\n\n:host {\n  overflow: auto;\n  container-type: inline-size;\n  container-name: host;\n}\n\n.layout-main,\n.layout__panel {\n  block-size: 100%;\n  overflow: auto;\n}\n\n@container host (max-width: 768px) {\n  .layout.layout-main {\n    grid-template-columns: 1fr;\n    grid-template-rows: 1fr 1fr;\n  }\n}\n.panel-recent-kbs {\n  position: relative;\n}\n\n.recent-kbs,\n.recent-news {\n  display: grid;\n  grid-template-rows: auto 1fr;\n  gap: var(--mer-spacing--md);\n  overflow: auto;\n}\n.recent-kbs__header,\n.recent-news__header {\n  display: grid;\n  gap: var(--mer-spacing--md);\n}\n\n.kbs-container {\n  display: grid;\n  gap: var(--mer-spacing--xs);\n  overflow: auto;\n  grid-auto-rows: max-content;\n  container-type: inline-size;\n  container-name: kb-container;\n  animation: fadeIn var(--mer-timing--super-fast) forwards linear;\n}\n\n.card-kb {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mer-spacing--lg);\n  container-type: inline-size;\n  container-name: card-kb;\n}\n.card-kb__left-col {\n  display: flex;\n  align-items: center;\n  gap: var(--mer-spacing--sm);\n}\n\n@container kb-container (max-width: 360px) {\n  .card-kb {\n    align-items: center;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n    justify-content: start;\n  }\n}\ngx-ide-recent-news {\n  overflow: auto;\n}\n\n.panel-recent-news {\n  position: relative;\n}\n\n@keyframes exactMatchBright {\n  100% {\n    filter: brightness(1.25);\n  }\n}\n.exact-match-bright {\n  animation: exactMatchBright var(--mer-timing--super-fast) ease-in-out 4 alternate;\n}\n\ngx-ide-loader::part(loader-wrapper) {\n  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);\n  border-radius: var(--mer-border__radius--md);\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n}";
+/**
+ * @module constants
+ * @summary Useful constants
+ * @description
+ * Collection of useful date constants.
+ *
+ * The constants could be imported from `date-fns/constants`:
+ *
+ * ```ts
+ * import { maxTime, minTime } from "./constants/date-fns/constants";
+ *
+ * function isAllowedTime(time) {
+ *   return time <= maxTime && time >= minTime;
+ * }
+ * ```
+ */
+
+/**
+ * @constant
+ * @name minutesInMonth
+ * @summary Minutes in 1 month.
+ */
+const minutesInMonth = 43200;
+
+/**
+ * @constant
+ * @name minutesInDay
+ * @summary Minutes in 1 day.
+ */
+const minutesInDay = 1440;
+
+/**
+ * @constant
+ * @name constructFromSymbol
+ * @summary Symbol enabling Date extensions to inherit properties from the reference date.
+ *
+ * The symbol is used to enable the `constructFrom` function to construct a date
+ * using a reference date and a value. It allows to transfer extra properties
+ * from the reference date to the new date. It's useful for extensions like
+ * [`TZDate`](https://github.com/date-fns/tz) that accept a time zone as
+ * a constructor argument.
+ */
+const constructFromSymbol = Symbol.for("constructDateFrom");
+
+/**
+ * @name constructFrom
+ * @category Generic Helpers
+ * @summary Constructs a date using the reference date and the value
+ *
+ * @description
+ * The function constructs a new date using the constructor from the reference
+ * date and the given value. It helps to build generic functions that accept
+ * date extensions.
+ *
+ * It defaults to `Date` if the passed reference date is a number or a string.
+ *
+ * Starting from v3.7.0, it allows to construct a date using `[Symbol.for("constructDateFrom")]`
+ * enabling to transfer extra properties from the reference date to the new date.
+ * It's useful for extensions like [`TZDate`](https://github.com/date-fns/tz)
+ * that accept a time zone as a constructor argument.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The reference date to take constructor from
+ * @param value - The value to create the date
+ *
+ * @returns Date initialized using the given date and value
+ *
+ * @example
+ * import { constructFrom } from "./constructFrom/date-fns";
+ *
+ * // A function that clones a date preserving the original type
+ * function cloneDate<DateType extends Date>(date: DateType): DateType {
+ *   return constructFrom(
+ *     date, // Use constructor from the given date
+ *     date.getTime() // Use the date value to create a new date
+ *   );
+ * }
+ */
+function constructFrom(date, value) {
+  if (typeof date === "function") return date(value);
+
+  if (date && typeof date === "object" && constructFromSymbol in date)
+    return date[constructFromSymbol](value);
+
+  if (date instanceof Date) return new date.constructor(value);
+
+  return new Date(value);
+}
+
+/**
+ * @name toDate
+ * @category Common Helpers
+ * @summary Convert the given argument to an instance of Date.
+ *
+ * @description
+ * Convert the given argument to an instance of Date.
+ *
+ * If the argument is an instance of Date, the function returns its clone.
+ *
+ * If the argument is a number, it is treated as a timestamp.
+ *
+ * If the argument is none of the above, the function returns Invalid Date.
+ *
+ * Starting from v3.7.0, it clones a date using `[Symbol.for("constructDateFrom")]`
+ * enabling to transfer extra properties from the reference date to the new date.
+ * It's useful for extensions like [`TZDate`](https://github.com/date-fns/tz)
+ * that accept a time zone as a constructor argument.
+ *
+ * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
+ *
+ * @param argument - The value to convert
+ *
+ * @returns The parsed date in the local time zone
+ *
+ * @example
+ * // Clone the date:
+ * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
+ * //=> Tue Feb 11 2014 11:30:30
+ *
+ * @example
+ * // Convert the timestamp to date:
+ * const result = toDate(1392098430000)
+ * //=> Tue Feb 11 2014 11:30:30
+ */
+function toDate(argument, context) {
+  // [TODO] Get rid of `toDate` or `constructFrom`?
+  return constructFrom(context || argument, argument);
+}
+
+let defaultOptions = {};
+
+function getDefaultOptions() {
+  return defaultOptions;
+}
+
+/**
+ * The {@link startOfWeek} function options.
+ */
+
+/**
+ * @name startOfWeek
+ * @category Week Helpers
+ * @summary Return the start of a week for the given date.
+ *
+ * @description
+ * Return the start of a week for the given date.
+ * The result will be in the local timezone.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
+ *
+ * @param date - The original date
+ * @param options - An object with options
+ *
+ * @returns The start of a week
+ *
+ * @example
+ * // The start of a week for 2 September 2014 11:55:00:
+ * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Sun Aug 31 2014 00:00:00
+ *
+ * @example
+ * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00:
+ * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function startOfWeek(date, options) {
+  const defaultOptions = getDefaultOptions();
+  const weekStartsOn =
+    options?.weekStartsOn ??
+    options?.locale?.options?.weekStartsOn ??
+    defaultOptions.weekStartsOn ??
+    defaultOptions.locale?.options?.weekStartsOn ??
+    0;
+
+  const _date = toDate(date, options?.in);
+  const day = _date.getDay();
+  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
+
+  _date.setDate(_date.getDate() - diff);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+
+/**
+ * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
+ * They usually appear for dates that denote time before the timezones were introduced
+ * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
+ * and GMT+01:00:00 after that date)
+ *
+ * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
+ * which would lead to incorrect calculations.
+ *
+ * This function returns the timezone offset in milliseconds that takes seconds in account.
+ */
+function getTimezoneOffsetInMilliseconds(date) {
+  const _date = toDate(date);
+  const utcDate = new Date(
+    Date.UTC(
+      _date.getFullYear(),
+      _date.getMonth(),
+      _date.getDate(),
+      _date.getHours(),
+      _date.getMinutes(),
+      _date.getSeconds(),
+      _date.getMilliseconds(),
+    ),
+  );
+  utcDate.setUTCFullYear(_date.getFullYear());
+  return +date - +utcDate;
+}
+
+function normalizeDates(context, ...dates) {
+  const normalize = constructFrom.bind(
+    null,
+    context || dates.find((date) => typeof date === "object"),
+  );
+  return dates.map(normalize);
+}
+
+/**
+ * @name compareAsc
+ * @category Common Helpers
+ * @summary Compare the two dates and return -1, 0 or 1.
+ *
+ * @description
+ * Compare the two dates and return 1 if the first date is after the second,
+ * -1 if the first date is before the second or 0 if dates are equal.
+ *
+ * @param dateLeft - The first date to compare
+ * @param dateRight - The second date to compare
+ *
+ * @returns The result of the comparison
+ *
+ * @example
+ * // Compare 11 February 1987 and 10 July 1989:
+ * const result = compareAsc(new Date(1987, 1, 11), new Date(1989, 6, 10))
+ * //=> -1
+ *
+ * @example
+ * // Sort the array of dates:
+ * const result = [
+ *   new Date(1995, 6, 2),
+ *   new Date(1987, 1, 11),
+ *   new Date(1989, 6, 10)
+ * ].sort(compareAsc)
+ * //=> [
+ * //   Wed Feb 11 1987 00:00:00,
+ * //   Mon Jul 10 1989 00:00:00,
+ * //   Sun Jul 02 1995 00:00:00
+ * // ]
+ */
+function compareAsc(dateLeft, dateRight) {
+  const diff = +toDate(dateLeft) - +toDate(dateRight);
+
+  if (diff < 0) return -1;
+  else if (diff > 0) return 1;
+
+  // Return 0 if diff is 0; return NaN if diff is NaN
+  return diff;
+}
+
+/**
+ * @name constructNow
+ * @category Generic Helpers
+ * @summary Constructs a new current date using the passed value constructor.
+ * @pure false
+ *
+ * @description
+ * The function constructs a new current date using the constructor from
+ * the reference date. It helps to build generic functions that accept date
+ * extensions and use the current date.
+ *
+ * It defaults to `Date` if the passed reference date is a number or a string.
+ *
+ * @param date - The reference date to take constructor from
+ *
+ * @returns Current date initialized using the given date constructor
+ *
+ * @example
+ * import { constructNow, isSameDay } from 'date-fns'
+ *
+ * function isToday<DateType extends Date>(
+ *   date: DateArg<DateType>,
+ * ): boolean {
+ *   // If we were to use `new Date()` directly, the function would  behave
+ *   // differently in different timezones and return false for the same date.
+ *   return isSameDay(date, constructNow(date));
+ * }
+ */
+function constructNow(date) {
+  return constructFrom(date, Date.now());
+}
+
+/**
+ * The {@link differenceInCalendarMonths} function options.
+ */
+
+/**
+ * @name differenceInCalendarMonths
+ * @category Month Helpers
+ * @summary Get the number of calendar months between the given dates.
+ *
+ * @description
+ * Get the number of calendar months between the given dates.
+ *
+ * @param laterDate - The later date
+ * @param earlierDate - The earlier date
+ * @param options - An object with options
+ *
+ * @returns The number of calendar months
+ *
+ * @example
+ * // How many calendar months are between 31 January 2014 and 1 September 2014?
+ * const result = differenceInCalendarMonths(
+ *   new Date(2014, 8, 1),
+ *   new Date(2014, 0, 31)
+ * )
+ * //=> 8
+ */
+function differenceInCalendarMonths(laterDate, earlierDate, options) {
+  const [laterDate_, earlierDate_] = normalizeDates(
+    options?.in,
+    laterDate,
+    earlierDate,
+  );
+
+  const yearsDiff = laterDate_.getFullYear() - earlierDate_.getFullYear();
+  const monthsDiff = laterDate_.getMonth() - earlierDate_.getMonth();
+
+  return yearsDiff * 12 + monthsDiff;
+}
+
+function getRoundingMethod(method) {
+  return (number) => {
+    const round = method ? Math[method] : Math.trunc;
+    const result = round(number);
+    // Prevent negative zero
+    return result === 0 ? 0 : result;
+  };
+}
+
+/**
+ * @name differenceInMilliseconds
+ * @category Millisecond Helpers
+ * @summary Get the number of milliseconds between the given dates.
+ *
+ * @description
+ * Get the number of milliseconds between the given dates.
+ *
+ * @param laterDate - The later date
+ * @param earlierDate - The earlier date
+ *
+ * @returns The number of milliseconds
+ *
+ * @example
+ * // How many milliseconds are between
+ * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?
+ * const result = differenceInMilliseconds(
+ *   new Date(2014, 6, 2, 12, 30, 21, 700),
+ *   new Date(2014, 6, 2, 12, 30, 20, 600)
+ * )
+ * //=> 1100
+ */
+function differenceInMilliseconds(laterDate, earlierDate) {
+  return +toDate(laterDate) - +toDate(earlierDate);
+}
+
+/**
+ * The {@link endOfDay} function options.
+ */
+
+/**
+ * @name endOfDay
+ * @category Day Helpers
+ * @summary Return the end of a day for the given date.
+ *
+ * @description
+ * Return the end of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
+ *
+ * @param date - The original date
+ * @param options - An object with options
+ *
+ * @returns The end of a day
+ *
+ * @example
+ * // The end of a day for 2 September 2014 11:55:00:
+ * const result = endOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 23:59:59.999
+ */
+function endOfDay(date, options) {
+  const _date = toDate(date, options?.in);
+  _date.setHours(23, 59, 59, 999);
+  return _date;
+}
+
+/**
+ * The {@link endOfMonth} function options.
+ */
+
+/**
+ * @name endOfMonth
+ * @category Month Helpers
+ * @summary Return the end of a month for the given date.
+ *
+ * @description
+ * Return the end of a month for the given date.
+ * The result will be in the local timezone.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
+ *
+ * @param date - The original date
+ * @param options - An object with options
+ *
+ * @returns The end of a month
+ *
+ * @example
+ * // The end of a month for 2 September 2014 11:55:00:
+ * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 30 2014 23:59:59.999
+ */
+function endOfMonth(date, options) {
+  const _date = toDate(date, options?.in);
+  const month = _date.getMonth();
+  _date.setFullYear(_date.getFullYear(), month + 1, 0);
+  _date.setHours(23, 59, 59, 999);
+  return _date;
+}
+
+/**
+ * @name isLastDayOfMonth
+ * @category Month Helpers
+ * @summary Is the given date the last day of a month?
+ *
+ * @description
+ * Is the given date the last day of a month?
+ *
+ * @param date - The date to check
+ * @param options - An object with options
+ *
+ * @returns The date is the last day of a month
+ *
+ * @example
+ * // Is 28 February 2014 the last day of a month?
+ * const result = isLastDayOfMonth(new Date(2014, 1, 28))
+ * //=> true
+ */
+function isLastDayOfMonth(date, options) {
+  const _date = toDate(date, options?.in);
+  return +endOfDay(_date, options) === +endOfMonth(_date, options);
+}
+
+/**
+ * The {@link differenceInMonths} function options.
+ */
+
+/**
+ * @name differenceInMonths
+ * @category Month Helpers
+ * @summary Get the number of full months between the given dates.
+ *
+ * @param laterDate - The later date
+ * @param earlierDate - The earlier date
+ * @param options - An object with options
+ *
+ * @returns The number of full months
+ *
+ * @example
+ * // How many full months are between 31 January 2014 and 1 September 2014?
+ * const result = differenceInMonths(new Date(2014, 8, 1), new Date(2014, 0, 31))
+ * //=> 7
+ */
+function differenceInMonths(laterDate, earlierDate, options) {
+  const [laterDate_, workingLaterDate, earlierDate_] = normalizeDates(
+    options?.in,
+    laterDate,
+    laterDate,
+    earlierDate,
+  );
+
+  const sign = compareAsc(workingLaterDate, earlierDate_);
+  const difference = Math.abs(
+    differenceInCalendarMonths(workingLaterDate, earlierDate_),
+  );
+
+  if (difference < 1) return 0;
+
+  if (workingLaterDate.getMonth() === 1 && workingLaterDate.getDate() > 27)
+    workingLaterDate.setDate(30);
+
+  workingLaterDate.setMonth(workingLaterDate.getMonth() - sign * difference);
+
+  let isLastMonthNotFull = compareAsc(workingLaterDate, earlierDate_) === -sign;
+
+  if (
+    isLastDayOfMonth(laterDate_) &&
+    difference === 1 &&
+    compareAsc(laterDate_, earlierDate_) === 1
+  ) {
+    isLastMonthNotFull = false;
+  }
+
+  const result = sign * (difference - +isLastMonthNotFull);
+  return result === 0 ? 0 : result;
+}
+
+/**
+ * The {@link differenceInSeconds} function options.
+ */
+
+/**
+ * @name differenceInSeconds
+ * @category Second Helpers
+ * @summary Get the number of seconds between the given dates.
+ *
+ * @description
+ * Get the number of seconds between the given dates.
+ *
+ * @param laterDate - The later date
+ * @param earlierDate - The earlier date
+ * @param options - An object with options.
+ *
+ * @returns The number of seconds
+ *
+ * @example
+ * // How many seconds are between
+ * // 2 July 2014 12:30:07.999 and 2 July 2014 12:30:20.000?
+ * const result = differenceInSeconds(
+ *   new Date(2014, 6, 2, 12, 30, 20, 0),
+ *   new Date(2014, 6, 2, 12, 30, 7, 999)
+ * )
+ * //=> 12
+ */
+function differenceInSeconds(laterDate, earlierDate, options) {
+  const diff = differenceInMilliseconds(laterDate, earlierDate) / 1000;
+  return getRoundingMethod(options?.roundingMethod)(diff);
+}
+
+const formatDistanceLocale$2 = {
+  lessThanXSeconds: {
+    one: "less than a second",
+    other: "less than {{count}} seconds",
+  },
+
+  xSeconds: {
+    one: "1 second",
+    other: "{{count}} seconds",
+  },
+
+  halfAMinute: "half a minute",
+
+  lessThanXMinutes: {
+    one: "less than a minute",
+    other: "less than {{count}} minutes",
+  },
+
+  xMinutes: {
+    one: "1 minute",
+    other: "{{count}} minutes",
+  },
+
+  aboutXHours: {
+    one: "about 1 hour",
+    other: "about {{count}} hours",
+  },
+
+  xHours: {
+    one: "1 hour",
+    other: "{{count}} hours",
+  },
+
+  xDays: {
+    one: "1 day",
+    other: "{{count}} days",
+  },
+
+  aboutXWeeks: {
+    one: "about 1 week",
+    other: "about {{count}} weeks",
+  },
+
+  xWeeks: {
+    one: "1 week",
+    other: "{{count}} weeks",
+  },
+
+  aboutXMonths: {
+    one: "about 1 month",
+    other: "about {{count}} months",
+  },
+
+  xMonths: {
+    one: "1 month",
+    other: "{{count}} months",
+  },
+
+  aboutXYears: {
+    one: "about 1 year",
+    other: "about {{count}} years",
+  },
+
+  xYears: {
+    one: "1 year",
+    other: "{{count}} years",
+  },
+
+  overXYears: {
+    one: "over 1 year",
+    other: "over {{count}} years",
+  },
+
+  almostXYears: {
+    one: "almost 1 year",
+    other: "almost {{count}} years",
+  },
+};
+
+const formatDistance$3 = (token, count, options) => {
+  let result;
+
+  const tokenValue = formatDistanceLocale$2[token];
+  if (typeof tokenValue === "string") {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace("{{count}}", count.toString());
+  }
+
+  if (options?.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return "in " + result;
+    } else {
+      return result + " ago";
+    }
+  }
+
+  return result;
+};
+
+function buildFormatLongFn(args) {
+  return (options = {}) => {
+    // TODO: Remove String()
+    const width = options.width ? String(options.width) : args.defaultWidth;
+    const format = args.formats[width] || args.formats[args.defaultWidth];
+    return format;
+  };
+}
+
+const dateFormats$2 = {
+  full: "EEEE, MMMM do, y",
+  long: "MMMM do, y",
+  medium: "MMM d, y",
+  short: "MM/dd/yyyy",
+};
+
+const timeFormats$2 = {
+  full: "h:mm:ss a zzzz",
+  long: "h:mm:ss a z",
+  medium: "h:mm:ss a",
+  short: "h:mm a",
+};
+
+const dateTimeFormats$2 = {
+  full: "{{date}} 'at' {{time}}",
+  long: "{{date}} 'at' {{time}}",
+  medium: "{{date}}, {{time}}",
+  short: "{{date}}, {{time}}",
+};
+
+const formatLong$2 = {
+  date: buildFormatLongFn({
+    formats: dateFormats$2,
+    defaultWidth: "full",
+  }),
+
+  time: buildFormatLongFn({
+    formats: timeFormats$2,
+    defaultWidth: "full",
+  }),
+
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats$2,
+    defaultWidth: "full",
+  }),
+};
+
+const formatRelativeLocale$2 = {
+  lastWeek: "'last' eeee 'at' p",
+  yesterday: "'yesterday at' p",
+  today: "'today at' p",
+  tomorrow: "'tomorrow at' p",
+  nextWeek: "eeee 'at' p",
+  other: "P",
+};
+
+const formatRelative$2 = (token, _date, _baseDate, _options) =>
+  formatRelativeLocale$2[token];
+
+/**
+ * The localize function argument callback which allows to convert raw value to
+ * the actual type.
+ *
+ * @param value - The value to convert
+ *
+ * @returns The converted value
+ */
+
+/**
+ * The map of localized values for each width.
+ */
+
+/**
+ * The index type of the locale unit value. It types conversion of units of
+ * values that don't start at 0 (i.e. quarters).
+ */
+
+/**
+ * Converts the unit value to the tuple of values.
+ */
+
+/**
+ * The tuple of localized era values. The first element represents BC,
+ * the second element represents AD.
+ */
+
+/**
+ * The tuple of localized quarter values. The first element represents Q1.
+ */
+
+/**
+ * The tuple of localized day values. The first element represents Sunday.
+ */
+
+/**
+ * The tuple of localized month values. The first element represents January.
+ */
+
+function buildLocalizeFn(args) {
+  return (value, options) => {
+    const context = options?.context ? String(options.context) : "standalone";
+
+    let valuesArray;
+    if (context === "formatting" && args.formattingValues) {
+      const defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
+      const width = options?.width ? String(options.width) : defaultWidth;
+
+      valuesArray =
+        args.formattingValues[width] || args.formattingValues[defaultWidth];
+    } else {
+      const defaultWidth = args.defaultWidth;
+      const width = options?.width ? String(options.width) : args.defaultWidth;
+
+      valuesArray = args.values[width] || args.values[defaultWidth];
+    }
+    const index = args.argumentCallback ? args.argumentCallback(value) : value;
+
+    // @ts-expect-error - For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
+    return valuesArray[index];
+  };
+}
+
+const eraValues$2 = {
+  narrow: ["B", "A"],
+  abbreviated: ["BC", "AD"],
+  wide: ["Before Christ", "Anno Domini"],
+};
+
+const quarterValues$2 = {
+  narrow: ["1", "2", "3", "4"],
+  abbreviated: ["Q1", "Q2", "Q3", "Q4"],
+  wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"],
+};
+
+// Note: in English, the names of days of the week and months are capitalized.
+// If you are making a new locale based on this one, check if the same is true for the language you're working on.
+// Generally, formatted dates should look like they are in the middle of a sentence,
+// e.g. in Spanish language the weekdays and months should be in the lowercase.
+const monthValues$2 = {
+  narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
+  abbreviated: [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ],
+
+  wide: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ],
+};
+
+const dayValues$2 = {
+  narrow: ["S", "M", "T", "W", "T", "F", "S"],
+  short: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+  abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  wide: [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ],
+};
+
+const dayPeriodValues$2 = {
+  narrow: {
+    am: "a",
+    pm: "p",
+    midnight: "mi",
+    noon: "n",
+    morning: "morning",
+    afternoon: "afternoon",
+    evening: "evening",
+    night: "night",
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "morning",
+    afternoon: "afternoon",
+    evening: "evening",
+    night: "night",
+  },
+  wide: {
+    am: "a.m.",
+    pm: "p.m.",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "morning",
+    afternoon: "afternoon",
+    evening: "evening",
+    night: "night",
+  },
+};
+
+const formattingDayPeriodValues$2 = {
+  narrow: {
+    am: "a",
+    pm: "p",
+    midnight: "mi",
+    noon: "n",
+    morning: "in the morning",
+    afternoon: "in the afternoon",
+    evening: "in the evening",
+    night: "at night",
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "in the morning",
+    afternoon: "in the afternoon",
+    evening: "in the evening",
+    night: "at night",
+  },
+  wide: {
+    am: "a.m.",
+    pm: "p.m.",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "in the morning",
+    afternoon: "in the afternoon",
+    evening: "in the evening",
+    night: "at night",
+  },
+};
+
+const ordinalNumber$2 = (dirtyNumber, _options) => {
+  const number = Number(dirtyNumber);
+
+  // If ordinal numbers depend on context, for example,
+  // if they are different for different grammatical genders,
+  // use `options.unit`.
+  //
+  // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
+  // 'day', 'hour', 'minute', 'second'.
+
+  const rem100 = number % 100;
+  if (rem100 > 20 || rem100 < 10) {
+    switch (rem100 % 10) {
+      case 1:
+        return number + "st";
+      case 2:
+        return number + "nd";
+      case 3:
+        return number + "rd";
+    }
+  }
+  return number + "th";
+};
+
+const localize$2 = {
+  ordinalNumber: ordinalNumber$2,
+
+  era: buildLocalizeFn({
+    values: eraValues$2,
+    defaultWidth: "wide",
+  }),
+
+  quarter: buildLocalizeFn({
+    values: quarterValues$2,
+    defaultWidth: "wide",
+    argumentCallback: (quarter) => quarter - 1,
+  }),
+
+  month: buildLocalizeFn({
+    values: monthValues$2,
+    defaultWidth: "wide",
+  }),
+
+  day: buildLocalizeFn({
+    values: dayValues$2,
+    defaultWidth: "wide",
+  }),
+
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues$2,
+    defaultWidth: "wide",
+    formattingValues: formattingDayPeriodValues$2,
+    defaultFormattingWidth: "wide",
+  }),
+};
+
+function buildMatchFn(args) {
+  return (string, options = {}) => {
+    const width = options.width;
+
+    const matchPattern =
+      (width && args.matchPatterns[width]) ||
+      args.matchPatterns[args.defaultMatchWidth];
+    const matchResult = string.match(matchPattern);
+
+    if (!matchResult) {
+      return null;
+    }
+    const matchedString = matchResult[0];
+
+    const parsePatterns =
+      (width && args.parsePatterns[width]) ||
+      args.parsePatterns[args.defaultParseWidth];
+
+    const key = Array.isArray(parsePatterns)
+      ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString))
+      : // [TODO] -- I challenge you to fix the type
+        findKey(parsePatterns, (pattern) => pattern.test(matchedString));
+
+    let value;
+
+    value = args.valueCallback ? args.valueCallback(key) : key;
+    value = options.valueCallback
+      ? // [TODO] -- I challenge you to fix the type
+        options.valueCallback(value)
+      : value;
+
+    const rest = string.slice(matchedString.length);
+
+    return { value, rest };
+  };
+}
+
+function findKey(object, predicate) {
+  for (const key in object) {
+    if (
+      Object.prototype.hasOwnProperty.call(object, key) &&
+      predicate(object[key])
+    ) {
+      return key;
+    }
+  }
+  return undefined;
+}
+
+function findIndex(array, predicate) {
+  for (let key = 0; key < array.length; key++) {
+    if (predicate(array[key])) {
+      return key;
+    }
+  }
+  return undefined;
+}
+
+function buildMatchPatternFn(args) {
+  return (string, options = {}) => {
+    const matchResult = string.match(args.matchPattern);
+    if (!matchResult) return null;
+    const matchedString = matchResult[0];
+
+    const parseResult = string.match(args.parsePattern);
+    if (!parseResult) return null;
+    let value = args.valueCallback
+      ? args.valueCallback(parseResult[0])
+      : parseResult[0];
+
+    // [TODO] I challenge you to fix the type
+    value = options.valueCallback ? options.valueCallback(value) : value;
+
+    const rest = string.slice(matchedString.length);
+
+    return { value, rest };
+  };
+}
+
+const matchOrdinalNumberPattern$2 = /^(\d+)(th|st|nd|rd)?/i;
+const parseOrdinalNumberPattern$2 = /\d+/i;
+
+const matchEraPatterns$2 = {
+  narrow: /^(b|a)/i,
+  abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
+  wide: /^(before christ|before common era|anno domini|common era)/i,
+};
+const parseEraPatterns$2 = {
+  any: [/^b/i, /^(a|c)/i],
+};
+
+const matchQuarterPatterns$2 = {
+  narrow: /^[1234]/i,
+  abbreviated: /^q[1234]/i,
+  wide: /^[1234](th|st|nd|rd)? quarter/i,
+};
+const parseQuarterPatterns$2 = {
+  any: [/1/i, /2/i, /3/i, /4/i],
+};
+
+const matchMonthPatterns$2 = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
+  wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i,
+};
+const parseMonthPatterns$2 = {
+  narrow: [
+    /^j/i,
+    /^f/i,
+    /^m/i,
+    /^a/i,
+    /^m/i,
+    /^j/i,
+    /^j/i,
+    /^a/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i,
+  ],
+
+  any: [
+    /^ja/i,
+    /^f/i,
+    /^mar/i,
+    /^ap/i,
+    /^may/i,
+    /^jun/i,
+    /^jul/i,
+    /^au/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i,
+  ],
+};
+
+const matchDayPatterns$2 = {
+  narrow: /^[smtwf]/i,
+  short: /^(su|mo|tu|we|th|fr|sa)/i,
+  abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
+  wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i,
+};
+const parseDayPatterns$2 = {
+  narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
+  any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i],
+};
+
+const matchDayPeriodPatterns$2 = {
+  narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
+  any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i,
+};
+const parseDayPeriodPatterns$2 = {
+  any: {
+    am: /^a/i,
+    pm: /^p/i,
+    midnight: /^mi/i,
+    noon: /^no/i,
+    morning: /morning/i,
+    afternoon: /afternoon/i,
+    evening: /evening/i,
+    night: /night/i,
+  },
+};
+
+const match$2 = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern$2,
+    parsePattern: parseOrdinalNumberPattern$2,
+    valueCallback: (value) => parseInt(value, 10),
+  }),
+
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns$2,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseEraPatterns$2,
+    defaultParseWidth: "any",
+  }),
+
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns$2,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseQuarterPatterns$2,
+    defaultParseWidth: "any",
+    valueCallback: (index) => index + 1,
+  }),
+
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns$2,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseMonthPatterns$2,
+    defaultParseWidth: "any",
+  }),
+
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns$2,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseDayPatterns$2,
+    defaultParseWidth: "any",
+  }),
+
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns$2,
+    defaultMatchWidth: "any",
+    parsePatterns: parseDayPeriodPatterns$2,
+    defaultParseWidth: "any",
+  }),
+};
+
+/**
+ * @category Locales
+ * @summary English locale (United States).
+ * @language English
+ * @iso-639-2 eng
+ * @author Sasha Koss [@kossnocorp](https://github.com/kossnocorp)
+ * @author Lesha Koss [@leshakoss](https://github.com/leshakoss)
+ */
+const enUS = {
+  code: "en-US",
+  formatDistance: formatDistance$3,
+  formatLong: formatLong$2,
+  formatRelative: formatRelative$2,
+  localize: localize$2,
+  match: match$2,
+  options: {
+    weekStartsOn: 0 /* Sunday */,
+    firstWeekContainsDate: 1,
+  },
+};
+
+/**
+ * The {@link formatDistance} function options.
+ */
+
+/**
+ * @name formatDistance
+ * @category Common Helpers
+ * @summary Return the distance between the given dates in words.
+ *
+ * @description
+ * Return the distance between the given dates in words.
+ *
+ * | Distance between dates                                            | Result              |
+ * |-------------------------------------------------------------------|---------------------|
+ * | 0 ... 30 secs                                                     | less than a minute  |
+ * | 30 secs ... 1 min 30 secs                                         | 1 minute            |
+ * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |
+ * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |
+ * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |
+ * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |
+ * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |
+ * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |
+ * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |
+ * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |
+ * | 1 yr ... 1 yr 3 months                                            | about 1 year        |
+ * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |
+ * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |
+ * | N yrs ... N yrs 3 months                                          | about N years       |
+ * | N yrs 3 months ... N yrs 9 months                                 | over N years        |
+ * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |
+ *
+ * With `options.includeSeconds == true`:
+ * | Distance between dates | Result               |
+ * |------------------------|----------------------|
+ * | 0 secs ... 5 secs      | less than 5 seconds  |
+ * | 5 secs ... 10 secs     | less than 10 seconds |
+ * | 10 secs ... 20 secs    | less than 20 seconds |
+ * | 20 secs ... 40 secs    | half a minute        |
+ * | 40 secs ... 60 secs    | less than a minute   |
+ * | 60 secs ... 90 secs    | 1 minute             |
+ *
+ * @param laterDate - The date
+ * @param earlierDate - The date to compare with
+ * @param options - An object with options
+ *
+ * @returns The distance in words
+ *
+ * @throws `date` must not be Invalid Date
+ * @throws `baseDate` must not be Invalid Date
+ * @throws `options.locale` must contain `formatDistance` property
+ *
+ * @example
+ * // What is the distance between 2 July 2014 and 1 January 2015?
+ * const result = formatDistance(new Date(2014, 6, 2), new Date(2015, 0, 1))
+ * //=> '6 months'
+ *
+ * @example
+ * // What is the distance between 1 January 2015 00:00:15
+ * // and 1 January 2015 00:00:00, including seconds?
+ * const result = formatDistance(
+ *   new Date(2015, 0, 1, 0, 0, 15),
+ *   new Date(2015, 0, 1, 0, 0, 0),
+ *   { includeSeconds: true }
+ * )
+ * //=> 'less than 20 seconds'
+ *
+ * @example
+ * // What is the distance from 1 January 2016
+ * // to 1 January 2015, with a suffix?
+ * const result = formatDistance(new Date(2015, 0, 1), new Date(2016, 0, 1), {
+ *   addSuffix: true
+ * })
+ * //=> 'about 1 year ago'
+ *
+ * @example
+ * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?
+ * import { eoLocale } from 'date-fns/locale/eo'
+ * const result = formatDistance(new Date(2016, 7, 1), new Date(2015, 0, 1), {
+ *   locale: eoLocale
+ * })
+ * //=> 'pli ol 1 jaro'
+ */
+function formatDistance$2(laterDate, earlierDate, options) {
+  const defaultOptions = getDefaultOptions();
+  const locale = options?.locale ?? defaultOptions.locale ?? enUS;
+  const minutesInAlmostTwoDays = 2520;
+
+  const comparison = compareAsc(laterDate, earlierDate);
+
+  if (isNaN(comparison)) throw new RangeError("Invalid time value");
+
+  const localizeOptions = Object.assign({}, options, {
+    addSuffix: options?.addSuffix,
+    comparison: comparison,
+  });
+
+  const [laterDate_, earlierDate_] = normalizeDates(
+    options?.in,
+    ...(comparison > 0 ? [earlierDate, laterDate] : [laterDate, earlierDate]),
+  );
+
+  const seconds = differenceInSeconds(earlierDate_, laterDate_);
+  const offsetInSeconds =
+    (getTimezoneOffsetInMilliseconds(earlierDate_) -
+      getTimezoneOffsetInMilliseconds(laterDate_)) /
+    1000;
+  const minutes = Math.round((seconds - offsetInSeconds) / 60);
+  let months;
+
+  // 0 up to 2 mins
+  if (minutes < 2) {
+    if (options?.includeSeconds) {
+      if (seconds < 5) {
+        return locale.formatDistance("lessThanXSeconds", 5, localizeOptions);
+      } else if (seconds < 10) {
+        return locale.formatDistance("lessThanXSeconds", 10, localizeOptions);
+      } else if (seconds < 20) {
+        return locale.formatDistance("lessThanXSeconds", 20, localizeOptions);
+      } else if (seconds < 40) {
+        return locale.formatDistance("halfAMinute", 0, localizeOptions);
+      } else if (seconds < 60) {
+        return locale.formatDistance("lessThanXMinutes", 1, localizeOptions);
+      } else {
+        return locale.formatDistance("xMinutes", 1, localizeOptions);
+      }
+    } else {
+      if (minutes === 0) {
+        return locale.formatDistance("lessThanXMinutes", 1, localizeOptions);
+      } else {
+        return locale.formatDistance("xMinutes", minutes, localizeOptions);
+      }
+    }
+
+    // 2 mins up to 0.75 hrs
+  } else if (minutes < 45) {
+    return locale.formatDistance("xMinutes", minutes, localizeOptions);
+
+    // 0.75 hrs up to 1.5 hrs
+  } else if (minutes < 90) {
+    return locale.formatDistance("aboutXHours", 1, localizeOptions);
+
+    // 1.5 hrs up to 24 hrs
+  } else if (minutes < minutesInDay) {
+    const hours = Math.round(minutes / 60);
+    return locale.formatDistance("aboutXHours", hours, localizeOptions);
+
+    // 1 day up to 1.75 days
+  } else if (minutes < minutesInAlmostTwoDays) {
+    return locale.formatDistance("xDays", 1, localizeOptions);
+
+    // 1.75 days up to 30 days
+  } else if (minutes < minutesInMonth) {
+    const days = Math.round(minutes / minutesInDay);
+    return locale.formatDistance("xDays", days, localizeOptions);
+
+    // 1 month up to 2 months
+  } else if (minutes < minutesInMonth * 2) {
+    months = Math.round(minutes / minutesInMonth);
+    return locale.formatDistance("aboutXMonths", months, localizeOptions);
+  }
+
+  months = differenceInMonths(earlierDate_, laterDate_);
+
+  // 2 months up to 12 months
+  if (months < 12) {
+    const nearestMonth = Math.round(minutes / minutesInMonth);
+    return locale.formatDistance("xMonths", nearestMonth, localizeOptions);
+
+    // 1 year up to max Date
+  } else {
+    const monthsSinceStartOfYear = months % 12;
+    const years = Math.trunc(months / 12);
+
+    // N years up to 1 years 3 months
+    if (monthsSinceStartOfYear < 3) {
+      return locale.formatDistance("aboutXYears", years, localizeOptions);
+
+      // N years 3 months up to N years 9 months
+    } else if (monthsSinceStartOfYear < 9) {
+      return locale.formatDistance("overXYears", years, localizeOptions);
+
+      // N years 9 months up to N year 12 months
+    } else {
+      return locale.formatDistance("almostXYears", years + 1, localizeOptions);
+    }
+  }
+}
+
+/**
+ * The {@link formatDistanceToNow} function options.
+ */
+
+/**
+ * @name formatDistanceToNow
+ * @category Common Helpers
+ * @summary Return the distance between the given date and now in words.
+ * @pure false
+ *
+ * @description
+ * Return the distance between the given date and now in words.
+ *
+ * | Distance to now                                                   | Result              |
+ * |-------------------------------------------------------------------|---------------------|
+ * | 0 ... 30 secs                                                     | less than a minute  |
+ * | 30 secs ... 1 min 30 secs                                         | 1 minute            |
+ * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |
+ * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |
+ * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |
+ * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |
+ * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |
+ * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |
+ * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |
+ * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |
+ * | 1 yr ... 1 yr 3 months                                            | about 1 year        |
+ * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |
+ * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |
+ * | N yrs ... N yrs 3 months                                          | about N years       |
+ * | N yrs 3 months ... N yrs 9 months                                 | over N years        |
+ * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |
+ *
+ * With `options.includeSeconds == true`:
+ * | Distance to now     | Result               |
+ * |---------------------|----------------------|
+ * | 0 secs ... 5 secs   | less than 5 seconds  |
+ * | 5 secs ... 10 secs  | less than 10 seconds |
+ * | 10 secs ... 20 secs | less than 20 seconds |
+ * | 20 secs ... 40 secs | half a minute        |
+ * | 40 secs ... 60 secs | less than a minute   |
+ * | 60 secs ... 90 secs | 1 minute             |
+ *
+ * @param date - The given date
+ * @param options - The object with options
+ *
+ * @returns The distance in words
+ *
+ * @throws `date` must not be Invalid Date
+ * @throws `options.locale` must contain `formatDistance` property
+ *
+ * @example
+ * // If today is 1 January 2015, what is the distance to 2 July 2014?
+ * const result = formatDistanceToNow(
+ *   new Date(2014, 6, 2)
+ * )
+ * //=> '6 months'
+ *
+ * @example
+ * // If now is 1 January 2015 00:00:00,
+ * // what is the distance to 1 January 2015 00:00:15, including seconds?
+ * const result = formatDistanceToNow(
+ *   new Date(2015, 0, 1, 0, 0, 15),
+ *   {includeSeconds: true}
+ * )
+ * //=> 'less than 20 seconds'
+ *
+ * @example
+ * // If today is 1 January 2015,
+ * // what is the distance to 1 January 2016, with a suffix?
+ * const result = formatDistanceToNow(
+ *   new Date(2016, 0, 1),
+ *   {addSuffix: true}
+ * )
+ * //=> 'in about 1 year'
+ *
+ * @example
+ * // If today is 1 January 2015,
+ * // what is the distance to 1 August 2016 in Esperanto?
+ * const eoLocale = require('date-fns/locale/eo')
+ * const result = formatDistanceToNow(
+ *   new Date(2016, 7, 1),
+ *   {locale: eoLocale}
+ * )
+ * //=> 'pli ol 1 jaro'
+ */
+function formatDistanceToNow(date, options) {
+  return formatDistance$2(date, constructNow(date), options);
+}
+
+/**
+ * The {@link isSameWeek} function options.
+ */
+
+/**
+ * @name isSameWeek
+ * @category Week Helpers
+ * @summary Are the given dates in the same week (and month and year)?
+ *
+ * @description
+ * Are the given dates in the same week (and month and year)?
+ *
+ * @param laterDate - The first date to check
+ * @param earlierDate - The second date to check
+ * @param options - An object with options
+ *
+ * @returns The dates are in the same week (and month and year)
+ *
+ * @example
+ * // Are 31 August 2014 and 4 September 2014 in the same week?
+ * const result = isSameWeek(new Date(2014, 7, 31), new Date(2014, 8, 4))
+ * //=> true
+ *
+ * @example
+ * // If week starts with Monday,
+ * // are 31 August 2014 and 4 September 2014 in the same week?
+ * const result = isSameWeek(new Date(2014, 7, 31), new Date(2014, 8, 4), {
+ *   weekStartsOn: 1
+ * })
+ * //=> false
+ *
+ * @example
+ * // Are 1 January 2014 and 1 January 2015 in the same week?
+ * const result = isSameWeek(new Date(2014, 0, 1), new Date(2015, 0, 1))
+ * //=> false
+ */
+function isSameWeek(laterDate, earlierDate, options) {
+  const [laterDate_, earlierDate_] = normalizeDates(
+    options?.in,
+    laterDate,
+    earlierDate,
+  );
+  return (
+    +startOfWeek(laterDate_, options) === +startOfWeek(earlierDate_, options)
+  );
+}
+
+const formatDistanceLocale$1 = {
+  lessThanXSeconds: {
+    one: "1秒未満",
+    other: "{{count}}秒未満",
+    oneWithSuffix: "約1秒",
+    otherWithSuffix: "約{{count}}秒",
+  },
+
+  xSeconds: {
+    one: "1秒",
+    other: "{{count}}秒",
+  },
+
+  halfAMinute: "30秒",
+
+  lessThanXMinutes: {
+    one: "1分未満",
+    other: "{{count}}分未満",
+    oneWithSuffix: "約1分",
+    otherWithSuffix: "約{{count}}分",
+  },
+
+  xMinutes: {
+    one: "1分",
+    other: "{{count}}分",
+  },
+
+  aboutXHours: {
+    one: "約1時間",
+    other: "約{{count}}時間",
+  },
+
+  xHours: {
+    one: "1時間",
+    other: "{{count}}時間",
+  },
+
+  xDays: {
+    one: "1日",
+    other: "{{count}}日",
+  },
+
+  aboutXWeeks: {
+    one: "約1週間",
+    other: "約{{count}}週間",
+  },
+
+  xWeeks: {
+    one: "1週間",
+    other: "{{count}}週間",
+  },
+
+  aboutXMonths: {
+    one: "約1か月",
+    other: "約{{count}}か月",
+  },
+
+  xMonths: {
+    one: "1か月",
+    other: "{{count}}か月",
+  },
+
+  aboutXYears: {
+    one: "約1年",
+    other: "約{{count}}年",
+  },
+
+  xYears: {
+    one: "1年",
+    other: "{{count}}年",
+  },
+
+  overXYears: {
+    one: "1年以上",
+    other: "{{count}}年以上",
+  },
+
+  almostXYears: {
+    one: "1年近く",
+    other: "{{count}}年近く",
+  },
+};
+
+const formatDistance$1 = (token, count, options) => {
+  options = options || {};
+
+  let result;
+
+  const tokenValue = formatDistanceLocale$1[token];
+  if (typeof tokenValue === "string") {
+    result = tokenValue;
+  } else if (count === 1) {
+    if (options.addSuffix && tokenValue.oneWithSuffix) {
+      result = tokenValue.oneWithSuffix;
+    } else {
+      result = tokenValue.one;
+    }
+  } else {
+    if (options.addSuffix && tokenValue.otherWithSuffix) {
+      result = tokenValue.otherWithSuffix.replace("{{count}}", String(count));
+    } else {
+      result = tokenValue.other.replace("{{count}}", String(count));
+    }
+  }
+
+  if (options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return result + "後";
+    } else {
+      return result + "前";
+    }
+  }
+
+  return result;
+};
+
+const dateFormats$1 = {
+  full: "y年M月d日EEEE",
+  long: "y年M月d日",
+  medium: "y/MM/dd",
+  short: "y/MM/dd",
+};
+
+const timeFormats$1 = {
+  full: "H時mm分ss秒 zzzz",
+  long: "H:mm:ss z",
+  medium: "H:mm:ss",
+  short: "H:mm",
+};
+
+const dateTimeFormats$1 = {
+  full: "{{date}} {{time}}",
+  long: "{{date}} {{time}}",
+  medium: "{{date}} {{time}}",
+  short: "{{date}} {{time}}",
+};
+
+const formatLong$1 = {
+  date: buildFormatLongFn({
+    formats: dateFormats$1,
+    defaultWidth: "full",
+  }),
+
+  time: buildFormatLongFn({
+    formats: timeFormats$1,
+    defaultWidth: "full",
+  }),
+
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats$1,
+    defaultWidth: "full",
+  }),
+};
+
+const formatRelativeLocale$1 = {
+  lastWeek: "先週のeeeeのp",
+  yesterday: "昨日のp",
+  today: "今日のp",
+  tomorrow: "明日のp",
+  nextWeek: "翌週のeeeeのp",
+  other: "P",
+};
+
+const formatRelative$1 = (token, _date, _baseDate, _options) => {
+  return formatRelativeLocale$1[token];
+};
+
+const eraValues$1 = {
+  narrow: ["BC", "AC"],
+  abbreviated: ["紀元前", "西暦"],
+  wide: ["紀元前", "西暦"],
+};
+
+const quarterValues$1 = {
+  narrow: ["1", "2", "3", "4"],
+  abbreviated: ["Q1", "Q2", "Q3", "Q4"],
+  wide: ["第1四半期", "第2四半期", "第3四半期", "第4四半期"],
+};
+
+const monthValues$1 = {
+  narrow: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
+
+  abbreviated: [
+    "1月",
+    "2月",
+    "3月",
+    "4月",
+    "5月",
+    "6月",
+    "7月",
+    "8月",
+    "9月",
+    "10月",
+    "11月",
+    "12月",
+  ],
+
+  wide: [
+    "1月",
+    "2月",
+    "3月",
+    "4月",
+    "5月",
+    "6月",
+    "7月",
+    "8月",
+    "9月",
+    "10月",
+    "11月",
+    "12月",
+  ],
+};
+
+const dayValues$1 = {
+  narrow: ["日", "月", "火", "水", "木", "金", "土"],
+  short: ["日", "月", "火", "水", "木", "金", "土"],
+  abbreviated: ["日", "月", "火", "水", "木", "金", "土"],
+  wide: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
+};
+
+const dayPeriodValues$1 = {
+  narrow: {
+    am: "午前",
+    pm: "午後",
+    midnight: "深夜",
+    noon: "正午",
+    morning: "朝",
+    afternoon: "午後",
+    evening: "夜",
+    night: "深夜",
+  },
+  abbreviated: {
+    am: "午前",
+    pm: "午後",
+    midnight: "深夜",
+    noon: "正午",
+    morning: "朝",
+    afternoon: "午後",
+    evening: "夜",
+    night: "深夜",
+  },
+  wide: {
+    am: "午前",
+    pm: "午後",
+    midnight: "深夜",
+    noon: "正午",
+    morning: "朝",
+    afternoon: "午後",
+    evening: "夜",
+    night: "深夜",
+  },
+};
+const formattingDayPeriodValues$1 = {
+  narrow: {
+    am: "午前",
+    pm: "午後",
+    midnight: "深夜",
+    noon: "正午",
+    morning: "朝",
+    afternoon: "午後",
+    evening: "夜",
+    night: "深夜",
+  },
+  abbreviated: {
+    am: "午前",
+    pm: "午後",
+    midnight: "深夜",
+    noon: "正午",
+    morning: "朝",
+    afternoon: "午後",
+    evening: "夜",
+    night: "深夜",
+  },
+  wide: {
+    am: "午前",
+    pm: "午後",
+    midnight: "深夜",
+    noon: "正午",
+    morning: "朝",
+    afternoon: "午後",
+    evening: "夜",
+    night: "深夜",
+  },
+};
+
+const ordinalNumber$1 = (dirtyNumber, options) => {
+  const number = Number(dirtyNumber);
+  const unit = String(options?.unit);
+
+  switch (unit) {
+    case "year":
+      return `${number}年`;
+    case "quarter":
+      return `第${number}四半期`;
+    case "month":
+      return `${number}月`;
+    case "week":
+      return `第${number}週`;
+    case "date":
+      return `${number}日`;
+    case "hour":
+      return `${number}時`;
+    case "minute":
+      return `${number}分`;
+    case "second":
+      return `${number}秒`;
+    default:
+      return `${number}`;
+  }
+};
+
+const localize$1 = {
+  ordinalNumber: ordinalNumber$1,
+
+  era: buildLocalizeFn({
+    values: eraValues$1,
+    defaultWidth: "wide",
+  }),
+
+  quarter: buildLocalizeFn({
+    values: quarterValues$1,
+    defaultWidth: "wide",
+    argumentCallback: (quarter) => Number(quarter) - 1,
+  }),
+
+  month: buildLocalizeFn({
+    values: monthValues$1,
+    defaultWidth: "wide",
+  }),
+
+  day: buildLocalizeFn({
+    values: dayValues$1,
+    defaultWidth: "wide",
+  }),
+
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues$1,
+    defaultWidth: "wide",
+    formattingValues: formattingDayPeriodValues$1,
+    defaultFormattingWidth: "wide",
+  }),
+};
+
+const matchOrdinalNumberPattern$1 = /^第?\d+(年|四半期|月|週|日|時|分|秒)?/i;
+const parseOrdinalNumberPattern$1 = /\d+/i;
+
+const matchEraPatterns$1 = {
+  narrow: /^(B\.?C\.?|A\.?D\.?)/i,
+  abbreviated: /^(紀元[前後]|西暦)/i,
+  wide: /^(紀元[前後]|西暦)/i,
+};
+const parseEraPatterns$1 = {
+  narrow: [/^B/i, /^A/i],
+  any: [/^(紀元前)/i, /^(西暦|紀元後)/i],
+};
+
+const matchQuarterPatterns$1 = {
+  narrow: /^[1234]/i,
+  abbreviated: /^Q[1234]/i,
+  wide: /^第[1234一二三四１２３４]四半期/i,
+};
+const parseQuarterPatterns$1 = {
+  any: [/(1|一|１)/i, /(2|二|２)/i, /(3|三|３)/i, /(4|四|４)/i],
+};
+
+const matchMonthPatterns$1 = {
+  narrow: /^([123456789]|1[012])/,
+  abbreviated: /^([123456789]|1[012])月/i,
+  wide: /^([123456789]|1[012])月/i,
+};
+const parseMonthPatterns$1 = {
+  any: [
+    /^1\D/,
+    /^2/,
+    /^3/,
+    /^4/,
+    /^5/,
+    /^6/,
+    /^7/,
+    /^8/,
+    /^9/,
+    /^10/,
+    /^11/,
+    /^12/,
+  ],
+};
+
+const matchDayPatterns$1 = {
+  narrow: /^[日月火水木金土]/,
+  short: /^[日月火水木金土]/,
+  abbreviated: /^[日月火水木金土]/,
+  wide: /^[日月火水木金土]曜日/,
+};
+const parseDayPatterns$1 = {
+  any: [/^日/, /^月/, /^火/, /^水/, /^木/, /^金/, /^土/],
+};
+
+const matchDayPeriodPatterns$1 = {
+  any: /^(AM|PM|午前|午後|正午|深夜|真夜中|夜|朝)/i,
+};
+const parseDayPeriodPatterns$1 = {
+  any: {
+    am: /^(A|午前)/i,
+    pm: /^(P|午後)/i,
+    midnight: /^深夜|真夜中/i,
+    noon: /^正午/i,
+    morning: /^朝/i,
+    afternoon: /^午後/i,
+    evening: /^夜/i,
+    night: /^深夜/i,
+  },
+};
+
+const match$1 = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern$1,
+    parsePattern: parseOrdinalNumberPattern$1,
+    valueCallback: function (value) {
+      return parseInt(value, 10);
+    },
+  }),
+
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns$1,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseEraPatterns$1,
+    defaultParseWidth: "any",
+  }),
+
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns$1,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseQuarterPatterns$1,
+    defaultParseWidth: "any",
+    valueCallback: (index) => index + 1,
+  }),
+
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns$1,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseMonthPatterns$1,
+    defaultParseWidth: "any",
+  }),
+
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns$1,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseDayPatterns$1,
+    defaultParseWidth: "any",
+  }),
+
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns$1,
+    defaultMatchWidth: "any",
+    parsePatterns: parseDayPeriodPatterns$1,
+    defaultParseWidth: "any",
+  }),
+};
+
+/**
+ * @category Locales
+ * @summary Japanese locale.
+ * @language Japanese
+ * @iso-639-2 jpn
+ * @author Thomas Eilmsteiner [@DeMuu](https://github.com/DeMuu)
+ * @author Yamagishi Kazutoshi [@ykzts](https://github.com/ykzts)
+ * @author Luca Ban [@mesqueeb](https://github.com/mesqueeb)
+ * @author Terrence Lam [@skyuplam](https://github.com/skyuplam)
+ * @author Taiki IKeda [@so99ynoodles](https://github.com/so99ynoodles)
+ */
+const ja = {
+  code: "ja",
+  formatDistance: formatDistance$1,
+  formatLong: formatLong$1,
+  formatRelative: formatRelative$1,
+  localize: localize$1,
+  match: match$1,
+  options: {
+    weekStartsOn: 0 /* Sunday */,
+    firstWeekContainsDate: 1,
+  },
+};
+
+const formatDistanceLocale = {
+  lessThanXSeconds: {
+    one: "不到 1 秒",
+    other: "不到 {{count}} 秒",
+  },
+
+  xSeconds: {
+    one: "1 秒",
+    other: "{{count}} 秒",
+  },
+
+  halfAMinute: "半分钟",
+
+  lessThanXMinutes: {
+    one: "不到 1 分钟",
+    other: "不到 {{count}} 分钟",
+  },
+
+  xMinutes: {
+    one: "1 分钟",
+    other: "{{count}} 分钟",
+  },
+
+  xHours: {
+    one: "1 小时",
+    other: "{{count}} 小时",
+  },
+
+  aboutXHours: {
+    one: "大约 1 小时",
+    other: "大约 {{count}} 小时",
+  },
+
+  xDays: {
+    one: "1 天",
+    other: "{{count}} 天",
+  },
+
+  aboutXWeeks: {
+    one: "大约 1 个星期",
+    other: "大约 {{count}} 个星期",
+  },
+
+  xWeeks: {
+    one: "1 个星期",
+    other: "{{count}} 个星期",
+  },
+
+  aboutXMonths: {
+    one: "大约 1 个月",
+    other: "大约 {{count}} 个月",
+  },
+
+  xMonths: {
+    one: "1 个月",
+    other: "{{count}} 个月",
+  },
+
+  aboutXYears: {
+    one: "大约 1 年",
+    other: "大约 {{count}} 年",
+  },
+
+  xYears: {
+    one: "1 年",
+    other: "{{count}} 年",
+  },
+
+  overXYears: {
+    one: "超过 1 年",
+    other: "超过 {{count}} 年",
+  },
+
+  almostXYears: {
+    one: "将近 1 年",
+    other: "将近 {{count}} 年",
+  },
+};
+
+const formatDistance = (token, count, options) => {
+  let result;
+
+  const tokenValue = formatDistanceLocale[token];
+  if (typeof tokenValue === "string") {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace("{{count}}", String(count));
+  }
+
+  if (options?.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return result + "内";
+    } else {
+      return result + "前";
+    }
+  }
+
+  return result;
+};
+
+const dateFormats = {
+  full: "y'年'M'月'd'日' EEEE",
+  long: "y'年'M'月'd'日'",
+  medium: "yyyy-MM-dd",
+  short: "yy-MM-dd",
+};
+
+const timeFormats = {
+  full: "zzzz a h:mm:ss",
+  long: "z a h:mm:ss",
+  medium: "a h:mm:ss",
+  short: "a h:mm",
+};
+
+const dateTimeFormats = {
+  full: "{{date}} {{time}}",
+  long: "{{date}} {{time}}",
+  medium: "{{date}} {{time}}",
+  short: "{{date}} {{time}}",
+};
+
+const formatLong = {
+  date: buildFormatLongFn({
+    formats: dateFormats,
+    defaultWidth: "full",
+  }),
+
+  time: buildFormatLongFn({
+    formats: timeFormats,
+    defaultWidth: "full",
+  }),
+
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats,
+    defaultWidth: "full",
+  }),
+};
+
+function checkWeek(date, baseDate, options) {
+  const baseFormat = "eeee p";
+
+  if (isSameWeek(date, baseDate, options)) {
+    return baseFormat; // in same week
+  } else if (date.getTime() > baseDate.getTime()) {
+    return "'下个'" + baseFormat; // in next week
+  }
+  return "'上个'" + baseFormat; // in last week
+}
+
+const formatRelativeLocale = {
+  lastWeek: checkWeek, // days before yesterday, maybe in this week or last week
+  yesterday: "'昨天' p",
+  today: "'今天' p",
+  tomorrow: "'明天' p",
+  nextWeek: checkWeek, // days after tomorrow, maybe in this week or next week
+  other: "PP p",
+};
+
+const formatRelative = (token, date, baseDate, options) => {
+  const format = formatRelativeLocale[token];
+
+  if (typeof format === "function") {
+    return format(date, baseDate, options);
+  }
+
+  return format;
+};
+
+const eraValues = {
+  narrow: ["前", "公元"],
+  abbreviated: ["前", "公元"],
+  wide: ["公元前", "公元"],
+};
+
+const quarterValues = {
+  narrow: ["1", "2", "3", "4"],
+  abbreviated: ["第一季", "第二季", "第三季", "第四季"],
+  wide: ["第一季度", "第二季度", "第三季度", "第四季度"],
+};
+
+const monthValues = {
+  narrow: [
+    "一",
+    "二",
+    "三",
+    "四",
+    "五",
+    "六",
+    "七",
+    "八",
+    "九",
+    "十",
+    "十一",
+    "十二",
+  ],
+
+  abbreviated: [
+    "1月",
+    "2月",
+    "3月",
+    "4月",
+    "5月",
+    "6月",
+    "7月",
+    "8月",
+    "9月",
+    "10月",
+    "11月",
+    "12月",
+  ],
+
+  wide: [
+    "一月",
+    "二月",
+    "三月",
+    "四月",
+    "五月",
+    "六月",
+    "七月",
+    "八月",
+    "九月",
+    "十月",
+    "十一月",
+    "十二月",
+  ],
+};
+
+const dayValues = {
+  narrow: ["日", "一", "二", "三", "四", "五", "六"],
+  short: ["日", "一", "二", "三", "四", "五", "六"],
+  abbreviated: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+
+  wide: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+};
+
+const dayPeriodValues = {
+  narrow: {
+    am: "上",
+    pm: "下",
+    midnight: "凌晨",
+    noon: "午",
+    morning: "早",
+    afternoon: "下午",
+    evening: "晚",
+    night: "夜",
+  },
+  abbreviated: {
+    am: "上午",
+    pm: "下午",
+    midnight: "凌晨",
+    noon: "中午",
+    morning: "早晨",
+    afternoon: "中午",
+    evening: "晚上",
+    night: "夜间",
+  },
+  wide: {
+    am: "上午",
+    pm: "下午",
+    midnight: "凌晨",
+    noon: "中午",
+    morning: "早晨",
+    afternoon: "中午",
+    evening: "晚上",
+    night: "夜间",
+  },
+};
+
+const formattingDayPeriodValues = {
+  narrow: {
+    am: "上",
+    pm: "下",
+    midnight: "凌晨",
+    noon: "午",
+    morning: "早",
+    afternoon: "下午",
+    evening: "晚",
+    night: "夜",
+  },
+  abbreviated: {
+    am: "上午",
+    pm: "下午",
+    midnight: "凌晨",
+    noon: "中午",
+    morning: "早晨",
+    afternoon: "中午",
+    evening: "晚上",
+    night: "夜间",
+  },
+  wide: {
+    am: "上午",
+    pm: "下午",
+    midnight: "凌晨",
+    noon: "中午",
+    morning: "早晨",
+    afternoon: "中午",
+    evening: "晚上",
+    night: "夜间",
+  },
+};
+
+const ordinalNumber = (dirtyNumber, options) => {
+  const number = Number(dirtyNumber);
+
+  switch (options?.unit) {
+    case "date":
+      return number.toString() + "日";
+    case "hour":
+      return number.toString() + "时";
+    case "minute":
+      return number.toString() + "分";
+    case "second":
+      return number.toString() + "秒";
+    default:
+      return "第 " + number.toString();
+  }
+};
+
+const localize = {
+  ordinalNumber,
+
+  era: buildLocalizeFn({
+    values: eraValues,
+    defaultWidth: "wide",
+  }),
+
+  quarter: buildLocalizeFn({
+    values: quarterValues,
+    defaultWidth: "wide",
+    argumentCallback: (quarter) => quarter - 1,
+  }),
+
+  month: buildLocalizeFn({
+    values: monthValues,
+    defaultWidth: "wide",
+  }),
+
+  day: buildLocalizeFn({
+    values: dayValues,
+    defaultWidth: "wide",
+  }),
+
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues,
+    defaultWidth: "wide",
+    formattingValues: formattingDayPeriodValues,
+    defaultFormattingWidth: "wide",
+  }),
+};
+
+const matchOrdinalNumberPattern = /^(第\s*)?\d+(日|时|分|秒)?/i;
+const parseOrdinalNumberPattern = /\d+/i;
+
+const matchEraPatterns = {
+  narrow: /^(前)/i,
+  abbreviated: /^(前)/i,
+  wide: /^(公元前|公元)/i,
+};
+const parseEraPatterns = {
+  any: [/^(前)/i, /^(公元)/i],
+};
+
+const matchQuarterPatterns = {
+  narrow: /^[1234]/i,
+  abbreviated: /^第[一二三四]刻/i,
+  wide: /^第[一二三四]刻钟/i,
+};
+const parseQuarterPatterns = {
+  any: [/(1|一)/i, /(2|二)/i, /(3|三)/i, /(4|四)/i],
+};
+
+const matchMonthPatterns = {
+  narrow: /^(一|二|三|四|五|六|七|八|九|十[二一])/i,
+  abbreviated: /^(一|二|三|四|五|六|七|八|九|十[二一]|\d|1[12])月/i,
+  wide: /^(一|二|三|四|五|六|七|八|九|十[二一])月/i,
+};
+const parseMonthPatterns = {
+  narrow: [
+    /^一/i,
+    /^二/i,
+    /^三/i,
+    /^四/i,
+    /^五/i,
+    /^六/i,
+    /^七/i,
+    /^八/i,
+    /^九/i,
+    /^十(?!(一|二))/i,
+    /^十一/i,
+    /^十二/i,
+  ],
+
+  any: [
+    /^一|1/i,
+    /^二|2/i,
+    /^三|3/i,
+    /^四|4/i,
+    /^五|5/i,
+    /^六|6/i,
+    /^七|7/i,
+    /^八|8/i,
+    /^九|9/i,
+    /^十(?!(一|二))|10/i,
+    /^十一|11/i,
+    /^十二|12/i,
+  ],
+};
+
+const matchDayPatterns = {
+  narrow: /^[一二三四五六日]/i,
+  short: /^[一二三四五六日]/i,
+  abbreviated: /^周[一二三四五六日]/i,
+  wide: /^星期[一二三四五六日]/i,
+};
+const parseDayPatterns = {
+  any: [/日/i, /一/i, /二/i, /三/i, /四/i, /五/i, /六/i],
+};
+
+const matchDayPeriodPatterns = {
+  any: /^(上午?|下午?|午夜|[中正]午|早上?|下午|晚上?|凌晨|)/i,
+};
+const parseDayPeriodPatterns = {
+  any: {
+    am: /^上午?/i,
+    pm: /^下午?/i,
+    midnight: /^午夜/i,
+    noon: /^[中正]午/i,
+    morning: /^早上/i,
+    afternoon: /^下午/i,
+    evening: /^晚上?/i,
+    night: /^凌晨/i,
+  },
+};
+
+const match = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern,
+    parsePattern: parseOrdinalNumberPattern,
+    valueCallback: (value) => parseInt(value, 10),
+  }),
+
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseEraPatterns,
+    defaultParseWidth: "any",
+  }),
+
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseQuarterPatterns,
+    defaultParseWidth: "any",
+    valueCallback: (index) => index + 1,
+  }),
+
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseMonthPatterns,
+    defaultParseWidth: "any",
+  }),
+
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseDayPatterns,
+    defaultParseWidth: "any",
+  }),
+
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns,
+    defaultMatchWidth: "any",
+    parsePatterns: parseDayPeriodPatterns,
+    defaultParseWidth: "any",
+  }),
+};
+
+/**
+ * @category Locales
+ * @summary Chinese Simplified locale.
+ * @language Chinese Simplified
+ * @iso-639-2 zho
+ * @author Changyu Geng [@KingMario](https://github.com/KingMario)
+ * @author Song Shuoyun [@fnlctrl](https://github.com/fnlctrl)
+ * @author sabrinaM [@sabrinamiao](https://github.com/sabrinamiao)
+ * @author Carney Wu [@cubicwork](https://github.com/cubicwork)
+ * @author Terrence Lam [@skyuplam](https://github.com/skyuplam)
+ */
+const zhCN = {
+  code: "zh-CN",
+  formatDistance: formatDistance,
+  formatLong: formatLong,
+  formatRelative: formatRelative,
+  localize: localize,
+  match: match,
+  options: {
+    weekStartsOn: 1 /* Monday */,
+    firstWeekContainsDate: 4,
+  },
+};
+
+const startPageCss = ":host{display:grid;block-size:100%;overflow:auto}.main{animation:fadeIn 300ms forwards;display:grid;block-size:100%;overflow:auto;opacity:0;grid-template-rows:max-content 1fr;gap:var(--mer-spacing--xl)}@keyframes bounce{0%{transform:translateY(0)}100%{transform:translateY(-30px)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.section-create-new-kb__actions,.section-secondary__actions{display:grid;grid-auto-flow:column;gap:var(--mer-spacing--md);overflow-x:auto;padding-block-end:var(--mer-spacing--xs)}.card-filled,.card-outlined{display:grid;gap:var(--mer-spacing--xl);align-content:space-between;border:var(--mer-border__width--sm) solid var(--mer-border-color__on-surface);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--lg)}.card-filled{background-color:var(--mer-surface__elevation--01)}.icon-capsule{pointer-events:none;display:inline-flex;block-size:40px;inline-size:40px;justify-content:center;align-items:center;border-radius:50%;border:var(--mer-border__width--sm) dashed var(--mer-border-color__on-elevation--02)}.card__header{display:grid;gap:var(--mer-spacing--sm)}.card__header-description{display:grid;gap:var(--mer-spacing--2xs)}.section-create-new-kb{display:grid;grid-auto-rows:max-content;gap:var(--mer-spacing--lg)}.section-create-new-kb__header{display:grid;gap:var(--mer-spacing--2xs)}.section-create-new-kb__actions{display:grid;gap:var(--mer-spacing--md);overflow-x:auto;grid-auto-flow:column;grid-auto-columns:430px}.section-secondary{display:grid;block-size:100%;position:relative;overflow:auto}.section-secondary__actions{display:grid;gap:var(--mer-spacing--sm)}.section-secondary__actions--two-cards{grid-template-columns:repeat(2, minmax(430px, 1fr))}.section-secondary__actions--multiple-cards{grid-auto-columns:670px}.section-kbs{background-color:var(--mer-surface__elevation--01);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm);display:grid;grid-template-rows:auto 1fr;overflow:auto}.section-kbs__header{display:grid;grid-template-columns:max-content 230px;align-items:center;gap:var(--mer-spacing--xl);border-block-end:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--03);padding-block-end:var(--mer-spacing--sm)}.section-kbs__header--no-border{border-block-end-color:transparent !important}.section-kbs__title{align-items:center;display:flex;min-block-size:31px}.section-kbs__filter--hidden{opacity:0}.section-kbs__list{display:grid;grid-auto-rows:max-content;grid-template-columns:1fr 1fr;row-gap:var(--mer-spacing--xs);column-gap:var(--mer-spacing--md);overflow:auto;position:relative;padding-block-start:var(--mer-spacing--sm)}.section-kbs__list--empty{grid-template-columns:1fr;grid-auto-rows:1fr;overflow:hidden}.kb__item{background-color:var(--mer-surface__elevation--02);padding:var(--mer-spacing--sm);display:grid;grid-template-columns:284px 1fr;gap:var(--mer-spacing--md)}.kb__details{display:grid;grid-template-columns:max-content 1fr;align-items:center;gap:var(--mer-spacing--sm)}.kb__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:underline;cursor:pointer}.kb__name:hover{color:var(--mer-text__bright)}.kb__modified{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hiChar{color:var(--mer-color__primary--200);filter:brightness(1.3)}.loader{border:var(--mer-border__width--sm) solid var(--mer-border-color__on-surface)}.heading-2,.heading-3{margin:0;font-weight:600 !important;color:#ffffff !important}.card-filled .heading-3{color:var(--mer-text__on-surface) !important}.text-body-regular-m,.card__footer{font-weight:var(--mer-font__weight--light) !important;--control__font-weight--regular:var(--mer-font__weight--light)}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -25,7 +2520,34 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _GxIdeStartPage_recentKbsFilter, _GxIdeStartPage_kbsFilterValue, _GxIdeStartPage_kbRefs, _GxIdeStartPage_evaluateRenderKbs, _GxIdeStartPage_filterKbs, _GxIdeStartPage_getNewsCallbackRecentNews, _GxIdeStartPage_openKbHandler, _GxIdeStartPage_renderKb, _GxIdeStartPage_renderKbs, _GxIdeStartPage_searchKbsInputHandler, _GxIdeStartPage_searchNewsInputHandler;
+var _GxIdeStartPage_instances, _GxIdeStartPage_componentLocale, _GxIdeStartPage_userLanguage, _GxIdeStartPage_createKBClickHandler, _GxIdeStartPage_openKbClickHandler, _GxIdeStartPage_filterKbs, _GxIdeStartPage_renderKbsSection, _GxIdeStartPage_renderKbs, _GxIdeStartPage_evaluateContentToRender, _GxIdeStartPage_renderSecondarySection;
+// const locale = enUS; // use `zhCN` for Chinese, `ja` for Japanese, `enUS` for English
+const LANGS_DATE_FNS_MAP = {
+    "en": enUS,
+    "ja": ja,
+    "zh-CN": zhCN,
+    "zh-TW": zhCN,
+    "zh-HK": zhCN
+};
+const DETAIL_ICON = getIconPath({
+    category: "system",
+    name: "detail",
+    colorType: "primary"
+});
+const FILTER_ICON = getIconPath({
+    category: "window-tools",
+    name: "filter",
+    colorType: "on-elevation"
+});
+const KB_DEFAULT_ICON = getIconPath({
+    category: "objects",
+    name: "knowledge-base"
+});
+const SEARCH_ICON = getIconPath({
+    category: "system",
+    name: "search",
+    colorType: "on-elevation"
+});
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/typography",
@@ -33,156 +2555,167 @@ const CSS_BUNDLES = [
     "components/edit",
     "components/icon",
     "components/button",
-    "chameleon/scrollbar"
+    "chameleon/scrollbar",
+    "utils/typography"
 ];
-const KB_ICON = getIconPath({
-    category: "objects",
-    name: "knowledge-base"
-});
-const FOLDER_ICON = getIconPath({
-    category: "system",
-    name: "folder",
-    colorType: "on-elevation"
-});
 const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        _GxIdeStartPage_recentKbsFilter.set(this, void 0);
-        _GxIdeStartPage_kbsFilterValue.set(this, "");
-        _GxIdeStartPage_kbRefs.set(this, {}); // Object to store kbs refs
-        _GxIdeStartPage_evaluateRenderKbs.set(this, () => {
-            var _a;
-            if (((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                return __classPrivateFieldGet(this, _GxIdeStartPage_renderKbs, "f").call(this);
-            }
-            else {
-                return (h("gx-ide-empty-state", { class: "kbs-empty-state", stateIconSrc: FOLDER_ICON, stateTitle: this._componentLocale.emptyState.title, stateDescription: this._componentLocale.emptyState.description }));
-            }
-        });
-        _GxIdeStartPage_filterKbs.set(this, () => {
-            this.filteredKbs = this.kbs.filter(kb => { var _a; return (_a = kb.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(__classPrivateFieldGet(this, _GxIdeStartPage_kbsFilterValue, "f")); });
+        _GxIdeStartPage_instances.add(this);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeStartPage_componentLocale.set(this, void 0);
+        _GxIdeStartPage_userLanguage.set(this, void 0);
+        _GxIdeStartPage_createKBClickHandler.set(this, (fromServer) => (event) => {
+            event.stopPropagation();
+            this.createKBCallback(fromServer);
         });
-        _GxIdeStartPage_getNewsCallbackRecentNews.set(this, async () => {
-            return new Promise(async (resolve) => {
-                this.news = await this.getNewsCallback();
-                resolve(this.news);
-            });
+        _GxIdeStartPage_openKbClickHandler.set(this, (kbId) => (event) => {
+            event.stopPropagation();
+            this.openKbCallback(kbId);
         });
-        _GxIdeStartPage_openKbHandler.set(this, async (e) => {
-            const kbId = e.currentTarget.id;
-            await this.openKbCallback(kbId);
+        _GxIdeStartPage_filterKbs.set(this, (event) => {
+            this.kbFilterValue = event.detail;
         });
-        _GxIdeStartPage_renderKb.set(this, (kb) => {
-            var _a, _b;
-            const formattedDate = formatDate(kb.lastOpenedDate, "pretty");
-            const dateCaption = formattedDate
-                ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`
-                : null;
-            return (h("article", { class: "display-contents" }, h("button", { class: {
-                    "card-small": true,
-                    "card-small--actionable": true,
-                    "card-kb": true,
-                    "exact-match-bright": ((_a = kb.name) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) ===
-                        ((_b = __classPrivateFieldGet(this, _GxIdeStartPage_kbsFilterValue, "f")) === null || _b === void 0 ? void 0 : _b.toLowerCase())
-                }, id: kb.id, key: kb.id, type: "button", ref: el => (__classPrivateFieldGet(this, _GxIdeStartPage_kbRefs, "f")[kb.id] = el), onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbHandler, "f") }, h("div", { class: "card-kb__left-col" }, h("ch-image", { src: KB_ICON, class: "icon-md", containerRef: __classPrivateFieldGet(this, _GxIdeStartPage_kbRefs, "f")[kb.id] }), h("h2", { class: config.headingsClasses.cardSmall }, hiChar(kb.name, __classPrivateFieldGet(this, _GxIdeStartPage_kbsFilterValue, "f")))), dateCaption && h("div", { class: "card-kb__right-col" }, dateCaption))));
+        _GxIdeStartPage_renderKbsSection.set(this, () => {
+            const hideKbsFilter = this.kbs.length < this.kbsFilterThreshold;
+            const kbsListEmpty = this.filteredKbs.length === 0;
+            let contentToRender;
+            // Evaluate what is the content to display.
+            if (this.filteredKbs.length > 0) {
+                contentToRender = __classPrivateFieldGet(this, _GxIdeStartPage_renderKbs, "f").call(this);
+            }
+            else {
+                // No kb has pass the filter. Display an empty-state.
+                contentToRender = (h("gx-ide-empty-state", { isAnimated: true, stateIconSrc: FILTER_ICON, stateTitle: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.noMatches }));
+            }
+            return (h("section", { class: "section-kbs" }, h("header", { class: {
+                    "section-kbs__header": true
+                } }, h("h2", { class: "heading-3 section-kbs__title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.title), h("ch-edit", {
+                // Render always, and display or hide, ro prevent FOUC, and also prevent
+                // the header block-size from growing a little bit when the input renders.
+                value: this.kbFilterValue, class: {
+                    "input": true,
+                    "section-kbs__filter--hidden": hideKbsFilter
+                }, startImgSrc: SEARCH_ICON, placeholder: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.filterKbsPlaceholder, onInput: !hideKbsFilter && __classPrivateFieldGet(this, _GxIdeStartPage_filterKbs, "f"), disabled: hideKbsFilter
+            })), h("div", { class: {
+                    "section-kbs__list": true,
+                    "section-kbs__list--empty": kbsListEmpty,
+                    "scrollable": true
+                } }, this.filteredKbs.length > 0 ? __classPrivateFieldGet(this, _GxIdeStartPage_renderKbs, "f").call(this) : contentToRender)));
         });
         _GxIdeStartPage_renderKbs.set(this, () => {
             var _a;
-            if (this.filteredKbs.length) {
-                return (h("div", { class: "kbs-container scrollable" }, (_a = this.filteredKbs) === null || _a === void 0 ? void 0 : _a.map(__classPrivateFieldGet(this, _GxIdeStartPage_renderKb, "f"))));
-            }
-            return (h("gx-ide-empty-state", { stateIconSrc: KB_ICON, stateTitle: this._componentLocale.recentKbs.noKbsFiltered.title }));
-        });
-        _GxIdeStartPage_searchKbsInputHandler.set(this, (event) => {
-            __classPrivateFieldSet(this, _GxIdeStartPage_kbsFilterValue, event.target.value.toLowerCase(), "f");
-            __classPrivateFieldGet(this, _GxIdeStartPage_filterKbs, "f").call(this);
+            return (_a = this.filteredKbs) === null || _a === void 0 ? void 0 : _a.map((kb, index) => {
+                // relative time ago
+                var _a;
+                const relativeDate = kb.lastOpenedDate
+                    ? formatDistanceToNow(new Date(kb.lastOpenedDate), {
+                        addSuffix: true,
+                        locale: __classPrivateFieldGet(this, _GxIdeStartPage_userLanguage, "f")
+                    })
+                    : undefined;
+                // icon
+                const kbIcon = (_a = kb.icon) !== null && _a !== void 0 ? _a : KB_DEFAULT_ICON;
+                return (h("article", { class: "kb__item", key: index }, h("div", { class: "kb__details" }, h("ch-image", { class: "icon-md", src: kbIcon }), h("p", { class: "text-body-regular-m kb__name", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbClickHandler, "f").call(this, kb.id) }, kb.name)), relativeDate && (h("div", { class: "text-body-regular-m kb__modified" }, `${__classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.opened} ${relativeDate}`))));
+            });
         });
-        _GxIdeStartPage_searchNewsInputHandler.set(this, (event) => {
-            this.newsFilterValue = event.target.value.toLowerCase();
+        _GxIdeStartPage_renderSecondarySection.set(this, () => {
+            if (!this.secondarySection) {
+                return null;
+            }
+            const multipleCards = this.secondarySection.cards.length > 2;
+            return (h("section", {
+                // Recent Knowledge Bases
+                class: "section-secondary"
+            }, h("header", null, h("h2", { class: "heading-3" }, this.secondarySection.title)), h("section", { class: {
+                    "section-secondary__actions": true,
+                    "section-secondary__actions--two-cards": !multipleCards,
+                    "section-secondary__actions--multiple-cards": multipleCards,
+                    "scrollable": true
+                } }, this.secondarySection.cards.map((card, index) => {
+                return (h("article", { class: "card card-outlined", key: index }, h("header", { class: "card__header" }, h("span", { class: "icon-capsule" }, h("ch-image", { class: "icon-md icon-circular", src: card.icon.src, "aria-label": card.icon.ariaLabel })), h("div", { class: "card__header-description" }, h("h2", { class: "heading-3" }, card.title), card.description.map(paragraph => (h("p", { class: "text-body-regular-m" }, paragraph))))), h("footer", { class: "card__footer" }, card.action && (h("button", { class: "button-tertiary button-icon-and-text", onClick: card.action.callback && card.action.callback }, h("ch-image", { class: "icon-md", src: DETAIL_ICON }), card.action.caption)))));
+            }))));
         });
-        this.displayKbsFilter = true;
-        this.displayNewsFilter = false;
-        this.filteredKbs = [];
-        this.filteredNews = [];
-        this.loadingKbs = true;
-        this.news = undefined;
-        this.newsFilterValue = undefined;
-        this.renderedFirstTime = false;
-        this.getNewsCallback = undefined;
-        this.kbs = [];
-        this.kbsFilterThreshold = 6;
-        this.newsFilterThreshold = 6;
+        this.kbFilterValue = "";
+        this.filteredKbs = undefined;
+        this.loading = true;
+        this.createKBCallback = undefined;
         this.openKbCallback = undefined;
-        this.openNewsCallback = undefined;
-    }
-    watchNews(news) {
-        if ((news === null || news === void 0 ? void 0 : news.length) >= this.newsFilterThreshold) {
-            this.displayNewsFilter = true;
-        }
-        else {
-            this.displayNewsFilter = false;
-        }
-    }
-    kbsChanged(kbs) {
-        this.loadingKbs = false;
-        __classPrivateFieldGet(this, _GxIdeStartPage_filterKbs, "f").call(this);
-        if ((kbs === null || kbs === void 0 ? void 0 : kbs.length) >= this.kbsFilterThreshold) {
-            this.displayKbsFilter = true;
-        }
-        else {
-            this.displayKbsFilter = false;
-        }
+        this.secondarySection = undefined;
+        this.kbs = undefined;
+        this.kbsFilterThreshold = undefined;
     }
-    async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
+    kbFilterValueChanged(newKbFilterValue) {
+        this.filteredKbs = this.kbs.filter(kb => kb.name.toLowerCase().includes(newKbFilterValue.toLocaleLowerCase()));
     }
-    componentDidLoad() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _GxIdeStartPage_recentKbsFilter, "f")) === null || _a === void 0 ? void 0 : _a.focus();
+    kbsChanged(newKbs) {
+        this.filteredKbs = newKbs;
+        this.kbFilterValue = ""; // clear filter
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeStartPage_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        // initialize filteredKbs
+        this.kbsChanged(this.kbs);
+        // get user language to display the kb "last opened" value in the appropriate language.
+        const userLanguage = document.documentElement
+            .lang;
+        __classPrivateFieldSet(this, _GxIdeStartPage_userLanguage, LANGS_DATE_FNS_MAP[userLanguage], "f");
     }
     render() {
-        var _a, _b, _c;
-        return (h(Host, { class: "start-page-host" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "layout layout-main layout--cols-2" }, h("div", { class: "layout__panel panel-recent-kbs" }, h("section", { class: "card-regular recent-kbs" }, h("header", { class: "recent-kbs__header" }, h("h2", { class: {
-                [config.headingsClasses.cardRegular]: true,
-                "recent-kbs__title": true
-            } }, this._componentLocale.recentKbs.title), this.displayKbsFilter && (h("ch-edit", { type: "text", class: "input recent-kbs__name-filter", placeholder: this._componentLocale.recentKbs.placeholder, onInput: __classPrivateFieldGet(this, _GxIdeStartPage_searchKbsInputHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeStartPage_recentKbsFilter, el, "f")), disabled: !(((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) > 0) }))), this.loadingKbs ? (h("gx-ide-loader", { loaderTitle: this._componentLocale.recentKbs.loader.title, description: this._componentLocale.recentKbs.loader.description, show: true })) : (__classPrivateFieldGet(this, _GxIdeStartPage_evaluateRenderKbs, "f").call(this)))), h("div", { class: "layout__panel panel-recent-news" }, h("section", { class: "card-regular recent-news" }, h("header", { class: "recent-news__header" }, h("h2", { class: config.headingsClasses.cardRegular }, this._componentLocale.recentNews.title), this.displayNewsFilter && (h("ch-edit", { type: "text", class: "input recent-news__filter", placeholder: this._componentLocale.recentNews.inputPlaceholder, onInput: ((_b = this.news) === null || _b === void 0 ? void 0 : _b.length) > 0
-                ? __classPrivateFieldGet(this, _GxIdeStartPage_searchNewsInputHandler, "f")
-                : null, disabled: !(((_c = this.news) === null || _c === void 0 ? void 0 : _c.length) > 0) }))), h("gx-ide-recent-news", { getNewsCallback: __classPrivateFieldGet(this, _GxIdeStartPage_getNewsCallbackRecentNews, "f"), openNewsCallback: this.openNewsCallback, filterValue: this.newsFilterValue }))))));
+        var _a;
+        this.loading =
+            (!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: {
+                main: true
+            } }, h("section", {
+            // Create a new Knowledge Base
+            class: "section-create-new-kb"
+        }, h("header", {
+            // main header
+            class: "section-create-new__header"
+        }, h("h1", { class: "heading-2" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.title), h("p", { class: "text-body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.description)), h("section", { class: "section-create-new-kb__actions scrollable" }, h("article", {
+            // create project
+            class: "card card-filled"
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "heading-3" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.title), h("p", { class: "text-body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, false) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.buttonCaption))), h("article", {
+            // open existing project
+            class: "card-filled"
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "heading-3" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.title), h("p", { class: "text-body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-secondary cancel-btn", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, true) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.buttonCaption))))), h("section", { class: "section-secondary scrollable" }, this.loading ? (h("gx-ide-loader", { class: "loader", loaderTitle: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderTitle, description: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderDescription, show: true })) : (__classPrivateFieldGet(this, _GxIdeStartPage_instances, "m", _GxIdeStartPage_evaluateContentToRender).call(this))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/start-page"]; }
     get el() { return this; }
     static get watchers() { return {
-        "news": ["watchNews"],
+        "kbFilterValue": ["kbFilterValueChanged"],
         "kbs": ["kbsChanged"]
     }; }
     static get style() { return startPageCss; }
 }, [1, "gx-ide-start-page", {
-        "getNewsCallback": [16],
+        "createKBCallback": [16],
+        "openKbCallback": [16],
+        "secondarySection": [16],
         "kbs": [16],
         "kbsFilterThreshold": [2, "kbs-filter-threshold"],
-        "newsFilterThreshold": [2, "news-filter-threshold"],
-        "openKbCallback": [16],
-        "openNewsCallback": [16],
-        "displayKbsFilter": [32],
-        "displayNewsFilter": [32],
+        "kbFilterValue": [32],
         "filteredKbs": [32],
-        "filteredNews": [32],
-        "loadingKbs": [32],
-        "news": [32],
-        "newsFilterValue": [32],
-        "renderedFirstTime": [32]
+        "loading": [32]
     }, undefined, {
-        "news": ["watchNews"],
+        "kbFilterValue": ["kbFilterValueChanged"],
         "kbs": ["kbsChanged"]
     }]);
-_GxIdeStartPage_recentKbsFilter = new WeakMap(), _GxIdeStartPage_kbsFilterValue = new WeakMap(), _GxIdeStartPage_kbRefs = new WeakMap(), _GxIdeStartPage_evaluateRenderKbs = new WeakMap(), _GxIdeStartPage_filterKbs = new WeakMap(), _GxIdeStartPage_getNewsCallbackRecentNews = new WeakMap(), _GxIdeStartPage_openKbHandler = new WeakMap(), _GxIdeStartPage_renderKb = new WeakMap(), _GxIdeStartPage_renderKbs = new WeakMap(), _GxIdeStartPage_searchKbsInputHandler = new WeakMap(), _GxIdeStartPage_searchNewsInputHandler = new WeakMap();
+_GxIdeStartPage_componentLocale = new WeakMap(), _GxIdeStartPage_userLanguage = new WeakMap(), _GxIdeStartPage_createKBClickHandler = new WeakMap(), _GxIdeStartPage_openKbClickHandler = new WeakMap(), _GxIdeStartPage_filterKbs = new WeakMap(), _GxIdeStartPage_renderKbsSection = new WeakMap(), _GxIdeStartPage_renderKbs = new WeakMap(), _GxIdeStartPage_renderSecondarySection = new WeakMap(), _GxIdeStartPage_instances = new WeakSet(), _GxIdeStartPage_evaluateContentToRender = function _GxIdeStartPage_evaluateContentToRender() {
+    return this.kbs && this.kbs.length > 0
+        ? __classPrivateFieldGet(this, _GxIdeStartPage_renderKbsSection, "f").call(this)
+        : __classPrivateFieldGet(this, _GxIdeStartPage_renderSecondarySection, "f").call(this);
+};
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-start-page", "gx-ide-empty-state", "gx-ide-loader", "gx-ide-recent-news"];
+    const components = ["gx-ide-start-page", "gx-ide-empty-state", "gx-ide-loader"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-start-page":
             if (!customElements.get(tagName)) {
@@ -190,16 +2723,11 @@ function defineCustomElement$1() {
             }
             break;
         case "gx-ide-empty-state":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "gx-ide-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "gx-ide-recent-news":
+        case "gx-ide-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }