jebamo 0.0.1 → 0.0.2

package/dist/esm/je-alert_31.entry.js

@@ -0,0 +1,4738 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a65634db.js';
+
+const jeAlertCss = ":host{display:block;--je-width:35%}@media (width < 1200px){:host{--je-width:75%}}.modal{display:flex;flex-direction:column;position:fixed;border-radius:var(--je-border-radius, 2px);overflow:hidden;top:20%;left:50%;transform:translate(-50%, -20%);z-index:910;width:var(--je-width);background-color:var(--je-background-color);color:var(--je-text-color);box-shadow:0px 0px 15px 5px rgba(77, 77, 77, 0.4509803922)}.content-container{display:flex;flex-direction:column;padding:24px}.content-container .header{display:flex;width:100%;align-items:center}.content-container .header .close{margin-left:auto;--je-background:var(--je-medium-850)}.content-container .controls{margin-top:16px}.content-container .buttons{margin-top:24px;display:flex;gap:var(--je-spacing);justify-content:flex-end}.modal-transition{opacity:0;transition:opacity 250ms ease-in-out}.modal.open{opacity:1}.backdrop{position:fixed;top:0;width:100%;height:100%;background:var(--je-backdrop-color);z-index:909}.backdrop-transition{opacity:0;transition:opacity 250ms ease-in-out}.backdrop.fade{opacity:1}.clear{background:rgba(0, 0, 0, 0)}";
+const JeAlertStyle0 = jeAlertCss;
+
+const JeAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.didPresent = createEvent(this, "didPresent", 3);
+        this.didDismiss = createEvent(this, "didDismiss", 3);
+        this.didSubmit = createEvent(this, "didSubmit", 3);
+        this.handleBackdropClick = () => {
+            if (this.isOpen && this.backdropClose) {
+                this.dismiss('backdropClose');
+            }
+        };
+        this.isOpen = false;
+        this.header = undefined;
+        this.message = undefined;
+        this.icon = undefined;
+        this.buttons = undefined;
+        this.controls = undefined;
+        this.trigger = undefined;
+        this.showBackdrop = true;
+        this.backdropClose = true;
+    }
+    componentDidLoad() {
+        this.pageEl = this.el.closest('je-page');
+        this.parentEl = this.el.parentElement;
+        if (this.trigger) {
+            this.triggerElement = document.getElementById(this.trigger);
+            if (this.triggerElement) {
+                this.triggerElement.addEventListener('click', () => this.present());
+            }
+            else {
+                console.error('USS Core: Failed to find modal trigger element!');
+            }
+        }
+    }
+    async present() {
+        if (!this.isOpen) {
+            this.el.remove();
+            if (this.pageEl) {
+                this.pageEl.append(this.el);
+            }
+            else {
+                document.body.append(this.el);
+            }
+            this.isOpen = true;
+            return new Promise(resolve => {
+                this.contentEl.addEventListener('transitionend', () => {
+                    this.didPresent.emit();
+                    resolve();
+                }, { once: true });
+                this.backdropEl.classList.add('fade');
+                this.contentEl.classList.add('open');
+            });
+        }
+    }
+    async dismiss(role = 'manualClose', data) {
+        if (this.isOpen) {
+            return new Promise(resolve => {
+                this.contentEl.addEventListener('transitionend', () => {
+                    this.el.remove();
+                    this.parentEl.append(this.el);
+                    this.isOpen = false;
+                    this.didDismiss.emit({ role: role, data: data });
+                    resolve();
+                }, { once: true });
+                this.backdropEl.classList.remove('fade');
+                this.contentEl.classList.remove('open');
+            });
+        }
+    }
+    render() {
+        const content = h("je-form", { key: 'b7046e7fa228538a683ec0d0611ad030b4fba1cb', onSubmit: (ev) => this.didSubmit.emit(ev) }, h("div", { key: '3880885a9dd3c61fc3eb1d0329ee8def64a2935e', class: "content-container" }, this.header && h("div", { key: 'a399b5ac5e3ccd7bea29826e8ffe92ff7969e701', class: "header" }, this.icon && h("je-icon", { key: '8e6226b9d40d1136c5ba164fb91dc56ec854d6dd', icon: this.icon }), h("h1", { key: '9b0865e01e3e0d527affb53e11754312f40c4dc7' }, this.header), h("je-button", { key: 'be0c3cdd9761f3a54c4f3f82339b16d9f22c4678', fill: 'clear', "icon-only": true, class: "close", onClick: () => this.dismiss() }, h("je-icon", { key: 'ff5ece6eb0678c017fe0474e8da58a19219baf71', icon: "close" }))), this.message && h("div", { key: '40b3a196ccbbc0e533f5054ded0989a27d5023a7', class: "message" }, this.message), this.controls && h("div", { key: 'fe9f0530966919f995fc7d90b22f408c2a16f09a', class: "controls" }, this.controls.map(control => (h("je-input", { type: control.type, required: control.required, label: control.label, placeholder: control.placeholder, validators: control.validators })))), this.buttons && h("div", { key: 'fa19ebc95e36955d4a2323d99d2856429203114b', class: "buttons" }, this.buttons.map(button => (h("je-button", { fill: button.fill, type: button.type, color: button.color, onClick: () => button.handler(this.el) }, button.text))))));
+        return (h(Host, { key: 'bf6df0e328fbe2785353b02e72dc85f18534be45', slot: 'overlay' }, h("div", { key: 'accdd9fc3059b7348fa342a166606fc2dfbe51f7', ref: el => this.contentEl = el, class: { 'modal-transition': true, 'modal': this.isOpen } }, this.isOpen && content), h("div", { key: 'bf2c4115d133199138d47520e6e12bec3bc76657', ref: el => this.backdropEl = el, onClick: this.handleBackdropClick, class: { 'backdrop-transition': true, 'backdrop': this.isOpen, 'clear': !this.showBackdrop && this.isOpen } })));
+    }
+    get el() { return getElement(this); }
+};
+JeAlert.style = JeAlertStyle0;
+
+const jeButtonCss = ":host{display:block;width:fit-content;position:relative;--je-button-height:40px;--je-button-width:auto;--je-button-min-width:80px;--je-button-font-size:1.1em;--je-button-inline-padding:12px;--je-button-color:var(--je-primary-100, buttontext);--je-button-background:var(--je-primary-500, buttonface);--je-button-hover-background:var(--je-primary-600, buttonface);--je-button-active-background:var(--je-primary-700, buttonface)}:host([color=error]),:host([color=auto][error]){--je-button-color:var(--je-error-100);--je-button-background:var(--je-error-500);--je-button-hover-background:var(--je-error-600);--je-button-active-background:var(--je-error-700)}:host([color=secondary]),:host([color=auto][secondary]){--je-button-color:var(--je-secondary-100);--je-button-background:var(--je-secondary-500);--je-button-hover-background:var(--je-secondary-600);--je-button-active-background:var(--je-secondary-700)}:host([color=tertiary]),:host([color=auto][tertiary]){--je-button-color:var(--je-tertiary-100);--je-button-background:var(--je-tertiary-500);--je-button-hover-background:var(--je-tertiary-600);--je-button-active-background:var(--je-tertiary-700)}:host([color=warning]),:host([color=auto][warning]){--je-button-color:var(--je-warning-100);--je-button-background:var(--je-warning-500);--je-button-hover-background:var(--je-warning-600);--je-button-active-background:var(--je-warning-700)}:host([color=success]),:host([color=auto][success]){--je-button-color:var(--je-success-100);--je-button-background:var(--je-success-500);--je-button-hover-background:var(--je-success-600);--je-button-active-background:var(--je-success-700)}:host([color=medium]),:host([color=auto][medium]){--je-button-color:var(--je-medium-50);--je-button-background:var(--je-medium-500);--je-button-hover-background:var(--je-medium-600);--je-button-active-background:var(--je-medium-700)}:host([color=light]),:host([color=auto][light]){--je-button-color:var(--je-medium-900);--je-button-background:var(--je-medium-100);--je-button-hover-background:var(--je-medium-400);--je-button-active-background:var(--je-medium-500)}:host([color=dark]),:host([color=auto][dark]){--je-button-color:var(--je-medium-50);--je-button-background:var(--je-medium-850);--je-button-hover-background:var(--je-medium-850);--je-button-active-background:var(--je-medium-900)}:host([expand]){width:100%;--je-button-width:100%}:host([icon-only]){--je-button-min-width:2px;--je-button-inline-padding:0}:host([size=sm]){--je-button-min-width:60px;--je-button-height:30px;--je-button-font-size:0.9em;--je-button-inline-padding:8px}:host([size=lg]){--je-button-min-width:100px;--je-button-height:50px;--je-button-font-size:1.3em;--je-button-inline-padding:20px}button{display:flex;align-items:center;justify-content:center;gap:4px;position:relative;box-sizing:border-box;border:none;border-radius:var(--je-border-radius, 2px);padding-inline:var(--je-button-inline-padding);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;text-transform:uppercase;text-wrap:wrap;font-family:var(--je-font-family);font-size:var(--je-button-font-size);font-weight:var(--je-font-semi-bold);width:var(--je-button-width);height:var(--je-button-height);min-width:var(--je-button-min-width);color:var(--je-button-color);background-color:var(--je-button-background);transition:all 125ms ease-in-out}@media (hover: hover){button:hover{--je-button-background:var(--je-button-hover-background)}}button:active{--je-button-background:var(--je-button-active-background)}button:disabled{opacity:0.8;cursor:default}:host([fill=outline]) button{color:var(--je-button-background);background-color:transparent;border:solid 1px var(--je-button-background)}:host([fill=clear]) button{color:var(--je-button-background);background-color:transparent;font-weight:var(--je-font-bold)}@media (hover: hover){:host([fill=clear]) button:hover{opacity:0.8}}::slotted(je-icon){cursor:pointer}::slotted([slot=badge]){top:0;right:0;position:absolute;transform:translate(50%, -50%);border-radius:14px;color:var(--je-button-background);background-color:var(--je-button-color);padding-inline:4px;height:20px;display:flex;align-items:center;justify-content:center}";
+const JeButtonStyle0 = jeButtonCss;
+
+const JeButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.disabled = false;
+        this.type = 'button';
+        this.expand = false;
+        this.iconOnly = false;
+        this.fill = 'solid';
+        this.size = 'md';
+        this.color = 'primary';
+        this.lightModeColor = 'dark';
+        this.darkModeColor = 'light';
+    }
+    componentDidLoad() {
+        if (this.type == 'submit' || this.type == 'reset') {
+            this.formEl = this.el.closest('form');
+            if (this.formEl) {
+                this.formButtonEl = document.createElement('button');
+                this.formButtonEl.type = this.type;
+                this.formButtonEl.style.display = 'none';
+                this.formEl.append(this.formButtonEl);
+            }
+        }
+    }
+    handleThemeChange(e) {
+        if (this.color == 'auto') {
+            this.el.toggleAttribute(this.lightModeColor, e.detail == 'light');
+            this.el.toggleAttribute(this.darkModeColor, e.detail == 'dark');
+        }
+    }
+    handleClick() {
+        if (this.formButtonEl) {
+            this.formButtonEl.click();
+        }
+    }
+    render() {
+        return (h("button", { key: 'ebf16b4d043ac8346c34475bc6424f3f8d537bfb', part: 'inner-button', disabled: this.disabled, type: this.type }, h("slot", { key: '4a2f527ad436bcf5bdc1f9ae84034388bda0e674' }), h("slot", { key: '0e7d1c98c5b242a0f9c29cb47a893ac408557808', name: 'badge' })));
+    }
+    get el() { return getElement(this); }
+};
+JeButton.style = JeButtonStyle0;
+
+const jeCardCss = ":host{display:block;border:solid 1px var(--je-card-border-color);border-radius:var(--je-border-radius, 2px);overflow:hidden;box-sizing:border-box;position:relative;color:var(--je-card-color);background-color:var(--je-card-background);--je-card-color:inherit;--je-card-background:inherit;--je-card-hover-background:#9f9e9e0e;--je-card-active-background:#9f9e9e19;--je-card-border-color:var(--je-medium-300)}:host([button]){cursor:pointer;user-select:none;-webkit-user-select:none;transition:all 125ms ease-in-out}:host([button]:hover){background-color:var(--je-card-hover-background)}:host([button]:active){background-color:var(--je-card-active-background)}:host([color=error]){--je-card-color:var(--je-error-100);--je-card-background:var(--je-error-500);--je-card-hover-background:var(--je-error-600);--je-card-active-background:var(--je-error-700);--je-card-border-color:var(--je-error-300)}:host([color=secondary]){--je-card-color:var(--je-secondary-100);--je-card-background:var(--je-secondary-500);--je-card-hover-background:var(--je-secondary-600);--je-card-active-background:var(--je-secondary-700);--je-card-border-color:var(--je-secondary-300)}:host([color=tertiary]){--je-card-color:var(--je-tertiary-100);--je-card-background:var(--je-tertiary-500);--je-card-hover-background:var(--je-tertiary-600);--je-card-active-background:var(--je-tertiary-700);--je-card-border-color:var(--je-tertiary-300)}:host([color=warning]){--je-card-color:var(--je-warning-100);--je-card-background:var(--je-warning-500);--je-card-hover-background:var(--je-warning-600);--je-card-active-background:var(--je-warning-700);--je-card-border-color:var(--je-warning-300)}:host([color=success]){--je-card-color:var(--je-success-100);--je-card-background:var(--je-success-500);--je-card-hover-background:var(--je-success-600);--je-card-active-background:var(--je-success-700);--je-card-border-color:var(--je-success-300)}:host([color=medium]){--je-card-color:var(--je-medium-50);--je-card-background:var(--je-medium-500);--je-card-hover-background:var(--je-medium-600);--je-card-active-background:var(--je-medium-700)}:host([color=light]){--je-card-color:var(--je-medium-900);--je-card-background:var(--je-medium-100);--je-card-hover-background:var(--je-medium-400);--je-card-active-background:var(--je-medium-500)}:host([color=dark]){--je-card-color:var(--je-medium-50);--je-card-background:var(--je-medium-850);--je-card-hover-background:var(--je-medium-850);--je-card-active-background:var(--je-medium-900)}::slotted([slot=media]){width:100%}::slotted([slot=header]){box-sizing:border-box;padding-inline:var(--je-spacing-xs, 10px);border-bottom:solid 1px var(--je-card-border-color)}::slotted([slot=footer]){box-sizing:border-box;display:flex;padding-block:var(--je-spacing-xs, 10px);gap:var(--je-spacing-2xs, 8px)}.container{box-sizing:border-box;padding:var(--je-spacing-xs, 10px)}";
+const JeCardStyle0 = jeCardCss;
+
+const JeCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.color = undefined;
+        this.button = undefined;
+    }
+    render() {
+        return (h(Host, { key: '33f8bed14daea376f91f0ae6c948235a54a7a135' }, h("slot", { key: '5a108e5cc5339c21ae02ce1913b632856787825c', name: 'media' }), h("slot", { key: 'a6d8fc7f088f3d7b9512e27292d890cf5198ece6', name: 'header' }), h("div", { key: '5edfea57c094c3ca6504c2657fbd014d11eb5889', class: 'container' }, h("slot", { key: '47646e973cee3cbcb526f12b65404034ace999ca' }), h("slot", { key: 'e34763d24d6652f18463aeceb06c3f5db729ac06', name: 'footer' }))));
+    }
+};
+JeCard.style = JeCardStyle0;
+
+const jeCheckboxCss = ":host{display:flex;align-items:center;gap:var(--je-spacing-2xs);width:fit-content;cursor:pointer;-webkit-user-select:none;user-select:none}je-icon{cursor:pointer;color:var(--je-primary-500)}";
+const JeCheckboxStyle0 = jeCheckboxCss;
+
+const JeCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 3);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.value = undefined;
+        this.labelPlacement = 'end';
+        this.indeterminate = false;
+        this.labelOnly = false;
+        this.readonly = false;
+        this.disabled = false;
+    }
+    componentWillLoad() {
+        if (this.value === undefined && !this.indeterminate) {
+            this.value = false;
+        }
+        this.originalValue = this.value;
+    }
+    formResetCallback() {
+        if (this.value !== this.originalValue) {
+            this.value = this.originalValue;
+        }
+    }
+    onClick() {
+        if (!this.readonly && !this.disabled) {
+            if (!this.indeterminate) {
+                this.value = !this.value;
+            }
+            else {
+                // when indeterminate, the flow is false -> true -> null
+                this.value = this.value == false ? true : this.value == true ? null : false;
+            }
+            this.valueChange.emit(this.value);
+        }
+    }
+    render() {
+        return (h(Host, { key: '492df32418a1fad791e502a04dd1f4704af73c19' }, this.labelPlacement == 'start' && h("slot", { key: 'b1fe9f38f42da604059158012be57f08ea6c0223' }), h("je-icon", { key: 'de6acfe6dc089be11e12c7948a7be20b3d6af7f4', icon: this.value === true ? 'check_box' : this.value === false ? 'check_box_outline_blank' : 'indeterminate_check_box' }), this.labelPlacement == 'end' && h("slot", { key: '2f6b3feb823cc374566845bbc0a73c4280644376' })));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+};
+JeCheckbox.style = JeCheckboxStyle0;
+
+const jeCheckboxGroupCss = ":host{display:block;width:fit-content}label{display:block;font-weight:var(--je-font-semi-bold);margin-bottom:var(--je-spacing-2xs)}";
+const JeCheckboxGroupStyle0 = jeCheckboxGroupCss;
+
+const JeCheckboxGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 3);
+        this.label = undefined;
+        this.value = [];
+    }
+    componentWillLoad() {
+        if (!Array.isArray(this.value)) {
+            this.value = [];
+        }
+        this.originalValue = this.value;
+        if (this.label) {
+            this.el.setAttribute('name', this.label);
+        }
+    }
+    componentDidLoad() {
+        if (this.value) {
+            const checkboxes = this.getChecks();
+            for (let item of checkboxes) {
+                item.checked = this.value.includes(item.value);
+            }
+        }
+    }
+    formResetCallback() {
+        this.value = this.originalValue;
+    }
+    getChecks() {
+        const elements = this.el.querySelectorAll('je-checkbox-option');
+        return Array.from(elements);
+    }
+    handleValueChange() {
+        this.valueChange.emit(this.value);
+        const checkboxes = this.getChecks();
+        for (let checkbox of checkboxes) {
+            const includes = this.value.includes(checkbox.value);
+            if (checkbox.checked != includes) {
+                checkbox.checked = includes;
+            }
+        }
+    }
+    handleCheck(ev) {
+        this.value = [ev.detail, ...this.value];
+    }
+    handleUncheck(ev) {
+        this.value = this.value.filter(t => t !== ev.detail);
+    }
+    render() {
+        return (h(Host, { key: '7d3112f65038d79a8ca5ebbba5bceb7b07ff401d' }, this.label && h("label", { key: '7f71075409ca98d45e18974ee1bda4a6afec859a' }, this.label), h("slot", { key: '2473328de9c142d0c972a32228edac8f51b66b38' })));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+JeCheckboxGroup.style = JeCheckboxGroupStyle0;
+
+const jeCheckboxOptionCss = ":host{display:flex;align-items:center;gap:var(--je-spacing-2xs);cursor:pointer;-webkit-user-select:none;user-select:none}je-icon{cursor:pointer;color:var(--je-primary-500)}";
+const JeCheckboxOptionStyle0 = jeCheckboxOptionCss;
+
+const JeCheckboxOption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.check = createEvent(this, "check", 7);
+        this.uncheck = createEvent(this, "uncheck", 7);
+        this.value = undefined;
+        this.checked = false;
+        this.readonly = false;
+        this.disabled = false;
+    }
+    onClick() {
+        if (!this.readonly && !this.disabled) {
+            if (this.checked) {
+                this.uncheck.emit(this.value);
+            }
+            else {
+                this.check.emit(this.value);
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: '39b01f92be46d74b1efda5259bf766495694331b' }, h("je-icon", { key: '42ad722098b6094f4edbae636282a7b2fb0a4497', icon: this.checked ? 'check_box' : 'check_box_outline_blank' }), h("slot", { key: 'a7591297da5fa8b50576a21341c2480bfed86e07' })));
+    }
+    get el() { return getElement(this); }
+};
+JeCheckboxOption.style = JeCheckboxOptionStyle0;
+
+const jeColorCss = ":host{display:inline-block}:host([color=primary]),:host([color=auto][primary]){color:var(--je-primary-500)}:host([color=error]),:host([color=auto][error]){color:var(--je-error-500)}:host([color=secondary]),:host([color=auto][secondary]){color:var(--je-secondary-500)}:host([color=tertiary]),:host([color=auto][tertiary]){color:var(--je-tertiary-500)}:host([color=warning]),:host([color=auto][warning]){color:var(--je-warning-500)}:host([color=success]),:host([color=auto][success]){color:var(--je-success-500)}:host([color=medium]),:host([color=auto][medium]){color:var(--je-medium-500)}:host([color=light]),:host([color=auto][light]){color:var(--je-medium-100)}:host([color=dark]),:host([color=auto][dark]){color:var(--je-medium-850)}";
+const JeColorStyle0 = jeColorCss;
+
+const JeColor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.color = 'primary';
+        this.lightModeColor = 'dark';
+        this.darkModeColor = 'light';
+    }
+    handleThemeChange(e) {
+        if (this.color == 'auto') {
+            this.el.toggleAttribute(this.lightModeColor, e.detail == 'light');
+            this.el.toggleAttribute(this.darkModeColor, e.detail == 'dark');
+        }
+    }
+    render() {
+        return (h(Host, { key: 'f282f9cc373d41672e2f89d28ca63ae2eb68bead' }, h("slot", { key: '595b55df77aa90cd06c63e96a3eb2f2a1a5d300f' })));
+    }
+    get el() { return getElement(this); }
+};
+JeColor.style = JeColorStyle0;
+
+/**
+ * @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 millisecondsInWeek
+ * @summary Milliseconds in 1 week.
+ */
+const millisecondsInWeek = 604800000;
+
+/**
+ * @constant
+ * @name millisecondsInDay
+ * @summary Milliseconds in 1 day.
+ */
+const millisecondsInDay = 86400000;
+
+/**
+ * @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);
+}
+
+/**
+ * The {@link addMonths} function options.
+ */
+
+/**
+ * @name addMonths
+ * @category Month Helpers
+ * @summary Add the specified number of months to the given date.
+ *
+ * @description
+ * Add the specified number of months to the given date.
+ *
+ * @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 date to be changed
+ * @param amount - The amount of months to be added.
+ * @param options - The options object
+ *
+ * @returns The new date with the months added
+ *
+ * @example
+ * // Add 5 months to 1 September 2014:
+ * const result = addMonths(new Date(2014, 8, 1), 5)
+ * //=> Sun Feb 01 2015 00:00:00
+ *
+ * // Add one month to 30 January 2023:
+ * const result = addMonths(new Date(2023, 0, 30), 1)
+ * //=> Tue Feb 28 2023 00:00:00
+ */
+function addMonths(date, amount, options) {
+  const _date = toDate(date, options?.in);
+  if (isNaN(amount)) return constructFrom(options?.in || date, NaN);
+  if (!amount) {
+    // If 0 months, no-op to avoid changing times in the hour before end of DST
+    return _date;
+  }
+  const dayOfMonth = _date.getDate();
+
+  // The JS Date object supports date math by accepting out-of-bounds values for
+  // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
+  // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
+  // want except that dates will wrap around the end of a month, meaning that
+  // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
+  // we'll default to the end of the desired month by adding 1 to the desired
+  // month and using a date of 0 to back up one day to the end of the desired
+  // month.
+  const endOfDesiredMonth = constructFrom(options?.in || date, _date.getTime());
+  endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0);
+  const daysInMonth = endOfDesiredMonth.getDate();
+  if (dayOfMonth >= daysInMonth) {
+    // If we're already at the end of the month, then this is the correct date
+    // and we're done.
+    return endOfDesiredMonth;
+  } else {
+    // Otherwise, we now know that setting the original day-of-month value won't
+    // cause an overflow, so set the desired day-of-month. Note that we can't
+    // just set the date of `endOfDesiredMonth` because that object may have had
+    // its time changed in the unusual case where where a DST transition was on
+    // the last day of the month and its local time was in the hour skipped or
+    // repeated next to a DST transition.  So we use `date` instead which is
+    // guaranteed to still have the original time.
+    _date.setFullYear(
+      endOfDesiredMonth.getFullYear(),
+      endOfDesiredMonth.getMonth(),
+      dayOfMonth,
+    );
+    return _date;
+  }
+}
+
+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;
+}
+
+/**
+ * The {@link startOfISOWeek} function options.
+ */
+
+/**
+ * @name startOfISOWeek
+ * @category ISO Week Helpers
+ * @summary Return the start of an ISO week for the given date.
+ *
+ * @description
+ * Return the start of an ISO week for the given date.
+ * The result will be in the local timezone.
+ *
+ * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date
+ *
+ * @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 an ISO week
+ *
+ * @example
+ * // The start of an ISO week for 2 September 2014 11:55:00:
+ * const result = startOfISOWeek(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function startOfISOWeek(date, options) {
+  return startOfWeek(date, { ...options, weekStartsOn: 1 });
+}
+
+/**
+ * The {@link getISOWeekYear} function options.
+ */
+
+/**
+ * @name getISOWeekYear
+ * @category ISO Week-Numbering Year Helpers
+ * @summary Get the ISO week-numbering year of the given date.
+ *
+ * @description
+ * Get the ISO week-numbering year of the given date,
+ * which always starts 3 days before the year's first Thursday.
+ *
+ * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date
+ *
+ * @param date - The given date
+ *
+ * @returns The ISO week-numbering year
+ *
+ * @example
+ * // Which ISO-week numbering year is 2 January 2005?
+ * const result = getISOWeekYear(new Date(2005, 0, 2))
+ * //=> 2004
+ */
+function getISOWeekYear(date, options) {
+  const _date = toDate(date, options?.in);
+  const year = _date.getFullYear();
+
+  const fourthOfJanuaryOfNextYear = constructFrom(_date, 0);
+  fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4);
+  fourthOfJanuaryOfNextYear.setHours(0, 0, 0, 0);
+  const startOfNextYear = startOfISOWeek(fourthOfJanuaryOfNextYear);
+
+  const fourthOfJanuaryOfThisYear = constructFrom(_date, 0);
+  fourthOfJanuaryOfThisYear.setFullYear(year, 0, 4);
+  fourthOfJanuaryOfThisYear.setHours(0, 0, 0, 0);
+  const startOfThisYear = startOfISOWeek(fourthOfJanuaryOfThisYear);
+
+  if (_date.getTime() >= startOfNextYear.getTime()) {
+    return year + 1;
+  } else if (_date.getTime() >= startOfThisYear.getTime()) {
+    return year;
+  } else {
+    return year - 1;
+  }
+}
+
+/**
+ * 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);
+}
+
+/**
+ * The {@link startOfDay} function options.
+ */
+
+/**
+ * @name startOfDay
+ * @category Day Helpers
+ * @summary Return the start of a day for the given date.
+ *
+ * @description
+ * Return the start 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 - The options
+ *
+ * @returns The start of a day
+ *
+ * @example
+ * // The start of a day for 2 September 2014 11:55:00:
+ * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 00:00:00
+ */
+function startOfDay(date, options) {
+  const _date = toDate(date, options?.in);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+
+/**
+ * The {@link differenceInCalendarDays} function options.
+ */
+
+/**
+ * @name differenceInCalendarDays
+ * @category Day Helpers
+ * @summary Get the number of calendar days between the given dates.
+ *
+ * @description
+ * Get the number of calendar days between the given dates. This means that the times are removed
+ * from the dates and then the difference in days is calculated.
+ *
+ * @param laterDate - The later date
+ * @param earlierDate - The earlier date
+ * @param options - The options object
+ *
+ * @returns The number of calendar days
+ *
+ * @example
+ * // How many calendar days are between
+ * // 2 July 2011 23:00:00 and 2 July 2012 00:00:00?
+ * const result = differenceInCalendarDays(
+ *   new Date(2012, 6, 2, 0, 0),
+ *   new Date(2011, 6, 2, 23, 0)
+ * )
+ * //=> 366
+ * // How many calendar days are between
+ * // 2 July 2011 23:59:00 and 3 July 2011 00:01:00?
+ * const result = differenceInCalendarDays(
+ *   new Date(2011, 6, 3, 0, 1),
+ *   new Date(2011, 6, 2, 23, 59)
+ * )
+ * //=> 1
+ */
+function differenceInCalendarDays(laterDate, earlierDate, options) {
+  const [laterDate_, earlierDate_] = normalizeDates(
+    options?.in,
+    laterDate,
+    earlierDate,
+  );
+
+  const laterStartOfDay = startOfDay(laterDate_);
+  const earlierStartOfDay = startOfDay(earlierDate_);
+
+  const laterTimestamp =
+    +laterStartOfDay - getTimezoneOffsetInMilliseconds(laterStartOfDay);
+  const earlierTimestamp =
+    +earlierStartOfDay - getTimezoneOffsetInMilliseconds(earlierStartOfDay);
+
+  // Round the number of days to the nearest integer because the number of
+  // milliseconds in a day is not constant (e.g. it's different in the week of
+  // the daylight saving time clock shift).
+  return Math.round((laterTimestamp - earlierTimestamp) / millisecondsInDay);
+}
+
+/**
+ * The {@link startOfISOWeekYear} function options.
+ */
+
+/**
+ * @name startOfISOWeekYear
+ * @category ISO Week-Numbering Year Helpers
+ * @summary Return the start of an ISO week-numbering year for the given date.
+ *
+ * @description
+ * Return the start of an ISO week-numbering year,
+ * which always starts 3 days before the year's first Thursday.
+ * The result will be in the local timezone.
+ *
+ * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date
+ *
+ * @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 an ISO week-numbering year
+ *
+ * @example
+ * // The start of an ISO week-numbering year for 2 July 2005:
+ * const result = startOfISOWeekYear(new Date(2005, 6, 2))
+ * //=> Mon Jan 03 2005 00:00:00
+ */
+function startOfISOWeekYear(date, options) {
+  const year = getISOWeekYear(date, options);
+  const fourthOfJanuary = constructFrom(options?.in || date, 0);
+  fourthOfJanuary.setFullYear(year, 0, 4);
+  fourthOfJanuary.setHours(0, 0, 0, 0);
+  return startOfISOWeek(fourthOfJanuary);
+}
+
+/**
+ * @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 isSameDay} function options.
+ */
+
+/**
+ * @name isSameDay
+ * @category Day Helpers
+ * @summary Are the given dates in the same day (and year and month)?
+ *
+ * @description
+ * Are the given dates in the same day (and year and month)?
+ *
+ * @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 day (and year and month)
+ *
+ * @example
+ * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
+ * //=> true
+ *
+ * @example
+ * // Are 4 September and 4 October in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
+ * //=> false
+ *
+ * @example
+ * // Are 4 September, 2014 and 4 September, 2015 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
+ * //=> false
+ */
+function isSameDay(laterDate, earlierDate, options) {
+  const [dateLeft_, dateRight_] = normalizeDates(
+    options?.in,
+    laterDate,
+    earlierDate,
+  );
+  return +startOfDay(dateLeft_) === +startOfDay(dateRight_);
+}
+
+/**
+ * @name isDate
+ * @category Common Helpers
+ * @summary Is the given value a date?
+ *
+ * @description
+ * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
+ *
+ * @param value - The value to check
+ *
+ * @returns True if the given value is a date
+ *
+ * @example
+ * // For a valid date:
+ * const result = isDate(new Date())
+ * //=> true
+ *
+ * @example
+ * // For an invalid date:
+ * const result = isDate(new Date(NaN))
+ * //=> true
+ *
+ * @example
+ * // For some value:
+ * const result = isDate('2014-02-31')
+ * //=> false
+ *
+ * @example
+ * // For an object:
+ * const result = isDate({})
+ * //=> false
+ */
+function isDate(value) {
+  return (
+    value instanceof Date ||
+    (typeof value === "object" &&
+      Object.prototype.toString.call(value) === "[object Date]")
+  );
+}
+
+/**
+ * @name isValid
+ * @category Common Helpers
+ * @summary Is the given date valid?
+ *
+ * @description
+ * Returns false if argument is Invalid Date and true otherwise.
+ * Argument is converted to Date using `toDate`. See [toDate](https://date-fns.org/docs/toDate)
+ * Invalid Date is a Date, whose time value is NaN.
+ *
+ * Time value of Date: http://es5.github.io/#x15.9.1.1
+ *
+ * @param date - The date to check
+ *
+ * @returns The date is valid
+ *
+ * @example
+ * // For the valid date:
+ * const result = isValid(new Date(2014, 1, 31))
+ * //=> true
+ *
+ * @example
+ * // For the value, convertible into a date:
+ * const result = isValid(1393804800000)
+ * //=> true
+ *
+ * @example
+ * // For the invalid date:
+ * const result = isValid(new Date(''))
+ * //=> false
+ */
+function isValid(date) {
+  return !((!isDate(date) && typeof date !== "number") || isNaN(+toDate(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;
+}
+
+function normalizeInterval(context, interval) {
+  const [start, end] = normalizeDates(context, interval.start, interval.end);
+  return { start, end };
+}
+
+/**
+ * The {@link eachDayOfInterval} function options.
+ */
+
+/**
+ * The {@link eachDayOfInterval} function result type. It resolves the proper data type.
+ * It uses the first argument date object type, starting from the date argument,
+ * then the start interval date, and finally the end interval date. If
+ * a context function is passed, it uses the context function return type.
+ */
+
+/**
+ * @name eachDayOfInterval
+ * @category Interval Helpers
+ * @summary Return the array of dates within the specified time interval.
+ *
+ * @description
+ * Return the array of dates within the specified time interval.
+ *
+ * @typeParam IntervalType - Interval type.
+ * @typeParam Options - Options type.
+ *
+ * @param interval - The interval.
+ * @param options - An object with options.
+ *
+ * @returns The array with starts of days from the day of the interval start to the day of the interval end
+ *
+ * @example
+ * // Each day between 6 October 2014 and 10 October 2014:
+ * const result = eachDayOfInterval({
+ *   start: new Date(2014, 9, 6),
+ *   end: new Date(2014, 9, 10)
+ * })
+ * //=> [
+ * //   Mon Oct 06 2014 00:00:00,
+ * //   Tue Oct 07 2014 00:00:00,
+ * //   Wed Oct 08 2014 00:00:00,
+ * //   Thu Oct 09 2014 00:00:00,
+ * //   Fri Oct 10 2014 00:00:00
+ * // ]
+ */
+function eachDayOfInterval(interval, options) {
+  const { start, end } = normalizeInterval(options?.in, interval);
+
+  let reversed = +start > +end;
+  const endTime = reversed ? +start : +end;
+  const date = reversed ? end : start;
+  date.setHours(0, 0, 0, 0);
+
+  let step = options?.step ?? 1;
+  if (!step) return [];
+  if (step < 0) {
+    step = -step;
+    reversed = !reversed;
+  }
+
+  const dates = [];
+
+  while (+date <= endTime) {
+    dates.push(constructFrom(start, date));
+    date.setDate(date.getDate() + step);
+    date.setHours(0, 0, 0, 0);
+  }
+
+  return reversed ? dates.reverse() : dates;
+}
+
+/**
+ * The {@link startOfMonth} function options.
+ */
+
+/**
+ * @name startOfMonth
+ * @category Month Helpers
+ * @summary Return the start of a month for the given date.
+ *
+ * @description
+ * Return the start 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 start of a month
+ *
+ * @example
+ * // The start of a month for 2 September 2014 11:55:00:
+ * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function startOfMonth(date, options) {
+  const _date = toDate(date, options?.in);
+  _date.setDate(1);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+
+/**
+ * The {@link startOfYear} function options.
+ */
+
+/**
+ * @name startOfYear
+ * @category Year Helpers
+ * @summary Return the start of a year for the given date.
+ *
+ * @description
+ * Return the start of a year 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 - The options
+ *
+ * @returns The start of a year
+ *
+ * @example
+ * // The start of a year for 2 September 2014 11:55:00:
+ * const result = startOfYear(new Date(2014, 8, 2, 11, 55, 00))
+ * //=> Wed Jan 01 2014 00:00:00
+ */
+function startOfYear(date, options) {
+  const date_ = toDate(date, options?.in);
+  date_.setFullYear(date_.getFullYear(), 0, 1);
+  date_.setHours(0, 0, 0, 0);
+  return date_;
+}
+
+const formatDistanceLocale = {
+  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 = (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}}", 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 = {
+  full: "EEEE, MMMM do, y",
+  long: "MMMM do, y",
+  medium: "MMM d, y",
+  short: "MM/dd/yyyy",
+};
+
+const timeFormats = {
+  full: "h:mm:ss a zzzz",
+  long: "h:mm:ss a z",
+  medium: "h:mm:ss a",
+  short: "h:mm a",
+};
+
+const dateTimeFormats = {
+  full: "{{date}} 'at' {{time}}",
+  long: "{{date}} 'at' {{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",
+  }),
+};
+
+const formatRelativeLocale = {
+  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 = (token, _date, _baseDate, _options) =>
+  formatRelativeLocale[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 = {
+  narrow: ["B", "A"],
+  abbreviated: ["BC", "AD"],
+  wide: ["Before Christ", "Anno Domini"],
+};
+
+const quarterValues = {
+  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 = {
+  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 = {
+  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 = {
+  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 = {
+  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 = (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 = {
+  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",
+  }),
+};
+
+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 = /^(\d+)(th|st|nd|rd)?/i;
+const parseOrdinalNumberPattern = /\d+/i;
+
+const matchEraPatterns = {
+  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 = {
+  any: [/^b/i, /^(a|c)/i],
+};
+
+const matchQuarterPatterns = {
+  narrow: /^[1234]/i,
+  abbreviated: /^q[1234]/i,
+  wide: /^[1234](th|st|nd|rd)? quarter/i,
+};
+const parseQuarterPatterns = {
+  any: [/1/i, /2/i, /3/i, /4/i],
+};
+
+const matchMonthPatterns = {
+  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 = {
+  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 = {
+  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 = {
+  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 = {
+  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 = {
+  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 = {
+  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 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,
+  formatLong: formatLong,
+  formatRelative: formatRelative,
+  localize: localize,
+  match: match,
+  options: {
+    weekStartsOn: 0 /* Sunday */,
+    firstWeekContainsDate: 1,
+  },
+};
+
+/**
+ * The {@link getDayOfYear} function options.
+ */
+
+/**
+ * @name getDayOfYear
+ * @category Day Helpers
+ * @summary Get the day of the year of the given date.
+ *
+ * @description
+ * Get the day of the year of the given date.
+ *
+ * @param date - The given date
+ * @param options - The options
+ *
+ * @returns The day of year
+ *
+ * @example
+ * // Which day of the year is 2 July 2014?
+ * const result = getDayOfYear(new Date(2014, 6, 2))
+ * //=> 183
+ */
+function getDayOfYear(date, options) {
+  const _date = toDate(date, options?.in);
+  const diff = differenceInCalendarDays(_date, startOfYear(_date));
+  const dayOfYear = diff + 1;
+  return dayOfYear;
+}
+
+/**
+ * The {@link getISOWeek} function options.
+ */
+
+/**
+ * @name getISOWeek
+ * @category ISO Week Helpers
+ * @summary Get the ISO week of the given date.
+ *
+ * @description
+ * Get the ISO week of the given date.
+ *
+ * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date
+ *
+ * @param date - The given date
+ * @param options - The options
+ *
+ * @returns The ISO week
+ *
+ * @example
+ * // Which week of the ISO-week numbering year is 2 January 2005?
+ * const result = getISOWeek(new Date(2005, 0, 2))
+ * //=> 53
+ */
+function getISOWeek(date, options) {
+  const _date = toDate(date, options?.in);
+  const diff = +startOfISOWeek(_date) - +startOfISOWeekYear(_date);
+
+  // Round the number of weeks to the nearest integer because the number of
+  // milliseconds in a week is not constant (e.g. it's different in the week of
+  // the daylight saving time clock shift).
+  return Math.round(diff / millisecondsInWeek) + 1;
+}
+
+/**
+ * The {@link getWeekYear} function options.
+ */
+
+/**
+ * @name getWeekYear
+ * @category Week-Numbering Year Helpers
+ * @summary Get the local week-numbering year of the given date.
+ *
+ * @description
+ * Get the local week-numbering year of the given date.
+ * The exact calculation depends on the values of
+ * `options.weekStartsOn` (which is the index of the first day of the week)
+ * and `options.firstWeekContainsDate` (which is the day of January, which is always in
+ * the first week of the week-numbering year)
+ *
+ * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system
+ *
+ * @param date - The given date
+ * @param options - An object with options.
+ *
+ * @returns The local week-numbering year
+ *
+ * @example
+ * // Which week numbering year is 26 December 2004 with the default settings?
+ * const result = getWeekYear(new Date(2004, 11, 26))
+ * //=> 2005
+ *
+ * @example
+ * // Which week numbering year is 26 December 2004 if week starts on Saturday?
+ * const result = getWeekYear(new Date(2004, 11, 26), { weekStartsOn: 6 })
+ * //=> 2004
+ *
+ * @example
+ * // Which week numbering year is 26 December 2004 if the first week contains 4 January?
+ * const result = getWeekYear(new Date(2004, 11, 26), { firstWeekContainsDate: 4 })
+ * //=> 2004
+ */
+function getWeekYear(date, options) {
+  const _date = toDate(date, options?.in);
+  const year = _date.getFullYear();
+
+  const defaultOptions = getDefaultOptions();
+  const firstWeekContainsDate =
+    options?.firstWeekContainsDate ??
+    options?.locale?.options?.firstWeekContainsDate ??
+    defaultOptions.firstWeekContainsDate ??
+    defaultOptions.locale?.options?.firstWeekContainsDate ??
+    1;
+
+  const firstWeekOfNextYear = constructFrom(options?.in || date, 0);
+  firstWeekOfNextYear.setFullYear(year + 1, 0, firstWeekContainsDate);
+  firstWeekOfNextYear.setHours(0, 0, 0, 0);
+  const startOfNextYear = startOfWeek(firstWeekOfNextYear, options);
+
+  const firstWeekOfThisYear = constructFrom(options?.in || date, 0);
+  firstWeekOfThisYear.setFullYear(year, 0, firstWeekContainsDate);
+  firstWeekOfThisYear.setHours(0, 0, 0, 0);
+  const startOfThisYear = startOfWeek(firstWeekOfThisYear, options);
+
+  if (+_date >= +startOfNextYear) {
+    return year + 1;
+  } else if (+_date >= +startOfThisYear) {
+    return year;
+  } else {
+    return year - 1;
+  }
+}
+
+/**
+ * The {@link startOfWeekYear} function options.
+ */
+
+/**
+ * @name startOfWeekYear
+ * @category Week-Numbering Year Helpers
+ * @summary Return the start of a local week-numbering year for the given date.
+ *
+ * @description
+ * Return the start of a local week-numbering year.
+ * The exact calculation depends on the values of
+ * `options.weekStartsOn` (which is the index of the first day of the week)
+ * and `options.firstWeekContainsDate` (which is the day of January, which is always in
+ * the first week of the week-numbering year)
+ *
+ * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system
+ *
+ * @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.
+ *
+ * @param date - The original date
+ * @param options - An object with options
+ *
+ * @returns The start of a week-numbering year
+ *
+ * @example
+ * // The start of an a week-numbering year for 2 July 2005 with default settings:
+ * const result = startOfWeekYear(new Date(2005, 6, 2))
+ * //=> Sun Dec 26 2004 00:00:00
+ *
+ * @example
+ * // The start of a week-numbering year for 2 July 2005
+ * // if Monday is the first day of week
+ * // and 4 January is always in the first week of the year:
+ * const result = startOfWeekYear(new Date(2005, 6, 2), {
+ *   weekStartsOn: 1,
+ *   firstWeekContainsDate: 4
+ * })
+ * //=> Mon Jan 03 2005 00:00:00
+ */
+function startOfWeekYear(date, options) {
+  const defaultOptions = getDefaultOptions();
+  const firstWeekContainsDate =
+    options?.firstWeekContainsDate ??
+    options?.locale?.options?.firstWeekContainsDate ??
+    defaultOptions.firstWeekContainsDate ??
+    defaultOptions.locale?.options?.firstWeekContainsDate ??
+    1;
+
+  const year = getWeekYear(date, options);
+  const firstWeek = constructFrom(options?.in || date, 0);
+  firstWeek.setFullYear(year, 0, firstWeekContainsDate);
+  firstWeek.setHours(0, 0, 0, 0);
+  const _date = startOfWeek(firstWeek, options);
+  return _date;
+}
+
+/**
+ * The {@link getWeek} function options.
+ */
+
+/**
+ * @name getWeek
+ * @category Week Helpers
+ * @summary Get the local week index of the given date.
+ *
+ * @description
+ * Get the local week index of the given date.
+ * The exact calculation depends on the values of
+ * `options.weekStartsOn` (which is the index of the first day of the week)
+ * and `options.firstWeekContainsDate` (which is the day of January, which is always in
+ * the first week of the week-numbering year)
+ *
+ * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system
+ *
+ * @param date - The given date
+ * @param options - An object with options
+ *
+ * @returns The week
+ *
+ * @example
+ * // Which week of the local week numbering year is 2 January 2005 with default options?
+ * const result = getWeek(new Date(2005, 0, 2))
+ * //=> 2
+ *
+ * @example
+ * // Which week of the local week numbering year is 2 January 2005,
+ * // if Monday is the first day of the week,
+ * // and the first week of the year always contains 4 January?
+ * const result = getWeek(new Date(2005, 0, 2), {
+ *   weekStartsOn: 1,
+ *   firstWeekContainsDate: 4
+ * })
+ * //=> 53
+ */
+function getWeek(date, options) {
+  const _date = toDate(date, options?.in);
+  const diff = +startOfWeek(_date, options) - +startOfWeekYear(_date, options);
+
+  // Round the number of weeks to the nearest integer because the number of
+  // milliseconds in a week is not constant (e.g. it's different in the week of
+  // the daylight saving time clock shift).
+  return Math.round(diff / millisecondsInWeek) + 1;
+}
+
+function addLeadingZeros(number, targetLength) {
+  const sign = number < 0 ? "-" : "";
+  const output = Math.abs(number).toString().padStart(targetLength, "0");
+  return sign + output;
+}
+
+/*
+ * |     | Unit                           |     | Unit                           |
+ * |-----|--------------------------------|-----|--------------------------------|
+ * |  a  | AM, PM                         |  A* |                                |
+ * |  d  | Day of month                   |  D  |                                |
+ * |  h  | Hour [1-12]                    |  H  | Hour [0-23]                    |
+ * |  m  | Minute                         |  M  | Month                          |
+ * |  s  | Second                         |  S  | Fraction of second             |
+ * |  y  | Year (abs)                     |  Y  |                                |
+ *
+ * Letters marked by * are not implemented but reserved by Unicode standard.
+ */
+
+const lightFormatters = {
+  // Year
+  y(date, token) {
+    // From http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Format_tokens
+    // | Year     |     y | yy |   yyy |  yyyy | yyyyy |
+    // |----------|-------|----|-------|-------|-------|
+    // | AD 1     |     1 | 01 |   001 |  0001 | 00001 |
+    // | AD 12    |    12 | 12 |   012 |  0012 | 00012 |
+    // | AD 123   |   123 | 23 |   123 |  0123 | 00123 |
+    // | AD 1234  |  1234 | 34 |  1234 |  1234 | 01234 |
+    // | AD 12345 | 12345 | 45 | 12345 | 12345 | 12345 |
+
+    const signedYear = date.getFullYear();
+    // Returns 1 for 1 BC (which is year 0 in JavaScript)
+    const year = signedYear > 0 ? signedYear : 1 - signedYear;
+    return addLeadingZeros(token === "yy" ? year % 100 : year, token.length);
+  },
+
+  // Month
+  M(date, token) {
+    const month = date.getMonth();
+    return token === "M" ? String(month + 1) : addLeadingZeros(month + 1, 2);
+  },
+
+  // Day of the month
+  d(date, token) {
+    return addLeadingZeros(date.getDate(), token.length);
+  },
+
+  // AM or PM
+  a(date, token) {
+    const dayPeriodEnumValue = date.getHours() / 12 >= 1 ? "pm" : "am";
+
+    switch (token) {
+      case "a":
+      case "aa":
+        return dayPeriodEnumValue.toUpperCase();
+      case "aaa":
+        return dayPeriodEnumValue;
+      case "aaaaa":
+        return dayPeriodEnumValue[0];
+      case "aaaa":
+      default:
+        return dayPeriodEnumValue === "am" ? "a.m." : "p.m.";
+    }
+  },
+
+  // Hour [1-12]
+  h(date, token) {
+    return addLeadingZeros(date.getHours() % 12 || 12, token.length);
+  },
+
+  // Hour [0-23]
+  H(date, token) {
+    return addLeadingZeros(date.getHours(), token.length);
+  },
+
+  // Minute
+  m(date, token) {
+    return addLeadingZeros(date.getMinutes(), token.length);
+  },
+
+  // Second
+  s(date, token) {
+    return addLeadingZeros(date.getSeconds(), token.length);
+  },
+
+  // Fraction of second
+  S(date, token) {
+    const numberOfDigits = token.length;
+    const milliseconds = date.getMilliseconds();
+    const fractionalSeconds = Math.trunc(
+      milliseconds * Math.pow(10, numberOfDigits - 3),
+    );
+    return addLeadingZeros(fractionalSeconds, token.length);
+  },
+};
+
+const dayPeriodEnum = {
+  am: "am",
+  pm: "pm",
+  midnight: "midnight",
+  noon: "noon",
+  morning: "morning",
+  afternoon: "afternoon",
+  evening: "evening",
+  night: "night",
+};
+
+/*
+ * |     | Unit                           |     | Unit                           |
+ * |-----|--------------------------------|-----|--------------------------------|
+ * |  a  | AM, PM                         |  A* | Milliseconds in day            |
+ * |  b  | AM, PM, noon, midnight         |  B  | Flexible day period            |
+ * |  c  | Stand-alone local day of week  |  C* | Localized hour w/ day period   |
+ * |  d  | Day of month                   |  D  | Day of year                    |
+ * |  e  | Local day of week              |  E  | Day of week                    |
+ * |  f  |                                |  F* | Day of week in month           |
+ * |  g* | Modified Julian day            |  G  | Era                            |
+ * |  h  | Hour [1-12]                    |  H  | Hour [0-23]                    |
+ * |  i! | ISO day of week                |  I! | ISO week of year               |
+ * |  j* | Localized hour w/ day period   |  J* | Localized hour w/o day period  |
+ * |  k  | Hour [1-24]                    |  K  | Hour [0-11]                    |
+ * |  l* | (deprecated)                   |  L  | Stand-alone month              |
+ * |  m  | Minute                         |  M  | Month                          |
+ * |  n  |                                |  N  |                                |
+ * |  o! | Ordinal number modifier        |  O  | Timezone (GMT)                 |
+ * |  p! | Long localized time            |  P! | Long localized date            |
+ * |  q  | Stand-alone quarter            |  Q  | Quarter                        |
+ * |  r* | Related Gregorian year         |  R! | ISO week-numbering year        |
+ * |  s  | Second                         |  S  | Fraction of second             |
+ * |  t! | Seconds timestamp              |  T! | Milliseconds timestamp         |
+ * |  u  | Extended year                  |  U* | Cyclic year                    |
+ * |  v* | Timezone (generic non-locat.)  |  V* | Timezone (location)            |
+ * |  w  | Local week of year             |  W* | Week of month                  |
+ * |  x  | Timezone (ISO-8601 w/o Z)      |  X  | Timezone (ISO-8601)            |
+ * |  y  | Year (abs)                     |  Y  | Local week-numbering year      |
+ * |  z  | Timezone (specific non-locat.) |  Z* | Timezone (aliases)             |
+ *
+ * Letters marked by * are not implemented but reserved by Unicode standard.
+ *
+ * Letters marked by ! are non-standard, but implemented by date-fns:
+ * - `o` modifies the previous token to turn it into an ordinal (see `format` docs)
+ * - `i` is ISO day of week. For `i` and `ii` is returns numeric ISO week days,
+ *   i.e. 7 for Sunday, 1 for Monday, etc.
+ * - `I` is ISO week of year, as opposed to `w` which is local week of year.
+ * - `R` is ISO week-numbering year, as opposed to `Y` which is local week-numbering year.
+ *   `R` is supposed to be used in conjunction with `I` and `i`
+ *   for universal ISO week-numbering date, whereas
+ *   `Y` is supposed to be used in conjunction with `w` and `e`
+ *   for week-numbering date specific to the locale.
+ * - `P` is long localized date format
+ * - `p` is long localized time format
+ */
+
+const formatters = {
+  // Era
+  G: function (date, token, localize) {
+    const era = date.getFullYear() > 0 ? 1 : 0;
+    switch (token) {
+      // AD, BC
+      case "G":
+      case "GG":
+      case "GGG":
+        return localize.era(era, { width: "abbreviated" });
+      // A, B
+      case "GGGGG":
+        return localize.era(era, { width: "narrow" });
+      // Anno Domini, Before Christ
+      case "GGGG":
+      default:
+        return localize.era(era, { width: "wide" });
+    }
+  },
+
+  // Year
+  y: function (date, token, localize) {
+    // Ordinal number
+    if (token === "yo") {
+      const signedYear = date.getFullYear();
+      // Returns 1 for 1 BC (which is year 0 in JavaScript)
+      const year = signedYear > 0 ? signedYear : 1 - signedYear;
+      return localize.ordinalNumber(year, { unit: "year" });
+    }
+
+    return lightFormatters.y(date, token);
+  },
+
+  // Local week-numbering year
+  Y: function (date, token, localize, options) {
+    const signedWeekYear = getWeekYear(date, options);
+    // Returns 1 for 1 BC (which is year 0 in JavaScript)
+    const weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear;
+
+    // Two digit year
+    if (token === "YY") {
+      const twoDigitYear = weekYear % 100;
+      return addLeadingZeros(twoDigitYear, 2);
+    }
+
+    // Ordinal number
+    if (token === "Yo") {
+      return localize.ordinalNumber(weekYear, { unit: "year" });
+    }
+
+    // Padding
+    return addLeadingZeros(weekYear, token.length);
+  },
+
+  // ISO week-numbering year
+  R: function (date, token) {
+    const isoWeekYear = getISOWeekYear(date);
+
+    // Padding
+    return addLeadingZeros(isoWeekYear, token.length);
+  },
+
+  // Extended year. This is a single number designating the year of this calendar system.
+  // The main difference between `y` and `u` localizers are B.C. years:
+  // | Year | `y` | `u` |
+  // |------|-----|-----|
+  // | AC 1 |   1 |   1 |
+  // | BC 1 |   1 |   0 |
+  // | BC 2 |   2 |  -1 |
+  // Also `yy` always returns the last two digits of a year,
+  // while `uu` pads single digit years to 2 characters and returns other years unchanged.
+  u: function (date, token) {
+    const year = date.getFullYear();
+    return addLeadingZeros(year, token.length);
+  },
+
+  // Quarter
+  Q: function (date, token, localize) {
+    const quarter = Math.ceil((date.getMonth() + 1) / 3);
+    switch (token) {
+      // 1, 2, 3, 4
+      case "Q":
+        return String(quarter);
+      // 01, 02, 03, 04
+      case "QQ":
+        return addLeadingZeros(quarter, 2);
+      // 1st, 2nd, 3rd, 4th
+      case "Qo":
+        return localize.ordinalNumber(quarter, { unit: "quarter" });
+      // Q1, Q2, Q3, Q4
+      case "QQQ":
+        return localize.quarter(quarter, {
+          width: "abbreviated",
+          context: "formatting",
+        });
+      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
+      case "QQQQQ":
+        return localize.quarter(quarter, {
+          width: "narrow",
+          context: "formatting",
+        });
+      // 1st quarter, 2nd quarter, ...
+      case "QQQQ":
+      default:
+        return localize.quarter(quarter, {
+          width: "wide",
+          context: "formatting",
+        });
+    }
+  },
+
+  // Stand-alone quarter
+  q: function (date, token, localize) {
+    const quarter = Math.ceil((date.getMonth() + 1) / 3);
+    switch (token) {
+      // 1, 2, 3, 4
+      case "q":
+        return String(quarter);
+      // 01, 02, 03, 04
+      case "qq":
+        return addLeadingZeros(quarter, 2);
+      // 1st, 2nd, 3rd, 4th
+      case "qo":
+        return localize.ordinalNumber(quarter, { unit: "quarter" });
+      // Q1, Q2, Q3, Q4
+      case "qqq":
+        return localize.quarter(quarter, {
+          width: "abbreviated",
+          context: "standalone",
+        });
+      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
+      case "qqqqq":
+        return localize.quarter(quarter, {
+          width: "narrow",
+          context: "standalone",
+        });
+      // 1st quarter, 2nd quarter, ...
+      case "qqqq":
+      default:
+        return localize.quarter(quarter, {
+          width: "wide",
+          context: "standalone",
+        });
+    }
+  },
+
+  // Month
+  M: function (date, token, localize) {
+    const month = date.getMonth();
+    switch (token) {
+      case "M":
+      case "MM":
+        return lightFormatters.M(date, token);
+      // 1st, 2nd, ..., 12th
+      case "Mo":
+        return localize.ordinalNumber(month + 1, { unit: "month" });
+      // Jan, Feb, ..., Dec
+      case "MMM":
+        return localize.month(month, {
+          width: "abbreviated",
+          context: "formatting",
+        });
+      // J, F, ..., D
+      case "MMMMM":
+        return localize.month(month, {
+          width: "narrow",
+          context: "formatting",
+        });
+      // January, February, ..., December
+      case "MMMM":
+      default:
+        return localize.month(month, { width: "wide", context: "formatting" });
+    }
+  },
+
+  // Stand-alone month
+  L: function (date, token, localize) {
+    const month = date.getMonth();
+    switch (token) {
+      // 1, 2, ..., 12
+      case "L":
+        return String(month + 1);
+      // 01, 02, ..., 12
+      case "LL":
+        return addLeadingZeros(month + 1, 2);
+      // 1st, 2nd, ..., 12th
+      case "Lo":
+        return localize.ordinalNumber(month + 1, { unit: "month" });
+      // Jan, Feb, ..., Dec
+      case "LLL":
+        return localize.month(month, {
+          width: "abbreviated",
+          context: "standalone",
+        });
+      // J, F, ..., D
+      case "LLLLL":
+        return localize.month(month, {
+          width: "narrow",
+          context: "standalone",
+        });
+      // January, February, ..., December
+      case "LLLL":
+      default:
+        return localize.month(month, { width: "wide", context: "standalone" });
+    }
+  },
+
+  // Local week of year
+  w: function (date, token, localize, options) {
+    const week = getWeek(date, options);
+
+    if (token === "wo") {
+      return localize.ordinalNumber(week, { unit: "week" });
+    }
+
+    return addLeadingZeros(week, token.length);
+  },
+
+  // ISO week of year
+  I: function (date, token, localize) {
+    const isoWeek = getISOWeek(date);
+
+    if (token === "Io") {
+      return localize.ordinalNumber(isoWeek, { unit: "week" });
+    }
+
+    return addLeadingZeros(isoWeek, token.length);
+  },
+
+  // Day of the month
+  d: function (date, token, localize) {
+    if (token === "do") {
+      return localize.ordinalNumber(date.getDate(), { unit: "date" });
+    }
+
+    return lightFormatters.d(date, token);
+  },
+
+  // Day of year
+  D: function (date, token, localize) {
+    const dayOfYear = getDayOfYear(date);
+
+    if (token === "Do") {
+      return localize.ordinalNumber(dayOfYear, { unit: "dayOfYear" });
+    }
+
+    return addLeadingZeros(dayOfYear, token.length);
+  },
+
+  // Day of week
+  E: function (date, token, localize) {
+    const dayOfWeek = date.getDay();
+    switch (token) {
+      // Tue
+      case "E":
+      case "EE":
+      case "EEE":
+        return localize.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "formatting",
+        });
+      // T
+      case "EEEEE":
+        return localize.day(dayOfWeek, {
+          width: "narrow",
+          context: "formatting",
+        });
+      // Tu
+      case "EEEEEE":
+        return localize.day(dayOfWeek, {
+          width: "short",
+          context: "formatting",
+        });
+      // Tuesday
+      case "EEEE":
+      default:
+        return localize.day(dayOfWeek, {
+          width: "wide",
+          context: "formatting",
+        });
+    }
+  },
+
+  // Local day of week
+  e: function (date, token, localize, options) {
+    const dayOfWeek = date.getDay();
+    const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
+    switch (token) {
+      // Numerical value (Nth day of week with current locale or weekStartsOn)
+      case "e":
+        return String(localDayOfWeek);
+      // Padded numerical value
+      case "ee":
+        return addLeadingZeros(localDayOfWeek, 2);
+      // 1st, 2nd, ..., 7th
+      case "eo":
+        return localize.ordinalNumber(localDayOfWeek, { unit: "day" });
+      case "eee":
+        return localize.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "formatting",
+        });
+      // T
+      case "eeeee":
+        return localize.day(dayOfWeek, {
+          width: "narrow",
+          context: "formatting",
+        });
+      // Tu
+      case "eeeeee":
+        return localize.day(dayOfWeek, {
+          width: "short",
+          context: "formatting",
+        });
+      // Tuesday
+      case "eeee":
+      default:
+        return localize.day(dayOfWeek, {
+          width: "wide",
+          context: "formatting",
+        });
+    }
+  },
+
+  // Stand-alone local day of week
+  c: function (date, token, localize, options) {
+    const dayOfWeek = date.getDay();
+    const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
+    switch (token) {
+      // Numerical value (same as in `e`)
+      case "c":
+        return String(localDayOfWeek);
+      // Padded numerical value
+      case "cc":
+        return addLeadingZeros(localDayOfWeek, token.length);
+      // 1st, 2nd, ..., 7th
+      case "co":
+        return localize.ordinalNumber(localDayOfWeek, { unit: "day" });
+      case "ccc":
+        return localize.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "standalone",
+        });
+      // T
+      case "ccccc":
+        return localize.day(dayOfWeek, {
+          width: "narrow",
+          context: "standalone",
+        });
+      // Tu
+      case "cccccc":
+        return localize.day(dayOfWeek, {
+          width: "short",
+          context: "standalone",
+        });
+      // Tuesday
+      case "cccc":
+      default:
+        return localize.day(dayOfWeek, {
+          width: "wide",
+          context: "standalone",
+        });
+    }
+  },
+
+  // ISO day of week
+  i: function (date, token, localize) {
+    const dayOfWeek = date.getDay();
+    const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
+    switch (token) {
+      // 2
+      case "i":
+        return String(isoDayOfWeek);
+      // 02
+      case "ii":
+        return addLeadingZeros(isoDayOfWeek, token.length);
+      // 2nd
+      case "io":
+        return localize.ordinalNumber(isoDayOfWeek, { unit: "day" });
+      // Tue
+      case "iii":
+        return localize.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "formatting",
+        });
+      // T
+      case "iiiii":
+        return localize.day(dayOfWeek, {
+          width: "narrow",
+          context: "formatting",
+        });
+      // Tu
+      case "iiiiii":
+        return localize.day(dayOfWeek, {
+          width: "short",
+          context: "formatting",
+        });
+      // Tuesday
+      case "iiii":
+      default:
+        return localize.day(dayOfWeek, {
+          width: "wide",
+          context: "formatting",
+        });
+    }
+  },
+
+  // AM or PM
+  a: function (date, token, localize) {
+    const hours = date.getHours();
+    const dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am";
+
+    switch (token) {
+      case "a":
+      case "aa":
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting",
+        });
+      case "aaa":
+        return localize
+          .dayPeriod(dayPeriodEnumValue, {
+            width: "abbreviated",
+            context: "formatting",
+          })
+          .toLowerCase();
+      case "aaaaa":
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: "narrow",
+          context: "formatting",
+        });
+      case "aaaa":
+      default:
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: "wide",
+          context: "formatting",
+        });
+    }
+  },
+
+  // AM, PM, midnight, noon
+  b: function (date, token, localize) {
+    const hours = date.getHours();
+    let dayPeriodEnumValue;
+    if (hours === 12) {
+      dayPeriodEnumValue = dayPeriodEnum.noon;
+    } else if (hours === 0) {
+      dayPeriodEnumValue = dayPeriodEnum.midnight;
+    } else {
+      dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am";
+    }
+
+    switch (token) {
+      case "b":
+      case "bb":
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting",
+        });
+      case "bbb":
+        return localize
+          .dayPeriod(dayPeriodEnumValue, {
+            width: "abbreviated",
+            context: "formatting",
+          })
+          .toLowerCase();
+      case "bbbbb":
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: "narrow",
+          context: "formatting",
+        });
+      case "bbbb":
+      default:
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: "wide",
+          context: "formatting",
+        });
+    }
+  },
+
+  // in the morning, in the afternoon, in the evening, at night
+  B: function (date, token, localize) {
+    const hours = date.getHours();
+    let dayPeriodEnumValue;
+    if (hours >= 17) {
+      dayPeriodEnumValue = dayPeriodEnum.evening;
+    } else if (hours >= 12) {
+      dayPeriodEnumValue = dayPeriodEnum.afternoon;
+    } else if (hours >= 4) {
+      dayPeriodEnumValue = dayPeriodEnum.morning;
+    } else {
+      dayPeriodEnumValue = dayPeriodEnum.night;
+    }
+
+    switch (token) {
+      case "B":
+      case "BB":
+      case "BBB":
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting",
+        });
+      case "BBBBB":
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: "narrow",
+          context: "formatting",
+        });
+      case "BBBB":
+      default:
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: "wide",
+          context: "formatting",
+        });
+    }
+  },
+
+  // Hour [1-12]
+  h: function (date, token, localize) {
+    if (token === "ho") {
+      let hours = date.getHours() % 12;
+      if (hours === 0) hours = 12;
+      return localize.ordinalNumber(hours, { unit: "hour" });
+    }
+
+    return lightFormatters.h(date, token);
+  },
+
+  // Hour [0-23]
+  H: function (date, token, localize) {
+    if (token === "Ho") {
+      return localize.ordinalNumber(date.getHours(), { unit: "hour" });
+    }
+
+    return lightFormatters.H(date, token);
+  },
+
+  // Hour [0-11]
+  K: function (date, token, localize) {
+    const hours = date.getHours() % 12;
+
+    if (token === "Ko") {
+      return localize.ordinalNumber(hours, { unit: "hour" });
+    }
+
+    return addLeadingZeros(hours, token.length);
+  },
+
+  // Hour [1-24]
+  k: function (date, token, localize) {
+    let hours = date.getHours();
+    if (hours === 0) hours = 24;
+
+    if (token === "ko") {
+      return localize.ordinalNumber(hours, { unit: "hour" });
+    }
+
+    return addLeadingZeros(hours, token.length);
+  },
+
+  // Minute
+  m: function (date, token, localize) {
+    if (token === "mo") {
+      return localize.ordinalNumber(date.getMinutes(), { unit: "minute" });
+    }
+
+    return lightFormatters.m(date, token);
+  },
+
+  // Second
+  s: function (date, token, localize) {
+    if (token === "so") {
+      return localize.ordinalNumber(date.getSeconds(), { unit: "second" });
+    }
+
+    return lightFormatters.s(date, token);
+  },
+
+  // Fraction of second
+  S: function (date, token) {
+    return lightFormatters.S(date, token);
+  },
+
+  // Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
+  X: function (date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+
+    if (timezoneOffset === 0) {
+      return "Z";
+    }
+
+    switch (token) {
+      // Hours and optional minutes
+      case "X":
+        return formatTimezoneWithOptionalMinutes(timezoneOffset);
+
+      // Hours, minutes and optional seconds without `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `XX`
+      case "XXXX":
+      case "XX": // Hours and minutes without `:` delimiter
+        return formatTimezone(timezoneOffset);
+
+      // Hours, minutes and optional seconds with `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `XXX`
+      case "XXXXX":
+      case "XXX": // Hours and minutes with `:` delimiter
+      default:
+        return formatTimezone(timezoneOffset, ":");
+    }
+  },
+
+  // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent)
+  x: function (date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+
+    switch (token) {
+      // Hours and optional minutes
+      case "x":
+        return formatTimezoneWithOptionalMinutes(timezoneOffset);
+
+      // Hours, minutes and optional seconds without `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `xx`
+      case "xxxx":
+      case "xx": // Hours and minutes without `:` delimiter
+        return formatTimezone(timezoneOffset);
+
+      // Hours, minutes and optional seconds with `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `xxx`
+      case "xxxxx":
+      case "xxx": // Hours and minutes with `:` delimiter
+      default:
+        return formatTimezone(timezoneOffset, ":");
+    }
+  },
+
+  // Timezone (GMT)
+  O: function (date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+
+    switch (token) {
+      // Short
+      case "O":
+      case "OO":
+      case "OOO":
+        return "GMT" + formatTimezoneShort(timezoneOffset, ":");
+      // Long
+      case "OOOO":
+      default:
+        return "GMT" + formatTimezone(timezoneOffset, ":");
+    }
+  },
+
+  // Timezone (specific non-location)
+  z: function (date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+
+    switch (token) {
+      // Short
+      case "z":
+      case "zz":
+      case "zzz":
+        return "GMT" + formatTimezoneShort(timezoneOffset, ":");
+      // Long
+      case "zzzz":
+      default:
+        return "GMT" + formatTimezone(timezoneOffset, ":");
+    }
+  },
+
+  // Seconds timestamp
+  t: function (date, token, _localize) {
+    const timestamp = Math.trunc(+date / 1000);
+    return addLeadingZeros(timestamp, token.length);
+  },
+
+  // Milliseconds timestamp
+  T: function (date, token, _localize) {
+    return addLeadingZeros(+date, token.length);
+  },
+};
+
+function formatTimezoneShort(offset, delimiter = "") {
+  const sign = offset > 0 ? "-" : "+";
+  const absOffset = Math.abs(offset);
+  const hours = Math.trunc(absOffset / 60);
+  const minutes = absOffset % 60;
+  if (minutes === 0) {
+    return sign + String(hours);
+  }
+  return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2);
+}
+
+function formatTimezoneWithOptionalMinutes(offset, delimiter) {
+  if (offset % 60 === 0) {
+    const sign = offset > 0 ? "-" : "+";
+    return sign + addLeadingZeros(Math.abs(offset) / 60, 2);
+  }
+  return formatTimezone(offset, delimiter);
+}
+
+function formatTimezone(offset, delimiter = "") {
+  const sign = offset > 0 ? "-" : "+";
+  const absOffset = Math.abs(offset);
+  const hours = addLeadingZeros(Math.trunc(absOffset / 60), 2);
+  const minutes = addLeadingZeros(absOffset % 60, 2);
+  return sign + hours + delimiter + minutes;
+}
+
+const dateLongFormatter = (pattern, formatLong) => {
+  switch (pattern) {
+    case "P":
+      return formatLong.date({ width: "short" });
+    case "PP":
+      return formatLong.date({ width: "medium" });
+    case "PPP":
+      return formatLong.date({ width: "long" });
+    case "PPPP":
+    default:
+      return formatLong.date({ width: "full" });
+  }
+};
+
+const timeLongFormatter = (pattern, formatLong) => {
+  switch (pattern) {
+    case "p":
+      return formatLong.time({ width: "short" });
+    case "pp":
+      return formatLong.time({ width: "medium" });
+    case "ppp":
+      return formatLong.time({ width: "long" });
+    case "pppp":
+    default:
+      return formatLong.time({ width: "full" });
+  }
+};
+
+const dateTimeLongFormatter = (pattern, formatLong) => {
+  const matchResult = pattern.match(/(P+)(p+)?/) || [];
+  const datePattern = matchResult[1];
+  const timePattern = matchResult[2];
+
+  if (!timePattern) {
+    return dateLongFormatter(pattern, formatLong);
+  }
+
+  let dateTimeFormat;
+
+  switch (datePattern) {
+    case "P":
+      dateTimeFormat = formatLong.dateTime({ width: "short" });
+      break;
+    case "PP":
+      dateTimeFormat = formatLong.dateTime({ width: "medium" });
+      break;
+    case "PPP":
+      dateTimeFormat = formatLong.dateTime({ width: "long" });
+      break;
+    case "PPPP":
+    default:
+      dateTimeFormat = formatLong.dateTime({ width: "full" });
+      break;
+  }
+
+  return dateTimeFormat
+    .replace("{{date}}", dateLongFormatter(datePattern, formatLong))
+    .replace("{{time}}", timeLongFormatter(timePattern, formatLong));
+};
+
+const longFormatters = {
+  p: timeLongFormatter,
+  P: dateTimeLongFormatter,
+};
+
+const dayOfYearTokenRE = /^D+$/;
+const weekYearTokenRE = /^Y+$/;
+
+const throwTokens = ["D", "DD", "YY", "YYYY"];
+
+function isProtectedDayOfYearToken(token) {
+  return dayOfYearTokenRE.test(token);
+}
+
+function isProtectedWeekYearToken(token) {
+  return weekYearTokenRE.test(token);
+}
+
+function warnOrThrowProtectedError(token, format, input) {
+  const _message = message(token, format, input);
+  console.warn(_message);
+  if (throwTokens.includes(token)) throw new RangeError(_message);
+}
+
+function message(token, format, input) {
+  const subject = token[0] === "Y" ? "years" : "days of the month";
+  return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
+}
+
+// This RegExp consists of three parts separated by `|`:
+// - [yYQqMLwIdDecihHKkms]o matches any available ordinal number token
+//   (one of the certain letters followed by `o`)
+// - (\w)\1* matches any sequences of the same letter
+// - '' matches two quote characters in a row
+// - '(''|[^'])+('|$) matches anything surrounded by two quote characters ('),
+//   except a single quote symbol, which ends the sequence.
+//   Two quote characters do not end the sequence.
+//   If there is no matching single quote
+//   then the sequence will continue until the end of the string.
+// - . matches any single character unmatched by previous parts of the RegExps
+const formattingTokensRegExp =
+  /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g;
+
+// This RegExp catches symbols escaped by quotes, and also
+// sequences of symbols P, p, and the combinations like `PPPPPPPppppp`
+const longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
+
+const escapedStringRegExp = /^'([^]*?)'?$/;
+const doubleQuoteRegExp = /''/g;
+const unescapedLatinCharacterRegExp = /[a-zA-Z]/;
+
+/**
+ * The {@link format} function options.
+ */
+
+/**
+ * @name format
+ * @alias formatDate
+ * @category Common Helpers
+ * @summary Format the date.
+ *
+ * @description
+ * Return the formatted date string in the given format. The result may vary by locale.
+ *
+ * > ⚠️ Please note that the `format` tokens differ from Moment.js and other libraries.
+ * > See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+ *
+ * The characters wrapped between two single quotes characters (') are escaped.
+ * Two single quotes in a row, whether inside or outside a quoted sequence, represent a 'real' single quote.
+ * (see the last example)
+ *
+ * Format of the string is based on Unicode Technical Standard #35:
+ * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+ * with a few additions (see note 7 below the table).
+ *
+ * Accepted patterns:
+ * | Unit                            | Pattern | Result examples                   | Notes |
+ * |---------------------------------|---------|-----------------------------------|-------|
+ * | Era                             | G..GGG  | AD, BC                            |       |
+ * |                                 | GGGG    | Anno Domini, Before Christ        | 2     |
+ * |                                 | GGGGG   | A, B                              |       |
+ * | Calendar year                   | y       | 44, 1, 1900, 2017                 | 5     |
+ * |                                 | yo      | 44th, 1st, 0th, 17th              | 5,7   |
+ * |                                 | yy      | 44, 01, 00, 17                    | 5     |
+ * |                                 | yyy     | 044, 001, 1900, 2017              | 5     |
+ * |                                 | yyyy    | 0044, 0001, 1900, 2017            | 5     |
+ * |                                 | yyyyy   | ...                               | 3,5   |
+ * | Local week-numbering year       | Y       | 44, 1, 1900, 2017                 | 5     |
+ * |                                 | Yo      | 44th, 1st, 1900th, 2017th         | 5,7   |
+ * |                                 | YY      | 44, 01, 00, 17                    | 5,8   |
+ * |                                 | YYY     | 044, 001, 1900, 2017              | 5     |
+ * |                                 | YYYY    | 0044, 0001, 1900, 2017            | 5,8   |
+ * |                                 | YYYYY   | ...                               | 3,5   |
+ * | ISO week-numbering year         | R       | -43, 0, 1, 1900, 2017             | 5,7   |
+ * |                                 | RR      | -43, 00, 01, 1900, 2017           | 5,7   |
+ * |                                 | RRR     | -043, 000, 001, 1900, 2017        | 5,7   |
+ * |                                 | RRRR    | -0043, 0000, 0001, 1900, 2017     | 5,7   |
+ * |                                 | RRRRR   | ...                               | 3,5,7 |
+ * | Extended year                   | u       | -43, 0, 1, 1900, 2017             | 5     |
+ * |                                 | uu      | -43, 01, 1900, 2017               | 5     |
+ * |                                 | uuu     | -043, 001, 1900, 2017             | 5     |
+ * |                                 | uuuu    | -0043, 0001, 1900, 2017           | 5     |
+ * |                                 | uuuuu   | ...                               | 3,5   |
+ * | Quarter (formatting)            | Q       | 1, 2, 3, 4                        |       |
+ * |                                 | Qo      | 1st, 2nd, 3rd, 4th                | 7     |
+ * |                                 | QQ      | 01, 02, 03, 04                    |       |
+ * |                                 | QQQ     | Q1, Q2, Q3, Q4                    |       |
+ * |                                 | QQQQ    | 1st quarter, 2nd quarter, ...     | 2     |
+ * |                                 | QQQQQ   | 1, 2, 3, 4                        | 4     |
+ * | Quarter (stand-alone)           | q       | 1, 2, 3, 4                        |       |
+ * |                                 | qo      | 1st, 2nd, 3rd, 4th                | 7     |
+ * |                                 | qq      | 01, 02, 03, 04                    |       |
+ * |                                 | qqq     | Q1, Q2, Q3, Q4                    |       |
+ * |                                 | qqqq    | 1st quarter, 2nd quarter, ...     | 2     |
+ * |                                 | qqqqq   | 1, 2, 3, 4                        | 4     |
+ * | Month (formatting)              | M       | 1, 2, ..., 12                     |       |
+ * |                                 | Mo      | 1st, 2nd, ..., 12th               | 7     |
+ * |                                 | MM      | 01, 02, ..., 12                   |       |
+ * |                                 | MMM     | Jan, Feb, ..., Dec                |       |
+ * |                                 | MMMM    | January, February, ..., December  | 2     |
+ * |                                 | MMMMM   | J, F, ..., D                      |       |
+ * | Month (stand-alone)             | L       | 1, 2, ..., 12                     |       |
+ * |                                 | Lo      | 1st, 2nd, ..., 12th               | 7     |
+ * |                                 | LL      | 01, 02, ..., 12                   |       |
+ * |                                 | LLL     | Jan, Feb, ..., Dec                |       |
+ * |                                 | LLLL    | January, February, ..., December  | 2     |
+ * |                                 | LLLLL   | J, F, ..., D                      |       |
+ * | Local week of year              | w       | 1, 2, ..., 53                     |       |
+ * |                                 | wo      | 1st, 2nd, ..., 53th               | 7     |
+ * |                                 | ww      | 01, 02, ..., 53                   |       |
+ * | ISO week of year                | I       | 1, 2, ..., 53                     | 7     |
+ * |                                 | Io      | 1st, 2nd, ..., 53th               | 7     |
+ * |                                 | II      | 01, 02, ..., 53                   | 7     |
+ * | Day of month                    | d       | 1, 2, ..., 31                     |       |
+ * |                                 | do      | 1st, 2nd, ..., 31st               | 7     |
+ * |                                 | dd      | 01, 02, ..., 31                   |       |
+ * | Day of year                     | D       | 1, 2, ..., 365, 366               | 9     |
+ * |                                 | Do      | 1st, 2nd, ..., 365th, 366th       | 7     |
+ * |                                 | DD      | 01, 02, ..., 365, 366             | 9     |
+ * |                                 | DDD     | 001, 002, ..., 365, 366           |       |
+ * |                                 | DDDD    | ...                               | 3     |
+ * | Day of week (formatting)        | E..EEE  | Mon, Tue, Wed, ..., Sun           |       |
+ * |                                 | EEEE    | Monday, Tuesday, ..., Sunday      | 2     |
+ * |                                 | EEEEE   | M, T, W, T, F, S, S               |       |
+ * |                                 | EEEEEE  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
+ * | ISO day of week (formatting)    | i       | 1, 2, 3, ..., 7                   | 7     |
+ * |                                 | io      | 1st, 2nd, ..., 7th                | 7     |
+ * |                                 | ii      | 01, 02, ..., 07                   | 7     |
+ * |                                 | iii     | Mon, Tue, Wed, ..., Sun           | 7     |
+ * |                                 | iiii    | Monday, Tuesday, ..., Sunday      | 2,7   |
+ * |                                 | iiiii   | M, T, W, T, F, S, S               | 7     |
+ * |                                 | iiiiii  | Mo, Tu, We, Th, Fr, Sa, Su        | 7     |
+ * | Local day of week (formatting)  | e       | 2, 3, 4, ..., 1                   |       |
+ * |                                 | eo      | 2nd, 3rd, ..., 1st                | 7     |
+ * |                                 | ee      | 02, 03, ..., 01                   |       |
+ * |                                 | eee     | Mon, Tue, Wed, ..., Sun           |       |
+ * |                                 | eeee    | Monday, Tuesday, ..., Sunday      | 2     |
+ * |                                 | eeeee   | M, T, W, T, F, S, S               |       |
+ * |                                 | eeeeee  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
+ * | Local day of week (stand-alone) | c       | 2, 3, 4, ..., 1                   |       |
+ * |                                 | co      | 2nd, 3rd, ..., 1st                | 7     |
+ * |                                 | cc      | 02, 03, ..., 01                   |       |
+ * |                                 | ccc     | Mon, Tue, Wed, ..., Sun           |       |
+ * |                                 | cccc    | Monday, Tuesday, ..., Sunday      | 2     |
+ * |                                 | ccccc   | M, T, W, T, F, S, S               |       |
+ * |                                 | cccccc  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
+ * | AM, PM                          | a..aa   | AM, PM                            |       |
+ * |                                 | aaa     | am, pm                            |       |
+ * |                                 | aaaa    | a.m., p.m.                        | 2     |
+ * |                                 | aaaaa   | a, p                              |       |
+ * | AM, PM, noon, midnight          | b..bb   | AM, PM, noon, midnight            |       |
+ * |                                 | bbb     | am, pm, noon, midnight            |       |
+ * |                                 | bbbb    | a.m., p.m., noon, midnight        | 2     |
+ * |                                 | bbbbb   | a, p, n, mi                       |       |
+ * | Flexible day period             | B..BBB  | at night, in the morning, ...     |       |
+ * |                                 | BBBB    | at night, in the morning, ...     | 2     |
+ * |                                 | BBBBB   | at night, in the morning, ...     |       |
+ * | Hour [1-12]                     | h       | 1, 2, ..., 11, 12                 |       |
+ * |                                 | ho      | 1st, 2nd, ..., 11th, 12th         | 7     |
+ * |                                 | hh      | 01, 02, ..., 11, 12               |       |
+ * | Hour [0-23]                     | H       | 0, 1, 2, ..., 23                  |       |
+ * |                                 | Ho      | 0th, 1st, 2nd, ..., 23rd          | 7     |
+ * |                                 | HH      | 00, 01, 02, ..., 23               |       |
+ * | Hour [0-11]                     | K       | 1, 2, ..., 11, 0                  |       |
+ * |                                 | Ko      | 1st, 2nd, ..., 11th, 0th          | 7     |
+ * |                                 | KK      | 01, 02, ..., 11, 00               |       |
+ * | Hour [1-24]                     | k       | 24, 1, 2, ..., 23                 |       |
+ * |                                 | ko      | 24th, 1st, 2nd, ..., 23rd         | 7     |
+ * |                                 | kk      | 24, 01, 02, ..., 23               |       |
+ * | Minute                          | m       | 0, 1, ..., 59                     |       |
+ * |                                 | mo      | 0th, 1st, ..., 59th               | 7     |
+ * |                                 | mm      | 00, 01, ..., 59                   |       |
+ * | Second                          | s       | 0, 1, ..., 59                     |       |
+ * |                                 | so      | 0th, 1st, ..., 59th               | 7     |
+ * |                                 | ss      | 00, 01, ..., 59                   |       |
+ * | Fraction of second              | S       | 0, 1, ..., 9                      |       |
+ * |                                 | SS      | 00, 01, ..., 99                   |       |
+ * |                                 | SSS     | 000, 001, ..., 999                |       |
+ * |                                 | SSSS    | ...                               | 3     |
+ * | Timezone (ISO-8601 w/ Z)        | X       | -08, +0530, Z                     |       |
+ * |                                 | XX      | -0800, +0530, Z                   |       |
+ * |                                 | XXX     | -08:00, +05:30, Z                 |       |
+ * |                                 | XXXX    | -0800, +0530, Z, +123456          | 2     |
+ * |                                 | XXXXX   | -08:00, +05:30, Z, +12:34:56      |       |
+ * | Timezone (ISO-8601 w/o Z)       | x       | -08, +0530, +00                   |       |
+ * |                                 | xx      | -0800, +0530, +0000               |       |
+ * |                                 | xxx     | -08:00, +05:30, +00:00            | 2     |
+ * |                                 | xxxx    | -0800, +0530, +0000, +123456      |       |
+ * |                                 | xxxxx   | -08:00, +05:30, +00:00, +12:34:56 |       |
+ * | Timezone (GMT)                  | O...OOO | GMT-8, GMT+5:30, GMT+0            |       |
+ * |                                 | OOOO    | GMT-08:00, GMT+05:30, GMT+00:00   | 2     |
+ * | Timezone (specific non-locat.)  | z...zzz | GMT-8, GMT+5:30, GMT+0            | 6     |
+ * |                                 | zzzz    | GMT-08:00, GMT+05:30, GMT+00:00   | 2,6   |
+ * | Seconds timestamp               | t       | 512969520                         | 7     |
+ * |                                 | tt      | ...                               | 3,7   |
+ * | Milliseconds timestamp          | T       | 512969520900                      | 7     |
+ * |                                 | TT      | ...                               | 3,7   |
+ * | Long localized date             | P       | 04/29/1453                        | 7     |
+ * |                                 | PP      | Apr 29, 1453                      | 7     |
+ * |                                 | PPP     | April 29th, 1453                  | 7     |
+ * |                                 | PPPP    | Friday, April 29th, 1453          | 2,7   |
+ * | Long localized time             | p       | 12:00 AM                          | 7     |
+ * |                                 | pp      | 12:00:00 AM                       | 7     |
+ * |                                 | ppp     | 12:00:00 AM GMT+2                 | 7     |
+ * |                                 | pppp    | 12:00:00 AM GMT+02:00             | 2,7   |
+ * | Combination of date and time    | Pp      | 04/29/1453, 12:00 AM              | 7     |
+ * |                                 | PPpp    | Apr 29, 1453, 12:00:00 AM         | 7     |
+ * |                                 | PPPppp  | April 29th, 1453 at ...           | 7     |
+ * |                                 | PPPPpppp| Friday, April 29th, 1453 at ...   | 2,7   |
+ * Notes:
+ * 1. "Formatting" units (e.g. formatting quarter) in the default en-US locale
+ *    are the same as "stand-alone" units, but are different in some languages.
+ *    "Formatting" units are declined according to the rules of the language
+ *    in the context of a date. "Stand-alone" units are always nominative singular:
+ *
+ *    `format(new Date(2017, 10, 6), 'do LLLL', {locale: cs}) //=> '6. listopad'`
+ *
+ *    `format(new Date(2017, 10, 6), 'do MMMM', {locale: cs}) //=> '6. listopadu'`
+ *
+ * 2. Any sequence of the identical letters is a pattern, unless it is escaped by
+ *    the single quote characters (see below).
+ *    If the sequence is longer than listed in table (e.g. `EEEEEEEEEEE`)
+ *    the output will be the same as default pattern for this unit, usually
+ *    the longest one (in case of ISO weekdays, `EEEE`). Default patterns for units
+ *    are marked with "2" in the last column of the table.
+ *
+ *    `format(new Date(2017, 10, 6), 'MMM') //=> 'Nov'`
+ *
+ *    `format(new Date(2017, 10, 6), 'MMMM') //=> 'November'`
+ *
+ *    `format(new Date(2017, 10, 6), 'MMMMM') //=> 'N'`
+ *
+ *    `format(new Date(2017, 10, 6), 'MMMMMM') //=> 'November'`
+ *
+ *    `format(new Date(2017, 10, 6), 'MMMMMMM') //=> 'November'`
+ *
+ * 3. Some patterns could be unlimited length (such as `yyyyyyyy`).
+ *    The output will be padded with zeros to match the length of the pattern.
+ *
+ *    `format(new Date(2017, 10, 6), 'yyyyyyyy') //=> '00002017'`
+ *
+ * 4. `QQQQQ` and `qqqqq` could be not strictly numerical in some locales.
+ *    These tokens represent the shortest form of the quarter.
+ *
+ * 5. The main difference between `y` and `u` patterns are B.C. years:
+ *
+ *    | Year | `y` | `u` |
+ *    |------|-----|-----|
+ *    | AC 1 |   1 |   1 |
+ *    | BC 1 |   1 |   0 |
+ *    | BC 2 |   2 |  -1 |
+ *
+ *    Also `yy` always returns the last two digits of a year,
+ *    while `uu` pads single digit years to 2 characters and returns other years unchanged:
+ *
+ *    | Year | `yy` | `uu` |
+ *    |------|------|------|
+ *    | 1    |   01 |   01 |
+ *    | 14   |   14 |   14 |
+ *    | 376  |   76 |  376 |
+ *    | 1453 |   53 | 1453 |
+ *
+ *    The same difference is true for local and ISO week-numbering years (`Y` and `R`),
+ *    except local week-numbering years are dependent on `options.weekStartsOn`
+ *    and `options.firstWeekContainsDate` (compare [getISOWeekYear](https://date-fns.org/docs/getISOWeekYear)
+ *    and [getWeekYear](https://date-fns.org/docs/getWeekYear)).
+ *
+ * 6. Specific non-location timezones are currently unavailable in `date-fns`,
+ *    so right now these tokens fall back to GMT timezones.
+ *
+ * 7. These patterns are not in the Unicode Technical Standard #35:
+ *    - `i`: ISO day of week
+ *    - `I`: ISO week of year
+ *    - `R`: ISO week-numbering year
+ *    - `t`: seconds timestamp
+ *    - `T`: milliseconds timestamp
+ *    - `o`: ordinal number modifier
+ *    - `P`: long localized date
+ *    - `p`: long localized time
+ *
+ * 8. `YY` and `YYYY` tokens represent week-numbering years but they are often confused with years.
+ *    You should enable `options.useAdditionalWeekYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+ *
+ * 9. `D` and `DD` tokens represent days of the year but they are often confused with days of the month.
+ *    You should enable `options.useAdditionalDayOfYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+ *
+ * @param date - The original date
+ * @param format - The string of tokens
+ * @param options - An object with options
+ *
+ * @returns The formatted date string
+ *
+ * @throws `date` must not be Invalid Date
+ * @throws `options.locale` must contain `localize` property
+ * @throws `options.locale` must contain `formatLong` property
+ * @throws use `yyyy` instead of `YYYY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+ * @throws use `yy` instead of `YY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+ * @throws use `d` instead of `D` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+ * @throws use `dd` instead of `DD` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+ * @throws format string contains an unescaped latin alphabet character
+ *
+ * @example
+ * // Represent 11 February 2014 in middle-endian format:
+ * const result = format(new Date(2014, 1, 11), 'MM/dd/yyyy')
+ * //=> '02/11/2014'
+ *
+ * @example
+ * // Represent 2 July 2014 in Esperanto:
+ * import { eoLocale } from 'date-fns/locale/eo'
+ * const result = format(new Date(2014, 6, 2), "do 'de' MMMM yyyy", {
+ *   locale: eoLocale
+ * })
+ * //=> '2-a de julio 2014'
+ *
+ * @example
+ * // Escape string by single quote characters:
+ * const result = format(new Date(2014, 6, 2, 15), "h 'o''clock'")
+ * //=> "3 o'clock"
+ */
+function format(date, formatStr, options) {
+  const defaultOptions = getDefaultOptions();
+  const locale = options?.locale ?? defaultOptions.locale ?? enUS;
+
+  const firstWeekContainsDate =
+    options?.firstWeekContainsDate ??
+    options?.locale?.options?.firstWeekContainsDate ??
+    defaultOptions.firstWeekContainsDate ??
+    defaultOptions.locale?.options?.firstWeekContainsDate ??
+    1;
+
+  const weekStartsOn =
+    options?.weekStartsOn ??
+    options?.locale?.options?.weekStartsOn ??
+    defaultOptions.weekStartsOn ??
+    defaultOptions.locale?.options?.weekStartsOn ??
+    0;
+
+  const originalDate = toDate(date, options?.in);
+
+  if (!isValid(originalDate)) {
+    throw new RangeError("Invalid time value");
+  }
+
+  let parts = formatStr
+    .match(longFormattingTokensRegExp)
+    .map((substring) => {
+      const firstCharacter = substring[0];
+      if (firstCharacter === "p" || firstCharacter === "P") {
+        const longFormatter = longFormatters[firstCharacter];
+        return longFormatter(substring, locale.formatLong);
+      }
+      return substring;
+    })
+    .join("")
+    .match(formattingTokensRegExp)
+    .map((substring) => {
+      // Replace two single quote characters with one single quote character
+      if (substring === "''") {
+        return { isToken: false, value: "'" };
+      }
+
+      const firstCharacter = substring[0];
+      if (firstCharacter === "'") {
+        return { isToken: false, value: cleanEscapedString(substring) };
+      }
+
+      if (formatters[firstCharacter]) {
+        return { isToken: true, value: substring };
+      }
+
+      if (firstCharacter.match(unescapedLatinCharacterRegExp)) {
+        throw new RangeError(
+          "Format string contains an unescaped latin alphabet character `" +
+            firstCharacter +
+            "`",
+        );
+      }
+
+      return { isToken: false, value: substring };
+    });
+
+  // invoke localize preprocessor (only for french locales at the moment)
+  if (locale.localize.preprocessor) {
+    parts = locale.localize.preprocessor(originalDate, parts);
+  }
+
+  const formatterOptions = {
+    firstWeekContainsDate,
+    weekStartsOn,
+    locale,
+  };
+
+  return parts
+    .map((part) => {
+      if (!part.isToken) return part.value;
+
+      const token = part.value;
+
+      if (
+        (!options?.useAdditionalWeekYearTokens &&
+          isProtectedWeekYearToken(token)) ||
+        (!options?.useAdditionalDayOfYearTokens &&
+          isProtectedDayOfYearToken(token))
+      ) {
+        warnOrThrowProtectedError(token, formatStr, String(date));
+      }
+
+      const formatter = formatters[token[0]];
+      return formatter(originalDate, token, locale.localize, formatterOptions);
+    })
+    .join("");
+}
+
+function cleanEscapedString(input) {
+  const matched = input.match(escapedStringRegExp);
+
+  if (!matched) {
+    return input;
+  }
+
+  return matched[1].replace(doubleQuoteRegExp, "'");
+}
+
+/**
+ * The {@link getDay} function options.
+ */
+
+/**
+ * @name getDay
+ * @category Weekday Helpers
+ * @summary Get the day of the week of the given date.
+ *
+ * @description
+ * Get the day of the week of the given date.
+ *
+ * @param date - The given date
+ * @param options - The options
+ *
+ * @returns The day of week, 0 represents Sunday
+ *
+ * @example
+ * // Which day of the week is 29 February 2012?
+ * const result = getDay(new Date(2012, 1, 29))
+ * //=> 3
+ */
+function getDay(date, options) {
+  return toDate(date, options?.in).getDay();
+}
+
+/**
+ * The {@link isToday} function options.
+ */
+
+/**
+ * @name isToday
+ * @category Day Helpers
+ * @summary Is the given date today?
+ * @pure false
+ *
+ * @description
+ * Is the given date today?
+ *
+ * @param date - The date to check
+ * @param options - An object with options
+ *
+ * @returns The date is today
+ *
+ * @example
+ * // If today is 6 October 2014, is 6 October 14:00:00 today?
+ * const result = isToday(new Date(2014, 9, 6, 14, 0))
+ * //=> true
+ */
+function isToday(date, options) {
+  return isSameDay(
+    constructFrom(options?.in || date, date),
+    constructNow(options?.in || date),
+  );
+}
+
+/**
+ * The subMonths function options.
+ */
+
+/**
+ * @name subMonths
+ * @category Month Helpers
+ * @summary Subtract the specified number of months from the given date.
+ *
+ * @description
+ * Subtract the specified number of months from the given date.
+ *
+ * @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 date to be changed
+ * @param amount - The amount of months to be subtracted.
+ * @param options - An object with options
+ *
+ * @returns The new date with the months subtracted
+ *
+ * @example
+ * // Subtract 5 months from 1 February 2015:
+ * const result = subMonths(new Date(2015, 1, 1), 5)
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function subMonths(date, amount, options) {
+  return addMonths(date, -amount, options);
+}
+
+const jeDatepickerCss = ":host{display:block;padding:var(--je-spacing-xs);box-sizing:border-box}je-button.day{--je-button-min-width:20px;--je-button-height:20px;--je-button-inline-padding:0px}je-button.day::part(inner-button){font-weight:400}.header{display:flex;align-items:center;margin-bottom:10px}.header div{user-select:none;display:flex;cursor:pointer;flex:1;align-items:center}.weekdays-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:5px;margin-bottom:8px}.weekdays-grid div{height:20px;font-size:1em;font-weight:400;color:var(--je-medium-600);text-align:center;align-content:center}.days-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:5px}je-icon{transition:transform 250ms ease}je-icon.open{transform:rotate(180deg)}";
+const JeDatepickerStyle0 = jeDatepickerCss;
+
+const JeDatepicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.nextMonth = () => {
+            this.currentDate = addMonths(this.currentDate, 1);
+        };
+        this.prevMonth = () => {
+            this.currentDate = subMonths(this.currentDate, 1);
+        };
+        this.currentDate = new Date();
+        this.value = undefined;
+        this.isDark = false;
+        this.monthYearPicker = false;
+    }
+    handleThemeChange(e) {
+        this.isDark = e.detail === 'dark';
+    }
+    valueChangeHandler() {
+        this.valueChange.emit(this.value ? new Date(this.value) : undefined);
+    }
+    getDaysInMonth() {
+        const start = startOfMonth(this.currentDate);
+        const end = endOfMonth(this.currentDate);
+        return eachDayOfInterval({ start, end });
+    }
+    render() {
+        const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+        const firstDayOfMonth = startOfMonth(this.currentDate);
+        const lastDayOfMonth = endOfMonth(this.currentDate);
+        const firstDayOfWeek = getDay(firstDayOfMonth);
+        const lastDayOfWeek = getDay(lastDayOfMonth);
+        const daysInMonth = eachDayOfInterval({ start: firstDayOfMonth, end: lastDayOfMonth });
+        const prevMonth = subMonths(this.currentDate, 1);
+        const prevMonthEnd = endOfMonth(prevMonth);
+        const daysBefore = Array.from({ length: firstDayOfWeek }).map((_, i) => subMonths(this.currentDate, 1).setDate(prevMonthEnd.getDate() - (firstDayOfWeek - i - 1)));
+        const daysAfter = Array.from({ length: 6 - lastDayOfWeek }).map((_, i) => addMonths(this.currentDate, 1).setDate(i + 1));
+        return (h(Host, { key: 'ff2ec54e4e3de84b80468820efa641a2922b93cf' }, h("div", { key: '44b43c08d7dcdb90d3db8ee837fe902e804b8255', class: "header" }, h("div", { key: '34649267bbeeab302a646017714da9f00aa3503a', onClick: () => this.monthYearPicker = !this.monthYearPicker }, h("span", { key: 'f83d4b65cc03662bdd7555113a0d367f263e30f6' }, format(this.currentDate, 'MMMM yyyy')), h("je-button", { key: 'c12c79e67bb19ce76b37ff122a9aba76c33d8627', fill: 'clear', iconOnly: true }, h("je-icon", { key: '7fd6737727798a895899015a30c295913c9c9077', class: { open: this.monthYearPicker }, icon: 'expand_more' }))), h("je-button", { key: '17d319c0c3120906ce733bee52eaf31e3ecfce77', iconOnly: true, fill: 'clear', onClick: this.prevMonth }, h("je-icon", { key: 'c6c86b0c4f0360a335903a0298e39f1db9658d51', fill: true, icon: 'arrow_left' })), h("je-button", { key: '21a79c20202fd0acd26589deab5746bfdda32a3c', iconOnly: true, fill: 'clear', onClick: this.nextMonth }, h("je-icon", { key: '508587d9cd3642520f6b58d197df066da15c10ab', icon: 'arrow_right', fill: true }))), h("div", { key: 'c40de53a4277adebef8c7077af02ab4e80491aea', class: "weekdays-grid" }, daysOfWeek.map(day => h("div", null, day))), h("div", { key: '90a3fea593cd4772cfa4006180532a79264e3502', class: "days-grid" }, daysBefore.map(day => (h("je-button", { expand: true, disabled: true, color: 'medium', fill: 'clear', class: 'day' }, format(day, 'd')))), daysInMonth.map(day => {
+            const selected = this.value && isSameDay(day, this.value);
+            const today = isToday(day);
+            return (h("je-button", { expand: true, color: selected || today ? 'primary' : this.isDark ? 'light' : 'dark', fill: selected ? 'solid' : 'clear', class: 'day', onClick: () => this.value = day }, format(day, 'd')));
+        }), daysAfter.map(day => (h("je-button", { expand: true, disabled: true, color: 'medium', fill: 'clear', class: 'day' }, format(day, 'd')))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChangeHandler"]
+    }; }
+};
+JeDatepicker.style = JeDatepickerStyle0;
+
+const jeDetailsCss = ":host{display:block}[part=summary-container]{display:flex;justify-content:space-between;cursor:pointer;user-select:none;-webkit-user-select:none;align-items:center}[part=details-icon]{height:24px;width:24px;transition:transform 250ms ease-in-out}[part=details-container]{box-sizing:border-box;display:grid;grid-template-rows:0fr;padding-top:0;opacity:0;transition:all 250ms ease-out}:host([state=open]) [part=details-container]{grid-template-rows:1fr;opacity:1;padding-top:var(--je-spacing)}:host([state=closed]) [part=details-icon]{height:24px;width:24px;transform:rotate(-180deg)}";
+const JeDetailsStyle0 = jeDetailsCss;
+
+const JeDetails = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.summary = undefined;
+        this.state = 'closed';
+    }
+    render() {
+        return (h("je-card", { key: 'f06bead6338803d66a638688e5999b5061bb8d89' }, h("div", { key: '05900c217e26e721c4f266525b79b87664fc3a43', part: 'summary-container', onClick: () => this.state = this.state == 'open' ? 'closed' : 'open' }, h("slot", { key: 'e641bb5f360cb268043e3e2dbfc0b5b147c5a8da', name: "summary" }, this.summary && h("summary", { key: '2cca006be4897431aeb8c13287d1db25d05e1295' }, this.summary)), h("div", { key: 'd77902ab93d12d79ca6dd705788a6be11badd209', part: 'details-icon' }, h("svg", { key: 'b2bcfdbc26f1b76fb21475a4cbe58b1a877a6883', xmlns: "XXXXXXXXXXXXXXXXXXXXXXXXXX", viewBox: "0 0 24 24" }, h("path", { key: '8d691bf302c104054d03a96f9a6493e4c7051083', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'de42815153c122e0a054c77ee9c752987da92cba', d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" })))), h("div", { key: '5bfe7b312601083e8855c9f23ee5a209f9468bba', part: 'details-container' }, h("div", { key: '1e6f0a4f17e44d59d8655e576b73ecc2c6c67d33', style: { overflow: 'hidden' } }, h("slot", { key: 'f4802e440f736f76f146a81149d1526b393c305f' })))));
+    }
+    get el() { return getElement(this); }
+};
+JeDetails.style = JeDetailsStyle0;
+
+const jeDividerCss = ":host{--thickness:1px;--color:var(--je-medium-500);--spacing:var(--je-spacing-sm);background-color:var(--color)}:host([spacing=sm]){--spacing:var(--je-spacing-2xs)}:host([spacing=lg]){--spacing:var(--je-spacing-lg)}:host([spacing=none]){--spacing:0}:host([type=horizontal]){display:block;width:100%;height:var(--thickness);margin-block:var(--spacing)}:host([type=vertical]){display:inline-block;align-self:normal;width:var(--thickness);margin-inline:var(--spacing)}";
+const JeDividerStyle0 = jeDividerCss;
+
+const JeDivider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.type = 'horizontal';
+        this.spacing = 'md';
+    }
+    render() {
+        return h(Host, { key: 'f8db6d54b81c4d874f0e837202ea79c8bad6d328' });
+    }
+};
+JeDivider.style = JeDividerStyle0;
+
+const jeDrawerCss = ":host{display:block;--je-drawer-width:500px;--je-drawer-shadow:0 4px 8px rgba(0, 0, 0, 0.1);--je-drawer-padding:var(--je-spacing-lg, 20px)}.backdrop{display:block;position:fixed;transition:all 250ms ease-in-out;cursor:pointer;background:var(--je-backdrop-color);top:0;left:0;height:100%;width:100%;z-index:-1}div[part=container]{display:block;position:fixed;left:0;top:0;height:100%;box-sizing:border-box;background-color:canvas;color:canvastext;overflow-y:auto;overflow-x:hidden;width:var(--je-drawer-width);transition:all 250ms ease-in-out;z-index:900;padding:var(--je-drawer-padding)}:host([state=closed]) .backdrop{opacity:0}:host([state=closed]) div[part=container]{margin-left:calc(var(--je-drawer-width) * -1)}:host([state=open]) .backdrop{opacity:1;z-index:899}:host([state=open]) div[part=container]{box-shadow:var(--je-drawer-shadow)}";
+const JeDrawerStyle0 = jeDrawerCss;
+
+const JeDrawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.state = 'closed';
+    }
+    componentDidLoad() {
+        this.pageEl = this.el.closest('je-page');
+        this.parentEl = this.el.parentElement;
+    }
+    async stateChangeHandler(newValue) {
+        if (newValue == 'open') {
+            this.el.remove();
+            this.pageEl.append(this.el);
+        }
+        else {
+            this.el.remove();
+            this.parentEl.append(this.el);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'af9feae455f378cb203bbb62eda5cc05d62dce70', slot: 'overlay' }, h("div", { key: '7ae88770955b96ff62bf63c035ea4c84a47e238e', part: 'container' }, h("slot", { key: 'd419fa2f162aab9ad14d25568363b0184dcc3031' })), h("div", { key: '389e815994b313640cd2efb85e6788219624cd77', onClick: () => this.state = 'closed', class: 'backdrop' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "state": ["stateChangeHandler"]
+    }; }
+};
+JeDrawer.style = JeDrawerStyle0;
+
+const jeDropzoneCss = ":host{display:flex;align-items:center;justify-content:center;height:200px;width:300px;border:1px dashed var(--je-text-color);border-radius:var(--je-border-radius);color:var(--je-text-color);background-color:var(--je-background-color);transition:border-color 250ms, background-color 250ms}:host(.hover){border-color:var(--je-primary-500);background-color:var(--je-medium-100)}:host([darkmode].hover){background-color:var(--je-medium-850)}";
+const JeDropzoneStyle0 = jeDropzoneCss;
+
+const JeDropzone = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dataDrop = createEvent(this, "dataDrop", 7);
+    }
+    handleThemeChange(e) {
+        this.el.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    onDrop(e) {
+        e.preventDefault();
+        this.el.classList.remove('hover');
+        this.dataDrop.emit(e.dataTransfer);
+    }
+    onDragOver(e) {
+        e.preventDefault();
+        this.el.classList.add('hover');
+    }
+    onDragLeave(e) {
+        e.preventDefault();
+        this.el.classList.remove('hover');
+    }
+    render() {
+        return (h(Host, { key: '429fde45a6ef766fdb8d3212a92759ac3206aae1' }, h("div", { key: 'ea9a99fac7c311e0368de0af20141c6302f882c3', part: "content-container" }, h("slot", { key: '9132da72c448411aa8d4aa60a30d93d7dfd161fa' }))));
+    }
+    get el() { return getElement(this); }
+};
+JeDropzone.style = JeDropzoneStyle0;
+
+const jeFormCss = ".sc-je-form-h{display:block}.sc-je-form-h:not([gap=none]) form.sc-je-form{gap:var(--je-spacing, 16px)}form.sc-je-form{display:flex;flex-direction:column}";
+const JeFormStyle0 = jeFormCss;
+
+const JeForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.formData = createEvent(this, "formData", 7);
+        this.gap = 'default';
+    }
+    async handleSubmit(event) {
+        event.preventDefault();
+        const formData = new FormData(this.el);
+        this.formData.emit(formData);
+    }
+    handleKeyup(event) {
+        if (event.key === 'Enter') {
+            const submitButton = this.el.querySelector('button[type=submit]');
+            if (submitButton) {
+                submitButton.click();
+            }
+        }
+    }
+    render() {
+        return (h("form", { key: 'a1bdda6c842835ef6db2f81f09ac709606b77808', ref: el => this.el = el }, h("slot", { key: 'c191310d0efffc71bf16d17a33d92881bd653a9e' })));
+    }
+};
+JeForm.style = JeFormStyle0;
+
+const jeIconCss = ":host{--je-fill:0;--je-weight:400;--je-grade:0;--je-optical:24;display:block;cursor:default;font-family:\"Material Symbols Rounded\";font-weight:normal;font-style:normal;font-size:24px;line-height:unset;letter-spacing:normal;text-transform:none;user-select:none;-webkit-user-select:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" var(--je-fill), \"wght\" var(--je-weight), \"GRAD\" var(--je-grade), \"opsz\" var(--je-optical)}:host([fill]){--je-fill:1}:host([size=sm]){--je-optical:20;font-size:20px}:host([size=md]){--je-optical:24;font-size:24px}:host([size=lg]){--je-optical:40;font-size:40px}:host([size=xl]){--je-optical:48;font-size:48px}:host([grade=low]){--je-grade:-25}:host([grade=high]){--je-grade:200}";
+const JeIconStyle0 = jeIconCss;
+
+const JeIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icon = undefined;
+        this.size = 'md';
+        this.fill = undefined;
+        this.grade = undefined;
+        this.weight = undefined;
+    }
+    componentDidLoad() {
+        if (this.weight) {
+            this.el.style.setProperty('--je-weight', this.weight.toString());
+        }
+    }
+    render() {
+        return (h(Host, { key: '97337aa9c29d8edcda89217af52c6263a286fd7b' }, this.icon));
+    }
+    get el() { return getElement(this); }
+};
+JeIcon.style = JeIconStyle0;
+
+const animationUpdate = () => {
+    return new Promise(resolve => requestAnimationFrame(() => resolve()));
+};
+const debounce = (func, wait = 0) => {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(func, wait, ...args);
+    };
+};
+const debounceEvent = (event, wait) => {
+    const original = event._original || event;
+    return {
+        _original: event,
+        emit: debounce(original.emit.bind(original), wait),
+    };
+};
+
+const jeInputCss = ":host{display:block;width:fit-content;--je-height:42px;--je-border-color:transparent;--je-input-background:var(--je-medium-100);--je-input-color:var(--je-medium-900)}:host([darkmode]){--je-input-background:var(--je-medium-850);--je-input-color:var(--je-medium-50)}:host([expand]){width:100%}:host(:invalid) div[part=outer-container].touched{--je-border-color:var(--je-error-500, red)}div[part=outer-container]{display:flex;align-items:center;justify-content:center;gap:var(--je-spacing-2xs, 8px);height:var(--je-height);background-color:var(--je-input-background, field);color:var(--je-input-color, fieldtext);padding-inline:var(--je-spacing-xs, 10px);border-radius:var(--je-border-radius, 2px);overflow:hidden;border:solid 1px var(--je-border-color);transition:border 125ms ease-in-out}div[part=outer-container].focus{--je-border-color:var(--je-primary-500, accentcolor)}div[part=outer-container].disabled{opacity:0.6;cursor:default}div[part=start-container],div[part=end-container]{display:flex}label{font-weight:var(--je-font-semi-bold)}input{font-family:var(--je-font-family, inherit);font-size:var(--je-font-size, 1rem);background:transparent;color:inherit;flex:1;border:none;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;width:inherit}input::placeholder{font-family:var(--je-font-family, inherit);font-size:var(--je-font-size, 1rem);color:var(--je-medium-600)}input:focus{outline:0}small.helper{display:block;margin-top:var(--je-spacing-2xs, 8px);padding-left:var(--je-spacing-xs, 10px);color:var(--je-medium-600)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none !important}je-popover::part(content){width:var(--je-content-width, auto);box-sizing:border-box;padding:0px}";
+const JeInputStyle0 = jeInputCss;
+
+const JeInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 3);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.dropdownActive = false;
+        this.showPassword = false;
+        this.errors = [];
+        this.originalValue = '';
+        this.togglePassword = () => {
+            this.showPassword = !this.showPassword;
+            this.type = this.type == 'text' ? 'password' : 'text';
+        };
+        this.formatInput = async (ev) => {
+            const input = ev.target;
+            if (input && this.format) {
+                input.value = await this.format(input.value, this.value, ev);
+            }
+        };
+        this.handleInput = (ev) => {
+            const input = ev.target;
+            if (input) {
+                this.value = input.value;
+                this.valueChange.emit(this.value);
+            }
+        };
+        this.handleContainerClick = async () => {
+            if (this.dropdown) {
+                this.dropdownActive = true;
+                this.hostEl.style.setProperty('--je-content-width', `${this.hostEl.clientWidth}px`);
+                await this.popoverEl.present('element', this.hostEl);
+            }
+        };
+        this.handleDismiss = () => {
+            this.dropdownActive = false;
+            this.containerEl.classList.remove('focus');
+        };
+        this.isTouched = false;
+        this.label = '';
+        this.disabled = false;
+        this.autoCapitalize = 'off';
+        this.autoComplete = 'off';
+        this.autoCorrect = 'off';
+        this.autoFocus = undefined;
+        this.inputMode = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.minLength = undefined;
+        this.maxLength = undefined;
+        this.multiple = false;
+        this.pattern = undefined;
+        this.readOnly = false;
+        this.required = false;
+        this.spellcheck = false;
+        this.step = undefined;
+        this.type = 'text';
+        this.value = '';
+        this.placeholder = '';
+        this.debounce = 0;
+        this.format = undefined;
+        this.validators = undefined;
+        this.noTyping = false;
+        this.helperText = undefined;
+        this.dropdown = false;
+        this.expand = undefined;
+        this.dismissOnClick = undefined;
+    }
+    componentWillLoad() {
+        if (this.label && !this.hostEl.getAttribute('name')) {
+            this.hostEl.setAttribute('name', this.label.replace(' ', '-').toLowerCase());
+        }
+    }
+    connectedCallback() {
+        this.internals.setFormValue(this.value);
+    }
+    async componentDidLoad() {
+        this.originalValue = this.value;
+        const { valueChange, debounce } = this;
+        if (debounce) {
+            this.valueChange = debounceEvent(valueChange, debounce);
+        }
+        if (this.format) {
+            this.value = await this.format(this.value);
+        }
+        else {
+            this.validatorsChanged();
+        }
+    }
+    async formResetCallback() {
+        this.isTouched = false;
+        if (this.value !== this.originalValue) {
+            if (this.format) {
+                this.value = await this.format(this.originalValue);
+            }
+            else {
+                this.value = this.originalValue;
+            }
+        }
+    }
+    handleThemeChange(e) {
+        this.hostEl.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    handleFocus() {
+        this.containerEl.classList.add('focus');
+    }
+    handleBlur() {
+        this.isTouched = true;
+        if (!this.dropdownActive) {
+            this.containerEl.classList.remove('focus');
+        }
+    }
+    async validatorsChanged() {
+        this.errors = [];
+        if (this.validators) {
+            for (const validator of this.validators) {
+                const res = await validator(this.value);
+                this.errors = [...this.errors, ...res];
+            }
+        }
+        this.setValidity();
+    }
+    requiredChanged() {
+        this.setValidity();
+    }
+    async valueChanged() {
+        if (this.inputEl && this.inputEl.value !== this.value) {
+            this.inputEl.value = this.value;
+        }
+        this.internals.setFormValue(this.value);
+        this.validatorsChanged();
+    }
+    getInputElement() {
+        return Promise.resolve(this.inputEl);
+    }
+    dismissDropdown(role = 'manualDismiss') {
+        return this.popoverEl.dismiss(role);
+    }
+    markAsTouched() {
+        return new Promise(resolve => {
+            this.isTouched = true;
+            resolve();
+        });
+    }
+    hasError() {
+        var _a;
+        return Promise.resolve(this.errors.length > 0 || (this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === '')));
+    }
+    reset() {
+        return this.formResetCallback();
+    }
+    setValidity() {
+        var _a;
+        const requiredError = this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === '');
+        const hasError = this.errors.length > 0 || requiredError;
+        if (hasError) {
+            if (requiredError) {
+                this.internals.setValidity({ valueMissing: true }, `${this.label || 'This field'} is required`, this.inputEl);
+            }
+            else {
+                this.internals.setValidity({ customError: true }, this.errors[0], this.inputEl);
+            }
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    render() {
+        var _a;
+        const requiredIcon = h("je-icon", { key: 'b812ffd92e7fc689f2af87b10ee92c45e28a92bc', style: { fontSize: '10px', color: 'var(--je-error-500)' }, icon: "asterisk" });
+        const label = h("label", { key: '05f40a7e7945974b35d005c4d06965e18c50702f', part: 'label', style: { display: 'flex' } }, this.label, " ", this.required && requiredIcon);
+        const invalid = this.errors.length > 0 || (this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === ''));
+        const containerClasses = {
+            disabled: this.disabled,
+            touched: this.isTouched
+        };
+        if (invalid && this.isTouched) {
+            this.internals.reportValidity();
+        }
+        return (h(Host, { key: '0d7ad78c21a47bca8b35635269bf8f0c911ba0dd' }, h("div", { key: '5ea27cbabac48f622d72bd571655a5ec967acf4b', ref: el => this.containerEl = el, part: 'outer-container', onClick: this.handleContainerClick, class: containerClasses }, h("div", { key: 'd99e8aa93a05c65b7c7f4727027917e1e9056ee3', part: 'start-container' }, h("slot", { key: '2e59dda2daafcfcee06a463faf2684705eea0642', name: 'start' }), this.label && label), h("input", { key: '27a77375cecb8c9669619c964dfb0422d5650adf', part: "native-input", ref: el => this.inputEl = el, onInputCapture: this.formatInput, onInput: this.handleInput, disabled: this.disabled, autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete, autoCorrect: this.autoCorrect, autoFocus: this.autoFocus, inputMode: this.inputMode, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, pattern: this.pattern, readOnly: this.readOnly || this.noTyping, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: this.value, placeholder: this.placeholder }), h("div", { key: '3fcc3d84a01fc26fd11d7db45beee79ae5656af1', part: 'end-container' }, h("slot", { key: '2bf03124a793ec9ceb0cad951ac47693315acceb', name: 'end' }), !this.showPassword && this.type == 'password' && h("je-icon", { key: '3b4096d3cb432fd9614e90d43cf3367b365ce679', icon: "visibility", fill: true, onClick: this.togglePassword }), this.showPassword && this.type == 'text' && h("je-icon", { key: 'a4c1ec8f4e7ffdb64e906681389096b3da320485', icon: "visibility_off", fill: true, onClick: this.togglePassword }))), this.helperText && h("small", { key: '234252ad2c8c2b18b1c59d18c8bb451f97fcf269', class: "helper" }, this.helperText), this.dropdown && h("je-popover", { key: '132347f2bb1e31eb990e2f26381a5e2f111a4eaf', ref: el => this.popoverEl = el, exportparts: 'content', dismissOnClick: this.dismissOnClick, onDidDismiss: this.handleDismiss }, h("slot", { key: '03bf3efeddcfc701b680a5cb1fc473e80a44196e', name: 'dropdown' }))));
+    }
+    static get formAssociated() { return true; }
+    get hostEl() { return getElement(this); }
+    static get watchers() { return {
+        "validators": ["validatorsChanged"],
+        "required": ["requiredChanged"],
+        "value": ["valueChanged"]
+    }; }
+};
+JeInput.style = JeInputStyle0;
+
+const jeLinkCss = ":host{display:inline-block}a{display:inline-block}.underline{text-decoration:underline}.bold{font-weight:var(--je-font-semi-bold)}";
+const JeLinkStyle0 = jeLinkCss;
+
+const JeLink = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.color = undefined;
+        this.lightModeColor = undefined;
+        this.darkModeColor = undefined;
+        this.underline = true;
+        this.bold = false;
+        this.href = undefined;
+        this.target = undefined;
+        this.rel = undefined;
+        this.download = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'e6ee6a71161ce3871e55b3cda15beab656c17910' }, h("a", { key: '98998f6dda359644563b531e4532e68882e273b6', href: this.href, target: this.target, rel: this.rel, download: this.download }, h("je-color", { key: '83600909f33b1dd9decf4d75c3abc2e3a8447e3a', class: { underline: this.underline, bold: this.bold }, color: this.color, "light-mode-color": this.lightModeColor, "dark-mode-color": this.darkModeColor }, h("slot", { key: '3caebb42da2d13dfc78b9237981d5c2c94cc96cb' })))));
+    }
+};
+JeLink.style = JeLinkStyle0;
+
+const jeLoadingCss = ":host{display:inline-block;position:relative;width:23px;height:23px;user-select:none}svg{position:absolute;top:0;left:0;width:100%;height:100%;transform:translateZ(0)}:host(.spinner-lines) line,:host(.spinner-lines-small) line{stroke-width:7px}:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-width:4px}:host(.spinner-lines) line,:host(.spinner-lines-small) line,:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-linecap:round;stroke:currentColor}:host(.spinner-lines) svg,:host(.spinner-lines-small) svg,:host(.spinner-lines-sharp) svg,:host(.spinner-lines-sharp-small) svg{animation:spinner-fade-out 1s linear infinite}@keyframes spinner-fade-out{0%{opacity:1}100%{opacity:0}}";
+const JeLoadingStyle0 = jeLoadingCss;
+
+const spinners = {
+    lines: {
+        dur: 1000,
+        lines: 8,
+        fn: (dur, index, total) => {
+            const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;
+            const animationDelay = `${(dur * index) / total - dur}ms`;
+            return {
+                y1: 14,
+                y2: 26,
+                style: {
+                    transform: transform,
+                    'animation-delay': animationDelay,
+                },
+            };
+        },
+    },
+};
+const buildLine = (spinner, duration, index, total) => {
+    const data = spinner.fn(duration, index, total);
+    data.style['animation-duration'] = duration + 'ms';
+    return (h("svg", { viewBox: data.viewBox || '0 0 64 64', style: data.style }, h("line", { transform: "translate(32,32)", y1: data.y1, y2: data.y2 })));
+};
+const JeLoading = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        const spinner = spinners['lines'];
+        const duration = spinner.dur;
+        const svgs = [];
+        for (let i = 0; i < spinner.lines; i++) {
+            svgs.push(buildLine(spinner, duration, i, spinner.lines));
+        }
+        return (h(Host, { key: '7520159371b0c6ff774055d3f6eecf5af172d4df', class: { [`spinner-lines`]: true } }, svgs));
+    }
+};
+JeLoading.style = JeLoadingStyle0;
+
+const jeModalCss = ":host{display:flex}@media (width > 1200px){:host{--je-width:75%;--je-height:85%}}@media (992px < width < 1201px){:host{--je-width:80%;--je-height:90%}}@media (768px < width < 993px){:host{--je-width:85%;--je-height:95%}}@media (width < 769px){:host{--je-width:100%;--je-height:100%}}.modal{display:flex;flex-direction:column;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:910;width:var(--je-width);height:var(--je-height);background-color:var(--je-background-color, canvas);color:var(--je-text-color, canvastext);box-shadow:0px 0px 15px 5px rgba(60, 60, 60, 0.1647058824);border-radius:var(--je-border-radius, 2px);overflow:hidden}.modal-transition{opacity:0;transition:opacity 250ms ease-in-out}.modal.open{opacity:1}.backdrop{position:fixed;top:0;width:100%;height:100%;background:var(--je-backdrop-color, rgba(0, 0, 0, 0.5));z-index:909}.backdrop-transition{opacity:0;transition:opacity 250ms ease-in-out}.backdrop.fade{opacity:1}.clear{background:rgba(0, 0, 0, 0)}";
+const JeModalStyle0 = jeModalCss;
+
+const JeModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.didPresent = createEvent(this, "didPresent", 3);
+        this.didDismiss = createEvent(this, "didDismiss", 3);
+        this.handleBackdropClick = () => {
+            if (this.isOpen && this.backdropClose) {
+                this.dismiss('backdropClose');
+            }
+        };
+        this.trigger = undefined;
+        this.showBackdrop = true;
+        this.backdropClose = true;
+        this.isOpen = false;
+    }
+    componentDidLoad() {
+        this.pageEl = this.el.closest('je-page');
+        this.parentEl = this.el.parentElement;
+        if (this.trigger) {
+            this.triggerElement = document.getElementById(this.trigger);
+            if (this.triggerElement) {
+                this.triggerElement.addEventListener('click', () => this.present());
+            }
+            else {
+                console.error('Failed to find modal trigger element!');
+            }
+        }
+    }
+    async present() {
+        if (!this.isOpen) {
+            this.el.remove();
+            if (this.pageEl) {
+                this.pageEl.append(this.el);
+            }
+            else {
+                document.body.append(this.el);
+            }
+            this.isOpen = true;
+            return new Promise(resolve => {
+                this.contentEl.addEventListener('transitionend', () => {
+                    this.didPresent.emit();
+                    resolve();
+                }, { once: true });
+                this.backdropEl.classList.add('fade');
+                this.contentEl.classList.add('open');
+            });
+        }
+    }
+    async dismiss(role = 'manualClose', data) {
+        if (this.isOpen) {
+            return new Promise(resolve => {
+                this.contentEl.addEventListener('transitionend', () => {
+                    this.el.remove();
+                    this.parentEl.append(this.el);
+                    this.isOpen = false;
+                    this.didDismiss.emit({ role: role, data: data });
+                    resolve();
+                }, { once: true });
+                this.backdropEl.classList.remove('fade');
+                this.contentEl.classList.remove('open');
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '14d2b7824b091c2f46ec8ea4c4aaaf4353b875e8', slot: "overlay" }, h("div", { key: 'c518ed82b72fa77ca7e8791fdc01e99124c751d8', ref: el => this.contentEl = el, class: { 'modal-transition': true, 'modal': this.isOpen } }, this.isOpen && h("slot", { key: '93abe76d598f72e64f1d3c438f98438333156aea' })), h("div", { key: '4564a790333dc48d29dbffb1d5ca957d92ad1af3', ref: el => this.backdropEl = el, onClick: this.handleBackdropClick, class: { 'backdrop-transition': true, 'backdrop': this.isOpen, 'clear': !this.showBackdrop && this.isOpen } })));
+    }
+    get el() { return getElement(this); }
+};
+JeModal.style = JeModalStyle0;
+
+const jeMultiselectCss = ":host{display:block;width:207px;--je-height:42px;--je-border-color:transparent;--je-input-background:var(--je-medium-100);--je-input-color:var(--je-medium-900)}:host([darkmode]){--je-input-background:var(--je-medium-850);--je-input-color:var(--je-medium-50)}:host([expand]){width:100%}:host(:invalid) div[part=outer-container].touched{--je-border-color:var(--je-error-500, red)}div[part=outer-container]{display:flex;align-items:center;justify-content:space-between;gap:var(--je-spacing-2xs, 8px);height:var(--je-height);background-color:var(--je-input-background, field);color:var(--je-input-color, fieldtext);padding-inline:var(--je-spacing-xs, 10px);border-radius:var(--je-border-radius, 2px);overflow:hidden;border:solid 1px var(--je-border-color);transition:border 125ms ease-in-out}div[part=outer-container].focus{--je-border-color:var(--je-primary-500, accentcolor)}div[part=outer-container].disabled{opacity:0.6;cursor:default}div[part=start-container],div[part=end-container]{display:flex}div[part=main-container]{display:inline-block;overflow:hidden;color:var(--je-medium-600);text-wrap:nowrap;text-overflow:ellipsis;margin-right:auto}label{font-weight:var(--je-font-semi-bold)}je-popover::part(content){width:var(--je-content-width, auto);box-sizing:border-box;padding:0px}je-icon{transition:transform 250ms ease}je-icon.open{transform:rotate(180deg)}je-pill{margin-right:var(--je-spacing-3xs)}";
+const JeMultiselectStyle0 = jeMultiselectCss;
+
+const JeMultiselect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.originalValue = [];
+        this.handleContainerClick = async () => {
+            this.el.style.setProperty('--je-content-width', `${this.el.clientWidth}px`);
+            await this.popoverEl.present('element', this.el);
+        };
+        this.isTouched = false;
+        this.open = false;
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.value = [];
+        this.expand = undefined;
+        this.required = undefined;
+    }
+    componentDidLoad() {
+        this.originalValue = this.value;
+    }
+    componentWillLoad() {
+        if (!this.el.getAttribute('name') && this.label) {
+            this.el.setAttribute('name', this.label);
+        }
+        if (!Array.isArray(this.value)) {
+            this.value = [this.value];
+        }
+    }
+    formResetCallback() {
+        this.value = this.originalValue;
+    }
+    handlePopoverPresent() {
+        this.open = true;
+    }
+    handlePopoverDismiss() {
+        this.open = false;
+        this.el.style.removeProperty('--je-content-width');
+        this.containerEl.classList.remove('focus');
+    }
+    handleThemeChange(e) {
+        this.el.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    handleOptionChecked(event) {
+        this.value = [...this.value, event.detail];
+    }
+    handleOptionUnchecked(event) {
+        this.value = this.value.filter(t => t !== event.detail);
+    }
+    handleFocus() {
+        this.containerEl.classList.add('focus');
+    }
+    handleBlur() {
+        this.isTouched = true;
+        if (!this.open) {
+            this.containerEl.classList.remove('focus');
+        }
+    }
+    handleValueChange() {
+        const options = this.el.querySelectorAll('je-multiselect-option');
+        options.forEach(option => {
+            if (this.value.includes(option.value)) {
+                option.checked = true;
+            }
+            else {
+                option.checked = false;
+            }
+        });
+    }
+    render() {
+        var _a;
+        const options = Array.from(this.el.querySelectorAll('je-multiselect-option'));
+        const requiredIcon = h("je-icon", { key: '980ad087f2037c624c834a999d68d5af7571c879', style: { fontSize: '10px', color: 'var(--je-error-500)' }, icon: "asterisk" });
+        const label = h("label", { key: '0a570d461dfb85f605bcede7482551da079bb610', part: 'label', style: { display: 'flex' } }, this.label, " ", this.required && requiredIcon);
+        const invalid = this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === '');
+        const containerClasses = {
+            //disabled: this.disabled,
+            touched: this.isTouched
+        };
+        if (invalid && this.isTouched) {
+            this.internals.reportValidity();
+        }
+        return (h(Host, { key: '31dc686422fd5bb829fdd3034ac1e2556dcb8624' }, h("div", { key: 'a208b2ebdede78095e9d5604d341e19310413b60', ref: el => this.containerEl = el, part: 'outer-container', onClick: this.handleContainerClick, class: containerClasses }, h("div", { key: '42683af62e175c43f4567348d65cada1138c1c59', part: 'start-container' }, h("slot", { key: '4cc5817c81442a06f148f03c59f70cd48c6b0206', name: 'start' }), this.label && label), h("div", { key: '56c08d003cc38e89164b94b87f32547a7812ee17', part: 'main-container' }, this.value.length > 0 && options.filter(t => this.value.includes(t.value)).map(t => h("je-pill", null, t.textContent)), (this.value.length < 1 && this.placeholder) && this.placeholder), h("div", { key: '495f68c15d7217e7b78bca9eee114b36fc08d328', part: 'end-container' }, h("slot", { key: '6838d86652f01b56a5409d9dee2b611318cb876e', name: 'end' }), h("je-icon", { key: '561c44792301b1adf11755737af1f56b3b3239b9', icon: 'expand_more', class: { open: this.open } }))), h("je-popover", { key: 'e0bf1b02ad6156a2212b3c81842cb08e86233ca8', ref: el => this.popoverEl = el, exportparts: 'content' }, h("slot", { key: '2314719361ba1f5908ce59d0526bef7efbb30d06' }))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+JeMultiselect.style = JeMultiselectStyle0;
+
+const jeMultiselectOptionCss = ":host{display:block;width:100%;--je-option-hover-color:var(--je-primary-100)}:host([darkmode]){--je-option-hover-color:var(--je-medium-850)}:host(:hover) span[part=container]{background-color:var(--je-option-hover-color)}span[part=container]{display:flex;align-items:center;gap:var(--je-spacing-2xs);user-select:none;-webkit-user-select:none;cursor:pointer;width:100%;padding:var(--je-spacing-xs, 10px);background-color:transparent;color:inherit;transition:background-color 75ms ease-in}je-icon{cursor:pointer}";
+const JeMultiselectOptionStyle0 = jeMultiselectOptionCss;
+
+const JeMultiselectOption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionChecked = createEvent(this, "optionChecked", 7);
+        this.optionUnchecked = createEvent(this, "optionUnchecked", 7);
+        this.value = undefined;
+        this.checked = false;
+    }
+    handleClick() {
+        if (this.checked) {
+            this.optionUnchecked.emit(this.value);
+        }
+        else {
+            this.optionChecked.emit(this.value);
+        }
+    }
+    handleThemeChange(e) {
+        this.hostEl.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    render() {
+        return (h("span", { key: '0e863f622655ec29084296aa28ad67b607c7e004', part: 'container' }, h("je-icon", { key: '34d5756b234d995a4797b26098e483e8a1d7e413', icon: this.checked ? 'check_box' : 'check_box_outline_blank' }), h("slot", { key: '0d543f3703dfcc2bb6355845ff91195a38f67fe0' })));
+    }
+    get hostEl() { return getElement(this); }
+};
+JeMultiselectOption.style = JeMultiselectOptionStyle0;
+
+const jePageCss = ":host{display:block;height:100%;overflow:hidden;font-size:var(--je-font-size);font-family:var(--je-font-family);color:var(--je-text-color);background-color:var(--je-background-color);color-scheme:light;--je-font-size:13px;--je-font-family:system-ui, Roboto, \"Open Sans\", \"Helvetica Neue\", sans-serif;--je-font-light:400;--je-font-regular:500;--je-font-semi-bold:600;--je-font-bold:700;--je-border-radius:2px;--je-text-color:var(--je-medium-900);--je-background-color:var(--je-medium-50);--je-backdrop-color:rgba(0, 0, 0, 0.5);--je-spacing-3xs:4px;--je-spacing-2xs:8px;--je-spacing-xs:10px;--je-spacing-sm:12px;--je-spacing:16px;--je-spacing-lg:20px;--je-spacing-xl:24px;--je-spacing-2xl:32px;--je-spacing-3xl:40px;--je-primary-100:#e0e7ff;--je-primary-200:#c7d2fe;--je-primary-300:#a5b4fc;--je-primary-400:#818cf8;--je-primary-500:#6366f1;--je-primary-600:#4f46e5;--je-primary-700:#4338ca;--je-primary-800:#3730a3;--je-secondary-100:#e0f7ff;--je-secondary-200:#b3e9ff;--je-secondary-300:#80dbff;--je-secondary-400:#4dcfff;--je-secondary-500:#1ac3ff;--je-secondary-600:#00b0e6;--je-secondary-700:#0095bf;--je-secondary-800:#007a99;--je-tertiary-100:#ffe0f7;--je-tertiary-200:#ffb3e9;--je-tertiary-300:#ff80db;--je-tertiary-400:#ff4dce;--je-tertiary-500:#ff1ac0;--je-tertiary-600:#e600a9;--je-tertiary-700:#bf0090;--je-tertiary-800:#990078;--je-success-100:#e6f9e6;--je-success-200:#b3f0b3;--je-success-300:#80e680;--je-success-400:#4ddb4d;--je-success-500:#22c55e;--je-success-600:#16a34a;--je-success-700:#15803d;--je-success-800:#166534;--je-error-100:#ffe5e5;--je-error-200:#fdb8b8;--je-error-300:#f87171;--je-error-400:#f87171;--je-error-500:#ef4444;--je-error-600:#dc2626;--je-error-700:#b91c1c;--je-error-800:#8b0000;--je-warning-100:#fffbeb;--je-warning-200:#fef3c7;--je-warning-300:#fde68a;--je-warning-400:#fcd34d;--je-warning-500:#fbbf24;--je-warning-600:#f59e0b;--je-warning-700:#d97706;--je-warning-800:#b45309;--je-medium-50:#f7fafc;--je-medium-100:#edf2f7;--je-medium-200:#e8eef4;--je-medium-300:#e2e8f0;--je-medium-400:#cbd5e0;--je-medium-500:#a0aec0;--je-medium-600:#718096;--je-medium-700:#5f6b82;--je-medium-800:#4a5568;--je-medium-850:#2d3748;--je-medium-900:#17191d;--je-left-sidepanel-open-width:500px;--je-left-sidepanel-minimized-width:100px;--je-left-sidepanel-border:solid 1px var(--je-text-color);--je-right-sidepanel-open-width:500px;--je-right-sidepanel-minimized-width:100px;--je-right-sidepanel-border:solid 1px var(--je-text-color)}:host([theme=dark]){color-scheme:dark;--je-text-color:var(--je-medium-50);--je-background-color:var(--je-medium-900)}:host([theme=auto]){color-scheme:light dark}@media (prefers-color-scheme: dark){:host([theme=auto]){--je-text-color:var(--je-medium-50);--je-background-color:var(--je-medium-900)}}[part=page-container]{display:flex;flex-direction:column;height:100%;box-sizing:border-box;overflow:hidden}[part=body-container]{display:flex;flex:1;overflow:hidden}::slotted([slot=body]){flex:1;box-sizing:border-box;overflow-y:auto;overflow-x:hidden}::slotted([slot=header]){box-sizing:border-box;z-index:10;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}::slotted([slot=footer]){box-sizing:border-box;box-shadow:rgba(0, 0, 0, 0.4117647059) 0px -5px 20px -10px;z-index:10}@supports (-webkit-touch-callout: none){::slotted([slot=header]){padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}::slotted([slot=footer]){padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.body-container{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);margin-left:env(safe-area-inset-left);margin-right:env(safe-area-inset-right)}}:host([left-panel=open]) ::slotted([slot=left-panel]){width:var(--je-left-sidepanel-open-width);border-right:var(--je-left-sidepanel-border)}:host([left-panel=minimized]) ::slotted([slot=left-panel]){width:var(--je-left-sidepanel-minimized-width);border-right:var(--je-left-sidepanel-border)}:host([right-panel=open]) ::slotted([slot=right-panel]){width:var(--je-right-sidepanel-open-width);border-left:var(--je-right-sidepanel-border)}:host([right-panel=minimized]) ::slotted([slot=right-panel]){width:var(--je-right-sidepanel-minimized-width);border-left:var(--je-right-sidepanel-border)}:host([left-panel=closed]) ::slotted([slot=left-panel]){padding:0 !important}:host([right-panel=closed]) ::slotted([slot=right-panel]){padding:0 !important}::slotted([slot=left-panel]),::slotted([slot=right-panel]){display:block;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;width:0px;border-right:none;border-left:none;transition:all 250ms ease-in-out;margin:0 !important}";
+const JePageStyle0 = jePageCss;
+
+const JePage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.themeChange = createEvent(this, "themeChange", 7);
+        this.leftPanel = 'closed';
+        this.rightPanel = 'closed';
+        this.theme = 'light';
+    }
+    componentDidLoad() {
+        this.themeChangeHandler(this.theme);
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => this.themeChangeHandler(this.theme));
+    }
+    themeChangeHandler(newValue) {
+        if (newValue !== 'auto')
+            this.themeChange.emit(newValue);
+        else
+            this.themeChange.emit(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    }
+    render() {
+        return (h(Host, { key: 'fecb0aaf3870822893abbb410e37c9be72c67c39' }, h("div", { key: 'df76c6c8484ca41040b6fe0e2732739c7f3aba4d', part: 'page-container' }, h("slot", { key: 'c28f037b525481dc9c87ac3f7f4115af13532f9e', name: 'header' }), h("div", { key: '2845052c8cbb636d67f7f8be9afef48fdff2b5de', part: 'body-container' }, h("slot", { key: '1b863e147e1c411b292675cda5d0ff240048b371', name: 'left-panel' }), h("slot", { key: '7da5ce54ad0fc813826f347412e58f78e80f6d08', name: 'body' }), h("slot", { key: 'da128e14c58634365d940a9f630404fdea1d0458', name: 'right-panel' })), h("slot", { key: '2d0b1b03ede81177670cfaa0ad6b0a86b508f1f3', name: 'footer' })), h("div", { key: '742fe0a1282c0f4b37c139ee5be0529d4078bff1', part: 'overlay-container' }, h("slot", { key: 'df3aeb289c5a28c1d7c7fa838747e7c4a8077c53', name: 'overlay' }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "theme": ["themeChangeHandler"]
+    }; }
+};
+JePage.style = JePageStyle0;
+
+const jePillCss = ":host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--je-spacing-2xs);padding-inline:4px;border-radius:var(--je-border-radius, 2px);height:20px;min-width:40px;-webkit-user-select:none;user-select:none;transition:all 125ms ease-in-out;color:var(--je-pill-color);background-color:var(--je-pill-background);--je-pill-color:var(--je-primary-500, buttonface);--je-pill-background:var(--je-primary-100, buttontext);--je-pill-hover-background:var(--je-primary-200, buttontext)}:host(:not([button=false])){cursor:pointer}:host(:not([button=false])) ::slotted(je-icon){cursor:pointer}@media (hover: hover){:host(:not([button=false]):not([disabled]):hover){--je-pill-background:var(--je-pill-hover-background)}}:host([disabled]){opacity:0.8;cursor:default}:host([outline]){background-color:transparent;color:var(--je-pill-color);border:solid 1px var(--je-pill-background)}";
+const JePillStyle0 = jePillCss;
+
+const JePill = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.outline = false;
+        this.button = true;
+        this.disabled = false;
+    }
+    render() {
+        return (h(Host, { key: '32a830f6eb0cb2602d6ccb0355afab3a4913f482' }, h("slot", { key: '9d3970fcbb79a849b79e6bb99cc525504b1a7aac' })));
+    }
+};
+JePill.style = JePillStyle0;
+
+const jePlaceholderCss = ":host{--je-background:#c7c7c7c5;--je-shimmer-color:#ffffff;border-radius:var(--je-border-radius, 2px);display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:var(--je-background);line-height:10px;user-select:none;pointer-events:none;opacity:0.7}:host(.animated){position:relative;background:linear-gradient(90deg, var(--je-background) 25%, var(--je-shimmer-color) 50%, var(--je-background) 75%);background-size:200% 100%;animation-duration:2.5s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}";
+const JePlaceholderStyle0 = jePlaceholderCss;
+
+const JePlaceholder = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.animated = true;
+    }
+    render() {
+        return (h(Host, { key: '0a01cc9c0d7cadff4a449895c64c7761cf0b116d', class: { 'animated': this.animated } }, h("slot", { key: 'be3e6370db2d577bd64f053360cf893f9beec2f1' })));
+    }
+};
+JePlaceholder.style = JePlaceholderStyle0;
+
+const jePopoverCss = ":host{display:block;--je-popover-background-color:rgb(233, 236, 236);--je-popover-color:var(--je-medium-900);--je-popover-box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.12);--je-popover-border:solid 1px rgb(197, 200, 204)}:host([darkmode]){--je-popover-background-color:rgb(41, 45, 46);--je-popover-color:var(--je-medium-50);--je-popover-box-shadow:0px 4px 16px 0px rgba(68, 68, 68, 0.12);--je-popover-border:solid 1px rgb(86, 87, 90)}.content{font-family:var(--je-font-family);position:absolute;background-color:var(--je-popover-background-color, canvas);color:var(--je-popover-color, canvastext);padding-inline:var(--je-spacing-xs, 10px);box-shadow:var(--je-popover-box-shadow);border:var(--je-popover-border);z-index:1000;border-radius:var(--je-border-radius, 2px);overflow:hidden}.content-transition{opacity:0;transition:opacity 250ms ease-in-out}.content.open{opacity:1}.backdrop{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--je-backdrop-color, rgba(0, 0, 0, 0.5));z-index:999}.backdrop-transition{opacity:0;transition:opacity 250ms ease-in-out}.backdrop.fade{opacity:1}.clear{background:rgba(0, 0, 0, 0)}";
+const JePopoverStyle0 = jePopoverCss;
+
+const JePopover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.didPresent = createEvent(this, "didPresent", 7);
+        this.didDismiss = createEvent(this, "didDismiss", 7);
+        this.handleContentClick = () => {
+            if (this.isOpen && this.dismissOnClick) {
+                this.dismiss('contentClickDismiss');
+            }
+        };
+        this.handleBackdropClick = () => {
+            if (this.isOpen && this.backdropDismiss) {
+                this.dismiss('backdropDismiss');
+            }
+        };
+        this.isOpen = false;
+        this.trigger = undefined;
+        this.showBackdrop = false;
+        this.backdropDismiss = true;
+        this.dismissOnClick = false;
+        this.position = 'element';
+        this.offsetX = 10;
+        this.offsetY = 10;
+        this.triggerAction = 'click';
+    }
+    componentDidLoad() {
+        this.pagEl = this.el.closest('je-page');
+        this.parentEl = this.el.parentElement;
+        if (this.trigger) {
+            this.triggerElement = document.getElementById(this.trigger);
+            if (this.triggerElement && this.triggerAction == 'click') {
+                this.triggerElement.addEventListener("click", () => this.present(this.position));
+            }
+            else if (this.triggerElement && this.triggerAction == 'hover') {
+                this.triggerElement.addEventListener("mouseover", async (ev) => {
+                    await this.present(this.position, ev);
+                    this.triggerElement.addEventListener("mouseleave", () => this.dismiss('hoverDismiss'), { once: true });
+                });
+            }
+            else if (this.triggerElement && this.triggerAction == 'context-menu') {
+                this.triggerElement.addEventListener("contextmenu", ev => {
+                    ev.preventDefault();
+                    this.present(this.position, ev);
+                });
+            }
+            else {
+                console.error('Failed to find popover trigger element:', this.trigger);
+            }
+        }
+    }
+    handleThemeChange(e) {
+        this.el.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    handleWindowClick(ev) {
+        this.mouseEvent = ev;
+    }
+    /**
+     * Used internally to present the popover. Can also be used to manually
+     * present it if needed. Will auto position itself using the specified
+     * position strategy. If no target is provided, it will use the last mouse
+     * event on the window or the trigger element.
+     * @param positionStrategy The strategy to use when positioning the popover
+     * @param target Can optionally override the target the popover bases it's position off of
+     */
+    async present(positionStrategy, target) {
+        var _a;
+        if (!this.isOpen) {
+            if (this.parentEl) {
+                if (this.pagEl) {
+                    this.pagEl.append(this.el);
+                }
+                else {
+                    document.body.append(this.el);
+                }
+            }
+            this.isOpen = true;
+            if (positionStrategy !== 'none') {
+                this.contentEl.removeAttribute('style');
+                await animationUpdate();
+                const { offsetX, offsetY } = this;
+                const contentHeight = this.contentEl.clientHeight;
+                const rightThreshold = window.innerWidth / 2;
+                const bottomThreshold = window.innerHeight - 20 - contentHeight;
+                if (positionStrategy == 'click') {
+                    target !== null && target !== void 0 ? target : (target = this.mouseEvent);
+                    const { pageX, pageY } = target;
+                    const isNearRight = pageX > rightThreshold;
+                    const isNearBottom = pageY > bottomThreshold;
+                    const isNearTop = pageY - offsetY - contentHeight < 0;
+                    if (isNearRight) {
+                        this.contentEl.style.left = `${pageX - offsetX - this.contentEl.clientWidth}px`;
+                    }
+                    else {
+                        this.contentEl.style.left = `${pageX + offsetX}px`;
+                    }
+                    if (isNearBottom && !isNearTop) {
+                        this.contentEl.style.top = `${pageY - offsetY - contentHeight}px`;
+                    }
+                    else if (isNearBottom && isNearTop) {
+                        this.contentEl.style.overflowY = 'auto';
+                        if (pageY > window.innerHeight - pageY) {
+                            this.contentEl.style.top = `${offsetY}px`;
+                            this.contentEl.style.maxHeight = `${pageY}px`;
+                        }
+                        else {
+                            this.contentEl.style.top = `${pageY + offsetY}px`;
+                            this.contentEl.style.maxHeight = `${window.innerHeight - 20 - pageY}px`;
+                        }
+                    }
+                    else {
+                        this.contentEl.style.top = `${pageY + offsetY}px`;
+                    }
+                }
+                else {
+                    target !== null && target !== void 0 ? target : (target = ((_a = this.triggerElement) !== null && _a !== void 0 ? _a : this.mouseEvent.target));
+                    const boundingRect = target.getBoundingClientRect();
+                    const { x: pageX, y: pageY } = boundingRect;
+                    const isNearRight = pageX > rightThreshold;
+                    const isNearBottom = pageY > bottomThreshold;
+                    const isNearTop = pageY - offsetY - contentHeight < 0;
+                    const triggerElement = target;
+                    const { left, bottom, top, right } = triggerElement.getBoundingClientRect();
+                    this.contentEl.style.boxSizing = 'border-box';
+                    if (isNearRight) {
+                        this.contentEl.style.left = `${right - this.contentEl.clientWidth}px`;
+                    }
+                    else {
+                        this.contentEl.style.left = `${left}px`;
+                    }
+                    if (isNearBottom && !isNearTop) {
+                        this.contentEl.style.top = `${top - offsetY - contentHeight}px`;
+                    }
+                    else if (isNearBottom && isNearTop) {
+                        this.contentEl.style.overflowY = 'auto';
+                        if (pageY > window.innerHeight - pageY) {
+                            this.contentEl.style.top = `${offsetY}px`;
+                            this.contentEl.style.maxHeight = `${top}px`;
+                        }
+                        else {
+                            this.contentEl.style.top = `${bottom + offsetY}px`;
+                            this.contentEl.style.maxHeight = `${window.innerHeight - 20 - bottom}px`;
+                        }
+                    }
+                    else {
+                        this.contentEl.style.top = `${bottom + offsetY}px`;
+                    }
+                }
+            }
+            return new Promise(resolve => {
+                this.contentEl.addEventListener('transitionend', () => {
+                    this.didPresent.emit();
+                    resolve();
+                }, { once: true });
+                if (this.triggerAction !== 'hover') {
+                    this.backdropEl.classList.add('fade');
+                }
+                this.contentEl.classList.add('open');
+            });
+        }
+    }
+    /** Manually dismisses the popover. Role and data get passed to the didDismiss event. */
+    async dismiss(role = 'manualDismiss', data) {
+        if (this.isOpen) {
+            return new Promise(resolve => {
+                this.contentEl.addEventListener('transitionend', () => {
+                    if (this.parentEl) {
+                        this.el.remove();
+                        this.parentEl.append(this.el);
+                    }
+                    this.isOpen = false;
+                    this.didDismiss.emit({ role: role, data: data });
+                    resolve();
+                }, { once: true });
+                if (this.triggerAction !== 'hover') {
+                    this.backdropEl.classList.remove('fade');
+                }
+                this.contentEl.classList.remove('open');
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '1de5a4aef076c6296b9c64b96028cc6f4998a40a', slot: "overlay" }, h("div", { key: '845a3c97b059371422707c785707aa499146f2dd', part: "content", ref: el => this.contentEl = el, onClick: this.handleContentClick, class: { 'content-transition': true, content: this.isOpen } }, this.isOpen && h("slot", { key: '436d0ed78d49a6471760da0057fcc75cfbd0dd44' })), this.triggerAction !== 'hover' &&
+            h("div", { key: '1ec70ebb3246b78533e7250eda5d200212b795ad', ref: el => this.backdropEl = el, onClick: this.handleBackdropClick, class: {
+                    'backdrop-transition': true,
+                    backdrop: this.isOpen,
+                    clear: !this.showBackdrop && this.isOpen
+                } })));
+    }
+    get el() { return getElement(this); }
+};
+JePopover.style = JePopoverStyle0;
+
+const jeRadioCss = ":host{display:flex;align-items:center;gap:var(--je-spacing-2xs, 8px);cursor:pointer;-webkit-user-select:none;user-select:none}je-icon{cursor:pointer;color:var(--je-primary-500)}";
+const JeRadioStyle0 = jeRadioCss;
+
+const JeRadio = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.radioSelect = createEvent(this, "radioSelect", 7);
+        this.readonly = false;
+        this.disabled = false;
+        this.value = undefined;
+        this.labelPlacement = 'end';
+        this.selected = undefined;
+    }
+    connectedCallback() {
+        const parent = this.el.closest('je-radio-group');
+        if (parent) {
+            this.disabled = parent.disabled;
+            this.readonly = parent.readonly;
+        }
+    }
+    handleClick() {
+        if (!this.disabled && !this.readonly && this.selected !== true) {
+            this.radioSelect.emit(this.value);
+        }
+    }
+    render() {
+        return (h(Host, { key: '1a0e6e3ae1a17ac4b29bb44a06de42e6a4a56f9b' }, this.labelPlacement == 'start' && h("slot", { key: 'ed2becb99697e46e485b02ed908a8e88100d58cb' }), h("je-icon", { key: 'c37d5f92ae5f59be880868cc865577bf6aab9b31', icon: this.selected ? 'radio_button_checked' : 'radio_button_unchecked' }), this.labelPlacement == 'end' && h("slot", { key: '3fdf2901786c28a575a8429d37ee79bf30cd9321' })));
+    }
+    get el() { return getElement(this); }
+};
+JeRadio.style = JeRadioStyle0;
+
+const jeRadioGroupCss = ":host{display:block;width:fit-content}label{display:block;font-weight:var(--je-font-semi-bold);margin-bottom:var(--je-spacing-2xs)}";
+const JeRadioGroupStyle0 = jeRadioGroupCss;
+
+const JeRadioGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 3);
+        this.label = undefined;
+        this.value = undefined;
+        this.readonly = false;
+        this.disabled = false;
+    }
+    componentWillLoad() {
+        if (this.label) {
+            this.el.setAttribute('name', this.label);
+        }
+    }
+    componentDidLoad() {
+        this.originalValue = this.value;
+        if (this.value) {
+            const radios = this.getRadios();
+            for (let item of radios) {
+                if (item.value === this.value) {
+                    item.selected = true;
+                }
+            }
+        }
+    }
+    formResetCallback() {
+        if (this.value !== this.originalValue) {
+            this.value = this.originalValue;
+        }
+    }
+    getRadios() {
+        const elements = this.el.querySelectorAll('je-radio');
+        return Array.from(elements);
+    }
+    handleValueChange() {
+        this.valueChange.emit(this.value);
+        const radios = this.getRadios();
+        for (let radio of radios) {
+            if (radio.value !== this.value && radio.selected !== false)
+                radio.selected = false;
+            else if (radio.value === this.value && radio.selected !== true)
+                radio.selected = true;
+        }
+    }
+    handleNewValue(ev) {
+        this.value = ev.detail;
+    }
+    render() {
+        return (h(Host, { key: '70e9947ae0ea7b3747ef0470b0ce0e9491f43129' }, this.label && h("label", { key: 'db3fec8de716f25e8a8cf6dcbcd0d272417940f2' }, this.label), h("slot", { key: 'c2a03fa6a99928087f2815e51e47ab1eb61dcaa8' })));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+JeRadioGroup.style = JeRadioGroupStyle0;
+
+const jeSelectCss = ":host{display:block;width:fit-content}je-input::part(native-input){cursor:pointer}:host([expand]){width:100%}je-icon{transition:transform 250ms ease}je-icon.open{transform:rotate(180deg)}";
+const JeSelectStyle0 = jeSelectCss;
+
+const JeSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.open = false;
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.value = undefined;
+        this.expand = undefined;
+        this.required = undefined;
+    }
+    componentDidLoad() {
+        this.originalValue = this.value;
+    }
+    componentWillLoad() {
+        if (!this.el.getAttribute('name') && this.label) {
+            this.el.setAttribute('name', this.label);
+        }
+    }
+    formResetCallback() {
+        this.value = this.originalValue;
+        const options = Array.from(this.el.querySelectorAll('je-select-option'));
+        if (!options.some(t => t.value === this.value)) {
+            this.inputEl.value = '';
+        }
+    }
+    handlePopoverPresent() {
+        this.open = true;
+    }
+    handlePopoverDismiss() {
+        this.open = false;
+        const options = this.el.querySelectorAll('je-select-option');
+        options.forEach(option => option.classList.remove('focus'));
+    }
+    handleOptionSelected(event) {
+        this.value = event.detail;
+    }
+    handleValueChange() {
+        const options = this.el.querySelectorAll('je-select-option');
+        options.forEach(option => {
+            if (option.value === this.value) {
+                option.selected = true;
+                this.inputEl.value = option.textContent || option.value;
+            }
+            else {
+                option.selected = false;
+            }
+        });
+    }
+    focusOption(option) {
+        option.classList.add('focus');
+    }
+    blurOption(option) {
+        option.classList.remove('focus');
+    }
+    hasFocus(option) {
+        return option.classList.contains('focus');
+    }
+    handleKeyDown(event) {
+        var _a;
+        if (this.open || (event.key !== 'Tab' && event.key !== 'Enter')) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        const options = Array.from(this.el.querySelectorAll('je-select-option'));
+        if (event.key == 'Enter' && this.open) {
+            options.forEach(option => {
+                if (this.hasFocus(option)) {
+                    this.value = option.value;
+                }
+            });
+            this.inputEl.dismissDropdown();
+        }
+        else if (event.key == 'Escape') {
+            this.inputEl.dismissDropdown();
+        }
+        else if ((event.key == 'ArrowDown' || event.key == 'ArrowUp') && !this.open) {
+            this.inputEl.shadowRoot.querySelector("[part='outer-container']").click();
+        }
+        else if ((event.key == 'ArrowDown' || event.key == 'ArrowUp') && this.open) {
+            if (!options.some(t => this.hasFocus(t))) {
+                const indexToFocus = options.findIndex(t => t.selected);
+                if (indexToFocus > -1) {
+                    this.focusOption(options[indexToFocus]);
+                }
+                else {
+                    this.focusOption(options[0]);
+                }
+            }
+            else {
+                if (event.key == 'ArrowUp') {
+                    options.forEach(option => {
+                        if (this.hasFocus(option)) {
+                            const prevOption = option.previousElementSibling;
+                            if (prevOption) {
+                                this.blurOption(option);
+                                this.focusOption(prevOption);
+                            }
+                        }
+                    });
+                }
+                else {
+                    const optionToFocus = (_a = options.find(t => this.hasFocus(t))) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+                    if (optionToFocus) {
+                        this.blurOption(options.find(t => this.hasFocus(t)));
+                        this.focusOption(optionToFocus);
+                    }
+                }
+            }
+        }
+        else if (event.key.length == 1) {
+            const currentFocusedOption = options.find(t => this.hasFocus(t));
+            const optionsWithKey = options.filter(t => t.textContent.toLowerCase().startsWith(event.key.toLowerCase()));
+            if (optionsWithKey.length) {
+                const currentFocuedIndex = optionsWithKey.findIndex(t => this.hasFocus(t));
+                if (currentFocuedIndex > -1) {
+                    if (currentFocuedIndex < optionsWithKey.length - 1) {
+                        this.blurOption(optionsWithKey[currentFocuedIndex]);
+                        this.focusOption(optionsWithKey[currentFocuedIndex + 1]);
+                    }
+                    else {
+                        this.blurOption(optionsWithKey[currentFocuedIndex]);
+                        this.focusOption(optionsWithKey[0]);
+                    }
+                }
+                else {
+                    if (currentFocusedOption)
+                        this.blurOption(currentFocusedOption);
+                    this.focusOption(optionsWithKey[0]);
+                }
+                if (!this.open) {
+                    options.forEach(option => {
+                        if (this.hasFocus(option)) {
+                            this.value = option.value;
+                        }
+                    });
+                }
+            }
+            else if (currentFocusedOption) {
+                this.blurOption(currentFocusedOption);
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: '66d25d96c778ac0183742b03ba55b104fb542191' }, h("je-input", { key: '01768d4f45c8431cbaee327edba4c97e727df9a9', ref: el => this.inputEl = el, exportparts: 'outer-container, start-container, end-container, native-input, content', dropdown: true, label: this.label, placeholder: this.placeholder, noTyping: true, expand: this.expand, dismissOnClick: true, required: this.required }, h("slot", { key: 'e31cfa87c8148c8ecda310b99ffd668c510a2149', onSlotchange: () => this.handleValueChange(), slot: 'dropdown' }), h("je-icon", { key: 'c3336499f1c8d8ba5150b5c91bb994ece0140c74', slot: 'end', icon: 'expand_more', class: { open: this.open } }))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+JeSelect.style = JeSelectStyle0;
+
+const jeSelectOptionCss = ":host{display:block;width:100%;--je-option-hover-color:var(--je-primary-100)}:host([darkmode]){--je-option-hover-color:var(--je-medium-850)}:host(:hover) span[part=container],:host(.focus) span[part=container]{background-color:var(--je-option-hover-color)}span[part=container]{display:flex;align-items:center;gap:var(--je-spacing-2xs);user-select:none;-webkit-user-select:none;cursor:pointer;width:100%;padding:var(--je-spacing-xs, 10px);background-color:transparent;color:inherit;transition:background-color 75ms ease-in}je-icon{cursor:pointer}";
+const JeSelectOptionStyle0 = jeSelectOptionCss;
+
+const JeSelectOption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionSelected = createEvent(this, "optionSelected", 7);
+        this.value = undefined;
+        this.selected = false;
+    }
+    handleClick() {
+        this.optionSelected.emit(this.value);
+    }
+    handleThemeChange(e) {
+        this.hostEl.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    render() {
+        return (h("span", { key: '2aea5751eefe77f3ad5f1aadd76e5582f1481121', part: 'container' }, h("je-icon", { key: 'e03092f2bb061d9954df0503ca924bf287b683e9', icon: this.selected ? 'radio_button_checked' : 'radio_button_unchecked' }), h("slot", { key: '485755645a3bfa06eb79f4d6fc42501541da1712' })));
+    }
+    get hostEl() { return getElement(this); }
+};
+JeSelectOption.style = JeSelectOptionStyle0;
+
+const jeTextareaCss = ":host{position:relative;display:flex;align-items:baseline;gap:var(--je-spacing-2xs, 8px);background-color:var(--je-input-background, field);color:var(--je-input-color, fieldtext);padding:var(--je-spacing-xs, 10px);border-radius:var(--je-border-radius, 2px);border:solid 1px var(--je-border-color);transition:border 125ms ease-in-out;--je-height:84px;--je-border-color:transparent;--je-input-background:var(--je-medium-100);--je-input-color:var(--je-medium-900)}:host([darkmode]){--je-input-background:var(--je-medium-850);--je-input-color:var(--je-medium-50)}::slotted([slot=top-right]){top:0;right:0;position:absolute;transform:translate(50%, -50%)}textarea{height:var(--je-height);font-family:var(--je-font-family, inherit);font-size:var(--je-font-size, 1rem);background:transparent;color:inherit;flex:1;border:none;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;width:inherit}textarea::placeholder{font-family:var(--je-font-family, inherit);font-size:var(--je-font-size, 1rem);color:var(--je-medium-600)}textarea:focus{outline:0}label{font-weight:var(--je-font-semi-bold)}";
+const JeTextareaStyle0 = jeTextareaCss;
+
+const JeTextarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.value = undefined;
+        this.disabled = undefined;
+        this.readonly = undefined;
+        this.required = undefined;
+        this.debounce = 0;
+        this.maxLength = undefined;
+    }
+    render() {
+        return (h(Host, { key: '1b04c1cc5e2e68ea2df63eb6ef1a3e80f0c8e4ee' }, this.label && h("label", { key: '98514a4abb324648adcffb321ae69f088435ed68' }, this.label), h("textarea", { key: '4c9c3187928ac210459fa0699e525f33b27efa67', value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxLength, title: this.label }), h("slot", { key: '2e382b7892148f42516526aff5d5d9f49bd22a33', name: "top-right" })));
+    }
+    static get formAssociated() { return true; }
+};
+JeTextarea.style = JeTextareaStyle0;
+
+const jeToggleCss = ":host{display:flex;align-items:center;gap:5px;position:relative;width:fit-content;cursor:pointer;--inactive-background:var(--je-medium-500);--active-background:var(--je-primary-500)}:host([checked]) .toggle-container{background-color:var(--je-primary-500)}.toggle-container{display:flex;align-items:center;background-color:var(--inactive-background);transition:background-color 250ms ease-in-out;border-radius:var(--je-border-radius);padding:var(--je-spacing-3xs);width:40px;position:relative;cursor:pointer}.toggle-thumb{position:absolute;height:var(--je-spacing-lg);width:var(--je-spacing-lg);background-color:var(--je-background-color);border:solid 1px var(--inactive-background);border-radius:50%;transition:all 250ms ease-in-out;left:0;right:unset}.checked{border:solid 1px var(--active-background);left:100%;transform:translateX(-100%)}";
+const JeToggleStyle0 = jeToggleCss;
+
+const JeToggle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toggled = createEvent(this, "toggled", 7);
+        this.checked = false;
+        this.labelPlacement = 'end';
+    }
+    toggle() {
+        this.checked = !this.checked;
+        this.toggled.emit(this.checked);
+    }
+    onCheckedChange(newVal) {
+        if (newVal !== this.checked) {
+            this.checked = newVal;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'ccf01db278f6873a9d88610d283bff3b08b50cf7' }, this.labelPlacement == 'start' && h("slot", { key: '61bf33abceeb25e552e86591b41261c379dab160' }), h("div", { key: 'b11204ef90a6b74fd66bb6260803727931a405c0', class: "toggle-container" }, h("div", { key: '63d76c00317e2383fa01b5159d886530c8ea4c3a', class: { 'toggle-thumb': true, 'checked': this.checked } })), this.labelPlacement == 'end' && h("slot", { key: 'feee84848b9274cd8d2b9b893f57763426bd2f0b' })));
+    }
+    static get watchers() { return {
+        "checked": ["onCheckedChange"]
+    }; }
+};
+JeToggle.style = JeToggleStyle0;
+
+const jeToolbarCss = ":host{display:flex;width:100%;align-items:center;justify-content:space-around;gap:var(--je-toolbar-gap);color:var(--je-text-color, inherit);background-color:var(--je-background-color, inherit);--je-toolbar-gap:var(--je-spacing, 16px)}.center-container{flex:1;display:flex;gap:var(--je-toolbar-gap)}";
+const JeToolbarStyle0 = jeToolbarCss;
+
+const JeToolbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '5cfe24be7e72a5d95da99cded5936ca19323884d' }, h("slot", { key: '6061fc949c06801c223d3543f57d623db5bb39e0', name: 'start' }), h("div", { key: '53584f2d947163b364514d97d0c8152d4cba3af5', class: 'center-container' }, h("slot", { key: 'd00dee4f0fa3eb140ecb1d325afe04f3ce67a6aa' })), h("slot", { key: 'ed218601bfe1886a6597fcd5cdbdf8a58a7ec876', name: 'end' })));
+    }
+};
+JeToolbar.style = JeToolbarStyle0;
+
+export { JeAlert as je_alert, JeButton as je_button, JeCard as je_card, JeCheckbox as je_checkbox, JeCheckboxGroup as je_checkbox_group, JeCheckboxOption as je_checkbox_option, JeColor as je_color, JeDatepicker as je_datepicker, JeDetails as je_details, JeDivider as je_divider, JeDrawer as je_drawer, JeDropzone as je_dropzone, JeForm as je_form, JeIcon as je_icon, JeInput as je_input, JeLink as je_link, JeLoading as je_loading, JeModal as je_modal, JeMultiselect as je_multiselect, JeMultiselectOption as je_multiselect_option, JePage as je_page, JePill as je_pill, JePlaceholder as je_placeholder, JePopover as je_popover, JeRadio as je_radio, JeRadioGroup as je_radio_group, JeSelect as je_select, JeSelectOption as je_select_option, JeTextarea as je_textarea, JeToggle as je_toggle, JeToolbar as je_toolbar };
+
+//# sourceMappingURL=je-alert_31.entry.js.map