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

package/dist/collection/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.js

@@ -0,0 +1,214 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { debug } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasMinCancellationNotice {
+    constructor() {
+        this.minCancellationNotice = undefined;
+        this.name = 'min-cancellation-notice';
+        this.selectedNumber = 1;
+        this.selectedPeriod = 'day';
+    }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-min-cancellation-notice', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    availableDaysInFutureChanged(newValue) {
+        const { number, period } = this.calculateNumberAndPeriodFromMinutes(newValue);
+        this.selectedNumber = number;
+        this.selectedPeriod = period;
+    }
+    connectedCallback() {
+        debug('nylas-min-cancellation-notice', 'connectedCallback');
+    }
+    componentWillLoad() {
+        debug('nylas-min-cancellation-notice', 'componentWillLoad');
+        this.host.setAttribute('name', this.name);
+    }
+    componentDidLoad() {
+        debug('nylas-min-cancellation-notice', 'componentDidLoad');
+        this.availableDaysInFutureChanged(this.minCancellationNotice ?? 1);
+        if (typeof this.internals.setFormValue !== 'function') {
+            return;
+        }
+        this.internals.setFormValue(this.minCancellationNotice?.toString() ?? '1', this.name);
+    }
+    disconnectedCallback() {
+        debug('nylas-min-cancellation-notice', 'disconnectedCallback');
+    }
+    timePeriodChangedHandler(event) {
+        const { number, period } = event.detail;
+        let totalMinutes;
+        const minutesInHour = 60;
+        const minutesInDay = minutesInHour * 24;
+        const minutesInWeek = minutesInDay * 7;
+        const minutesInMonth = minutesInDay * 30;
+        if (period === 'minute') {
+            totalMinutes = number;
+        }
+        else if (period === 'hour') {
+            totalMinutes = number * minutesInHour;
+        }
+        else if (period === 'day') {
+            totalMinutes = number * minutesInDay;
+        }
+        else if (period === 'week') {
+            totalMinutes = number * minutesInWeek;
+        }
+        else if (period === 'month') {
+            totalMinutes = number * minutesInMonth;
+        }
+        else {
+            totalMinutes = 0;
+        }
+        this.valueChanged.emit({ value: totalMinutes, name: this.name });
+        if (typeof this.internals.setFormValue !== 'function') {
+            return;
+        }
+        this.internals.setFormValue(totalMinutes.toString(), this.name);
+    }
+    calculateNumberAndPeriodFromMinutes(minutes) {
+        const minutesInHour = 60;
+        const minutesInDay = minutesInHour * 24;
+        const minutesInWeek = minutesInDay * 7;
+        const minutesInMonth = minutesInDay * 30;
+        if (minutes >= minutesInMonth) {
+            return { number: Math.floor(minutes / minutesInMonth), period: 'month' };
+        }
+        else if (minutes >= minutesInWeek) {
+            return { number: Math.floor(minutes / minutesInWeek), period: 'week' };
+        }
+        else if (minutes >= minutesInDay) {
+            return { number: Math.floor(minutes / minutesInDay), period: 'day' };
+        }
+        else if (minutes >= minutesInHour) {
+            return { number: Math.floor(minutes / minutesInHour), period: 'hour' };
+        }
+        else {
+            return { number: minutes, period: 'minute' };
+        }
+    }
+    render() {
+        return (h(Host, { key: '594c4e6ca9c565f486f5c09159de518fe586f7b8' }, h("div", { key: '712baa63d3ea867b5a7893a254954fcea49c80f0', class: "nylas-min-cancellation-notice", part: "nmcn" }, h("label", { key: '7256ab66b7908dc8b972b2987276e0d2d04dd0ee' }, "Minimum cancellation notice", h("span", { key: '515772bd9028f2718ad350acef7b293269e12279', class: "label-icon" }, h("tooltip-component", { key: '1fe93b6067d38d4d78fe0c16fbd21d67ea5db0fd' }, h("info-icon", { key: '2b1e4eb5c88b329441a98009d2e81fbe6c807ccd', slot: "tooltip-icon" }), h("span", { key: '44f83c20d9041f31bb4b58c190c5877cfcdd41b3', slot: "tooltip-content" }, "Set the minimum amount of time required to cancel an event.")))), h("time-period-selector", { key: '4b1725b8d90355b2481a37d8b894414ea5549cd8', id: "min-cancellation-notice", exportparts: "tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content", timePeriods: ['minute', 'hour', 'day', 'week'], defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+    }
+    static get is() { return "nylas-min-cancellation-notice"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-min-cancellation-notice.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-min-cancellation-notice.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "minCancellationNotice": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "min-cancellation-notice",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'min-cancellation-notice'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedNumber": {},
+            "selectedPeriod": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    value: string;\n    name: string;\n  }",
+                    "resolved": "{ value: string; name: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "availableDaysInFuture",
+                "methodName": "availableDaysInFutureChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "timePeriodChanged",
+                "method": "timePeriodChangedHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-min-cancellation-notice',
+        eventToProps: {},
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasMinCancellationNotice.prototype, "render", null);
+//# sourceMappingURL=nylas-min-cancellation-notice.js.map

package/dist/collection/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-min-cancellation-notice.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-min-cancellation-notice` component is a form input for the description of an event.\n * @part nmcn - The minimum cancellation notice container\n * @part nmcn__number-dropdown - The number dropdown container\n * @part nmcn__number-dropdown-button - The number dropdown button\n * @part nmcn__number-dropdown-content - The number dropdown content\n * @part nmcn__period-dropdown - The period dropdown container\n * @part nmcn__period-dropdown-button - The period dropdown button\n * @part nmcn__period-dropdown-content - The period dropdown content\n */\n@Component({\n  tag: 'nylas-min-cancellation-notice',\n  styleUrl: 'nylas-min-cancellation-notice.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasMinCancellationNotice {\n  @Prop() minCancellationNotice?: number;\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'min-cancellation-notice';\n\n  @State() selectedNumber: number = 1;\n  @State() selectedPeriod: string = 'day';\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-min-cancellation-notice', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('availableDaysInFuture')\n  availableDaysInFutureChanged(newValue: number) {\n    const { number, period } = this.calculateNumberAndPeriodFromMinutes(newValue);\n    this.selectedNumber = number;\n    this.selectedPeriod = period;\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-min-cancellation-notice', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-min-cancellation-notice', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-min-cancellation-notice', 'componentDidLoad');\n    this.availableDaysInFutureChanged(this.minCancellationNotice ?? 1);\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(this.minCancellationNotice?.toString() ?? '1', this.name);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-min-cancellation-notice', 'disconnectedCallback');\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(\n    event: CustomEvent<{\n      number: number;\n      period: string;\n    }>,\n  ) {\n    const { number, period } = event.detail;\n    let totalMinutes;\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n\n    if (period === 'minute') {\n      totalMinutes = number;\n    } else if (period === 'hour') {\n      totalMinutes = number * minutesInHour;\n    } else if (period === 'day') {\n      totalMinutes = number * minutesInDay;\n    } else if (period === 'week') {\n      totalMinutes = number * minutesInWeek;\n    } else if (period === 'month') {\n      totalMinutes = number * minutesInMonth;\n    } else {\n      totalMinutes = 0;\n    }\n    this.valueChanged.emit({ value: totalMinutes, name: this.name });\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(totalMinutes.toString(), this.name);\n  }\n\n  private calculateNumberAndPeriodFromMinutes(minutes: number): { number: number; period: string } {\n    const minutesInHour = 60;\n    const minutesInDay = minutesInHour * 24;\n    const minutesInWeek = minutesInDay * 7;\n    const minutesInMonth = minutesInDay * 30; // Assuming 30 days in a month for simplification\n\n    if (minutes >= minutesInMonth) {\n      return { number: Math.floor(minutes / minutesInMonth), period: 'month' };\n    } else if (minutes >= minutesInWeek) {\n      return { number: Math.floor(minutes / minutesInWeek), period: 'week' };\n    } else if (minutes >= minutesInDay) {\n      return { number: Math.floor(minutes / minutesInDay), period: 'day' };\n    } else if (minutes >= minutesInHour) {\n      return { number: Math.floor(minutes / minutesInHour), period: 'hour' };\n    } else {\n      return { number: minutes, period: 'minute' };\n    }\n  }\n\n  @RegisterComponent<NylasMinCancellationNotice, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-min-cancellation-notice',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-min-cancellation-notice\" part=\"nmcn\">\n          <label>\n            Minimum cancellation notice\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Set the minimum amount of time required to cancel an event.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <time-period-selector\n            id=\"min-cancellation-notice\"\n            exportparts=\"tps__number-dropdown: nmcn__number-dropdown, tps__number-dropdown-button: nmcn__number-dropdown-button, tps__number-dropdown-content: nmcn__number-dropdown-content, tps__period-dropdown: nmcn__period-dropdown, tps__period-dropdown-button: nmcn__period-dropdown-button, tps__period-dropdown-content: nmcn__period-dropdown-content\"\n            timePeriods={['minute', 'hour', 'day', 'week']}\n            defaultSelectedNumber={this.selectedNumber}\n            defaultSelectedPeriod={this.selectedPeriod}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-min-cancellation-notice/test/nylas-min-cancellation-notice.spec.js

@@ -0,0 +1,41 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NylasMinCancellationNotice } from "../nylas-min-cancellation-notice";
+import { h } from "@stencil/core";
+import { SelectDropdown } from "../../../design-system/select-dropdown/select-dropdown";
+import { TimePeriodSelector } from "../../../design-system/time-period-selector/time-period-selector";
+describe('nylas-min-cancellation-notice', () => {
+    let nylasMinCancellationNotice;
+    let page;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [NylasMinCancellationNotice, TimePeriodSelector, SelectDropdown],
+            template: () => {
+                return h("nylas-min-cancellation-notice", { name: "min-cancellation-notice", minCancellationNotice: 60 });
+            },
+        });
+        nylasMinCancellationNotice = page.rootInstance;
+    });
+    it('renders', async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it('selects default min cancellation notice', async () => {
+        const availableDaysNumberButton = page.root.shadowRoot.querySelector('select-dropdown#time-number').shadowRoot.querySelector('button');
+        expect(availableDaysNumberButton.textContent).toBe('1');
+        const availableDaysPeriodButton = page.root.shadowRoot.querySelector('select-dropdown#time-period').shadowRoot.querySelector('button');
+        expect(availableDaysPeriodButton.textContent).toBe('hour');
+    });
+    it('selects min cancellation notice', async () => {
+        const spyEvent = jest.fn();
+        nylasMinCancellationNotice.valueChanged = {
+            emit: spyEvent,
+        };
+        const mockEvent = new CustomEvent('timePeriodChanged', {
+            detail: { number: 2, period: 'week' },
+            bubbles: true,
+            composed: true,
+        });
+        nylasMinCancellationNotice.timePeriodChangedHandler(mockEvent);
+        expect(spyEvent).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=nylas-min-cancellation-notice.spec.js.map

package/dist/collection/components/scheduler-editor/nylas-min-cancellation-notice/test/nylas-min-cancellation-notice.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-min-cancellation-notice.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler-editor/nylas-min-cancellation-notice/test/nylas-min-cancellation-notice.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kEAAkE,CAAC;AAEtG,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;IAC7C,IAAI,0BAAsD,CAAC;IAC3D,IAAI,IAAS,CAAC;IACd,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,0BAA0B,EAAE,kBAAkB,EAAE,cAAc,CAAC;YAC5E,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,qCAA+B,IAAI,EAAC,yBAAyB,EAAC,qBAAqB,EAAE,EAAE,GAAkC,CAAC;YACnI,CAAC;SACF,CAAC,CAAC;QACH,0BAA0B,GAAG,IAAI,CAAC,YAA0C,CAAC;IAC/E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,yBAAyB,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvI,MAAM,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACxD,MAAM,yBAAyB,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvI,MAAM,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC3B,0BAA0B,CAAC,YAAY,GAAG;YACxC,IAAI,EAAE,QAAQ;SACf,CAAC;QACF,MAAM,SAAS,GAAG,IAAI,WAAW,CAAC,mBAAmB,EAAE;YACrD,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,0BAA0B,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC;QAC/D,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasMinCancellationNotice } from '../nylas-min-cancellation-notice';\nimport { h } from '@stencil/core';\nimport { SelectDropdown } from '../../../design-system/select-dropdown/select-dropdown';\nimport { TimePeriodSelector } from '../../../design-system/time-period-selector/time-period-selector';\n\ndescribe('nylas-min-cancellation-notice', () => {\n  let nylasMinCancellationNotice: NylasMinCancellationNotice;\n  let page: any;\n  beforeEach(async () => {\n    page = await newSpecPage({\n      components: [NylasMinCancellationNotice, TimePeriodSelector, SelectDropdown],\n      template: () => {\n        return <nylas-min-cancellation-notice name=\"min-cancellation-notice\" minCancellationNotice={60}></nylas-min-cancellation-notice>;\n      },\n    });\n    nylasMinCancellationNotice = page.rootInstance as NylasMinCancellationNotice;\n  });\n\n  it('renders', async () => {\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it('selects default min cancellation notice', async () => {\n    const availableDaysNumberButton = page.root.shadowRoot.querySelector('select-dropdown#time-number').shadowRoot.querySelector('button');\n    expect(availableDaysNumberButton.textContent).toBe('1');\n    const availableDaysPeriodButton = page.root.shadowRoot.querySelector('select-dropdown#time-period').shadowRoot.querySelector('button');\n    expect(availableDaysPeriodButton.textContent).toBe('hour');\n  });\n\n  it('selects min cancellation notice', async () => {\n    const spyEvent = jest.fn();\n    nylasMinCancellationNotice.valueChanged = {\n      emit: spyEvent,\n    };\n    const mockEvent = new CustomEvent('timePeriodChanged', {\n      detail: { number: 2, period: 'week' },\n      bubbles: true,\n      composed: true,\n    });\n    nylasMinCancellationNotice.timePeriodChangedHandler(mockEvent);\n    expect(spyEvent).toHaveBeenCalled();\n  });\n});\n"]}

package/dist/collection/components/scheduler-editor/nylas-scheduler-editor/nylas-scheduler-editor.css

@@ -75,5 +75,77 @@ div.scheduler-editor-header button:disabled {
 }
 
 nylas-editor-tabs {
-  width: 100%;
+  width: auto;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  background-color: var(--nylas-base-0);
+  border: 1px solid var(--nylas-base-200);
+  border-radius: 5px;
+  max-width: fit-content;
+  align-self: center;
+}
+
+.login-required {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem 1rem;
+  background-color: var(--nylas-base-25);
+}
+.login-required p {
+  margin: 0 0 1rem;
+}
+.login-required .microsoft-button,
+.login-required .google-button {
+  height: 48px;
+  border: none;
+  border-radius: var(--nylas-border-radius-2x);
+  font-size: 1rem;
+  line-height: 24px;
+  padding: 0 1rem;
+  cursor: pointer;
+  display: flex;
+  margin-bottom: 1rem;
+  background-color: var(--nylas-base-0);
+  border: 1px solid var(--nylas-base-200);
+  border-radius: 5px;
+  justify-content: center;
+  gap: 0.5rem;
+  align-items: center;
+}
+.login-required .microsoft-button:hover,
+.login-required .google-button:hover {
+  background-color: var(--nylas-base-25);
+}
+.login-required .other-provider-button {
+  height: 48px;
+  border: none;
+  border-radius: var(--nylas-border-radius-2x);
+  font-size: 1rem;
+  line-height: 24px;
+  padding: 0 1rem;
+  cursor: pointer;
+  display: flex;
+  border: 0;
+  background-color: var(--nylas-base-0);
+  height: 48px;
+  margin-bottom: 1rem;
+  font-size: 0.95rem;
+  justify-content: center;
+  gap: 0.25rem;
+  align-items: center;
+}
+.login-required .other-provider-button svg {
+  transform: rotate(180deg);
+}
+.login-required .other-provider-button:hover {
+  background-color: var(--nylas-base-25);
+}
+.login-required .disclaimer-text {
+  font-size: 0.75rem;
+  color: var(--nylas-base-600);
+  align-self: center;
 }