@nectary/components 4.12.0 → 4.12.1

package/action-menu/index.js

@@ -1,12 +1,10 @@
-import { isSinchActionMenuOption } from "../action-menu-option/utils.js";
-import { subscribeContext } from "../utils/context.js";
-import { attrValueToPixels, updateIntegerAttribute, getIntegerAttribute, getBooleanAttribute, updateBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#listbox {\n  overflow-y: auto;\n}\n</style>\n\n<div id="listbox" role="presentation">\n  <slot></slot>\n</div>\n';
+import { isSinchActionMenuOption } from '../action-menu-option/utils';
+import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, NectaryElement, subscribeContext, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
-const template = document.createElement("template");
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class ActionMenu extends NectaryElement {
+export class ActionMenu extends NectaryElement {
   #$optionSlot;
   #$listbox;
   #controller = null;
@@ -14,63 +12,78 @@ class ActionMenu extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$optionSlot = shadowRoot.querySelector("slot");
-    this.#$listbox = shadowRoot.querySelector("#listbox");
+    this.#$optionSlot = shadowRoot.querySelector('slot');
+    this.#$listbox = shadowRoot.querySelector('#listbox');
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    this.setAttribute("role", "listbox");
-    this.setAttribute("tabindex", "0");
-    this.addEventListener("keydown", this.#onListboxKeyDown, { signal });
-    this.addEventListener("blur", this.#onListboxBlur, { signal });
-    this.#$listbox.addEventListener("click", this.#onListboxClick, { signal });
-    subscribeContext(this, "keydown", this.#onContextKeyDown, signal);
-    subscribeContext(this, "visibility", this.#onContextVisibility, signal);
+    const {
+      signal
+    } = this.#controller;
+    this.setAttribute('role', 'listbox');
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('keydown', this.#onListboxKeyDown, {
+      signal
+    });
+    this.addEventListener('blur', this.#onListboxBlur, {
+      signal
+    });
+    this.#$listbox.addEventListener('click', this.#onListboxClick, {
+      signal
+    });
+    subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
+    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["rows"];
+    return ['rows'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "rows": {
-        this.#$listbox.style.maxHeight = attrValueToPixels(newVal, { min: 1, itemSizeMultiplier: ITEM_HEIGHT });
-        break;
-      }
+      case 'rows':
+        {
+          this.#$listbox.style.maxHeight = attrValueToPixels(newVal, {
+            min: 1,
+            itemSizeMultiplier: ITEM_HEIGHT
+          });
+          break;
+        }
     }
   }
   set rows(value) {
-    updateIntegerAttribute(this, "rows", value);
+    updateIntegerAttribute(this, 'rows', value);
   }
   get rows() {
-    return getIntegerAttribute(this, "rows", null);
+    return getIntegerAttribute(this, 'rows', null);
   }
   #onListboxBlur = () => {
     this.#selectOption(null);
   };
-  #onListboxClick = (e) => {
+  #onListboxClick = e => {
     this.focus();
     if (isSinchActionMenuOption(e.target)) {
       this.#selectOption(e.target);
     }
   };
-  #onListboxKeyDown = (e) => {
+  #onListboxKeyDown = e => {
     this.#handleKeydown(e);
   };
-  #onContextKeyDown = (e) => {
+  #onContextKeyDown = e => {
     this.#handleKeydown(e.detail);
   };
