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

package/dist/components/input-component2.js

@@ -1,16 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sanitizeHtml } from './index3.js';
 
-const inputComponentCss = ":host{display:block;height:100%;--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;width:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error)}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}";
+const inputComponentCss = ":host{display:block;height:auto;--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;width:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}";
 const InputComponentStyle0 = inputComponentCss;
 
 const DefaultPattern = {
     email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
-    tel: /^[0-9]{10}$/,
+    phone_number: /^[0-9]{10}$/,
 };
 const DefaultPlaceholder = {
     email: 'name@example.com',
-    tel: '1234567890',
+    phone_number: '1234567890',
 };
 const InputComponent = proxyCustomElement(class InputComponent extends HTMLElement {
     constructor() {
@@ -32,6 +32,12 @@ const InputComponent = proxyCustomElement(class InputComponent extends HTMLEleme
         this.value = '';
         this.error = '';
     }
+    handleDefaultValueChange(newValue) {
+        this.value = sanitizeHtml(newValue);
+        if (this.value) {
+            this.validatePattern(this.value);
+        }
+    }
     componentWillLoad() {
         this.value = sanitizeHtml(this.defaultValue);
         if (this.type !== 'text' && !this.pattern) {
@@ -64,7 +70,7 @@ const InputComponent = proxyCustomElement(class InputComponent extends HTMLEleme
             this.error = `${this.label} is required.`;
             return;
         }
-        if (!this.pattern)
+        if (!this.pattern || (!value && !this.required))
             return;
         if (this.pattern.test(value)) {
             this.error = '';
@@ -74,8 +80,11 @@ const InputComponent = proxyCustomElement(class InputComponent extends HTMLEleme
         }
     }
     render() {
-        return (h("label", { key: 'a28361a1be7a5afe38dfdc3eb375d51029af16d2', part: "ic__label", class: { error: !!this.error } }, h("p", { key: '950007f568b6c12231f40bedb1db8f62937e978a' }, h("span", { key: '106299e5bea57a16eec9734db501517d50549262', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("input", { key: '5c00d0abff394b38de75d24af47610ff4e246e69', type: "text", name: this.name, part: "ic__input", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: e => this.handleInput(e) }), this.error && (h("span", { class: "error help-text" }, this.error, " ", this.value && this.patternError !== '' ? ` ${this.patternError}` : ''))));
+        return (h("label", { key: '4a6deab471a6af7ced7959e9a051a717110a8a19', part: "ic__label", class: { error: !!this.error } }, h("p", { key: '9158a61ad4b9ea2521a39e45521372681fcb3423' }, h("span", { key: 'ed6247893d8c4fc903a26febf2341931c090053e', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("div", { key: '3141c23d3136dfc069d1b1664dd6947a194da6c0', part: "ic__input_wrapper", class: "input_wrapper" }, h("input", { key: '52498c13b0632d632317951ad25d281025e58f91', type: "text", name: this.name, part: "ic__input", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: e => this.handleInput(e) }), h("slot", { key: 'e4471ec1b410ac547cb047bcd11ea470b8fae8f2', name: "additional-input" })), this.error && (h("span", { class: "error help-text" }, this.error, " ", this.value && this.patternError !== '' ? ` ${this.patternError}` : ''))));
     }
+    static get watchers() { return {
+        "defaultValue": ["handleDefaultValueChange"]
+    }; }
     static get style() { return InputComponentStyle0; }
 }, [1, "input-component", {
         "name": [1],
@@ -91,7 +100,9 @@ const InputComponent = proxyCustomElement(class InputComponent extends HTMLEleme
         "patternError": [1, "pattern-error"],
         "value": [32],
         "error": [32]
-    }, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]]]);
+    }, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]], {
+        "defaultValue": ["handleDefaultValueChange"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1 +1 @@
-{"file":"input-component2.js","mappings":"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","names":[],"sources":["src/components/design-system/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  height: 100%;\n  @include default-css-variables;\n  width: 100%;\n}\n\nlabel {\n  @include input-label;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n  font-size: 16px;\n  color: var(--nylas-base-800);\n  p {\n    margin: 0;\n  }\n  .error {\n    color: var(--nylas-error);\n  }\n}\n\ninput[type='text'],\ninput[type='email'] {\n  @include textfield;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport sanitizeHtml from 'sanitize-html';\n\nconst DefaultPattern = {\n  email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/,\n  tel: /^[0-9]{10}$/,\n};\n\nconst DefaultPlaceholder = {\n  email: 'name@example.com',\n  tel: '1234567890',\n};\n\n/**\n * The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text values.\n */\n\n@Component({\n  tag: 'input-component',\n  styleUrl: 'input-component.scss',\n  shadow: true,\n})\nexport class InputComponent {\n  /**\n   * The name of the input. This is used to identify the input when submitting a form.\n   */\n  @Prop() name: string = 'input';\n  /**\n   * The default value of the input. This is the value that is displayed when the input is rendered.\n   */\n  @Prop() defaultValue: string = '';\n  /**\n   * The label of the input. This is displayed above the input.\n   */\n  @Prop() label: string = '';\n  /**\n   * The type of the input. This is used to determine the input's behavior.\n   * Supported types are 'text', 'email', and 'tel'.\n   */\n  @Prop() type: 'text' | 'email' | 'tel' = 'text';\n  /**\n   * The placeholder of the input. This is displayed when the input is empty.\n   */\n  @Prop() placeholder: string = DefaultPlaceholder[this.type];\n  /**\n   * Whether the input is required. If true, the input must have a value when submitting a form.\n   * Default is false. If the input is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * Whether the input is read-only. If true, the input cannot be edited.\n   * Default is false.\n   */\n  @Prop() readOnly: boolean = false;\n  /**\n   * Whether the input should be focused when rendered.\n   * Default is false. If true, the input is focused when rendered.\n   * Use this to set the focus on the first input in a form.\n   */\n  @Prop() autoFocus: boolean = false;\n  /**\n   * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n   * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'tel'.\n   */\n  @Prop() pattern?: RegExp;\n  /**\n   * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n   * Default is 255.\n   */\n  @Prop() maxLength: number = 255;\n  /**\n   * The error message to display when the value does not match the pattern.\n   * Default is an empty string. If the value does not match the pattern, the error message is appended to the default error message.\n   * For ex: patternError: \"Format: 123-456-7890\" , Default error message: \"Invalid phone number.\"\n   * - Error message displayed: \"Invalid phone number. Format: 123-456-7890\"\n   */\n  @Prop() patternError: string = '';\n\n  /**\n   * The input value state.\n   */\n  @State() value: string = '';\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the input value is changed.\n   * The scheduling form listens for this event to validate the input value and submit the form.\n   * If using outside of the scheduling form, listen for this event to validate the input value\n   * and handle the input value change.\n   */\n  @Event() nylasFormInputChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label: string;\n    type: string;\n    error: string;\n  }>;\n\n  // Lifecycle methods\n  componentWillLoad() {\n    this.value = sanitizeHtml(this.defaultValue);\n    if (this.type !== 'text' && !this.pattern) {\n      this.pattern = DefaultPattern[this.type];\n    }\n\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\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    this.validatePattern(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  handleInput(e: Event) {\n    this.error = '';\n    this.value = sanitizeHtml((e.target as HTMLInputElement).value);\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      label: this.label,\n      error: this.error,\n      type: this.type,\n    });\n  }\n\n  validatePattern(value: string) {\n    // Reset error\n    this.error = '';\n    // Check if the field is required and value is empty\n    if (this.required && !value) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    // Check if value matches pattern\n    if (!this.pattern) return;\n\n    if (this.pattern.test(value)) {\n      this.error = '';\n    } else {\n      this.error = `Invalid ${this.label.toLowerCase()} format.`;\n    }\n  }\n\n  render() {\n    return (\n      <label part=\"ic__label\" class={{ error: !!this.error }}>\n        <p>\n          <span class=\"label\">{this.label}</span>\n          {this.required && <span class=\"required\">*</span>}\n        </p>\n        <input\n          type=\"text\"\n          name={this.name}\n          part=\"ic__input\"\n          readOnly={this.readOnly}\n          autoFocus={this.autoFocus}\n          value={this.value}\n          maxLength={this.maxLength}\n          placeholder={this.placeholder}\n          class={{ error: !!this.error }}\n          onInput={e => this.handleInput(e)}\n        />\n        {this.error && (\n          <span class=\"error help-text\">\n            {this.error} {this.value && this.patternError !== '' ? ` ${this.patternError}` : ''}\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n"],"version":3}
+{"file":"input-component2.js","mappings":"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","names":[],"sources":["src/components/design-system/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  height: auto;\n  @include default-css-variables;\n  width: 100%;\n}\n\nlabel {\n  @include input-label;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n  font-size: 16px;\n  color: var(--nylas-base-800);\n\n  p {\n    margin: 0;\n  }\n\n  .error {\n    color: var(--nylas-error);\n  }\n}\n\n.input_wrapper {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\ninput[type='text'],\ninput[type='email'] {\n  @include textfield;\n  width: -moz-available;\n  width: -webkit-fill-available;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\nimport sanitizeHtml from 'sanitize-html';\n\nconst DefaultPattern = {\n  email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/,\n  phone_number: /^[0-9]{10}$/,\n};\n\nconst DefaultPlaceholder = {\n  email: 'name@example.com',\n  phone_number: '1234567890',\n};\n\n/**\n * The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n  tag: 'input-component',\n  styleUrl: 'input-component.scss',\n  shadow: true,\n})\nexport class InputComponent {\n  /**\n   * The name of the input. This is used to identify the input when submitting a form.\n   */\n  @Prop() name: string = 'input';\n  /**\n   * The default value of the input. This is the value that is displayed when the input is rendered.\n   */\n  @Prop() defaultValue: string = '';\n  /**\n   * The label of the input. This is displayed above the input.\n   */\n  @Prop() label: string = '';\n  /**\n   * The type of the input. This is used to determine the input's behavior.\n   * Supported types are 'text', 'email', and 'phone_number'.\n   */\n  @Prop() type: 'text' | 'email' | 'phone_number' = 'text';\n  /**\n   * The placeholder of the input. This is displayed when the input is empty.\n   */\n  @Prop() placeholder: string = DefaultPlaceholder[this.type];\n  /**\n   * Whether the input is required. If true, the input must have a value when submitting a form.\n   * Default is false. If the input is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * Whether the input is read-only. If true, the input cannot be edited.\n   * Default is false.\n   */\n  @Prop() readOnly: boolean = false;\n  /**\n   * Whether the input should be focused when rendered.\n   * Default is false. If true, the input is focused when rendered.\n   * Use this to set the focus on the first input in a form.\n   */\n  @Prop() autoFocus: boolean = false;\n  /**\n   * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n   * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n   */\n  @Prop() pattern?: RegExp;\n  /**\n   * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n   * Default is 255.\n   */\n  @Prop() maxLength: number = 255;\n  /**\n   * The error message to display when the value does not match the pattern.\n   * Default is an empty string. If the value does not match the pattern, the error message is appended to the default error message.\n   * For ex: patternError: \"Format: 123-456-7890\" , Default error message: \"Invalid phone number.\"\n   * - Error message displayed: \"Invalid phone number. Format: 123-456-7890\"\n   */\n  @Prop() patternError: string = '';\n\n  /**\n   * The input value state.\n   */\n  @State() value: string = '';\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the input value is changed.\n   * The scheduling form listens for this event to validate the input value and submit the form.\n   * If using outside of the scheduling form, listen for this event to validate the input value\n   * and handle the input value change.\n   */\n  @Event() nylasFormInputChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label: string;\n    type: string;\n    error: string;\n  }>;\n\n  // Lifecycle methods\n  @Watch('defaultValue')\n  handleDefaultValueChange(newValue: string) {\n    this.value = sanitizeHtml(newValue);\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  componentWillLoad() {\n    this.value = sanitizeHtml(this.defaultValue);\n    if (this.type !== 'text' && !this.pattern) {\n      this.pattern = DefaultPattern[this.type];\n    }\n\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\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    this.validatePattern(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  handleInput(e: Event) {\n    this.error = '';\n    this.value = sanitizeHtml((e.target as HTMLInputElement).value);\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      label: this.label,\n      error: this.error,\n      type: this.type,\n    });\n  }\n\n  validatePattern(value: string) {\n    // Reset error\n    this.error = '';\n    // Check if the field is required and value is empty\n    if (this.required && !value) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    // Check if value matches pattern\n    if (!this.pattern || (!value && !this.required)) return;\n\n    if (this.pattern.test(value)) {\n      this.error = '';\n    } else {\n      this.error = `Invalid ${this.label.toLowerCase()} format.`;\n    }\n  }\n\n  render() {\n    return (\n      <label part=\"ic__label\" class={{ error: !!this.error }}>\n        <p>\n          <span class=\"label\">{this.label}</span>\n          {this.required && <span class=\"required\">*</span>}\n        </p>\n        <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n          <input\n            type=\"text\"\n            name={this.name}\n            part=\"ic__input\"\n            readOnly={this.readOnly}\n            autoFocus={this.autoFocus}\n            value={this.value}\n            maxLength={this.maxLength}\n            placeholder={this.placeholder}\n            class={{ error: !!this.error }}\n            onInput={e => this.handleInput(e)}\n          />\n          <slot name=\"additional-input\"></slot>\n        </div>\n        {this.error && (\n          <span class=\"error help-text\">\n            {this.error} {this.value && this.patternError !== '' ? ` ${this.patternError}` : ''}\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/components/input-dropdown2.js

@@ -193,7 +193,7 @@ const InputDropdown = proxyCustomElement(class InputDropdown extends HTMLElement
         }
     }
     render() {
-        return (h("div", { key: '271eb5442c9d5358ba755a4f4117c7cf74e6fcff', class: "dropdown", part: "id_dropdown" }, h("input", { key: 'bb95067c1c69691912193b04f76daf1603456722', type: "text", name: this.name, id: this.name, part: "id_dropdown-input", class: { dropbtn: true, open: this.isOpen }, value: this.inputValue, onClick: (e) => {
+        return (h("div", { key: '9c59bf5935fe15c27f2ece008a59d245158e24e0', class: "dropdown", part: "id_dropdown" }, h("input", { key: 'bc16931dc1a6a1a3192cc440afe075b53e6419a6', type: "text", name: this.name, id: this.name, part: "id_dropdown-input", class: { dropbtn: true, open: this.isOpen }, value: this.inputValue, onClick: (e) => {
                 this.toggleDropdown();
                 this.shouldAutoScroll = true;
                 this.handleClick(e);

package/dist/components/italic.js

@@ -11,7 +11,7 @@ const ItalicIcon = proxyCustomElement(class ItalicIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("svg", { key: '3444bbe19b339e1fa6439bac12bde05840a0bd2d', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9613cb241e32a1ce6e67857d075db5cfb5a47ba3', stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "m10 20 4-16m2 0h-4m0 16H8" })));
+        return (h("svg", { key: '0ba83e895701d3c20e3cd50f9197edf5e756dd77', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '93ff9fc423cd430d0ce3b5b011e9e4ba92ffdef4', stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "m10 20 4-16m2 0h-4m0 16H8" })));
     }
     static get style() { return ItalicIconStyle0; }
 }, [2, "italic-icon", {

package/dist/components/loading.js

@@ -12,7 +12,7 @@ const LoadingIcon = proxyCustomElement(class LoadingIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("div", { key: '5a2e1d7f211e17dba936c594398751951d2276e9', class: "wave" }, h("div", { key: '96caaecdcb309348f961ed43774eb89a2a87e635', class: "dot" }), h("div", { key: 'f1f707f4a133dd12fa71a5ae13d864ce26b125d8', class: "dot" }), h("div", { key: '34df820811090a46234faf4b8b5ee1e033554d11', class: "dot" })));
+        return (h("div", { key: 'a9c23456f1cf17a7b8414d08a82555b9d987efd6', class: "wave" }, h("div", { key: 'bce12fb31f95bdf300609e2c122a54e61e9865fa', class: "dot" }), h("div", { key: '480616d34c9dae66828d73060c3f930128d2d710', class: "dot" }), h("div", { key: '7d7c4487593fea321954b2274d76d6ef5d416b08', class: "dot" })));
     }
     static get style() { return LoadingIconStyle0; }
 }, [1, "loading-icon", {

package/dist/components/location-off.js

@@ -11,7 +11,7 @@ const LocationOffIcon = proxyCustomElement(class LocationOffIcon extends HTMLEle
         this.height = '18';
     }
     render() {
-        return (h("svg", { key: 'b7eb987c802beac155700ccbd2c51189708f3422', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '91e1d8458400d7d502def34ce86611fc17110cb4', d: "M0.146447 0.808556C0.341709 0.613294 0.658291 0.613294 0.853553 0.808556L15.8536 15.8086C16.0488 16.0038 16.0488 16.3204 15.8536 16.5157C15.6583 16.7109 15.3417 16.7109 15.1464 16.5157L12.0938 13.463L11.8223 13.7312L9.38611 16.1012C8.65623 16.8076 7.52168 16.8468 6.74691 16.2188L6.61408 16.101L4.57128 14.1159L3.05025 12.6171C0.607421 10.1732 0.347525 6.37239 2.27056 3.63976L0.146447 1.51566C-0.0488155 1.3204 -0.0488155 1.00382 0.146447 0.808556ZM9.07768 10.4469C8.74346 10.576 8.38024 10.6468 8.0005 10.6468C6.34839 10.6468 5.00909 9.30689 5.00909 7.65406C5.00909 7.27461 5.07967 6.91166 5.20843 6.57763L2.98793 4.35713C1.49206 6.62038 1.68917 9.67377 3.57927 11.7288L3.75499 11.912L4.3263 12.4791L7.30713 15.3845L7.40012 15.4642C7.7543 15.732 8.24594 15.732 8.60016 15.4642L8.69315 15.3846L10.9237 13.216L11.3883 12.7575L9.07768 10.4469ZM9.85409 8.39486L10.5983 9.13904C10.8487 8.70143 10.9919 8.19447 10.9919 7.65406C10.9919 6.00122 9.65261 4.66134 8.0005 4.66134C7.45986 4.66134 6.95271 4.80482 6.51504 5.05581L7.25921 5.79998C7.48839 5.70819 7.73855 5.6577 8.0005 5.6577C9.10258 5.6577 9.99599 6.5515 9.99599 7.65406C9.99599 7.91581 9.94564 8.16581 9.85409 8.39486ZM4.35291 2.89368C6.70671 1.08827 10.0908 1.26314 12.245 3.4183C14.3986 5.57283 14.5739 8.95702 12.771 11.3118L13.4812 12.022C15.6702 9.27273 15.493 5.25762 12.9497 2.71326C10.4058 0.168159 6.39081 -0.00843871 3.64269 2.18347L4.35291 2.89368Z", fill: "currentColor" })));
+        return (h("svg", { key: '22e7a43c0d6f68d88e0227148978fccf3b078233', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6f5e7dee6dc3bef735920b4373b05bac45bd9205', d: "M0.146447 0.808556C0.341709 0.613294 0.658291 0.613294 0.853553 0.808556L15.8536 15.8086C16.0488 16.0038 16.0488 16.3204 15.8536 16.5157C15.6583 16.7109 15.3417 16.7109 15.1464 16.5157L12.0938 13.463L11.8223 13.7312L9.38611 16.1012C8.65623 16.8076 7.52168 16.8468 6.74691 16.2188L6.61408 16.101L4.57128 14.1159L3.05025 12.6171C0.607421 10.1732 0.347525 6.37239 2.27056 3.63976L0.146447 1.51566C-0.0488155 1.3204 -0.0488155 1.00382 0.146447 0.808556ZM9.07768 10.4469C8.74346 10.576 8.38024 10.6468 8.0005 10.6468C6.34839 10.6468 5.00909 9.30689 5.00909 7.65406C5.00909 7.27461 5.07967 6.91166 5.20843 6.57763L2.98793 4.35713C1.49206 6.62038 1.68917 9.67377 3.57927 11.7288L3.75499 11.912L4.3263 12.4791L7.30713 15.3845L7.40012 15.4642C7.7543 15.732 8.24594 15.732 8.60016 15.4642L8.69315 15.3846L10.9237 13.216L11.3883 12.7575L9.07768 10.4469ZM9.85409 8.39486L10.5983 9.13904C10.8487 8.70143 10.9919 8.19447 10.9919 7.65406C10.9919 6.00122 9.65261 4.66134 8.0005 4.66134C7.45986 4.66134 6.95271 4.80482 6.51504 5.05581L7.25921 5.79998C7.48839 5.70819 7.73855 5.6577 8.0005 5.6577C9.10258 5.6577 9.99599 6.5515 9.99599 7.65406C9.99599 7.91581 9.94564 8.16581 9.85409 8.39486ZM4.35291 2.89368C6.70671 1.08827 10.0908 1.26314 12.245 3.4183C14.3986 5.57283 14.5739 8.95702 12.771 11.3118L13.4812 12.022C15.6702 9.27273 15.493 5.25762 12.9497 2.71326C10.4058 0.168159 6.39081 -0.00843871 3.64269 2.18347L4.35291 2.89368Z", fill: "currentColor" })));
     }
     static get style() { return LocationOffIconStyle0; }
 }, [2, "location-off-icon", {

package/dist/components/location.js

@@ -11,7 +11,7 @@ const LocationIcon = proxyCustomElement(class LocationIcon extends HTMLElement {
         this.height = '18';
     }
     render() {
-        return (h("svg", { key: 'c4b6ed753f7c3c3e26ae2fe2e92b429abe4eceb4', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cff1afc5e511a814bfc16fc7c8fdaef6356a7952', d: "M10 7.66211C10 9.31896 8.65685 10.6621 7 10.6621C5.34315 10.6621 4 9.31896 4 7.66211C4 6.00526 5.34315 4.66211 7 4.66211C8.65685 4.66211 10 6.00526 10 7.66211ZM9 7.66211C9 6.55754 8.10457 5.66211 7 5.66211C5.89543 5.66211 5 6.55754 5 7.66211C5 8.76668 5.89543 9.66211 7 9.66211C8.10457 9.66211 9 8.76668 9 7.66211ZM11.9497 12.6171C14.6834 9.88221 14.6834 5.44812 11.9497 2.71326C9.21608 -0.0216067 4.78392 -0.0216067 2.05025 2.71326C-0.683418 5.44812 -0.683418 9.88221 2.05025 12.6171L3.57128 14.1159L5.61408 16.101L5.74691 16.2188C6.52168 16.8468 7.65623 16.8076 8.38611 16.1012L10.8223 13.7312L11.9497 12.6171ZM2.75499 3.4183C5.09944 1.07282 8.90055 1.07282 11.245 3.4183C13.5294 5.70364 13.5879 9.3725 11.4207 11.7288L11.245 11.912L9.92371 13.216L7.69315 15.3846L7.60016 15.4642C7.24594 15.732 6.7543 15.732 6.40012 15.4642L6.30713 15.3845L3.3263 12.4791L2.75499 11.912L2.57927 11.7288C0.412077 9.3725 0.47065 5.70364 2.75499 3.4183Z", fill: "currentColor" })));
+        return (h("svg", { key: '0bf43c320aa1eebfb924c19c8f0b23befef84256', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cc11ded13eee0d30ab3c724de5cd537356410abd', d: "M10 7.66211C10 9.31896 8.65685 10.6621 7 10.6621C5.34315 10.6621 4 9.31896 4 7.66211C4 6.00526 5.34315 4.66211 7 4.66211C8.65685 4.66211 10 6.00526 10 7.66211ZM9 7.66211C9 6.55754 8.10457 5.66211 7 5.66211C5.89543 5.66211 5 6.55754 5 7.66211C5 8.76668 5.89543 9.66211 7 9.66211C8.10457 9.66211 9 8.76668 9 7.66211ZM11.9497 12.6171C14.6834 9.88221 14.6834 5.44812 11.9497 2.71326C9.21608 -0.0216067 4.78392 -0.0216067 2.05025 2.71326C-0.683418 5.44812 -0.683418 9.88221 2.05025 12.6171L3.57128 14.1159L5.61408 16.101L5.74691 16.2188C6.52168 16.8468 7.65623 16.8076 8.38611 16.1012L10.8223 13.7312L11.9497 12.6171ZM2.75499 3.4183C5.09944 1.07282 8.90055 1.07282 11.245 3.4183C13.5294 5.70364 13.5879 9.3725 11.4207 11.7288L11.245 11.912L9.92371 13.216L7.69315 15.3846L7.60016 15.4642C7.24594 15.732 6.7543 15.732 6.40012 15.4642L6.30713 15.3845L3.3263 12.4791L2.75499 11.912L2.57927 11.7288C0.412077 9.3725 0.47065 5.70364 2.75499 3.4183Z", fill: "currentColor" })));
     }
     static get style() { return LocationIconStyle0; }
 }, [2, "location-icon", {

package/dist/components/microsof-teams.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const iconCss = ".sc-microsoft-teams-icon-h{display:flex}";
+const MicrosoftTeamsIconStyle0 = iconCss;
+
+const GoogleMeetIcon = proxyCustomElement(class GoogleMeetIcon extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.width = '20';
+        this.height = '20';
+    }
+    render() {
+        return (h("svg", { key: '359169b17648dae88bd9da8598a9aeaee8b96e2d', width: this.width, height: this.height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'f963ee6000bd1218a0ed480ee8737beba954fca5', "clip-path": "url(#clip0_22_6280)" }, h("path", { key: 'de23ac3cff64cd86048cce2894830a899bbc0a7f', d: "M13.7109 7.60168H18.8769C19.365 7.60168 19.7607 7.99734 19.7607 8.4854V13.191C19.7607 14.9848 18.3065 16.4389 16.5127 16.4389H16.4974C14.7036 16.4391 13.2493 14.9852 13.249 13.1914C13.249 13.1913 13.249 13.1911 13.249 13.191V8.06355C13.249 7.80847 13.4558 7.60168 13.7109 7.60168Z", fill: "#5059C9" }), h("path", { key: '9349bc32777ca9a4c47bfbfe6152b5f620bfb9ff', d: "M17.2024 6.67152C18.3583 6.67152 19.2954 5.73444 19.2954 4.5785C19.2954 3.42255 18.3583 2.48547 17.2024 2.48547C16.0465 2.48547 15.1094 3.42255 15.1094 4.5785C15.1094 5.73444 16.0465 6.67152 17.2024 6.67152Z", fill: "#5059C9" }), h("path", { key: '668ca67feccc1c894dcbbdead4d5e8e3402a4b0c', d: "M10.6912 6.67152C12.3609 6.67152 13.7145 5.31796 13.7145 3.64826C13.7145 1.97856 12.3609 0.625 10.6912 0.625C9.02153 0.625 7.66797 1.97856 7.66797 3.64826C7.66797 5.31796 9.02153 6.67152 10.6912 6.67152Z", fill: "#7B83EB" }), h("path", { key: 'f698f7ee96aca4a26f110149030b20eb8cb03f2f', d: "M14.7223 7.60168H6.19482C5.71257 7.61362 5.33108 8.01384 5.34227 8.49611V13.8631C5.27492 16.7571 7.56457 19.1588 10.4586 19.2296C13.3525 19.1588 15.6422 16.7571 15.5748 13.8631V8.49611C15.586 8.01384 15.2045 7.61362 14.7223 7.60168Z", fill: "#7B83EB" }), h("path", { key: '0a0964cdf2fd5758c90f6cb06efcbc03500282b2', opacity: "0.1", d: "M10.9234 7.60168V15.1226C10.9211 15.4675 10.7121 15.7773 10.3932 15.9087C10.2917 15.9516 10.1825 15.9738 10.0723 15.9738H5.75134C5.69088 15.8203 5.63507 15.6668 5.58855 15.5087C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.9234Z", fill: "black" }), h("path", { key: '7e1c4d85c3447d84a89212100615ef267d88599b', opacity: "0.2", d: "M10.4583 7.60168V15.5877C10.4583 15.698 10.4362 15.8071 10.3932 15.9087C10.2619 16.2276 9.95205 16.4366 9.60717 16.4389H5.96995C5.89088 16.2854 5.81646 16.1319 5.75134 15.9738C5.68623 15.8156 5.63507 15.6668 5.58855 15.5087C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.4583Z", fill: "black" }), h("path", { key: '2144a9a4bbcb730aacd6803bb0b250994dd006ce', opacity: "0.2", d: "M10.4583 7.60168V14.6575C10.4548 15.1261 10.0758 15.5051 9.60716 15.5087H5.58855C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.4583Z", fill: "black" }), h("path", { key: '192467da47b97c7e64f69d4c3076ac6a3ba534fa', opacity: "0.2", d: "M9.9932 7.60168V14.6575C9.98965 15.1261 9.61065 15.5051 9.14203 15.5087H5.58855C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H9.9932Z", fill: "black" }), h("path", { key: 'fa61a6a64091707161be951e860434d56db20b24', opacity: "0.1", d: "M10.9241 5.1971V6.66222C10.845 6.66687 10.7706 6.67152 10.6915 6.67152C10.6124 6.67152 10.538 6.66687 10.4589 6.66222C10.3019 6.6518 10.1462 6.62689 9.99382 6.5878C9.05195 6.36475 8.27382 5.70421 7.90079 4.81106C7.83661 4.66107 7.78678 4.50533 7.75195 4.34595H10.0729C10.5422 4.34772 10.9223 4.72775 10.9241 5.1971Z", fill: "black" }), h("path", { key: 'ca1e281406d07a710416ef7df9c94800bb648689', opacity: "0.2", d: "M10.4585 5.66219V6.66219C10.3015 6.65177 10.1458 6.62686 9.99341 6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.60736C10.0767 4.81281 10.4567 5.19285 10.4585 5.66219Z", fill: "black" }), h("path", { key: '6b47b55120783e70490ce6c079990a4a0829ee6b', opacity: "0.2", d: "M10.4585 5.66219V6.66219C10.3015 6.65177 10.1458 6.62686 9.99341 6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.60736C10.0767 4.81281 10.4567 5.19285 10.4585 5.66219Z", fill: "black" }), h("path", { key: '5f405177aa9cf68b38d094a45227c983eb8ff6e7', opacity: "0.2", d: "M9.99341 5.6622V6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.14225C9.6116 4.81282 9.99163 5.19286 9.99341 5.6622Z", fill: "black" }), h("path", { key: '5dce1571223960a8fd888742044431c761fe2157', d: "M0.613296 4.81104H9.14074C9.61159 4.81104 9.99329 5.19274 9.99329 5.66359V14.191C9.99329 14.6619 9.61158 15.0436 9.14074 15.0436H0.613296C0.14244 15.0436 -0.239258 14.6619 -0.239258 14.191V5.66359C-0.239258 5.19274 0.142449 4.81104 0.613296 4.81104Z", fill: "url(#paint0_linear_22_6280)" }), h("path", { key: 'd6f95d7f2759f691cc23b2106eda0ba2734afca4', d: "M7.12025 8.05659H5.4156V12.6985H4.32956V8.05659H2.63281V7.15613H7.12025V8.05659Z", fill: "white" })), h("defs", { key: '01ddd7b4a655763ad0f889d4d1d75963cec6d986' }, h("linearGradient", { key: '41594dd87db0ffc82b8d8ed0a181e0d41ab7039f', id: "paint0_linear_22_6280", x1: "1.53835", y1: "4.14486", x2: "8.2157", y2: "15.7098", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'e88fb7c5b11161f05695f5adf8109a097c618c0a', "stop-color": "#5A62C3" }), h("stop", { key: '7f5a6231d31260b4df5122534fce2a6f7f34e337', offset: "0.5", "stop-color": "#4D55BD" }), h("stop", { key: 'f3fe9f223c2bed497337b6d8f3f1d823939087aa', offset: "1", "stop-color": "#3940AB" })), h("clipPath", { key: '3386bbeca4aaa30629160dae17beaa731f2343ac', id: "clip0_22_6280" }, h("rect", { key: '8a2c5dc8112fc59beca2cc5972fe00353dae4ee0', width: "20", height: "20", fill: "white" })))));
+    }
+    static get style() { return MicrosoftTeamsIconStyle0; }
+}, [2, "microsoft-teams-icon", {
+        "width": [1],
+        "height": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["microsoft-teams-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "microsoft-teams-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GoogleMeetIcon);
+            }
+            break;
+    } });
+}
+
+export { GoogleMeetIcon as G, defineCustomElement as d };
+
+//# sourceMappingURL=microsof-teams.js.map

package/dist/components/microsof-teams.js.map

@@ -0,0 +1 @@
+{"file":"microsof-teams.js","mappings":";;AAAA,MAAM,OAAO,GAAG,0CAA0C,CAAC;AAC3D,iCAAe,OAAO;;MCMT,cAAc;;;;qBACD,IAAI;sBACH,IAAI;;IAE7B,MAAM;QAEJ,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC7G,uEAAa,qBAAqB,IAChC,6DACE,CAAC,EAAC,0RAA0R,EAC5R,IAAI,EAAC,SAAS,GACd,EACF,6DACE,CAAC,EAAC,iNAAiN,EACnN,IAAI,EAAC,SAAS,GACd,EACF,6DACE,CAAC,EAAC,6MAA6M,EAC/M,IAAI,EAAC,SAAS,GACd,EACF,6DACE,CAAC,EAAC,0OAA0O,EAC5O,IAAI,EAAC,SAAS,GACd,EACF,6DACE,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,iSAAiS,EACnS,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,gVAAgV,EAClV,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,iMAAiM,EACnM,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,+LAA+L,EACjM,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,6TAA6T,EAC/T,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,OAAO,GACZ,EACF,6DACE,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,OAAO,GACZ,EACF,6DAAM,OAAO,EAAC,KAAK,EAAC,CAAC,EAAC,gIAAgI,EAAC,IAAI,EAAC,OAAO,GAAG,EACtK,6DACE,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,6BAA6B,GAClC,EACF,6DAAM,CAAC,EAAC,kFAAkF,EAAC,IAAI,EAAC,OAAO,GAAG,CACxG,EACJ,+DACE,uEAAgB,EAAE,EAAC,uBAAuB,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,QAAQ,EAAC,EAAE,EAAC,SAAS,EAAC,aAAa,EAAC,gBAAgB,IAC1H,2EAAiB,SAAS,GAAG,EAC7B,6DAAM,MAAM,EAAC,KAAK,gBAAY,SAAS,GAAG,EAC1C,6DAAM,MAAM,EAAC,GAAG,gBAAY,SAAS,GAAG,CACzB,EACjB,iEAAU,EAAE,EAAC,eAAe,IAC1B,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,CACnC,CACN,CACH,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/common/icons/icon.css?tag=microsoft-teams-icon&encapsulation=scoped","src/common/icons/microsof-teams.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'microsoft-teams-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class GoogleMeetIcon {\n  @Prop() width: string = '20';\n  @Prop() height: string = '20';\n\n  render() {\n    // Spam icon svg\n    return (\n      <svg width={this.width} height={this.height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g clip-path=\"url(#clip0_22_6280)\">\n          <path\n            d=\"M13.7109 7.60168H18.8769C19.365 7.60168 19.7607 7.99734 19.7607 8.4854V13.191C19.7607 14.9848 18.3065 16.4389 16.5127 16.4389H16.4974C14.7036 16.4391 13.2493 14.9852 13.249 13.1914C13.249 13.1913 13.249 13.1911 13.249 13.191V8.06355C13.249 7.80847 13.4558 7.60168 13.7109 7.60168Z\"\n            fill=\"#5059C9\"\n          />\n          <path\n            d=\"M17.2024 6.67152C18.3583 6.67152 19.2954 5.73444 19.2954 4.5785C19.2954 3.42255 18.3583 2.48547 17.2024 2.48547C16.0465 2.48547 15.1094 3.42255 15.1094 4.5785C15.1094 5.73444 16.0465 6.67152 17.2024 6.67152Z\"\n            fill=\"#5059C9\"\n          />\n          <path\n            d=\"M10.6912 6.67152C12.3609 6.67152 13.7145 5.31796 13.7145 3.64826C13.7145 1.97856 12.3609 0.625 10.6912 0.625C9.02153 0.625 7.66797 1.97856 7.66797 3.64826C7.66797 5.31796 9.02153 6.67152 10.6912 6.67152Z\"\n            fill=\"#7B83EB\"\n          />\n          <path\n            d=\"M14.7223 7.60168H6.19482C5.71257 7.61362 5.33108 8.01384 5.34227 8.49611V13.8631C5.27492 16.7571 7.56457 19.1588 10.4586 19.2296C13.3525 19.1588 15.6422 16.7571 15.5748 13.8631V8.49611C15.586 8.01384 15.2045 7.61362 14.7223 7.60168Z\"\n            fill=\"#7B83EB\"\n          />\n          <path\n            opacity=\"0.1\"\n            d=\"M10.9234 7.60168V15.1226C10.9211 15.4675 10.7121 15.7773 10.3932 15.9087C10.2917 15.9516 10.1825 15.9738 10.0723 15.9738H5.75134C5.69088 15.8203 5.63507 15.6668 5.58855 15.5087C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.9234Z\"\n            fill=\"black\"\n          />\n          <path\n            opacity=\"0.2\"\n            d=\"M10.4583 7.60168V15.5877C10.4583 15.698 10.4362 15.8071 10.3932 15.9087C10.2619 16.2276 9.95205 16.4366 9.60717 16.4389H5.96995C5.89088 16.2854 5.81646 16.1319 5.75134 15.9738C5.68623 15.8156 5.63507 15.6668 5.58855 15.5087C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.4583Z\"\n            fill=\"black\"\n          />\n          <path\n            opacity=\"0.2\"\n            d=\"M10.4583 7.60168V14.6575C10.4548 15.1261 10.0758 15.5051 9.60716 15.5087H5.58855C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.4583Z\"\n            fill=\"black\"\n          />\n          <path\n            opacity=\"0.2\"\n            d=\"M9.9932 7.60168V14.6575C9.98965 15.1261 9.61065 15.5051 9.14203 15.5087H5.58855C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H9.9932Z\"\n            fill=\"black\"\n          />\n          <path\n            opacity=\"0.1\"\n            d=\"M10.9241 5.1971V6.66222C10.845 6.66687 10.7706 6.67152 10.6915 6.67152C10.6124 6.67152 10.538 6.66687 10.4589 6.66222C10.3019 6.6518 10.1462 6.62689 9.99382 6.5878C9.05195 6.36475 8.27382 5.70421 7.90079 4.81106C7.83661 4.66107 7.78678 4.50533 7.75195 4.34595H10.0729C10.5422 4.34772 10.9223 4.72775 10.9241 5.1971Z\"\n            fill=\"black\"\n          />\n          <path\n            opacity=\"0.2\"\n            d=\"M10.4585 5.66219V6.66219C10.3015 6.65177 10.1458 6.62686 9.99341 6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.60736C10.0767 4.81281 10.4567 5.19285 10.4585 5.66219Z\"\n            fill=\"black\"\n          />\n          <path\n            opacity=\"0.2\"\n            d=\"M10.4585 5.66219V6.66219C10.3015 6.65177 10.1458 6.62686 9.99341 6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.60736C10.0767 4.81281 10.4567 5.19285 10.4585 5.66219Z\"\n            fill=\"black\"\n          />\n          <path opacity=\"0.2\" d=\"M9.99341 5.6622V6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.14225C9.6116 4.81282 9.99163 5.19286 9.99341 5.6622Z\" fill=\"black\" />\n          <path\n            d=\"M0.613296 4.81104H9.14074C9.61159 4.81104 9.99329 5.19274 9.99329 5.66359V14.191C9.99329 14.6619 9.61158 15.0436 9.14074 15.0436H0.613296C0.14244 15.0436 -0.239258 14.6619 -0.239258 14.191V5.66359C-0.239258 5.19274 0.142449 4.81104 0.613296 4.81104Z\"\n            fill=\"url(#paint0_linear_22_6280)\"\n          />\n          <path d=\"M7.12025 8.05659H5.4156V12.6985H4.32956V8.05659H2.63281V7.15613H7.12025V8.05659Z\" fill=\"white\" />\n        </g>\n        <defs>\n          <linearGradient id=\"paint0_linear_22_6280\" x1=\"1.53835\" y1=\"4.14486\" x2=\"8.2157\" y2=\"15.7098\" gradientUnits=\"userSpaceOnUse\">\n            <stop stop-color=\"#5A62C3\" />\n            <stop offset=\"0.5\" stop-color=\"#4D55BD\" />\n            <stop offset=\"1\" stop-color=\"#3940AB\" />\n          </linearGradient>\n          <clipPath id=\"clip0_22_6280\">\n            <rect width=\"20\" height=\"20\" fill=\"white\" />\n          </clipPath>\n        </defs>\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/microsoft-logo.js

@@ -11,7 +11,7 @@ const MicrosoftLogoIcon = proxyCustomElement(class MicrosoftLogoIcon extends HTM
         this.height = '22';
     }
     render() {
-        return (h("svg", { key: '3dd5e1a94ca5889c14f7695c9077f9be0cbc4d00', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '381068331f74d7f1a06c0ca0cd9dfc2b58f72a10', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), h("path", { key: '62c7be7371433602169a19fe2657e0a1635f516e', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), h("path", { key: '72464e489d4cfd78f016282a743a1000fb732368', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), h("path", { key: 'd766c4d950ee3122cf4916b53ce5f630b52a30bb', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
+        return (h("svg", { key: 'da59f9b8e18c52e2ca12e97ce694b7abc30aea0d', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ef4d02c0f11fd9df3a3e1a781d2379526404c469', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), h("path", { key: '9799ab150bbdee2cf4ec6275b2388fe2c00dd85e', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), h("path", { key: '65f7ee7dedd27844e342d2f1e7065814c6012c46', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), h("path", { key: 'a21de9dcc8252feec5b07059371eba058b2d071c', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
     }
     static get style() { return MicrosoftLogoIconStyle0; }
 }, [2, "microsoft-logo-icon", {

package/dist/components/microsoft-teams-icon.d.ts

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

package/dist/components/microsoft-teams-icon.js

@@ -0,0 +1,8 @@
+import { G as GoogleMeetIcon, d as defineCustomElement$1 } from './microsof-teams.js';
+
+const MicrosoftTeamsIcon = GoogleMeetIcon;
+const defineCustomElement = defineCustomElement$1;
+
+export { MicrosoftTeamsIcon, defineCustomElement };
+
+//# sourceMappingURL=microsoft-teams-icon.js.map

package/dist/components/microsoft-teams-icon.js.map

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

package/dist/components/multi-select-dropdown2.js

@@ -3,7 +3,7 @@ import { a as debug } from './utils.js';
 import { d as defineCustomElement$2 } from './chevron.js';
 import { d as defineCustomElement$1 } from './close.js';
 
-const multiSelectDropdownCss = ":host{display:block;width:inherit;--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}.dropdown{display:inline-block;width:100%;position:relative}.dropdown .dropdown-label{display:flex;align-items:center;gap:0.25rem;color:var(--nylas-base-800)}.dropbtn{width:inherit;height:48px;color:black;padding:0.5rem;font-size:1rem;cursor:pointer;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn:hover,.dropbtn:active{border:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;border:1px solid #ddd;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:black;padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content ul li label{display:flex;align-items:center;gap:0.5rem}.dropdown-content ul li label input{margin:0}.selected-options{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0;margin-top:0.25rem;background:var(--nylas-base-0)}.selected-options .selected-option{display:flex;align-items:center;gap:0.5rem;padding:4px 8px;border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-100);color:var(--nylas-base-800);font-size:16px;font-weight:500;line-height:1.5rem;letter-spacing:0.5px}.selected-options .selected-option button{background:transparent;border:none;cursor:pointer;padding:0}.selected-options .selected-option button:hover{color:var(--nylas-primary)}";
+const multiSelectDropdownCss = ":host{display:block;width:inherit;--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}.dropdown{display:inline-block;width:100%;position:relative}.dropdown .dropdown-label{display:flex;align-items:center;gap:0.25rem;color:var(--nylas-base-800)}.dropdown span.error{color:var(--nylas-error);font-size:14px}.dropbtn{width:inherit;height:48px;color:black;padding:0.5rem;font-size:1rem;cursor:pointer;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{border:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:72px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:black;padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content ul li label{display:flex;align-items:center;gap:0.5rem}.dropdown-content ul li label input{margin:0}.selected-options{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0;margin-top:0.25rem;background:var(--nylas-base-0)}.selected-options .selected-option{display:flex;align-items:center;gap:0.5rem;padding:4px 8px;border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-100);color:var(--nylas-base-800);font-size:16px;font-weight:500;line-height:1.5rem;letter-spacing:0.5px}.selected-options .selected-option button{background:transparent;border:none;cursor:pointer;padding:0}.selected-options .selected-option button:hover{color:var(--nylas-primary)}";
 const MultiSelectDropdownStyle0 = multiSelectDropdownCss;
 
 const MultiSelectDropdown = proxyCustomElement(class MultiSelectDropdown extends HTMLElement {
@@ -15,6 +15,7 @@ const MultiSelectDropdown = proxyCustomElement(class MultiSelectDropdown extends
         this.name = undefined;
         this.label = undefined;
         this.options = [];
+        this.error = '';
         this.availableOptions = this.options;
         this.isOpen = false;
         this.ariaActivedescendant = '';
@@ -128,9 +129,9 @@ const MultiSelectDropdown = proxyCustomElement(class MultiSelectDropdown extends
             }, class: { selected: !!option.selected } }, h("label", { htmlFor: option.value }, h("input", { "aria-hidden": "true", id: option.value, type: "checkbox", checked: option.selected }), h("span", null, option.label))));
     }
     render() {
-        return (h(Host, { key: 'af0befb6c6c059e41a99ebe56c9632e6445e897b' }, h("div", { key: 'e93abae0184670a75caa02b4f687a374fce9a055', class: "dropdown", part: "msd_dropdown" }, h("label", { key: 'cb7ab81e0c7e23934dfc814a4c5281470e2ad510', class: "dropdown-label" }, this.label, h("slot", { key: '88fdcec62b47bf2b7da977c06b36300722789373', name: "label-icon", "aria-hidden": "true" })), h("button", { key: '17e03081353c32b5f571e7655fbe7b0c2ea87a35', part: "msd_dropdown-button", class: { dropbtn: true, open: this.isOpen }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: 'f1925d4d315c6be091a07f18261e574792883fd7', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '02c03946856eed3b6207ec84abbba0d16554af9f', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
+        return (h(Host, { key: 'a210f609992836c2f16b3c50d0dd41cf1803e45d' }, h("div", { key: 'f925ec1ca53bf285ea2e95fb9b0c7a61c214b9fb', class: "dropdown", part: "msd_dropdown" }, h("label", { key: 'c99cfe9abb34365369ed230f035275cb45851e18', class: "dropdown-label" }, this.label, h("slot", { key: '4c398d8e40b4f9a762c21a94198bcfe5383dfbac', name: "label-icon", "aria-hidden": "true" })), h("button", { key: '1b2a30027ab7d1177f1c01f82d20b34c63c070a1', name: this.name, part: `msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`, class: { dropbtn: true, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: 'd8f2bd199c2a931a5e4380f6d1126df6abe894cd', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '54810e429302d3c990ac49c10386ec442950a37d', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
             ? `Multiple ${this.name}s selected`
-            : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: 'bbd36a37a7ee28e299da6b22612206e4bbbcf8db', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: '4e6f9c3dfd33c8d87b9584648487783e417961c6', width: "16", height: "16" }))), this.isOpen ? null : (h("div", { class: 'selected-options' }, this.getSelectedOptions().map(option => (h("span", { class: "selected-option" }, option.label, h("button", { key: option.label, onClick: () => this.selectOption(option) }, h("close-icon", null))))))), this.isOpen ? (h("div", { class: "dropdown-content", part: "msd_dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": true, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.availableOptions.map(option => this.renderOption(option))))) : null)));
+            : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: '664a32573a64a7ae20fd36748050b399160ce032', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: '77ab403c2a1f80a7eb32a40109b57257e9d80c85', width: "16", height: "16" }))), this.error ? h("span", { class: "error" }, this.error) : null, this.isOpen ? null : (h("div", { class: 'selected-options' }, this.getSelectedOptions().map(option => (h("span", { class: "selected-option" }, option.label, h("button", { key: option.label, onClick: () => this.selectOption(option) }, h("close-icon", null))))))), this.isOpen ? (h("div", { class: "dropdown-content", part: "msd_dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": true, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.availableOptions.map(option => this.renderOption(option))))) : null)));
     }
     get el() { return this; }
     static get style() { return MultiSelectDropdownStyle0; }
@@ -138,6 +139,7 @@ const MultiSelectDropdown = proxyCustomElement(class MultiSelectDropdown extends
         "name": [1],
         "label": [1],
         "options": [16],
+        "error": [1],
         "availableOptions": [32],
         "isOpen": [32],
         "ariaActivedescendant": [32],

package/dist/components/multi-select-dropdown2.js.map

@@ -1 +1 @@
-{"file":"multi-select-dropdown2.js","mappings":"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","names":[],"sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  width: inherit;\n  @include default-css-variables;\n}\n\n.dropdown {\n  display: inline-block;\n  width: 100%;\n  position: relative;\n  .dropdown-label {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    color: var(--nylas-base-800);\n  }\n}\n\n.dropbtn {\n  width: inherit;\n  height: 48px;\n  color: black;\n  padding: 0.5rem;\n  font-size: 1rem;\n  cursor: pointer;\n  display: flex;\n  gap: 0.5rem;\n  justify-content: space-between;\n  align-items: center;\n  background: transparent;\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n  &.focus {\n    background: transparent;\n  }\n  &:hover,\n  &:active {\n    border: 1px solid var(--nylas-primary);\n  }\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n  span {\n    &.open {\n      transform: rotate(90deg);\n    }\n    &.closed {\n      transform: rotate(270deg);\n    }\n  }\n}\n\n.dropdown-content {\n  display: block;\n  margin-top: 0.5rem;\n  background-color: var(--nylas-base-0);\n  width: 100%;\n  max-height: 336px;\n  overflow: auto;\n  border: 1px solid #ddd;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  box-shadow: 0px 4px 6px -2px #0000000d;\n  box-shadow: 0px 10px 15px -3px #0000001a;\n}\n\n.dropdown-content ul {\n  padding: 0;\n  list-style-type: none;\n  color: var(--nylas-base-900);\n  max-height: 336px;\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: black;\n    padding: 12px 16px;\n    text-decoration: none;\n    display: block;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0px;\n    text-align: left;\n    cursor: pointer;\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-100);\n    }\n    label {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      input {\n        margin: 0;\n      }\n    }\n  }\n}\n\n.selected-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  padding: 0.5rem 0;\n  margin-top: 0.25rem;\n  background: var(--nylas-base-0);\n  .selected-option {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 4px 8px;\n    border-radius: var(--nylas-border-radius-2x);\n    background: var(--nylas-base-100);\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 1.5rem;\n    letter-spacing: 0.5px;\n    button {\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      padding: 0;\n      &:hover {\n        color: var(--nylas-primary);\n      }\n    }\n  }\n}\n","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\n\ninterface DropdownOption {\n  label: string;\n  value: string;\n  selected?: boolean; // Add a selected flag to each option\n}\n\n@Component({\n  tag: 'multi-select-dropdown',\n  styleUrl: 'multi-select-dropdown.scss',\n  shadow: true,\n})\nexport class MultiSelectDropdown {\n  @Element() el!: HTMLElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop() name!: string;\n\n  /**\n   * The label of the dropdown\n   */\n  @Prop() label?: string;\n\n  /**\n   * The options to display in the dropdown\n   */\n  @Prop() options: DropdownOption[] = [];\n\n  // States\n  /**\n   * The copy of the options to display in the dropdown\n   */\n  @State() availableOptions: DropdownOption[] = this.options;\n  /**\n   * The open state of the dropdown\n   */\n  @State() isOpen: boolean = false;\n  /**\n   * The aria-activedescendant attribute for the listbox element to indicate the currently active\n   */\n  @State() ariaActivedescendant: string = '';\n\n  /**\n   * This flag is used to focus the first option when the dropdown is opened\n   * and reset after the first option is focused\n   */\n  @State() shouldFocusFirstOption: boolean = false;\n\n  // Events\n  /**\n   * This event is fired when the selected options are changed\n   */\n  @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n    value: string[];\n    name: string;\n  }>;\n\n  // Lifecycle methods\n  componentDidRender() {\n    debug('multi-select-dropdown', 'componentDidRender');\n    if (this.isOpen && this.shouldFocusFirstOption) {\n      // The dropdown is open and we should focus the first option\n      this.ariaActivedescendant = this.availableOptions[0].value;\n      this.focusOption(0);\n      // Reset the flag\n      this.shouldFocusFirstOption = false;\n    }\n  }\n\n  // Event listeners\n  @Listen('click', { target: 'document', capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    // Get the path of the event\n    const path = event.composedPath();\n\n    // Check if the path includes the host element\n    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.isOpen) {\n      this.isOpen = false;\n    }\n  }\n\n  // Methods\n\n  selectOption(option: DropdownOption): void {\n    this.availableOptions = this.availableOptions.map(o => {\n      if (o.value === option.value) {\n        o.selected = option.selected ? false : true;\n      }\n      return o;\n    });\n    const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n    this.selectedOptionsChanged.emit({\n      value: selectedOptions,\n      name: this.name,\n    });\n  }\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      this.shouldFocusFirstOption = true;\n    } else {\n      this.ariaActivedescendant = '';\n    }\n  }\n\n  handleSelectButtonKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'Enter':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.toggleDropdown();\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  handleListboxKeydown(e: KeyboardEvent) {\n    const items = this.availableOptions;\n    const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'Tab':\n        if (!e.shiftKey) {\n          e.preventDefault();\n          const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n          this.ariaActivedescendant = items[nextIndex].value;\n          this.focusOption(nextIndex);\n        } else {\n          e.preventDefault();\n          const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n          this.ariaActivedescendant = items[prevIndex].value;\n          this.focusOption(prevIndex);\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n        this.ariaActivedescendant = items[prevIndex].value;\n        this.focusOption(prevIndex);\n        break;\n      case 'Enter':\n        e.preventDefault();\n        if (this.ariaActivedescendant) {\n          this.selectOption(items[currentIndex]);\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  focusOption(index: number) {\n    const option = this.availableOptions[index];\n    if (!option) return; // Guard clause in case index is out of bounds\n\n    const elementId = option.value;\n    const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n    if (element) {\n      element.focus(); // Set focus on the element\n      element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n    }\n  }\n\n  getSelectedOptions() {\n    return this.availableOptions.filter(option => option.selected);\n  }\n\n  renderOption(option: DropdownOption) {\n    return (\n      <li\n        key={option.value}\n        id={option.value}\n        role=\"option\"\n        tabindex=\"0\"\n        aria-selected={option.selected ? 'true' : 'false'}\n        onClick={e => {\n          e.stopImmediatePropagation();\n          this.selectOption(option);\n        }}\n        class={{ selected: !!option.selected }}\n      >\n        <label htmlFor={option.value}>\n          <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} />\n          <span>{option.label}</span>\n        </label>\n      </li>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"dropdown\" part=\"msd_dropdown\">\n          <label class=\"dropdown-label\">\n            {this.label}\n            <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n          </label>\n          <button\n            part=\"msd_dropdown-button\"\n            class={{ dropbtn: true, open: this.isOpen }}\n            onClick={() => this.toggleDropdown()}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-label={this.name}\n            onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n          >\n            <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n            <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n              {this.getSelectedOptions().length > 1\n                ? `Multiple ${this.name}s selected`\n                : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label}\n            </span>\n            <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n              <chevron-icon width=\"16\" height=\"16\" />\n            </span>\n          </button>\n          {this.isOpen ? null : (\n            <div class={'selected-options'}>\n              {this.getSelectedOptions().map(option => (\n                <span class=\"selected-option\">\n                  {option.label}\n                  <button key={option.label} onClick={() => this.selectOption(option)}>\n                    <close-icon />\n                  </button>\n                </span>\n              ))}\n            </div>\n          )}\n          {this.isOpen ? (\n            <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n              <ul\n                tabindex=\"-1\"\n                role=\"listbox\"\n                aria-label={this.name}\n                aria-multiselectable={true}\n                aria-activedescendant={this.ariaActivedescendant}\n                onKeyDown={e => this.handleListboxKeydown(e)}\n              >\n                {this.availableOptions.map(option => this.renderOption(option))}\n              </ul>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"multi-select-dropdown2.js","mappings":"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","names":[],"sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  width: inherit;\n  @include default-css-variables;\n}\n\n.dropdown {\n  display: inline-block;\n  width: 100%;\n  position: relative;\n\n  .dropdown-label {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    color: var(--nylas-base-800);\n  }\n\n  span.error {\n    color: var(--nylas-error);\n    font-size: 14px;\n  }\n}\n\n.dropbtn {\n  width: inherit;\n  height: 48px;\n  color: black;\n  padding: 0.5rem;\n  font-size: 1rem;\n  cursor: pointer;\n  display: flex;\n  gap: 0.5rem;\n  justify-content: space-between;\n  align-items: center;\n  background: transparent;\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n\n  &.focus {\n    background: transparent;\n  }\n\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n\n  &:hover,\n  &:active {\n    border: 1px solid var(--nylas-primary);\n  }\n\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n\n  span {\n    &.open {\n      transform: rotate(90deg);\n    }\n\n    &.closed {\n      transform: rotate(270deg);\n    }\n  }\n}\n\n.dropdown-content {\n  display: block;\n  margin-top: 0.5rem;\n  background-color: var(--nylas-base-0);\n  width: 100%;\n  max-height: 336px;\n  overflow: auto;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  top: calc(48px + 24px);\n  box-shadow: 0px 4px 6px -2px #0000000d;\n  box-shadow: 0px 10px 15px -3px #0000001a;\n}\n\n.dropdown-content ul {\n  padding: 0;\n  list-style-type: none;\n  color: var(--nylas-base-900);\n  max-height: 336px;\n\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: black;\n    padding: 12px 16px;\n    text-decoration: none;\n    display: block;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0px;\n    text-align: left;\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-100);\n    }\n\n    label {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n\n      input {\n        margin: 0;\n      }\n    }\n  }\n}\n\n.selected-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  padding: 0.5rem 0;\n  margin-top: 0.25rem;\n  background: var(--nylas-base-0);\n\n  .selected-option {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 4px 8px;\n    border-radius: var(--nylas-border-radius-2x);\n    background: var(--nylas-base-100);\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 1.5rem;\n    letter-spacing: 0.5px;\n\n    button {\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      padding: 0;\n\n      &:hover {\n        color: var(--nylas-primary);\n      }\n    }\n  }\n}","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\n\ninterface DropdownOption {\n  label: string;\n  value: string;\n  selected?: boolean; // Add a selected flag to each option\n}\n\n@Component({\n  tag: 'multi-select-dropdown',\n  styleUrl: 'multi-select-dropdown.scss',\n  shadow: true,\n})\nexport class MultiSelectDropdown {\n  @Element() el!: HTMLElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop() name!: string;\n\n  /**\n   * The label of the dropdown\n   */\n  @Prop() label?: string;\n\n  /**\n   * The options to display in the dropdown\n   */\n  @Prop() options: DropdownOption[] = [];\n\n  /**\n   * Error message to display\n   */\n  @Prop() error?: string = '';\n\n  // States\n  /**\n   * The copy of the options to display in the dropdown\n   */\n  @State() availableOptions: DropdownOption[] = this.options;\n  /**\n   * The open state of the dropdown\n   */\n  @State() isOpen: boolean = false;\n  /**\n   * The aria-activedescendant attribute for the listbox element to indicate the currently active\n   */\n  @State() ariaActivedescendant: string = '';\n\n  /**\n   * This flag is used to focus the first option when the dropdown is opened\n   * and reset after the first option is focused\n   */\n  @State() shouldFocusFirstOption: boolean = false;\n\n  // Events\n  /**\n   * This event is fired when the selected options are changed\n   */\n  @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n    value: string[];\n    name: string;\n  }>;\n\n  // Lifecycle methods\n  componentDidRender() {\n    debug('multi-select-dropdown', 'componentDidRender');\n    if (this.isOpen && this.shouldFocusFirstOption) {\n      // The dropdown is open and we should focus the first option\n      this.ariaActivedescendant = this.availableOptions[0].value;\n      this.focusOption(0);\n      // Reset the flag\n      this.shouldFocusFirstOption = false;\n    }\n  }\n\n  // Event listeners\n  @Listen('click', { target: 'document', capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    // Get the path of the event\n    const path = event.composedPath();\n\n    // Check if the path includes the host element\n    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.isOpen) {\n      this.isOpen = false;\n    }\n  }\n\n  // Methods\n\n  selectOption(option: DropdownOption): void {\n    this.availableOptions = this.availableOptions.map(o => {\n      if (o.value === option.value) {\n        o.selected = option.selected ? false : true;\n      }\n      return o;\n    });\n    const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n    this.selectedOptionsChanged.emit({\n      value: selectedOptions,\n      name: this.name,\n    });\n  }\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      this.shouldFocusFirstOption = true;\n    } else {\n      this.ariaActivedescendant = '';\n    }\n  }\n\n  handleSelectButtonKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'Enter':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.toggleDropdown();\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  handleListboxKeydown(e: KeyboardEvent) {\n    const items = this.availableOptions;\n    const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'Tab':\n        if (!e.shiftKey) {\n          e.preventDefault();\n          const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n          this.ariaActivedescendant = items[nextIndex].value;\n          this.focusOption(nextIndex);\n        } else {\n          e.preventDefault();\n          const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n          this.ariaActivedescendant = items[prevIndex].value;\n          this.focusOption(prevIndex);\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n        this.ariaActivedescendant = items[prevIndex].value;\n        this.focusOption(prevIndex);\n        break;\n      case 'Enter':\n        e.preventDefault();\n        if (this.ariaActivedescendant) {\n          this.selectOption(items[currentIndex]);\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  focusOption(index: number) {\n    const option = this.availableOptions[index];\n    if (!option) return; // Guard clause in case index is out of bounds\n\n    const elementId = option.value;\n    const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n    if (element) {\n      element.focus(); // Set focus on the element\n      element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n    }\n  }\n\n  getSelectedOptions() {\n    return this.availableOptions.filter(option => option.selected);\n  }\n\n  renderOption(option: DropdownOption) {\n    return (\n      <li\n        key={option.value}\n        id={option.value}\n        role=\"option\"\n        tabindex=\"0\"\n        aria-selected={option.selected ? 'true' : 'false'}\n        onClick={e => {\n          e.stopImmediatePropagation();\n          this.selectOption(option);\n        }}\n        class={{ selected: !!option.selected }}\n      >\n        <label htmlFor={option.value}>\n          <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} />\n          <span>{option.label}</span>\n        </label>\n      </li>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"dropdown\" part=\"msd_dropdown\">\n          <label class=\"dropdown-label\">\n            {this.label}\n            <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n          </label>\n          <button\n            name={this.name}\n            part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n            class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n            onClick={() => this.toggleDropdown()}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-label={this.name}\n            onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n          >\n            <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n            <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n              {this.getSelectedOptions().length > 1\n                ? `Multiple ${this.name}s selected`\n                : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label}\n            </span>\n            <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n              <chevron-icon width=\"16\" height=\"16\" />\n            </span>\n          </button>\n          {this.error ? <span class=\"error\">{this.error}</span> : null}\n          {this.isOpen ? null : (\n            <div class={'selected-options'}>\n              {this.getSelectedOptions().map(option => (\n                <span class=\"selected-option\">\n                  {option.label}\n                  <button key={option.label} onClick={() => this.selectOption(option)}>\n                    <close-icon />\n                  </button>\n                </span>\n              ))}\n            </div>\n          )}\n          {this.isOpen ? (\n            <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n              <ul\n                tabindex=\"-1\"\n                role=\"listbox\"\n                aria-label={this.name}\n                aria-multiselectable={true}\n                aria-activedescendant={this.ariaActivedescendant}\n                onKeyDown={e => this.handleListboxKeydown(e)}\n              >\n                {this.availableOptions.map(option => this.renderOption(option))}\n              </ul>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-additional-participants2.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './close.js';
 import { d as defineCustomElement$2 } from './input-dropdown2.js';
 import { d as defineCustomElement$1 } from './nylas-form-card2.js';
 
-const nylasAdditionalParticipantsCss = ":host{display:block;margin:1rem;--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}.nylas-additional-participants__title{color:var(--nylas-base-nylas-base-900-aaa, #101323);font-size:16px;font-style:normal;font-weight:600;line-height:20px;margin:0;text-align:left}.nylas-additional-participants__subtitle{color:var(--nylas-base-600);font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:0.25rem 0px 0px;text-align:left}.nylas-additional-participants__content{padding:1rem;display:flex;flex-direction:column;gap:1rem}.nylas-additional-participants__input_group{padding-top:8px;display:flex;flex-direction:column;gap:4px}.nylas-additional-participants__input_group label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:14px;font-style:normal;font-weight:400;line-height:150%}.nylas-additional-participants__input_wrapper{display:flex;border-width:1;border-radius:8px;border:1px solid var(--nylas-base-300)}.nylas-additional-participants__input_wrapper button{padding:12px;border:none;border-left:1px solid var(--nylas-base-300);background:none;cursor:pointer}.nylas-additional-participants__input_wrapper button:hover,.nylas-additional-participants__input_wrapper button:active{color:var(--nylas-primary)}.nylas-additional-participants__input_wrapper_organizer{background:var(--nylas-base-50)}.nylas-additional-participants__input{flex:1;display:flex;justify-content:space-between}.nylas-additional-participants__input.organizer{padding:12px 16px}.nylas-additional-participants__input input{border:none;outline:none;background:none;width:100%}.nylas-additional-participants__input input-dropdown{width:100%}.nylas-additional-participants__input input-dropdown::part(id_dropdown){width:100%;height:100%}.nylas-additional-participants__input input-dropdown::part(id_dropdown-input){height:100%;border-radius:var(--nylas-border-radius-2x);border:none;border-top-right-radius:initial;border-bottom-right-radius:initial;padding-left:16px}.nylas-additional-participants__add{padding:12px;display:flex;align-items:center;border:none;background:none;cursor:pointer}.nylas-additional-participants__add span{padding:0 8px;font-size:16px;font-style:normal;font-weight:500}.nylas-additional-participants__add:hover,.nylas-additional-participants__add:active{color:var(--nylas-primary)}";
+const nylasAdditionalParticipantsCss = ":host{display:block;margin:1rem;--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}.nylas-additional-participants__title{color:var(--nylas-base-nylas-base-900-aaa, #101323);font-size:16px;font-style:normal;font-weight:600;line-height:20px;margin:0;text-align:left}.nylas-additional-participants__subtitle{color:var(--nylas-base-600);font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:0.25rem 0px 0px;text-align:left}.nylas-additional-participants__content{padding:1rem;display:flex;flex-direction:column;gap:1rem}.nylas-additional-participants__input_group{padding-top:8px;display:flex;flex-direction:column;gap:4px}.nylas-additional-participants__input_group label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:14px;font-style:normal;font-weight:400;line-height:150%}.nylas-additional-participants__input_group .nylas-additional-participants__error{color:var(--nylas-error);font-size:14px;font-family:var(--nylas-font-family);font-weight:400;line-height:16px;margin:0;text-align:left}.nylas-additional-participants__input_wrapper{display:flex;border-width:1;border-radius:8px;border:1px solid var(--nylas-base-300)}.nylas-additional-participants__input_wrapper.error{border-color:var(--nylas-error)}.nylas-additional-participants__input_wrapper button{padding:12px;border:none;border-left:1px solid var(--nylas-base-300);background:none;cursor:pointer}.nylas-additional-participants__input_wrapper button:hover,.nylas-additional-participants__input_wrapper button:active{color:var(--nylas-primary)}.nylas-additional-participants__input_wrapper_organizer{background:var(--nylas-base-50)}.nylas-additional-participants__input{flex:1;display:flex;justify-content:space-between}.nylas-additional-participants__input.organizer{padding:12px 16px}.nylas-additional-participants__input input{border:none;outline:none;background:none;width:100%}.nylas-additional-participants__input input-dropdown{width:100%}.nylas-additional-participants__input input-dropdown::part(id_dropdown){width:100%;height:100%}.nylas-additional-participants__input input-dropdown::part(id_dropdown-input){height:100%;border-radius:var(--nylas-border-radius-2x);border:none;border-top-right-radius:initial;border-bottom-right-radius:initial;padding-left:16px}.nylas-additional-participants__add{padding:12px;display:flex;align-items:center;border:none;background:none;cursor:pointer}.nylas-additional-participants__add span{padding:0 8px;font-size:16px;font-style:normal;font-weight:500}.nylas-additional-participants__add:hover,.nylas-additional-participants__add:active{color:var(--nylas-primary)}";
 const NylasAdditionalParticipantsStyle0 = nylasAdditionalParticipantsCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -34,7 +34,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
         this.eventParticipants = undefined;
         this.participantOptions = undefined;
         this.participants = this.eventParticipants ?? [];
-        this.participantsValid = true;
+        this.participantErrors = {};
     }
     elementNameChangedHandler(newValue) {
         debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);
@@ -56,9 +56,22 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
     }
     onInputOptionChanged(event) {
         debug('nylas-additional-participants', 'onInputOptionChanged');
+        const EMAIL_REGEX = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
         const index = event.detail.name;
-        this.participants[index].email = event.detail.value;
         const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);
+        if (!participant && !EMAIL_REGEX.test(event.detail.value)) {
+            this.internals.setValidity({ customError: true }, 'Please enter a valid email address');
+            this.participantErrors[index] = 'Please enter a valid email address';
+            this.participants[index].is_valid = false;
+            this.participants = [...this.participants];
+            return;
+        }
+        else {
+            this.participantErrors[index] = '';
+            this.participants[index].is_valid = true;
+            this.internals.setValidity({});
+        }
+        this.participants[index].email = event.detail.value;
         this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;
         this.participants[index].name = participant?.name || event.detail.value;
         this.participants = [...this.participants];
@@ -98,11 +111,16 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
         });
     }
     render() {
-        return (h(Host, { key: '30915e4727e68b0652fc265ced20a3fce93f94d7' }, h("nylas-form-card", { key: 'e652c77a0e382aeaab234593ad1cd8fa6cc1b858' }, h("h3", { key: 'ee6d3ac07461ef43976e32069cd978a2dc32ba96', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Additional participants"), h("p", { key: '72d712c00b839ad8220ea23cce11cfc233cf14b5', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add anyone else who would be joining for this event."), h("div", { key: '87b08e14dc5a16b2381728263e079c46545284f4', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: 'da67ac11f9c977007ce885531bcdcbf9c59aca0c' }, this.participants.map((participant, index) => {
-            return (h("div", { class: 'nylas-additional-participants__input_group', part: "nap__input_group" }, h("label", null, participant.is_organizer ? 'Organizer' : `Participant ${index}`), h("div", { part: "nap__input_wrapper", class: `nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}` }, h("div", { class: { 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }, part: "nap__input" }, participant.is_organizer ? (h("input", { type: "text", value: participant.email, onInput: e => {
+        return (h(Host, { key: '572070ca2a3dee4fb2e6691dbbdd710033f41037' }, h("nylas-form-card", { key: 'cb28ef9de2eec5ad8b021673a0ffd8f6293e81a5' }, h("h3", { key: '1e68e44f7a0fd10da4d1bb89251c01dbaa4668f0', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Participants"), h("p", { key: 'f5e85f98e09a5bc8b42e463736c3c45ab97517df', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add people in your team or organization to join the event."), h("div", { key: '1aff671a65de1986de7d2ffea7c5ec2220ac9847', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '2ee5547b3dd0b89adf51a30279aba64298a255fd' }, this.participants.map((participant, index) => {
+            return (h("div", { class: 'nylas-additional-participants__input_group', part: "nap__input_group" }, h("label", null, participant.is_organizer ? 'Organizer' : `Participant ${index}`), h("div", { part: "nap__input_wrapper", class: {
+                    'nylas-additional-participants__input_wrapper': true,
+                    'nylas-additional-participants__input_wrapper_organizer': participant.is_organizer,
+                    'nylas-additional-participants__input_wrapper_invalid': participant.is_valid === false,
+                    'error': participant.is_valid === false,
+                } }, h("div", { class: { 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }, part: "nap__input" }, participant.is_organizer ? (h("input", { type: "text", value: participant.email, onInput: e => {
                     this.onParticipantChange(e, index);
-                }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index) })) : (h("input-dropdown", { name: `${index}`, filterable: true, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(index), part: "nap__remove-participant" }, h("close-icon", null)))))));
-        })), h("button", { key: 'dd0f412f9affa5cf2b3ab5a331365d5b217e1ade', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: '089167b221913ef3e0393efa23db2698a93b3e73' }), " ", h("span", { key: '70860b8258a871e714f2f33890d35ec46835f349' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
+                }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index) })) : (h("input-dropdown", { name: `${index}`, filterable: true, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(index), part: "nap__remove-participant" }, h("close-icon", null))))), !participant.is_valid && (h("p", { class: "nylas-additional-participants__error", part: "nap__error" }, this.participantErrors[index]))));
+        })), h("button", { key: '5c0ef712646837af283756bcdb878ba67e0a2a98', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: 'e3365a9c9f2079212df03cff95e7f75115a7489f' }), " ", h("span", { key: '8f55e5ac577a2422b673aac42e9f7b675ed056fc' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -115,7 +133,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
         "eventParticipants": [16],
         "participantOptions": [16],
         "participants": [32],
-        "participantsValid": [32]
+        "participantErrors": [32]
     }, [[0, "inputOptionChanged", "onInputOptionChanged"]], {
         "name": ["elementNameChangedHandler"]
     }]);