@nylas/web-elements 1.0.2-canary.2 → 1.1.0-canary.3

package/dist/collection/components/design-system/time-period-selector/time-period-selector.js

@@ -0,0 +1,200 @@
+import { debug } from "../../../utils/utils";
+import { h } from "@stencil/core";
+export class TimePeriodSelector {
+    constructor() {
+        this.timePeriods = ['hour', 'day', 'week', 'month'];
+        this.defaultSelectedPeriod = 'hour';
+        this.defaultSelectedNumber = 1;
+        this.selectedPeriod = this.defaultSelectedPeriod;
+        this.selectedNumber = this.defaultSelectedNumber;
+        this.numberOptions = this.calculateOptions('hour').map(i => {
+            return {
+                label: i.toString(),
+                value: i.toString(),
+            };
+        });
+        this.timePeriodOptions = this.timePeriods.map(period => {
+            return {
+                label: period,
+                value: period,
+            };
+        });
+    }
+    defaultSelectedPeriodChangedHandler(newValue) {
+        this.selectedPeriod = newValue;
+        this.updateNumberOptionsAndSelectedNumber(newValue);
+    }
+    defaultSelectedNumberChangedHandler(newValue) {
+        this.selectedNumber = newValue;
+    }
+    timePeriodsChangedHandler(newValue) {
+        this.timePeriodOptions = newValue.map(period => {
+            return {
+                label: period,
+                value: period,
+            };
+        });
+    }
+    calculateOptions(period) {
+        switch (period) {
+            case 'hour':
+                return Array.from({ length: 23 }, (_, i) => i + 1);
+            case 'minute':
+                return Array.from({ length: 60 }, (_, i) => i);
+            case 'day':
+                return Array.from({ length: 30 }, (_, i) => i + 1);
+            case 'week':
+                return Array.from({ length: 4 }, (_, i) => i + 1);
+            case 'month':
+                return Array.from({ length: 12 }, (_, i) => i + 1);
+            default:
+                return [];
+        }
+    }
+    selectedOptionChangedHandler(event) {
+        debug('time-period-selector', 'selectedOptionChangedHandler', event.detail);
+        const { value, name } = event.detail;
+        if (name === 'time-period') {
+            this.selectedPeriod = value;
+            this.updateNumberOptionsAndSelectedNumber(value);
+        }
+        else if (name === 'time-number') {
+            this.selectedNumber = parseInt(value);
+        }
+        const selected = {
+            number: this.selectedNumber,
+            period: this.selectedPeriod,
+        };
+        this.timePeriodChanged.emit(selected);
+    }
+    updateNumberOptionsAndSelectedNumber(period) {
+        const numberOptions = this.calculateOptions(period);
+        this.numberOptions = numberOptions.map(i => {
+            return {
+                label: i.toString(),
+                value: i.toString(),
+            };
+        });
+        this.selectedNumber = parseInt(this.numberOptions[0].value);
+    }
+    render() {
+        return (h("div", { key: '85937e5b0dbeb32c5f2417fa644744c731b4cd57', class: "time-period-selector" }, h("select-dropdown", { key: '030d52e80b1e1561b517009c14109d4c9ecf2577', id: "time-number", name: 'time-number', exportparts: "sd__dropdown: tps__number-dropdown, sd__dropdown-button: tps__number-dropdown-button, sd__dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultSelectedOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) ?? this.numberOptions[0], withSearch: false }), h("select-dropdown", { key: 'ddd959a787e5ff9c4cc25ca239af0e75b4eede66', id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd__dropdown: tps__period-dropdown, sd__dropdown-button: tps__period-dropdown-button, sd__dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod) ?? this.timePeriodOptions[0], withSearch: false })));
+    }
+    static get is() { return "time-period-selector"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["time-period-selector.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["time-period-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "timePeriods": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "['hour', 'day', 'week', 'month']"
+            },
+            "defaultSelectedPeriod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The default selected time period."
+                },
+                "attribute": "default-selected-period",
+                "reflect": false,
+                "defaultValue": "'hour'"
+            },
+            "defaultSelectedNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The default selected number."
+                },
+                "attribute": "default-selected-number",
+                "reflect": false,
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedPeriod": {},
+            "selectedNumber": {},
+            "numberOptions": {},
+            "timePeriodOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "timePeriodChanged",
+                "name": "timePeriodChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ number: number; period: string }",
+                    "resolved": "{ number: number; period: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "defaultSelectedPeriod",
+                "methodName": "defaultSelectedPeriodChangedHandler"
+            }, {
+                "propName": "defaultSelectedNumber",
+                "methodName": "defaultSelectedNumberChangedHandler"
+            }, {
+                "propName": "timePeriods",
+                "methodName": "timePeriodsChangedHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "selectedOptionChanged",
+                "method": "selectedOptionChangedHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=time-period-selector.js.map

package/dist/collection/components/design-system/time-period-selector/time-period-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-period-selector.js","sourceRoot":"","sources":["../../../../src/components/design-system/time-period-selector/time-period-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { debug } from '@/utils/utils';\nimport { Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'time-period-selector',\n  styleUrl: 'time-period-selector.scss',\n  scoped: true,\n})\nexport class TimePeriodSelector {\n  @Element() host!: HTMLElement;\n\n  // The possible values for the time periods dropdown\n  @Prop() timePeriods: string[] = ['hour', 'day', 'week', 'month'];\n\n  /**\n   * The default selected time period.\n   */\n  @Prop() defaultSelectedPeriod: string = 'hour';\n\n  /**\n   * The default selected number.\n   */\n  @Prop() defaultSelectedNumber: number = 1;\n\n  /**\n   * The currently selected time period\n   */\n  @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n  /**\n   * The currently selected number of the time period\n   */\n  @State() selectedNumber: number = this.defaultSelectedNumber;\n\n  /*\n   * The options for the number dropdown, to be calculated based on the selectedPeriod\n   */\n  @State() numberOptions: { label: string; value: string }[] = this.calculateOptions('hour').map(i => {\n    return {\n      label: i.toString(),\n      value: i.toString(),\n    };\n  });\n\n  /**\n   * The options for the time period dropdown\n   */\n  @State() timePeriodOptions = this.timePeriods.map(period => {\n    return {\n      label: period,\n      value: period,\n    };\n  });\n\n  @Watch('defaultSelectedPeriod')\n  defaultSelectedPeriodChangedHandler(newValue: string) {\n    this.selectedPeriod = newValue;\n    this.updateNumberOptionsAndSelectedNumber(newValue);\n  }\n\n  @Watch('defaultSelectedNumber')\n  defaultSelectedNumberChangedHandler(newValue: number) {\n    this.selectedNumber = newValue;\n  }\n\n  @Watch('timePeriods')\n  timePeriodsChangedHandler(newValue: string[]) {\n    this.timePeriodOptions = newValue.map(period => {\n      return {\n        label: period,\n        value: period,\n      };\n    });\n  }\n\n  @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n  private calculateOptions(period: string): number[] {\n    switch (period) {\n      case 'hour':\n        return Array.from({ length: 23 }, (_, i) => i + 1);\n      case 'minute':\n        return Array.from({ length: 60 }, (_, i) => i);\n      case 'day':\n        return Array.from({ length: 30 }, (_, i) => i + 1);\n      case 'week':\n        return Array.from({ length: 4 }, (_, i) => i + 1);\n      case 'month':\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      default:\n        return [];\n    }\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'selectedOptionChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-period') {\n      this.selectedPeriod = value;\n      this.updateNumberOptionsAndSelectedNumber(value);\n    } else if (name === 'time-number') {\n      this.selectedNumber = parseInt(value);\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  updateNumberOptionsAndSelectedNumber(period: string) {\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n    this.selectedNumber = parseInt(this.numberOptions[0].value);\n  }\n\n  render() {\n    return (\n      <div class=\"time-period-selector\">\n        <select-dropdown\n          id=\"time-number\"\n          name={'time-number'}\n          exportparts=\"sd__dropdown: tps__number-dropdown, sd__dropdown-button: tps__number-dropdown-button, sd__dropdown-content: tps__number-dropdown-content\"\n          options={this.numberOptions}\n          defaultSelectedOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString()) ?? this.numberOptions[0]}\n          withSearch={false}\n        />\n        <select-dropdown\n          id=\"time-period\"\n          name={'time-period'}\n          options={this.timePeriodOptions}\n          exportparts=\"sd__dropdown: tps__period-dropdown, sd__dropdown-button: tps__period-dropdown-button, sd__dropdown-content: tps__period-dropdown-content\"\n          pluralizedLabel={this.selectedNumber > 1 ? 's' : ''}\n          defaultSelectedOption={this.timePeriodOptions.find(i => i.value == this.selectedPeriod) ?? this.timePeriodOptions[0]}\n          withSearch={false}\n        />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/design-system/tooltip-component/toolitp-component.js

@@ -12,7 +12,7 @@ export class TooltipComponent {
         event.target.nextElementSibling.style.opacity = '0';
     }
     render() {
-        return (h("div", { key: '46a9b12ea82e91115247b73a9a9533e5c0e147f6', class: "tooltip-container" }, h("span", { key: 'dbc4f00337ac428733b2f16b853aab46df850a5a', class: "info-icon", tabindex: "0", onFocus: this.showTooltip.bind(this), onBlur: this.hideTooltip.bind(this) }, h("slot", { key: '599c7a8691a185424981d79c10af3d16b643c4ca', name: "tooltip-icon" }, "i")), h("span", { key: '0ddd2b67fbb31b934a1b114c439fa71297653a25', class: `tooltip-content ${this.position}` }, h("slot", { key: '35057ecec77ae5bf60ab64c661d442ec759b7c00', name: "tooltip-content" }, "This is a help text."))));
+        return (h("div", { key: '1ba151bd1d0f2c80cc641832c986bab321accade', class: "tooltip-container" }, h("span", { key: '7d432bbaa90b5e9aee4f1d8cae36e97bad47bc9e', class: "info-icon", tabindex: "0", onFocus: this.showTooltip.bind(this), onBlur: this.hideTooltip.bind(this) }, h("slot", { key: '4f5014e68d07d5e70a873b389ef84b290017a8cd', name: "tooltip-icon" }, "i")), h("span", { key: '8c903af137f14d51297e1ba212d6343d1ba0f2e5', class: `tooltip-content ${this.position}` }, h("slot", { key: 'aa87ef75acc364a667d3a5139e9683f404646e51', name: "tooltip-content" }, "This is a help text."))));
     }
     static get is() { return "tooltip-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mailbox/nylas-composer/nylas-composer.js

@@ -127,7 +127,7 @@ export class NylasComposer {
         this.editorEl.focus();
     }
     render() {
-        return (h(Host, { key: 'bf89c512a7bebc2d438c8ace6c36ddfdc70f4e9b' }, h("sp-theme", { key: '20b57ce48fa2069c2d047a10d4756d0c4b931bb2', scale: "medium", color: "dark" }, h("div", { key: 'e89832859052769d38acf7d8297888b9146f5f30', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '4ab0148ad491259a14b280ac21f8b650f1ec3897', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '6426f50ff6e3f98d6b65aebb99e5ed528dd03817', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: '38be22cd82acf14e31801e65f5190e07cb1bc124', slot: "icon" }, h("bold-icon", { key: 'c965237b13c0bf358f0937a27da3be305fbb94d3' })), h("div", { key: '935c3961fc590ee88cdc0d351704d078f179e692', slot: "label" }, "Bold")), h("sp-button", { key: '51572cf863ce03a6814e4f2b5090ba899abce298', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: 'b55f65bd672b467eff478ddac04907f8d1a8fc8b', slot: "icon" }, h("underline-icon", { key: 'c1251e0fd863dab56c1127dcfe650995da054ae7' })), h("div", { key: '63a575566653d4957a3fe51cb877b5d7418086c2', slot: "label" }, "Underline")), h("sp-button", { key: 'd678867388f1c0e8bec34cb2a4cc5f0158d3b327', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: 'e6add93a87877e6701cd2877573e0c63c55c0ae6', slot: "icon" }, h("italic-icon", { key: 'fa5ad4323cd0cf31cb2d8a7c93ec2171fa776586' })), h("div", { key: '26c7f9d97e786c9e8e7e7e8b8d27dcfd2a5b0e50', slot: "label" }, "Italic")))), h("div", { key: '367b9de03c23d6bb5e96f6d6e49f0d549eb92e37', class: 'buttons' }, h("sp-button", { key: '4e3e6a5ad05b285e68b2ef26fcebac1e54a71be2', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: 'e2444f4a64d500032fa90b6c539afa8e2567cb72', onClick: this.closeComposer, class: "close" }, "Close")))));
+        return (h(Host, { key: '89cdb2c6c606698704a06507ddbe301a37134ca4' }, h("sp-theme", { key: '4946560c2ab8518e5172e506caf36fa98fbc3912', scale: "medium", color: "dark" }, h("div", { key: 'b21a8843aaebb1fd4169ce2b849fb801bce46df4', class: "editor", contentEditable: true, ref: r => (this.editorEl = r) }, h("div", { key: '830a97d7947b65c0312630184d539d4f8c7a48eb', class: "toolbar", ref: r => (this.toolbarEl = r), contentEditable: false }, h("sp-button", { key: '2fb11d997b13e4ec6e700155e3001d30f52bb217', quiet: true, onClick: () => document.execCommand('bold') }, h("div", { key: '5c4fd64a8a3ccb94f36675047c05a662a1846426', slot: "icon" }, h("bold-icon", { key: '033043849fddd392bc078dbb2fd843f6701c0501' })), h("div", { key: '585b08407297a97e3214d716505331f0889ea68f', slot: "label" }, "Bold")), h("sp-button", { key: 'b01e3c9c40fbe11122ca7be4b5120ba19262e1d5', quiet: true, onClick: () => document.execCommand('underline') }, h("div", { key: 'e407e888cb414fc4e5b15e9d21349038c7871f83', slot: "icon" }, h("underline-icon", { key: '838cf6c3b7b42708b5ed6e5c53072cda29043f40' })), h("div", { key: 'c662e1cefa352cb8910050a77e5b0a2e18de6bed', slot: "label" }, "Underline")), h("sp-button", { key: '7e39fdbbdaeafabf1de93f42758f3b499c70206b', quiet: true, onClick: () => document.execCommand('italic') }, h("div", { key: '8d7c7be8cf3959726b7541ed64e4e41995461258', slot: "icon" }, h("italic-icon", { key: 'ae07a6648728e3f9720dfdc3e3f91e8e4cbf86d9' })), h("div", { key: 'fc3fc026d47610df27752ec8a310db99e280014c', slot: "label" }, "Italic")))), h("div", { key: '9d4abb27a5d5a6b2c884da58191ca8f014e9ab43', class: 'buttons' }, h("sp-button", { key: '43f2b6d9a4a6d5513eb6fd52fb8f68f416077b37', onClick: this.sendComposer, class: "send" }, "Send"), h("sp-button", { key: 'fbae8e0490814b13347e3cc09bfd922ff5fceb43', onClick: this.closeComposer, class: "close" }, "Close")))));
     }
     static get is() { return "nylas-composer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mailbox/nylas-list-folders/nylas-list-folders.js

@@ -69,7 +69,7 @@ export class NylasListFolders {
         }
     }
     render() {
-        return (h(Host, { key: '623ace703b229e8db585ae1beb784e439335c59b' }, h("div", { key: '88888e9a75ca8357a11148b126c4e287d1240bb2', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
+        return (h(Host, { key: '216a4856e0e4484bd21a13c8b52f60056838e355' }, h("div", { key: '3dfa827f612e13c3abec08c7e50a3f52ece2f677', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
                 folder: true,
                 selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),
             } }, h("div", { slot: "icon", class: "icon" }, this.getFolderIcon(folder)), this.formatFolderName(folder))))), this.otherFolders && (h(Fragment, null, h("hr", null), h("div", { class: "folders" }, this.otherFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {

package/dist/collection/components/mailbox/nylas-list-threads/nylas-list-threads.js

@@ -43,7 +43,7 @@ export class NylasListThreads {
         debug(`[nylas-list-threads] Component did load`, { isAuthenticated: this.isAuthenticated });
     }
     render() {
-        return (h(Host, { key: 'e69436f25ffaffa05fd3c4a57de1745ad9e75107' }, h("div", { key: 'd9b0daf46aff4d2ef699ddf2c71fb8f83c89b8b3', class: 'list-thread', part: "list-thread" }, this.state === 'loading' && new Array(10).fill(0).map((_, i) => h("div", { class: "thread loading", style: { animationDelay: `${i * 20}ms` } })), this.state === 'ready' &&
+        return (h(Host, { key: '4cd99954b325347a5bcf2fdda5440224f188ca4d' }, h("div", { key: '876dd6bf8cd63ce8c8ca9894559b32b3c5885597', class: 'list-thread', part: "list-thread" }, this.state === 'loading' && new Array(10).fill(0).map((_, i) => h("div", { class: "thread loading", style: { animationDelay: `${i * 20}ms` } })), this.state === 'ready' &&
             this.threads.map(thread => (h("button", { key: thread?.id, class: {
                     'thread': true,
                     'unread': thread?.unread === true,

package/dist/collection/components/mailbox/nylas-mailbox/nylas-mailbox.js

@@ -119,7 +119,7 @@ export class NylasMailbox {
         return this.nylasMailboxConnector;
     }
     render() {
-        return (h(Host, { key: '662c4d3f763c5cf9db31c4d2ba26bcdf47ead164' }, h("slot", { key: '5c2b75a569779dd2af6388648a4304721e82ba76' })));
+        return (h(Host, { key: 'c60eb0c2f7929884b9ac702c50451ab6e09a2b6c' }, h("slot", { key: '7c5e0f6dfb81b7e3e4dd67a700b78e1143e2bf53' })));
     }
     static get is() { return "nylas-mailbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mailbox/nylas-mailbox-toolbar-button/nylas-mailbox-toolbar-button.js

@@ -70,7 +70,7 @@ export class NylasMailboxToolbarButton {
             state = this.dataState ? store.get(storeKey) === 'loading' : false;
         }
         const key = state ? `state-loading` : 'state-ready';
-        return (h(Host, { key: '2454ef2e4270d1642cabe57dacf53908fcdb34e6' }, h("sp-theme", { key: '97d71094fabc3466b87142dfdd1d0bb22659fd32', scale: "medium", color: "dark" }, h("sp-button", { onClick: this.onClick, disabled: state, key: key, "icon-only": this.iconOnly, label: this.renderByState(state) }, this.hasSlot('icon') && (h("div", { slot: "icon", class: 'slot' }, h("slot", { name: "icon" }))), !this.iconOnly && this.renderByState(state)))));
+        return (h(Host, { key: 'bc4a3e76b0b9ea32d5c640b6ef5944bc45edb2b1' }, h("sp-theme", { key: 'c52ad12f24b96ca8ee1da8f026db2441ae87d40e', scale: "medium", color: "dark" }, h("sp-button", { onClick: this.onClick, disabled: state, key: key, "icon-only": this.iconOnly, label: this.renderByState(state) }, this.hasSlot('icon') && (h("div", { slot: "icon", class: 'slot' }, h("slot", { name: "icon" }))), !this.iconOnly && this.renderByState(state)))));
     }
     static get is() { return "nylas-mailbox-toolbar-button"; }
     static get encapsulation() { return "shadow"; }
@@ -91,7 +91,7 @@ export class NylasMailboxToolbarButton {
                 "mutable": false,
                 "complexType": {
                     "original": "MethodsOfNylasMailboxConnector",
-                    "resolved": "\"init\" | \"resetStores\" | \"logout\" | \"auth.isAuthenticated\" | \"messages.getMessages\" | \"messages.getThreadMessages\" | \"messages.downloadMessageAttachments\" | \"messages.summarizeText\" | \"messages.textToSpeech\" | \"threads.back\" | \"threads.getThreads\" | \"threads.getThread\" | \"threads.nextThreadPage\" | \"threads.previousThreadPage\" | \"threads.updateThreadQueryParams\" | \"threads.unSelectThread\" | \"threads.selectThread\" | \"threads.markThreadAsRead\" | \"threads.updateThread\" | \"folders.getFolders\" | \"folders.selectFolder\" | \"auth.getTokenInfo\" | \"auth.logout\" | \"auth.validateSession\" | \"auth.isAccessTokenValid\" | \"auth.getHostedAuthRedirectURL\" | \"auth.manageHostedAuthCodeExchange\" | \"nylasAuth.isAuthenticated\" | \"nylasAuth.getTokenInfo\" | \"nylasAuth.logout\" | \"nylasAuth.isAccessTokenValid\" | \"nylasAuth.getHostedAuthRedirectURL\" | \"nylasAuth.nylasAPIRequest\" | \"nylasAuth.exchangeAuthCodeForTokenInfo\" | \"nylasAuth.nylasDownloadFileRequest\" | \"nylasAuth.refreshAccessToken\" | \"nylasAuth.hasScopeByType\" | \"nylasAuth.hasScope\" | `nylasAuth.config.${string}` | \"nylasAuthStore.set\" | \"nylasAuthStore.use\" | \"nylasAuthStore.reset\" | \"nylasAuthStore.get\" | \"nylasAuthStore.on\" | \"nylasAuthStore.onChange\" | \"nylasAuthStore.dispose\" | \"nylasAuthStore.forceUpdate\" | \"nylasAuthStore.state.isAuthenticated.\" | \"nylasAuthStore.state.tokenInfo.\" | \"nylasAuthStore.state.tokenInfo.grant_id.\" | \"nylasAuthStore.state.tokenInfo.email.\" | \"nylasAuthStore.state.tokenInfo.expires_in.\" | \"nylasAuthStore.state.tokenInfo.id_token.\" | \"nylasAuthStore.state.tokenInfo.token_type.\" | \"nylasAuthStore.state.tokenInfo.scope.\" | \"nylasAuthStore.state.tokenInfo.refresh_token.\" | \"nylasAuthStore.state.state.\" | \"authStore.set\" | \"authStore.use\" | \"authStore.reset\" | \"authStore.get\" | \"authStore.on\" | \"authStore.onChange\" | \"authStore.dispose\" | \"authStore.forceUpdate\" | \"authStore.state.isAuthenticated.\" | \"authStore.state.tokenInfo.\" | \"authStore.state.tokenInfo.grant_id.\" | \"authStore.state.tokenInfo.email.\" | \"authStore.state.tokenInfo.expires_in.\" | \"authStore.state.tokenInfo.id_token.\" | \"authStore.state.tokenInfo.token_type.\" | \"authStore.state.tokenInfo.scope.\" | \"authStore.state.tokenInfo.refresh_token.\" | \"authStore.state.state.\" | \"nylasMailboxStore.set\" | \"nylasMailboxStore.use\" | \"nylasMailboxStore.reset\" | \"nylasMailboxStore.get\" | \"nylasMailboxStore.on\" | \"nylasMailboxStore.onChange\" | \"nylasMailboxStore.dispose\" | \"nylasMailboxStore.forceUpdate\" | `nylasMailboxStore.state.${string}` | \"router.init\" | \"router.addRouteChangeListener\" | \"router.setRoute\" | \"router.navigate\" | \"router.getRoute\" | \"router.getBasePath\" | \"router.matchRoute\" | \"mailboxStore.set\" | \"mailboxStore.use\" | \"mailboxStore.reset\" | \"mailboxStore.get\" | \"mailboxStore.on\" | \"mailboxStore.onChange\" | \"mailboxStore.dispose\" | \"mailboxStore.forceUpdate\" | `mailboxStore.state.${string}`",
+                    "resolved": "\"init\" | \"resetStores\" | \"logout\" | \"auth.isAuthenticated\" | \"messages.getMessages\" | \"messages.getThreadMessages\" | \"messages.downloadMessageAttachments\" | \"messages.summarizeText\" | \"messages.textToSpeech\" | \"threads.back\" | \"threads.getThreads\" | \"threads.getThread\" | \"threads.nextThreadPage\" | \"threads.previousThreadPage\" | \"threads.updateThreadQueryParams\" | \"threads.unSelectThread\" | \"threads.selectThread\" | \"threads.markThreadAsRead\" | \"threads.updateThread\" | \"folders.getFolders\" | \"folders.selectFolder\" | \"auth.logout\" | \"auth.validateSession\" | \"auth.getTokenInfo\" | \"auth.isAccessTokenValid\" | \"auth.getHostedAuthRedirectURL\" | \"auth.manageHostedAuthCodeExchange\" | \"nylasAuth.isAuthenticated\" | \"nylasAuth.logout\" | \"nylasAuth.getTokenInfo\" | \"nylasAuth.isAccessTokenValid\" | \"nylasAuth.getHostedAuthRedirectURL\" | \"nylasAuth.nylasAPIRequest\" | \"nylasAuth.exchangeAuthCodeForTokenInfo\" | \"nylasAuth.nylasDownloadFileRequest\" | \"nylasAuth.refreshAccessToken\" | \"nylasAuth.hasScopeByType\" | \"nylasAuth.hasScope\" | `nylasAuth.config.${string}` | \"nylasMailboxStore.set\" | \"nylasMailboxStore.use\" | \"nylasMailboxStore.reset\" | \"nylasMailboxStore.get\" | \"nylasMailboxStore.on\" | \"nylasMailboxStore.onChange\" | \"nylasMailboxStore.dispose\" | \"nylasMailboxStore.forceUpdate\" | `nylasMailboxStore.state.${string}` | \"nylasAuthStore.set\" | \"nylasAuthStore.use\" | \"nylasAuthStore.reset\" | \"nylasAuthStore.get\" | \"nylasAuthStore.on\" | \"nylasAuthStore.onChange\" | \"nylasAuthStore.dispose\" | \"nylasAuthStore.forceUpdate\" | \"nylasAuthStore.state.state.\" | \"nylasAuthStore.state.isAuthenticated.\" | \"nylasAuthStore.state.tokenInfo.\" | \"nylasAuthStore.state.tokenInfo.email.\" | \"nylasAuthStore.state.tokenInfo.grant_id.\" | \"nylasAuthStore.state.tokenInfo.expires_in.\" | \"nylasAuthStore.state.tokenInfo.id_token.\" | \"nylasAuthStore.state.tokenInfo.token_type.\" | \"nylasAuthStore.state.tokenInfo.scope.\" | \"nylasAuthStore.state.tokenInfo.refresh_token.\" | \"router.init\" | \"router.addRouteChangeListener\" | \"router.setRoute\" | \"router.navigate\" | \"router.getRoute\" | \"router.getBasePath\" | \"router.matchRoute\" | \"mailboxStore.set\" | \"mailboxStore.use\" | \"mailboxStore.reset\" | \"mailboxStore.get\" | \"mailboxStore.on\" | \"mailboxStore.onChange\" | \"mailboxStore.dispose\" | \"mailboxStore.forceUpdate\" | `mailboxStore.state.${string}` | \"authStore.set\" | \"authStore.use\" | \"authStore.reset\" | \"authStore.get\" | \"authStore.on\" | \"authStore.onChange\" | \"authStore.dispose\" | \"authStore.forceUpdate\" | \"authStore.state.state.\" | \"authStore.state.isAuthenticated.\" | \"authStore.state.tokenInfo.\" | \"authStore.state.tokenInfo.email.\" | \"authStore.state.tokenInfo.grant_id.\" | \"authStore.state.tokenInfo.expires_in.\" | \"authStore.state.tokenInfo.id_token.\" | \"authStore.state.tokenInfo.token_type.\" | \"authStore.state.tokenInfo.scope.\" | \"authStore.state.tokenInfo.refresh_token.\"",
                     "references": {
                         "MethodsOfNylasMailboxConnector": {
                             "location": "local",

package/dist/collection/components/mailbox/nylas-summarize-message-button/nylas-summarize-message-button.js

@@ -146,12 +146,12 @@ export class NylasSummarizeMessageButton {
         });
     }
     render() {
-        return (h(Host, { key: '09d693158ce9480c000957afe31566d47f6fb5f2' }, h("sp-theme", { key: '21f246783a3d5786c1cee8f438e89947ee5f574d', scale: "medium", color: "dark" }, h("sp-button", { key: '7ef9c60895da162d3b521ddc7c070ff463e51094', label: "Summarize email", "icon-only": true, onClickCapture: this.onClick, class: {
+        return (h(Host, { key: 'b14f3bab7ebd190d54a66a3e00704f9e4b147a8f' }, h("sp-theme", { key: '3a5b0782c84bbc7dba7b15306d608b885b5a6edc', scale: "medium", color: "dark" }, h("sp-button", { key: 'd63121e6f80bd09f1e7ca35e1176aa3a070517b3', label: "Summarize email", "icon-only": true, onClickCapture: this.onClick, class: {
                 'summarize-button': true,
                 'stopped': this.state === 'stopped',
                 'loading': this.state === 'loading',
                 'playing': this.state === 'playing',
-            } }, this.state === 'stopped' && h("play-icon", null), this.state === 'loading' && h("loading-icon", null), this.state === 'playing' && h("stop-icon", null)), h("audio", { key: '7481ceeb62b6eb21c627d0e04be0e0e7a9e986ec', ref: r => (this.audioRef = r), autoPlay: true, onPlaying: () => (this.state = 'playing'), onPause: () => (this.state = 'stopped'), onEnded: () => {
+            } }, this.state === 'stopped' && h("play-icon", null), this.state === 'loading' && h("loading-icon", null), this.state === 'playing' && h("stop-icon", null)), h("audio", { key: '954be0517a3b7328149830b2058d073ae9da591d', ref: r => (this.audioRef = r), autoPlay: true, onPlaying: () => (this.state = 'playing'), onPause: () => (this.state = 'stopped'), onEnded: () => {
                 this.state = 'stopped';
                 debug(`[nylas-summarize-message-button] Audio ended`);
             } }))));

package/dist/collection/components/mailbox/nylas-threads-refresh/nylas-threads-refresh.js

@@ -76,11 +76,11 @@ export class NylasThreadsRefresh {
         this.state = state;
     }
     render() {
-        return (h(Host, { key: '9027360ae546f7cb1cf5c1e8f977d2e8f85eb3fd' }, h("div", { key: '7bf8bf464971f8669d6cb1fc31c478ed29fbda63', class: "container", ref: r => (this.containerElement = r) }, h("button", { key: 'af4dc6f3ec1e45554f13f0dbee2945a7b60acc6c', class: {
+        return (h(Host, { key: '8b1c69762b81b03cbe942f980fd7c3f2c861a72e' }, h("div", { key: 'f79595227147faeb6fe37c4928f0f9e715c7870c', class: "container", ref: r => (this.containerElement = r) }, h("button", { key: 'e897c025006514ffff9a0c799b7716ec17c3febb', class: {
                 'pull-to-refresh': true,
                 'pulling': this.pulling,
                 'refreshing': this.state === 'loading',
-            }, "aria-label": "Refreshing..." }, this.state === 'loading' && h("refresh-icon", { slot: "icon" }), this.state !== 'loading' && h("arrow-icon", { slot: "icon" })), h("div", { key: 'd2bceb3b11369e03a9eefa80f983f341bae71239', class: "content", ref: r => (this.contentElement = r) }, h("slot", { key: 'c88b393187aa10285fd940d11bf7b792ac4dbf14' })))));
+            }, "aria-label": "Refreshing..." }, this.state === 'loading' && h("refresh-icon", { slot: "icon" }), this.state !== 'loading' && h("arrow-icon", { slot: "icon" })), h("div", { key: 'ba683ed78ab4c0a4131ec319abb4322de618e6d7', class: "content", ref: r => (this.contentElement = r) }, h("slot", { key: '3111550c7d75d3d610394ed0c8a64b5a520d092c' })))));
     }
     static get is() { return "nylas-threads-refresh"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mailbox/nylas-threads-search/nylas-threads-search.js

@@ -43,7 +43,7 @@ export class NylasThreadsSearch {
         this.internalQuery = this.query;
     }
     render() {
-        return (h(Host, { key: 'a01f03e26d8aa4b60e5e72ada49134edd7b95879' }, h("sp-theme", { key: '2e4a2b409756725bfef6aece91cb12f75d286d7d', scale: "medium", color: "dark" }, h("sp-search", { key: 'a71de13c8634f5127d85bfbc555ef363a08e8f25', quiet: true, onSubmit: this.onSearch, onBlur: this.onSearch, value: this.internalQuery }))));
+        return (h(Host, { key: '4273fc9982039d507cadbc07c36b1eb67fa1c087' }, h("sp-theme", { key: 'a78cf6506d82e5cfd91ecbacccb1580be3693c89', scale: "medium", color: "dark" }, h("sp-search", { key: '1ca66aa0b045344ab4fdf003681923a389980c29', quiet: true, onSubmit: this.onSearch, onBlur: this.onSearch, value: this.internalQuery }))));
     }
     static get is() { return "nylas-threads-search"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mailbox/nylas-view-email/nylas-view-email.js

@@ -151,7 +151,7 @@ export class NylasViewEmail {
     }
     render() {
         console.debug(`[nylas-view-email] render`, { hoistedFontURLs: this.hoistedFontURLs });
-        return (h(Host, { key: '775312a84231b72dea1236b793bb241966e4ce75' }, this.state === 'loading' && h("div", null, "Loading..."), this.state === 'ready' && (h(Fragment, null, this.styles.map(style => (h("style", null, DOMPurify.sanitize(style.innerHTML)))), h("div", { class: 'view-email', part: "view-email", innerHTML: this.sanitizedBody, ref: el => (this.viewEmailElement = el) })))));
+        return (h(Host, { key: '5209aa3727b4c8013cec3ee0a33afdb38e9925d9' }, this.state === 'loading' && h("div", null, "Loading..."), this.state === 'ready' && (h(Fragment, null, this.styles.map(style => (h("style", null, DOMPurify.sanitize(style.innerHTML)))), h("div", { class: 'view-email', part: "view-email", innerHTML: this.sanitizedBody, ref: el => (this.viewEmailElement = el) })))));
     }
     static get is() { return "nylas-view-email"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mailbox/nylas-view-thread/nylas-view-thread.js

@@ -121,7 +121,7 @@ export class NylasViewThread {
         const lastTwoMessages = this.internalMessages.slice(this.internalMessages.length - 2, this.internalMessages.length);
         const remainingMessages = this.internalMessages.slice(1, this.internalMessages.length - 2);
         const lastMessage = this.internalMessages[this.internalMessages.length - 1];
-        return (h(Host, { key: '1707f9c1de7614a8838a95e4780ea0a6eb879383' }, h("sp-theme", { key: '387a843d2819150a3f8a2d80cdc7ddea97bd88dc', scale: "medium", color: "dark" }, h("div", { key: '2c63afe98bfc5ce313791e4a5f90a965b3ff212e', class: "view-thread" }, h("div", { key: '1635ad5a2727c0495bfe971e59d6413120adccc8', class: "header" }, h("div", { key: '8f94b87ab0cc40327500d3fe133e40ca5c2a2495', class: 'subject' }, this.thread?.subject), h("div", { key: '1ddc00de5ca2d1a111726f6353b68417a1a72389', class: 'folders' }, this.thread?.folders?.map(folder => h("sp-tag", { size: "s" }, toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), h("div", { key: '8b2ecf9a3335873dde4b58ba80fea51fe1ae0c9b', class: "messages" }, fistMessage && (h(ViewThreadMessage, { message: fistMessage, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement })), remainingMessages.length > 0 && this.messages.length > 1 && !this.showAllEmails && lastTwoMessages.length > 0 && (h(Fragment, null, h("div", { class: 'show-more' }, h("button", { type: "button", onClick: this.onShowAllEmailsClick }, h("span", { class: 'avatar' }, remainingMessages.length), " ", h("span", { class: 'sr-only' }, "Show ", remainingMessages.length, " more emails"))), h("hr", null))), remainingMessages.length > 0 &&
+        return (h(Host, { key: '836293c4ebe84588af8bc245f79ef45548d99d64' }, h("sp-theme", { key: '7d66ec6cb6d487a0f454ee27d81c20e41e5f7649', scale: "medium", color: "dark" }, h("div", { key: 'd70c54528874a783aa31c8c16aa2023d08a14da1', class: "view-thread" }, h("div", { key: 'd1de0e04665f48d83fa2e913f9c48beea42e2149', class: "header" }, h("div", { key: 'a08529d41372857db86f3abfaed8a2d5f7898392', class: 'subject' }, this.thread?.subject), h("div", { key: 'e26cddf45f1ff869837184f136ce44225911aca9', class: 'folders' }, this.thread?.folders?.map(folder => h("sp-tag", { size: "s" }, toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), h("div", { key: '03d81b5879b0003b991f1b34f78961358008324c', class: "messages" }, fistMessage && (h(ViewThreadMessage, { message: fistMessage, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement })), remainingMessages.length > 0 && this.messages.length > 1 && !this.showAllEmails && lastTwoMessages.length > 0 && (h(Fragment, null, h("div", { class: 'show-more' }, h("button", { type: "button", onClick: this.onShowAllEmailsClick }, h("span", { class: 'avatar' }, remainingMessages.length), " ", h("span", { class: 'sr-only' }, "Show ", remainingMessages.length, " more emails"))), h("hr", null))), remainingMessages.length > 0 &&
             this.showAllEmails &&
             this.messages.length > 2 &&
             remainingMessages.map(email => (h(ViewThreadMessage, { message: email, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage?.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement }))), lastTwoMessages.length > 0 &&

package/dist/collection/components/nylas-login/nylas-login.js

@@ -69,7 +69,7 @@ export class NylasLogin {
     }
     render() {
         const splitProviders = this.providers?.split(',') || [];
-        return (h(Host, { key: '2dc6992f3244d7af9e06b5a1ea8c2c83bed2dbb4' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("sp-button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
+        return (h(Host, { key: 'bff99d93c49f3a70e4e8f28ea97082853af37be0' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("sp-button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
                 minWidth: this.logoWidth,
             } }), h("h1", null, "Welcome")), h("p", null, "Log in to your account to continue to ", this.companyName), h("div", { class: "login-methods" }, splitProviders.includes('google') && (h("button", { class: "login-google", onClick: this._onGoogleButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 256 262" }, h("path", { fill: "#4285F4", d: "M255.6 131.6c0-8.2-.8-16.2-2.2-23.9H130v45.3h70.3c-3 16.1-12.4 29.7-26.3 38.9v32.4h42.6c25-23 39.4-56.7 39.4-97.7z" }), h("path", { fill: "#34A853", d: "M130 262c35.3 0 64.9-11.7 86.5-31.7l-42.6-32.4c-11.7 7.9-26.7 12.6-43.9 12.6-33.7 0-62.3-22.7-72.5-53.4H14.5v33.3A130.3 130.3 0 00130 262z" }), h("path", { fill: "#FBBC05", d: "M57.5 158.1a72.7 72.7 0 010-54.2V70.6H14.5a130.4 130.4 0 000 120.8l43-33.3z" }), h("path", { fill: "#EA4335", d: "M130 51.6c19 0 36 6.5 49.4 19.2l37-36C195 13.1 165.2 0 130 0A130.3 130.3 0 0014.5 70.6l43 33.3c10.2-30.7 38.8-53.3 72.5-53.3z" })), "Continue with Google")), splitProviders.includes('microsoft') && (h("button", { class: "login-microsoft", onClick: this._onMicrosoftButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 448 512" }, h("path", { fill: "#F3F3F3", d: "M0 32v192h192V32H0zm256 0v192h192V32H256zm192 256v192h-192V288h192zM0 224v192h192V224H0z" })), "Continue with Microsoft"))), h("form", { class: "login-form", method: "POST", onSubmit: this._onFormSubmit }, h("label", { htmlFor: "email" }, "Email"), h("input", { type: "email", id: "email", name: "email", required: true, value: this.email }), h("button", { type: "submit" }, "Next")))))));
     }

package/dist/collection/components/nylas-provider/nylas-provider.js

@@ -101,7 +101,7 @@ export class NylasProvider {
         return this.baseProvider?.getStore('schedulerConfig');
     }
     render() {
-        return (h(Host, { key: 'c70dbacf5502b79a6306f27b969dd9a9f841f5a0' }, h("slot", { key: '031e85b2e755d2e4b7f925982a47e32daa5f8200' })));
+        return (h(Host, { key: 'cf7646d512fe6614ad4a73ac63c3581f20af1ab2' }, h("slot", { key: 'bf17dda1b22695e9862a549866fcd140b5d2e0db' })));
     }
     static get is() { return "nylas-provider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.css

@@ -81,7 +81,7 @@ sp-theme {
 .booked-event-header h2 {
   color: var(--nylas-base-600);
   margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
   font-size: 1.125rem;
   font-weight: 600;
 }
@@ -115,11 +115,11 @@ sp-theme {
   font-weight: 600;
   line-height: 1.25rem;
   text-align: justify;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 .booking-date-time p,
 .booking-participants p {
-  font-size: 0.875rem;
+  font-size: 16px;
   margin: 0;
   font-weight: 400;
   text-align: justify;
@@ -159,6 +159,7 @@ sp-button {
   font-size: 16px;
   padding: 8px;
   font-family: var(--nylas-font-family);
+  font-weight: 600;
   height: 48px;
   line-height: 24px;
 }

package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.css

@@ -201,6 +201,10 @@ input[type=email].error {
   border-color: var(--nylas-error);
   border-width: 2px;
 }
+input[type=text].error::placeholder,
+input[type=email].error::placeholder {
+  font-weight: 400;
+}
 input[type=text].guest-email,
 input[type=email].guest-email {
   color: var(--nylas-base-900);

package/dist/collection/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.css

@@ -119,6 +119,7 @@ sp-field-label {
   margin-top: 1rem;
   display: flex;
   color: var(--nylas-base-800);
+  font-size: 14px;
 }
 sp-field-label.error {
   color: var(--nylas-error);

package/dist/collection/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.js

@@ -54,7 +54,7 @@ export class NylasCancelBookingForm {
         debug(`[nylas-cancel-booking-form] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '37bca52431abe226b6fd868fc24076ec3e841294', part: "ncec" }, h("sp-theme", { key: '40cdcc06a4c14ee3708c34be9260bd6d48a9846d', theme: "spectrum", scale: "medium" }, h("div", { key: '5361b2877dfa977494b51adb4dee9a15ff18179b', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: 'abb7b5820d3e48d4986f0fb01d873fb857a93c0e', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '1dcb825a6b57df4cb0cbd07e188d55519670798a' })), h("h3", { key: 'e8e261dd983185aedefcd7f4d556723c963f5880', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: 'c142bbb14fe2f3e416f2503c0ddef533850182d6', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: '7b1c3b6465310f358583f952472f6eb4c29dcd49', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'c013d9b44b21f6e35fec4c75fcbf80548fb55e76', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: '23043f60c6243e3713c4ff909942a3358042bdb6', class: "required" }, "*")), h("sp-textfield", { key: 'ec70ddb3dfdc3ac35e762bf6f7211fd8d1f400f5', id: "cancel-reason", class: this.cancellationError ? 'error' : '', part: "ncec__reason-textarea", multiline: true, value: this.cancellationReason, onInput: this.handleOnChangeCancellationReason, onFocus: this.handleOnChangeCancellationReason, invalid: !!this.cancellationError }, h("sp-help-text", { key: 'c20a578c582aad43ce4ee228f8cb87b48d02305b', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: 'ee0e1cc78325b8e3fdaa99ed4e3b516790050dd5', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'd924c5db2efea170c1ef4c00e237954e69efcd5a', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
+        return (h(Host, { key: '3e77b83049c0b9cd2ed968cc97e665017f76837e', part: "ncec" }, h("sp-theme", { key: '857ac295df09b0f642eb1e9d01021531b935c7ad', theme: "spectrum", scale: "medium" }, h("div", { key: '9f52787bc3efc81618e5eac14219c5674f4efe5a', class: "nylas-cancel-booking-form", part: "ncec__card" }, h("div", { key: '07ddd2cd5664aacf4e123d822bde07af562a8571', class: "nylas-cancel-booking-form__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '04ccbf1eb7ccd7d9053265e1991f8fd494b7e4ae' })), h("h3", { key: '2fdbd40021dae8eb98e4288793af8719d3cc6226', class: "nylas-cancel-booking-form__title", part: "ncec__title" }, "Cancel booking?"), h("div", { key: '3af3918de0c111bcf90f6ad44a468efdcab185ac', class: "nylas-cancel-booking-form__description", part: "ncec__description" }, "Your current timeslot will become available to others."), h("form", { key: '7e136e261b22e513b395e47dfc2db696aced945f', onSubmit: this.handleSubmitCancelBooking }, h("sp-field-label", { key: 'fa566625fafbc74f98bb7c012dcb1c71093c0227', for: "cancel-reason", class: this.cancellationError ? 'error' : '' }, "Reason for cancellation ", h("span", { key: 'fb567a86677bfc33c63b6118ed9ce71eed7a5084', class: "required" }, "*")), h("sp-textfield", { key: 'c585d1f070700a4ccb39d52fdc7dba764c19d43f', id: "cancel-reason", class: this.cancellationError ? 'error' : '', part: "ncec__reason-textarea", multiline: true, value: this.cancellationReason, onInput: this.handleOnChangeCancellationReason, onFocus: this.handleOnChangeCancellationReason, invalid: !!this.cancellationError }, h("sp-help-text", { key: 'cf6d0e82b648ee662fa9244a793cfcaa64913c4c', slot: "negative-help-text" }, this.cancellationError)), h("sp-button", { key: 'b8e17a34e57faaaa61585ea4beb2205537c38c49', variant: "primary", class: "cancel", type: "submit", part: "ncec__button-cta" }, "Cancel booking"), h("sp-button", { key: 'eafb068d14d0680d8ea5cd7e42fd358d3582e99a', variant: "secondary", class: "back", treatment: "outline", part: "ncec__button-outline", onClick: this.handleGoBackClicked }, "Go back"))))));
     }
     static get is() { return "nylas-cancel-booking-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.js

@@ -35,7 +35,7 @@ export class NylasCancelledEventCard {
         debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: 'e8e30ff1e8e629c9a522167cfd14629f3b8dc7a6', part: "ncec" }, h("sp-theme", { key: 'bc3928c9c42250b59457ec2dd50599878e162567', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '6aa1399164d77ce4972c2278ef56d537c5027f76', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'dc92dd92882eb01cea5d0c762f87a536a823e0d5', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '60229789ba46ee3abe328e4c9442b4df631d57f9' })), h("h3", { key: '8ddd0f47dc710a41798d32043d641a363e245272', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '8506cc89a56047b8a6f3026697f752ea061c77ee', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: '5a38391df6da96396ee719e58ab6c3cb67058c17', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '6d87963e3071dff1e9cb033db37b1afe5a0f419f', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
+        return (h(Host, { key: '52b1d729c8df61770be08c165665671f54189c9a', part: "ncec" }, h("sp-theme", { key: '94633560e146be20b9321e9548edb007bf570e1c', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: 'a18a0006aa5e84e58daa6f9446e2b85908867196', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: '67cc5524db58cb7777feaf9b249070e5d713b17b', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '87b0379d4847388505e4f6ddd62d059af9156303' })), h("h3", { key: 'b7d36ece20f5926c8bb2d0e796a35ed44772e8cf', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '808a6cdf14cec2782990c85e06c23e5b9936bc56', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: 'cfd161ea961c637ab2247a568143e659bfb1b7da', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: 'ab549c146571e0dd4e86cce46d9947875794a437', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
     }
     static get is() { return "nylas-cancelled-event-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.css

@@ -25,6 +25,11 @@
   --nylas-border-radius-3x: 0.75rem;
   --nylas-font-family: "Inter", sans-serif;
 }
+@media screen and (max-width: 768px) {
+  :host {
+    min-height: auto;
+  }
+}
 
 .nylas-date-picker {
   display: flex;
@@ -76,7 +81,7 @@
   min-height: 2rem;
   cursor: pointer;
   border-radius: var(--nylas-border-radius-2x);
-  font-size: min(max(14px, 3vw), 16px);
+  font-size: 16px;
   font-weight: 600;
   font-family: inherit;
   color: var(--nylas-base-text);
@@ -84,11 +89,11 @@
   cursor: pointer;
   border: none;
 }
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 412px) {
   .dates .date {
-    width: max(min(1rem, 7vw), 75%);
-    height: 2.5rem;
-    min-width: 2rem;
+    width: 38px;
+    height: 38px;
+    min-width: none;
   }
 }
 .dates .date:hover:not(:disabled) {
@@ -112,7 +117,7 @@
   cursor: not-allowed;
 }
 .dates .day {
-  font-size: 0.75rem;
+  font-size: 12px;
   color: var(--nylas-base-800);
   font-weight: 600;
   letter-spacing: 0.5px;
@@ -120,6 +125,11 @@
   display: flex;
   align-items: center;
 }
+@media screen and (max-width: 768px) {
+  .dates .day {
+    font-size: 14px;
+  }
+}
 .dates .date.day-skeleton {
   height: 48px;
   width: 48px;
@@ -127,11 +137,11 @@
   animation: pulsate 1.5s infinite ease-in-out;
   background-color: var(--nylas-base-50);
 }
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 412px) {
   .dates .date.day-skeleton {
-    width: max(min(1rem, 7vw), 75%);
-    min-width: 2rem;
-    font-size: 0.825rem;
+    width: 38px;
+    height: 38px;
+    min-width: none;
   }
 }
 .dates .date.current-day::after {

package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.css

@@ -34,12 +34,17 @@
   border-left: none;
   border-right: none;
   color: var(--nylas-base-50);
-  font-size: min(max(14px, 3vw), 16px);
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   font-family: inherit;
 }
+@media screen and (max-width: 768px) {
+  .nylas-locale-switch {
+    font-size: 16px;
+  }
+}
 
 .select-wrapper {
   display: flex;