-  #onContextVisibility = (e) => {
+  #onContextVisibility = e => {
     if (!e.detail) {
       this.#selectOption(null);
-      this.#$listbox.scrollTo({ top: 0, behavior: "auto" });
+      this.#$listbox.scrollTo({
+        top: 0,
+        behavior: 'auto'
+      });
     } else {
       const activeElement = this.#getDeepActiveElement();
-      const isTextInput = activeElement !== null && activeElement.tagName === "INPUT";
+      const isTextInput = activeElement !== null && activeElement.tagName === 'INPUT';
       if (!isTextInput) {
         this.focus();
         this.#selectOption(this.#getFirstOption());
@@ -79,32 +92,35 @@ class ActionMenu extends NectaryElement {
   };
   #handleKeydown(e) {
     switch (e.code) {
-      case "Enter":
-      case "Space": {
-        const $opt = this.#findSelectedOption();
-        if ($opt !== null) {
+      case 'Enter':
+      case 'Space':
+        {
+          const $opt = this.#findSelectedOption();
+          if ($opt !== null) {
+            e.preventDefault();
+            $opt.click();
+          }
+          break;
+        }
+      case 'ArrowUp':
+        {
           e.preventDefault();
-          $opt.click();
+          this.#selectOption(this.#getPrevOption());
+          break;
+        }
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          this.#selectOption(this.#getNextOption());
+          break;
         }
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        this.#selectOption(this.#getPrevOption());
-        break;
-      }
-      case "ArrowDown": {
-        e.preventDefault();
-        this.#selectOption(this.#getNextOption());
-        break;
-      }
     }
   }
   #getFirstOption() {
     const $options = this.#getOptionElements();
     for (let i = 0; i < $options.length; i++) {
       const el = $options[i];
-      if (!getBooleanAttribute(el, "disabled")) {
+      if (!getBooleanAttribute(el, 'disabled')) {
         return el;
       }
     }
@@ -114,7 +130,7 @@ class ActionMenu extends NectaryElement {
     const $options = this.#getOptionElements();
     for (let i = $options.length - 1; i >= 0; i--) {
       const el = $options[i];
-      if (!getBooleanAttribute(el, "disabled")) {
+      if (!getBooleanAttribute(el, 'disabled')) {
         return el;
       }
     }
@@ -126,7 +142,7 @@ class ActionMenu extends NectaryElement {
       const $options = this.#getOptionElements();
       for (let i = 1; i <= $options.length; i++) {
         const el = $options[(i + index) % $options.length];
-        if (!getBooleanAttribute(el, "disabled")) {
+        if (!getBooleanAttribute(el, 'disabled')) {
           return el;
         }
       }
@@ -139,7 +155,7 @@ class ActionMenu extends NectaryElement {
       const $options = this.#getOptionElements();
       for (let i = 1; i <= $options.length; i++) {
         const el = $options[(index - i + $options.length) % $options.length];
-        if (!getBooleanAttribute(el, "disabled")) {
+        if (!getBooleanAttribute(el, 'disabled')) {
           return el;
         }
       }
@@ -154,17 +170,19 @@ class ActionMenu extends NectaryElement {
     return activeElement;
   }
   #selectOption($option) {
-    const hasRows = this.hasAttribute("rows");
+    const hasRows = this.hasAttribute('rows');
     for (const $op of this.#getOptionElements()) {
       const isSelected = $op === $option;
-      updateBooleanAttribute($op, "data-selected", isSelected);
-      if (isSelected && Boolean(hasRows)) {
-        $op.scrollIntoView?.({ block: "nearest" });
+      updateBooleanAttribute($op, 'data-selected', isSelected);
+      if (isSelected && hasRows) {
+        $op.scrollIntoView?.({
+          block: 'nearest'
+        });
       }
     }
     if ($option !== null) {
       $option.focus();
-      $option.onmouseover = (e) => {
+      $option.onmouseover = e => {
         if (e.defaultPrevented) {
           return;
         }
@@ -179,7 +197,7 @@ class ActionMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     for (let i = 0; i < elements.length; i++) {
       const el = elements[i];
-      if (!getBooleanAttribute(el, "disabled") && getBooleanAttribute(el, "data-selected")) {
+      if (!getBooleanAttribute(el, 'disabled') && getBooleanAttribute(el, 'data-selected')) {
         return i;
       }
     }
@@ -188,7 +206,7 @@ class ActionMenu extends NectaryElement {
   #findSelectedOption() {
     const elements = this.#getOptionElements();
     for (const el of elements) {
-      if (getBooleanAttribute(el, "data-selected")) {
+      if (getBooleanAttribute(el, 'data-selected')) {
         return el;
       }
     }
@@ -198,7 +216,4 @@ class ActionMenu extends NectaryElement {
     return true;
   }
 }
-defineCustomElement("sinch-action-menu", ActionMenu);
-export {
-  ActionMenu
-};
+defineCustomElement('sinch-action-menu', ActionMenu);

package/action-menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchActionMenuProps = {
     /** How many rows to show and scroll the rest */
     rows?: number;
@@ -10,23 +10,3 @@ export type TSinchActionMenu = {
 };
 export type TSinchActionMenuElement = NectaryComponentVanillaByType<TSinchActionMenu>;
 export type TSinchActionMenuReact = NectaryComponentReactByType<TSinchActionMenu>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-action-menu': TSinchActionMenu;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-action-menu': NectaryComponentVanilla<'sinch-action-menu'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-action-menu': NectaryComponentReact<'sinch-action-menu'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-action-menu': NectaryComponentReact<'sinch-action-menu'>;
-        }
-    }
-}

package/action-menu/types.js

@@ -1 +1 @@
-
+export {};

package/action-menu-option/index.d.ts

@@ -1,6 +1,7 @@
 import '../text';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchActionMenuOption } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class ActionMenuOption extends NectaryElement {
     #private;
     constructor();
@@ -14,3 +15,23 @@ export declare class ActionMenuOption extends NectaryElement {
     get disabled(): boolean;
     click(): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-action-menu-option': TSinchActionMenuOption;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-action-menu-option': NectaryComponentVanilla<'sinch-action-menu-option'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-action-menu-option': NectaryComponentReact<'sinch-action-menu-option'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-action-menu-option': NectaryComponentReact<'sinch-action-menu-option'>;
+        }
+    }
+}

package/action-menu-option/index.js

@@ -1,64 +1,71 @@
-import "../text/index.js";
-import { isAttrEqual, getBooleanAttribute, updateExplicitBooleanAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, getAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  cursor: pointer;\n}\n\n:host([disabled]) {\n  cursor: initial;\n}\n\n#wrapper {\n  all: initial;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  height: 40px;\n  width: 100%;\n  padding: 8px 16px;\n  align-items: center;\n  gap: 10px;\n  user-select: none;\n  background-color: var(--sinch-comp-action-menu-color-default-background-initial);\n\n  --sinch-global-color-text: var(--sinch-comp-action-menu-color-default-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-action-menu-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-action-menu-size-icon);\n}\n\n:host([data-selected]) > #wrapper {\n  background-color: var(--sinch-comp-action-menu-color-default-background-selected);\n}\n\n:host(:hover) > #wrapper {\n  background-color: var(--sinch-comp-action-menu-color-default-background-hover);\n}\n\n:host([disabled]) > #wrapper {\n  pointer-events: none;\n  background-color: var(--sinch-comp-action-menu-color-disabled-background-initial);\n\n  --sinch-global-color-text: var(--sinch-comp-action-menu-color-disabled-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-action-menu-color-disabled-icon-initial);\n}\n\n#content {\n  flex: 1;\n  min-width: 0;\n\n  --sinch-comp-text-font: var(--sinch-comp-action-menu-font-option);\n}\n\n::slotted(*) {\n  margin-left: -6px;\n}\n</style>\n\n<div id="wrapper" inert>\n  <slot name="icon"></slot>\n  <sinch-text id="content" type="m" ellipsis></sinch-text>\n</div>\n';
-const template = document.createElement("template");
+import '../text';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;background-color:var(--sinch-comp-action-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-action-menu-size-icon)}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-hover)}:host([disabled])>#wrapper{pointer-events:none;background-color:var(--sinch-comp-action-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-disabled-icon-initial)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-action-menu-font-option)}::slotted(*){margin-left:-6px}</style><div id="wrapper" inert><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class ActionMenuOption extends NectaryElement {
+export class ActionMenuOption extends NectaryElement {
   #$content;
   #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$content = shadowRoot.querySelector("#content");
+    this.#$content = shadowRoot.querySelector('#content');
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    this.setAttribute("role", "option");
-    this.addEventListener("mousedown", this.#onMouseDown, { signal });
-    this.addEventListener("-click", this.#onClickReactHandler, { signal });
+    const {
+      signal
+    } = this.#controller;
+    this.setAttribute('role', 'option');
+    this.addEventListener('mousedown', this.#onMouseDown, {
+      signal
+    });
+    this.addEventListener('-click', this.#onClickReactHandler, {
+      signal
+    });
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["text", "disabled", "data-selected"];
+    return ['text', 'disabled', 'data-selected'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "text": {
-        this.#$content.textContent = newVal;
-        break;
-      }
-      case "disabled": {
-        updateBooleanAttribute(this, name, isAttrTrue(newVal));
-        break;
-      }
-      case "data-selected": {
-        const isDisabled = getBooleanAttribute(this, "disabled");
-        updateExplicitBooleanAttribute(this, "aria-selected", isAttrTrue(newVal) && !isDisabled);
-        break;
-      }
+      case 'text':
+        {
+          this.#$content.textContent = newVal;
+          break;
+        }
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'data-selected':
+        {
+          const isDisabled = getBooleanAttribute(this, 'disabled');
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal) && !isDisabled);
+          break;
+        }
     }
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, "disabled", isDisabled);
+    updateBooleanAttribute(this, 'disabled', isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, "disabled");
+    return getBooleanAttribute(this, 'disabled');
   }
   click() {
     this.#dispatchClickEvent();
@@ -67,15 +74,10 @@ class ActionMenuOption extends NectaryElement {
     this.#dispatchClickEvent();
   };
   #dispatchClickEvent() {
-    this.dispatchEvent(
-      new CustomEvent("-click")
-    );
+    this.dispatchEvent(new CustomEvent('-click'));
   }
-  #onClickReactHandler = (e) => {
-    getReactEventHandler(this, "on-click")?.(e);
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
   };
 }
-defineCustomElement("sinch-action-menu-option", ActionMenuOption);
-export {
-  ActionMenuOption
-};
+defineCustomElement('sinch-action-menu-option', ActionMenuOption);

package/action-menu-option/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchActionMenuOptionProps = {
     /** Display text */
     text: string;
@@ -34,23 +34,3 @@ export type TSinchActionMenuOption = {
 };
 export type TSinchActionMenuOptionElement = NectaryComponentVanillaByType<TSinchActionMenuOption>;
 export type TSinchActionMenuOptionReact = NectaryComponentReactByType<TSinchActionMenuOption>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-action-menu-option': TSinchActionMenuOption;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-action-menu-option': NectaryComponentVanilla<'sinch-action-menu-option'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-action-menu-option': NectaryComponentReact<'sinch-action-menu-option'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-action-menu-option': NectaryComponentReact<'sinch-action-menu-option'>;
-        }
-    }
-}

