@nylas/web-elements 1.1.0-canary.19.c → 1.1.0-canary.19.d

package/dist/components/calendar-agenda-fill.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const iconCss = ".sc-calendar-agenda-fill-icon-h{display:flex}";
+const CalendarAgendaFillIconStyle0 = iconCss;
+
+const CalendarAgendaFillIcon = proxyCustomElement(class CalendarAgendaFillIcon extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.width = '20';
+        this.height = '20';
+    }
+    render() {
+        return (h("svg", { key: '1b157c16f504c8914c81d71a9c40c91f9c96632d', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4c5bdf4bd6ff70e09c6677510d8e29a3433846ee', d: "M14 11.5C14 12.8807 12.8807 14 11.5 14H2.5C1.11929 14 0 12.8807 0 11.5V2.5C0 1.11929 1.11929 0 2.5 0H11.5C12.8807 0 14 1.11929 14 2.5V11.5ZM11 3.5C11 3.25454 10.8231 3.05039 10.5899 3.00806L10.5 3H3.5L3.41012 3.00806C3.17688 3.05039 3 3.25454 3 3.5C3 3.74546 3.17688 3.94961 3.41012 3.99194L3.5 4H10.5L10.5899 3.99194C10.8231 3.94961 11 3.74546 11 3.5ZM11 7C11 6.75454 10.8231 6.55039 10.5899 6.50806L10.5 6.5H3.5L3.41012 6.50806C3.17688 6.55039 3 6.75454 3 7C3 7.24546 3.17688 7.44961 3.41012 7.49194L3.5 7.5H10.5L10.5899 7.49194C10.8231 7.44961 11 7.24546 11 7ZM11 10.5C11 10.2545 10.8231 10.0504 10.5899 10.0081L10.5 10H3.5L3.41012 10.0081C3.17688 10.0504 3 10.2545 3 10.5C3 10.7455 3.17688 10.9496 3.41012 10.9919L3.5 11H10.5L10.5899 10.9919C10.8231 10.9496 11 10.7455 11 10.5Z", fill: "currentColor" })));
+    }
+    static get style() { return CalendarAgendaFillIconStyle0; }
+}, [2, "calendar-agenda-fill-icon", {
+        "width": [1],
+        "height": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["calendar-agenda-fill-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "calendar-agenda-fill-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CalendarAgendaFillIcon);
+            }
+            break;
+    } });
+}
+
+export { CalendarAgendaFillIcon as C, defineCustomElement as d };
+
+//# sourceMappingURL=calendar-agenda-fill.js.map

package/dist/components/calendar-agenda-fill.js.map