package/action-menu-option/types.js

@@ -1 +1 @@
-
+export {};

package/action-menu-option/utils.js

@@ -1,6 +1,3 @@
-const isSinchActionMenuOption = (el) => {
-  return el instanceof Element && el.tagName === "SINCH-ACTION-MENU-OPTION";
-};
-export {
-  isSinchActionMenuOption
-};
+export const isSinchActionMenuOption = el => {
+  return el instanceof Element && el.tagName === 'SINCH-ACTION-MENU-OPTION';
+};

package/alert/index.d.ts

@@ -2,8 +2,8 @@ import '../icon';
 import '../rich-text';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchAlertType } from './types';
-export * from './types';
+import type { TSinchAlertType, TSinchAlert } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Alert extends NectaryElement {
     #private;
     constructor();
@@ -16,3 +16,23 @@ export declare class Alert extends NectaryElement {
     get text(): string;
     set text(value: string);
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-alert': TSinchAlert;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-alert': NectaryComponentVanilla<'sinch-alert'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-alert': NectaryComponentReact<'sinch-alert'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-alert': NectaryComponentReact<'sinch-alert'>;
+        }
+    }
+}

package/alert/index.js

@@ -1,52 +1,49 @@
-import "../icon/index.js";
-import "../rich-text/index.js";
-import "../text/index.js";
-import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { typeValues } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    align-items: center;\n    padding: 8px 16px;\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 48px;\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-warning-default-background);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-error-default-background);\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-info-default-background);\n  }\n\n  #icon-info,\n  #icon-warn,\n  #icon-error {\n    display: none;\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-alert-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-alert-color-error-default-icon);\n  }\n\n  #icon-info {\n    --sinch-global-color-icon: var(--sinch-comp-alert-color-info-default-icon);\n  }\n\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\n  }\n\n  #text {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-rich-text-font: var(--sinch-comp-alert-font-body);\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-alert-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-alert-color-error-default-text);\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-alert-color-info-default-text);\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon>\n  <sinch-icon icons-version="2" name="triangle-exclamation"\n    id="icon-warn"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <sinch-rich-text id="text"></sinch-rich-text>\n  <slot name="action"></slot>\n  <slot name="close"></slot>\n</div>\n';
-const template = document.createElement("template");
+import '../icon';
+import '../rich-text';
+import '../text';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-alert-color-info-default-background)}#icon-error,#icon-info,#icon-warn{display:none}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=warn]) #icon-warn{display:block}#text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;--sinch-comp-rich-text-font:var(--sinch-comp-alert-font-body)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-info-default-text)}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
+import { typeValues } from './utils';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Alert extends NectaryElement {
+export class Alert extends NectaryElement {
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector("#text");
+    this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("role", "alert");
+    this.setAttribute('role', 'alert');
   }
   disconnectedCallback() {
     super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ["text"];
+    return ['text'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case "text": {
-        updateAttribute(this.#$text, "text", newVal);
-        break;
-      }
+      case 'text':
+        {
+          updateAttribute(this.#$text, 'text', newVal);
+          break;
+        }
     }
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, "type");
+    return getLiteralAttribute(this, typeValues, 'type');
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, "type", value);
+    updateLiteralAttribute(this, typeValues, 'type', value);
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
 }
-defineCustomElement("sinch-alert", Alert);
-export {
-  Alert
-};
+defineCustomElement('sinch-alert', Alert);

package/alert/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchAlertType = 'info' | 'warn' | 'error';
 export type TSinchAlertProps = {
     /** Type */
@@ -27,23 +27,3 @@ export type TSinchAlert = {
 };
 export type TSinchAlertElement = NectaryComponentVanillaByType<TSinchAlert>;
 export type TSinchAlertReact = NectaryComponentReactByType<TSinchAlert>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-alert': TSinchAlert;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-alert': NectaryComponentVanilla<'sinch-alert'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-alert': NectaryComponentReact<'sinch-alert'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-alert': NectaryComponentReact<'sinch-alert'>;
-        }
-    }
-}

package/alert/types.js

@@ -1 +1 @@
-
+export {};

package/alert/utils.js

@@ -1,4 +1 @@
-const typeValues = ["info", "warn", "error"];
-export {
-  typeValues
-};
+export const typeValues = ['info', 'warn', 'error'];

package/avatar/colors.js

@@ -1 +1 @@
-
+export {};