@@ -0,0 +1 @@
+{"file":"calendar-agenda-fill.js","mappings":";;AAAA,MAAM,OAAO,GAAG,+CAA+C,CAAC;AAChE,qCAAe,OAAO;;MCMT,sBAAsB;;;;qBACT,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IACzF,6DACE,CAAC,EAAC,+wBAA+wB,EACjxB,IAAI,EAAC,cAAc,GACnB,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/common/icons/icon.css?tag=calendar-agenda-fill-icon&encapsulation=scoped","src/common/icons/calendar-agenda-fill.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'calendar-agenda-fill-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class CalendarAgendaFillIcon {\n  @Prop() width: string = '20';\n  @Prop() height: string = '20';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M14 11.5C14 12.8807 12.8807 14 11.5 14H2.5C1.11929 14 0 12.8807 0 11.5V2.5C0 1.11929 1.11929 0 2.5 0H11.5C12.8807 0 14 1.11929 14 2.5V11.5ZM11 3.5C11 3.25454 10.8231 3.05039 10.5899 3.00806L10.5 3H3.5L3.41012 3.00806C3.17688 3.05039 3 3.25454 3 3.5C3 3.74546 3.17688 3.94961 3.41012 3.99194L3.5 4H10.5L10.5899 3.99194C10.8231 3.94961 11 3.74546 11 3.5ZM11 7C11 6.75454 10.8231 6.55039 10.5899 6.50806L10.5 6.5H3.5L3.41012 6.50806C3.17688 6.55039 3 6.75454 3 7C3 7.24546 3.17688 7.44961 3.41012 7.49194L3.5 7.5H10.5L10.5899 7.49194C10.8231 7.44961 11 7.24546 11 7ZM11 10.5C11 10.2545 10.8231 10.0504 10.5899 10.0081L10.5 10H3.5L3.41012 10.0081C3.17688 10.0504 3 10.2545 3 10.5C3 10.7455 3.17688 10.9496 3.41012 10.9919L3.5 11H10.5L10.5899 10.9919C10.8231 10.9496 11 10.7455 11 10.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calendar-agenda-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalendarAgendaIcon extends Components.CalendarAgendaIcon, HTMLElement {}
+export const CalendarAgendaIcon: {
+    prototype: CalendarAgendaIcon;
+    new (): CalendarAgendaIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calendar-agenda-icon.js

@@ -0,0 +1,8 @@
+import { C as CalendarAgendaIcon$1, d as defineCustomElement$1 } from './calendar-agenda.js';
+
+const CalendarAgendaIcon = CalendarAgendaIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalendarAgendaIcon, defineCustomElement };
+
+//# sourceMappingURL=calendar-agenda-icon.js.map

package/dist/components/calendar-agenda-icon.js.map

@@ -0,0 +1 @@
+{"file":"calendar-agenda-icon.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/calendar-agenda.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const iconCss = ".sc-calendar-agenda-icon-h{display:flex}";
+const CalendarAgendaIconStyle0 = iconCss;
+
+const CalendarAgendaIcon = proxyCustomElement(class CalendarAgendaIcon extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.width = '20';
+        this.height = '20';
+    }
+    render() {
+        return (h("svg", { key: 'eb527c787e9dc29d22cb8904ac8e19a2ed337ba1', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '26b06beae8f75f506cd5cf16351af85d814f7727', d: "M14 11.5C14 12.8807 12.8807 14 11.5 14H2.5C1.11929 14 0 12.8807 0 11.5V2.5C0 1.11929 1.11929 0 2.5 0H11.5C12.8807 0 14 1.11929 14 2.5V11.5ZM13 11.5V2.5C13 1.67157 12.3284 1 11.5 1H2.5C1.67157 1 1 1.67157 1 2.5V11.5C1 12.3284 1.67157 13 2.5 13H11.5C12.3284 13 13 12.3284 13 11.5ZM11 3.5C11 3.74546 10.8231 3.94961 10.5899 3.99194L10.5 4H3.5C3.22386 4 3 3.77614 3 3.5C3 3.25454 3.17688 3.05039 3.41012 3.00806L3.5 3H10.5C10.7761 3 11 3.22386 11 3.5ZM11 7C11 7.24546 10.8231 7.44961 10.5899 7.49194L10.5 7.5H3.5C3.22386 7.5 3 7.27614 3 7C3 6.75454 3.17688 6.55039 3.41012 6.50806L3.5 6.5H10.5C10.7761 6.5 11 6.72386 11 7ZM11 10.5C11 10.7455 10.8231 10.9496 10.5899 10.9919L10.5 11H3.5C3.22386 11 3 10.7761 3 10.5C3 10.2545 3.17688 10.0504 3.41012 10.0081L3.5 10H10.5C10.7761 10 11 10.2239 11 10.5Z", fill: "currentColor" })));
+    }
+    static get style() { return CalendarAgendaIconStyle0; }
+}, [2, "calendar-agenda-icon", {
+        "width": [1],
+        "height": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["calendar-agenda-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "calendar-agenda-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CalendarAgendaIcon);
+            }
+            break;
+    } });
+}
+
+export { CalendarAgendaIcon as C, defineCustomElement as d };
+
+//# sourceMappingURL=calendar-agenda.js.map

package/dist/components/calendar-agenda.js.map

@@ -0,0 +1 @@
+{"file":"calendar-agenda.js","mappings":";;AAAA,MAAM,OAAO,GAAG,0CAA0C,CAAC;AAC3D,iCAAe,OAAO;;MCMT,kBAAkB;;;;qBACL,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IACzF,6DACE,CAAC,EAAC,4xBAA4xB,EAC9xB,IAAI,EAAC,cAAc,GACnB,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/common/icons/icon.css?tag=calendar-agenda-icon&encapsulation=scoped","src/common/icons/calendar-agenda.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'calendar-agenda-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class CalendarAgendaIcon {\n  @Prop() width: string = '20';\n  @Prop() height: string = '20';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M14 11.5C14 12.8807 12.8807 14 11.5 14H2.5C1.11929 14 0 12.8807 0 11.5V2.5C0 1.11929 1.11929 0 2.5 0H11.5C12.8807 0 14 1.11929 14 2.5V11.5ZM13 11.5V2.5C13 1.67157 12.3284 1 11.5 1H2.5C1.67157 1 1 1.67157 1 2.5V11.5C1 12.3284 1.67157 13 2.5 13H11.5C12.3284 13 13 12.3284 13 11.5ZM11 3.5C11 3.74546 10.8231 3.94961 10.5899 3.99194L10.5 4H3.5C3.22386 4 3 3.77614 3 3.5C3 3.25454 3.17688 3.05039 3.41012 3.00806L3.5 3H10.5C10.7761 3 11 3.22386 11 3.5ZM11 7C11 7.24546 10.8231 7.44961 10.5899 7.49194L10.5 7.5H3.5C3.22386 7.5 3 7.27614 3 7C3 6.75454 3.17688 6.55039 3.41012 6.50806L3.5 6.5H10.5C10.7761 6.5 11 6.72386 11 7ZM11 10.5C11 10.7455 10.8231 10.9496 10.5899 10.9919L10.5 11H3.5C3.22386 11 3 10.7761 3 10.5C3 10.2545 3.17688 10.0504 3.41012 10.0081L3.5 10H10.5C10.7761 10 11 10.2239 11 10.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/checkbox-component2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const checkboxComponentCss = "label{--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;display:flex;align-items:center;font-family:var(--nylas-font-family);cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}label input[type=checkbox]:focus~.checkmark,label input[type=checkbox]:hover~.checkmark{border-color:var(--nylas-primary)}label input[type=checkbox]:checked~.checkmark{color:var(--nylas-base-0);background:var(--nylas-primary) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border:2px solid var(--nylas-primary)}label .checkmark{border-radius:var(--nylas-border-radius);border:2px solid var(--nylas-base-800);position:absolute;left:0;top:2px;width:18px;height:18px;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label .label{margin-left:32px;font-size:16px;font-weight:400;color:var(--nylas-base-800);line-height:24px}";
+const checkboxComponentCss = ".checkbox-container{--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;display:flex;flex-direction:column;gap:0.5rem}.checkbox-container p.error{color:var(--nylas-error);font-size:14px;font-weight:400;line-height:20px;font-family:var(--nylas-font-family);margin:0}label{display:flex;align-items:center;font-family:var(--nylas-font-family);cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}label input[type=checkbox]:focus~.checkmark,label input[type=checkbox]:hover~.checkmark{border-color:var(--nylas-primary)}label input[type=checkbox]:checked~.checkmark{color:var(--nylas-base-0);background:var(--nylas-primary) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border:2px solid var(--nylas-primary)}label .checkmark{border-radius:var(--nylas-border-radius);border:2px solid var(--nylas-base-800);position:absolute;left:0;top:2px;width:18px;height:18px;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label .label{margin-left:32px;font-size:16px;font-weight:400;color:var(--nylas-base-800);line-height:24px}";
 const CheckboxComponentStyle0 = checkboxComponentCss;
 
 const CheckboxComponent = proxyCustomElement(class CheckboxComponent extends HTMLElement {
@@ -12,12 +12,24 @@ const CheckboxComponent = proxyCustomElement(class CheckboxComponent extends HTM
         this.name = 'checkbox';
         this.checked = false;
         this.label = '';
+        this.required = false;
         this.isChecked = this.checked;
+        this.error = '';
     }
     componentWillLoad() {
         this.isChecked = this.checked;
     }
+    handleBookingFormSubmitted(event) {
+        if (this.required && !this.isChecked) {
+            this.error = `${this.label} is required.`;
+            return;
+        }
+        if (this.error) {
+            event.preventDefault();
+        }
+    }
     toggleCheck() {
+        this.error = '';
         this.isChecked = !this.isChecked;
         this.nylasFormCheckboxToggled.emit({
             checked: this.isChecked,
@@ -26,15 +38,17 @@ const CheckboxComponent = proxyCustomElement(class CheckboxComponent extends HTM
         });
     }
     render() {
-        return (h("label", { key: 'ff418217723b6044270dc691f7d0e11aea5fb204' }, h("input", { key: 'c45008c89d147534ba6b4a70120b7c5159a25ce6', type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("span", { key: 'a785e711233dab04bb19bcf1f1c6f665d7460015', class: "checkmark" }), h("slot", { key: '05e7f91a9e038bf9a467d63c9c004f7b90454b6f', name: "label" }, h("span", { key: '35a5c8bef4f998f993fbdcf2b752b83432218422', class: "label" }, this.label))));
+        return (h("div", { key: '2aa7451177c31e4dc5b6050b48c675eb44d0bb48', class: "checkbox-container" }, h("label", { key: '1bdcdf2c37eabf25091a38e3a2f97ea1bc75c41d' }, h("input", { key: 'e7538bf21e8171cb0696e6bddba8d2496ad6e653', type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("span", { key: '298c9fcb3e0b8d3446c69f5dd8fd5efef73bf5dd', class: "checkmark" }), h("slot", { key: 'd29afdf0831fc9be332060623eb99b2c51ea8be7', name: "label" }, h("span", { key: 'd9ecaa3ecba17d006c2830938cf0f343fded43a9', class: "label" }, this.label))), this.error && h("p", { class: "error" }, this.error)));
     }
     static get style() { return CheckboxComponentStyle0; }
 }, [1, "checkbox-component", {
         "name": [1],
         "checked": [4],
         "label": [1],
-        "isChecked": [32]
-    }]);
+        "required": [4],
+        "isChecked": [32],
+        "error": [32]
+    }, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/checkbox-component2.js.map

@@ -1 +1 @@
-{"file":"checkbox-component2.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,q8DAAq8D,CAAC;AACn+D,gCAAe,oBAAoB;;MCMtB,iBAAiB;;;;;;oBACL,UAAU;uBACN,KAAK;qBACR,EAAE;yBAEI,IAAI,CAAC,OAAO;;IAQ1C,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;KAC/B;IAED,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;YACjC,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,gEACE,8DAAO,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,GAAI,EACvG,6DAAM,KAAK,EAAC,WAAW,GAAQ,EAC/B,6DAAM,IAAI,EAAC,OAAO,IAChB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACD,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/design-system/checkbox-component/checkbox-component.scss?tag=checkbox-component&encapsulation=shadow","src/components/design-system/checkbox-component/checkbox-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\nlabel {\n  @include default-css-variables;\n  display: flex;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  position: relative;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    &:focus ~ .checkmark,\n    &:hover ~ .checkmark {\n      border-color: var(--nylas-primary);\n    }\n    &:checked ~ .checkmark {\n      color: var(--nylas-base-0);\n      background: var(--nylas-primary)\n        url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+)\n        50% 40% no-repeat;\n      border: 2px solid var(--nylas-primary);\n    }\n  }\n  .checkmark {\n    border-radius: var(--nylas-border-radius);\n    border: 2px solid var(--nylas-base-800);\n    position: absolute;\n    left: 0;\n    top: 2px;\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    pointer-events: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n\n  .label {\n    margin-left: 32px;\n    font-size: 16px;\n    font-weight: 400;\n    color: var(--nylas-base-800);\n    line-height: 24px;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'checkbox-component',\n  styleUrl: 'checkbox-component.scss',\n  shadow: true,\n})\nexport class CheckboxComponent {\n  @Prop() name: string = 'checkbox';\n  @Prop() checked: boolean = false;\n  @Prop() label: string = '';\n\n  @State() isChecked: boolean = this.checked;\n\n  @Event() nylasFormCheckboxToggled!: EventEmitter<{\n    checked: boolean;\n    name: string;\n    label: string;\n  }>;\n\n  componentWillLoad() {\n    this.isChecked = this.checked;\n  }\n\n  toggleCheck() {\n    this.isChecked = !this.isChecked;\n    this.nylasFormCheckboxToggled.emit({\n      checked: this.isChecked,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <label>\n        <input type=\"checkbox\" name={this.name} checked={this.isChecked} onChange={() => this.toggleCheck()} />\n        <span class=\"checkmark\"></span>\n        <slot name=\"label\">\n          <span class=\"label\">{this.label}</span>\n        </slot>\n      </label>\n    );\n  }\n}\n"],"version":3}
+{"file":"checkbox-component2.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,0pEAA0pE,CAAC;AACxrE,gCAAe,oBAAoB;;MCUtB,iBAAiB;;;;;;oBAIL,UAAU;uBAIN,KAAK;qBAIR,EAAE;wBAKE,KAAK;yBAIH,IAAI,CAAC,OAAO;qBAIjB,EAAE;;IAY3B,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;KAC/B;IAOD,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACpC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,eAAe,CAAC;YAC1C,OAAO;SACR;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAGD,WAAW;QACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;YACjC,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,gEACE,8DAAO,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,GAAI,EACvG,6DAAM,KAAK,EAAC,WAAW,GAAQ,EAC/B,6DAAM,IAAI,EAAC,OAAO,IAChB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACD,EACP,IAAI,CAAC,KAAK,IAAI,SAAG,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5C,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/design-system/checkbox-component/checkbox-component.scss?tag=checkbox-component&encapsulation=shadow","src/components/design-system/checkbox-component/checkbox-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n.checkbox-container {\n  @include default-css-variables;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  p.error {\n    color: var(--nylas-error);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    font-family: var(--nylas-font-family);\n    margin: 0;\n  }\n}\n\nlabel {\n  display: flex;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  position: relative;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n\n    &:focus ~ .checkmark,\n    &:hover ~ .checkmark {\n      border-color: var(--nylas-primary);\n    }\n\n    &:checked ~ .checkmark {\n      color: var(--nylas-base-0);\n      background: var(--nylas-primary)\n        url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+)\n        50% 40% no-repeat;\n      border: 2px solid var(--nylas-primary);\n    }\n  }\n\n  .checkmark {\n    border-radius: var(--nylas-border-radius);\n    border: 2px solid var(--nylas-base-800);\n    position: absolute;\n    left: 0;\n    top: 2px;\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    pointer-events: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n\n  .label {\n    margin-left: 32px;\n    font-size: 16px;\n    font-weight: 400;\n    color: var(--nylas-base-800);\n    line-height: 24px;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The `checkbox-component` component is a UI component that allows users to select a checkbox.\n * This component is used in the scheduling form to input checkbox type inputs.\n */\n@Component({\n  tag: 'checkbox-component',\n  styleUrl: 'checkbox-component.scss',\n  shadow: true,\n})\nexport class CheckboxComponent {\n  /**\n   * The name of the checkbox. This is used to identify the checkbox when submitting a form.\n   */\n  @Prop() name: string = 'checkbox';\n  /**\n   * The default value of the checkbox. This is the value that is displayed when the checkbox is rendered.\n   */\n  @Prop() checked: boolean = false;\n  /**\n   * The label of the checkbox. This is displayed next to the checkbox.\n   */\n  @Prop() label: string = '';\n  /**\n   * Whether the checkbox is required. If true, the checkbox must be checked when submitting a form.\n   * Default is false. If the checkbox is required and not checked, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The checked state of the checkbox.\n   */\n  @State() isChecked: boolean = this.checked;\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the checkbox is toggled.\n   */\n  @Event() nylasFormCheckboxToggled!: EventEmitter<{\n    checked: boolean;\n    name: string;\n    label: string;\n  }>;\n\n  // Lifecycle events\n  componentWillLoad() {\n    this.isChecked = this.checked;\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    if (this.required && !this.isChecked) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  toggleCheck() {\n    this.error = '';\n    this.isChecked = !this.isChecked;\n    this.nylasFormCheckboxToggled.emit({\n      checked: this.isChecked,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"checkbox-container\">\n        <label>\n          <input type=\"checkbox\" name={this.name} checked={this.isChecked} onChange={() => this.toggleCheck()} />\n          <span class=\"checkmark\"></span>\n          <slot name=\"label\">\n            <span class=\"label\">{this.label}</span>\n          </slot>\n        </label>\n        {this.error && <p class=\"error\">{this.error}</p>}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/constants.js

@@ -7320,7 +7320,108 @@ const DEFAULT_OPEN_HOURS = [
         end: '17:00',
     },
 ];
+const PROVIDER_CONFERENCE_MAP = {
+    google: 'Google Meet',
+    zoom: 'Zoom Meeting',
+    microsoft: 'Microsoft Teams',
+};
+const CONFERENCE_PROVIDER_MAP = {
+    'Google Meet': 'google',
+    'Zoom Meeting': 'zoom',
+    'Microsoft Teams': 'microsoft',
+};
+const DEFAULT_FORM_FIELD_TYPES = [
+    {
+        label: 'Email',
+        value: 'email',
+    },
+    {
+        label: 'Phone Number',
+        value: 'phone_number',
+    },
+    {
+        label: 'Dropdown',
+        value: 'dropdown',
+    },
+    {
+        label: 'Short text',
+        value: 'text',
+    },
+    {
+        label: 'Long text',
+        value: 'multi_line_text',
+    },
+    {
+        label: 'Checkbox',
+        value: 'checkbox',
+    },
+    {
+        label: 'Radio Button',
+        value: 'radio_button',
+    },
+];
+const FIELD_TYPES = [
+    {
+        type: 'email',
+        typeLabel: 'Email',
+        label: 'Additional email',
+        key: 'additional_email',
+        isOpen: false,
+        required: false,
+    },
+    {
+        type: 'phone_number',
+        typeLabel: 'Phone number',
+        label: 'Phone Number',
+        key: 'phone_number',
+        isOpen: false,
+        required: false,
+    },
+    {
+        type: 'dropdown',
+        typeLabel: 'Dropdown',
+        label: 'Dropdown Label',
+        key: 'dropdown',
+        isOpen: false,
+        required: false,
+        options: ['', ''],
+    },
+    {
+        type: 'text',
+        typeLabel: 'Short text',
+        label: 'Short Text Label',
+        key: 'short_text',
+        isOpen: false,
+        required: false,
+    },
+    {
+        type: 'multi_line_text',
+        typeLabel: 'Long text',
+        label: 'Long text Label',
+        key: 'long_text',
+        isOpen: false,
+        required: false,
+    },
+    {
+        type: 'checkbox',
+        typeLabel: 'Checkbox',
+        label: 'Checkbox Label',
+        key: 'checkbox',
+        isOpen: false,
+        required: false,
+    },
+    {
+        type: 'radio_button',
+        typeLabel: 'Radio Button',
+        label: 'Radio Button Label',
+        key: 'radio_button',
+        isOpen: false,
+        required: false,
+        options: ['', ''],
+    },
+];
+Object.keys(PROVIDER_CONFERENCE_MAP).map(provider => provider);
 
-export { DEFAULT_OPEN_HOURS as D, EVENT_TITLE_TOKENS as E, LANGUAGE_MAP as L, TIMEZONE_MAP as T, getTimezoneOffset as g };
+export { CONFERENCE_PROVIDER_MAP as C, DEFAULT_FORM_FIELD_TYPES as D, EVENT_TITLE_TOKENS as E, FIELD_TYPES as F, LANGUAGE_MAP as L, PROVIDER_CONFERENCE_MAP as P, TIMEZONE_MAP as T, DEFAULT_OPEN_HOURS as a, getTimezoneOffset as g };
 
 //# sourceMappingURL=constants.js.map