@nectary/components 0.10.0 → 0.11.1

package/card/index.d.ts

@@ -0,0 +1,23 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchCardElement = HTMLElement & {
+    text: string;
+    label: string;
+    header: string;
+    disabled: boolean;
+};
+export declare type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
+    text: string;
+    label?: string;
+    header: string;
+    disabled?: boolean;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card': TSinchCardReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card': TSinchCardElement;
+    }
+}

package/card/index.js

@@ -0,0 +1,164 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text, _$label, _$title, _$illustrationSlot, _$actionSlot, _$illustrationSlotWrapper, _onIllustrationSlotChange, _updateDisabledAttributeInChildren;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { isSinchCardButtonElement } from '../card-button';
+import { isSinchCardLinkElement } from '../card-link';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;background-color:var(--sinch-color-snow-100);border-radius:8px;border:1px solid var(--sinch-color-snow-700)}#illustration-wrapper{display:none;flex-direction:column;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;background-color:var(--sinch-color-stormy-500);max-height:222px}#illustration-wrapper.active{display:flex}#illustration-wrapper.active+#card-body{border-top-left-radius:0;border-top-right-radius:0;border-top:none}#label{margin:0;font:var(--sinch-font-title-5);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px}#title{font:var(--sinch-font-title-3);color:var(--sinch-color-stormy-500);flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{margin:0;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:60%}::slotted(sinch-card-button),::slotted(sinch-card-link){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><p id="label"></p><div id="header"><slot name="icon"></slot><span id="title"></span></div><p id="description"></p><slot name="action"></slot></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap(), _$title = new WeakMap(), _$illustrationSlot = new WeakMap(), _$actionSlot = new WeakMap(), _$illustrationSlotWrapper = new WeakMap(), _onIllustrationSlotChange = new WeakMap(), _updateDisabledAttributeInChildren = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$label, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$title, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$illustrationSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$actionSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$illustrationSlotWrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onIllustrationSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$illustrationSlotWrapper), 'active', _classPrivateFieldGet(this, _$illustrationSlot).assignedElements().length > 0);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _updateDisabledAttributeInChildren, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$actionSlot).assignedElements().forEach(el => {
+          if (isSinchCardButtonElement(el) || isSinchCardLinkElement(el)) {
+            updateAttribute(el, 'disabled', this.getAttribute('disabled'));
+          }
+        });
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#description'));
+
+    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
+
+    _classPrivateFieldSet(this, _$title, shadowRoot.querySelector('#title'));
+
+    _classPrivateFieldSet(this, _$illustrationSlot, shadowRoot.querySelector('slot[name="illustration"]'));
+
+    _classPrivateFieldSet(this, _$actionSlot, shadowRoot.querySelector('slot[name="action"]'));
+
+    _classPrivateFieldSet(this, _$illustrationSlotWrapper, shadowRoot.querySelector('#illustration-wrapper'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$illustrationSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onIllustrationSlotChange));
+
+    _classPrivateFieldGet(this, _$actionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateDisabledAttributeInChildren));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$illustrationSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onIllustrationSlotChange));
+
+    _classPrivateFieldGet(this, _$actionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateDisabledAttributeInChildren));
+  }
+
+  static get observedAttributes() {
+    return ['text', 'label', 'header', 'disabled'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'label':
+        {
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          break;
+        }
+
+      case 'header':
+        {
+          _classPrivateFieldGet(this, _$title).textContent = newVal;
+          break;
+        }
+
+      case 'disabled':
+        {
+          _classPrivateFieldGet(this, _updateDisabledAttributeInChildren).call(this);
+
+          break;
+        }
+    }
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set header(value) {
+    updateAttribute(this, 'header', value);
+  }
+
+  get header() {
+    return getAttribute(this, 'header', '');
+  }
+
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+
+  get label() {
+    return getAttribute(this, 'label', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+}));

package/card-button/index.d.ts

@@ -0,0 +1,27 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, MouseEvent } from 'react';
+export declare const isSinchCardButtonElement: (el: Element) => el is TSinchCardButtonElement;
+export declare type TSinchCardButtonElement = HTMLElement & {
+    text: string;
+    disabled: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchCardButtonReact = TSinchElementReact<TSinchCardButtonElement> & {
+    text: string;
+    'aria-label': string;
+    disabled?: boolean;
+    onClick: (e: MouseEvent<TSinchCardButtonElement>) => void;
+    onFocus?: (e: FocusEvent<TSinchCardButtonElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchCardButtonElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card-button': TSinchCardButtonReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card-button': TSinchCardButtonElement;
+    }
+}

package/card-button/index.js

@@ -0,0 +1,83 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$button;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;outline:0}sinch-button{display:block}</style><sinch-button type="primary" small></sinch-button>';
+export const isSinchCardButtonElement = el => {
+  return el.tagName === 'SINCH-CARD-BUTTON';
+};
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-card-button', (_$button = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('sinch-button'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'button');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'disabled'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$button), 'text', newVal);
+          break;
+        }
+
+      case 'disabled':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$button), 'disabled', newVal);
+          break;
+        }
+    }
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set disabled(isDisabled) {
+    updateAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$button).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$button).blur();
+  }
+
+}));

package/card-link/index.d.ts

@@ -0,0 +1,29 @@
+import '../icon/cancel';
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, MouseEvent } from 'react';
+export declare const isSinchCardLinkElement: (el: Element) => el is TSinchCardLinkElement;
+export declare type TSinchCardLinkElement = HTMLElement & {
+    text: string;
+    href: string;
+    disabled: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchCardLinkReact = TSinchElementReact<TSinchCardLinkElement> & {
+    text: string;
+    href: string;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<TSinchCardLinkElement>) => void;
+    onFocus?: (e: FocusEvent<TSinchCardLinkElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchCardLinkElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card-link': TSinchCardLinkReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card-link': TSinchCardLinkElement;
+    }
+}

package/card-link/index.js

@@ -0,0 +1,121 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$anchor, _$text, _onClick;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import '../icon/cancel';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline;outline:0}a{display:flex;flex-direction:row;gap:8px;font:var(--sinch-font-emphasized-body);color:var(--sinch-color-tropical-500);text-decoration:none;outline:0;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-300);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-300)}span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}</style><a><span></span><sinch-icon-arrow-forward size="24"></sinch-icon-arrow-forward></a>';
+export const isSinchCardLinkElement = el => {
+  return el.tagName === 'SINCH-CARD-LINK';
+};
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-card-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onClick = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$anchor, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onClick, {
+      writable: true,
+      value: e => {
+        if (this.disabled) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$anchor, shadowRoot.querySelector('a'));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('span'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$anchor).addEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$anchor).removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get href() {
+    return getAttribute(this, 'href', '');
+  }
+
+  set href(value) {
+    updateAttribute(this, 'href', value);
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set external(isExternal) {
+    updateBooleanAttribute(this, 'external', isExternal);
+  }
+
+  get external() {
+    return getBooleanAttribute(this, 'external');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'href'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'href':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'href', newVal);
+          break;
+        }
+    }
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$anchor).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$anchor).blur();
+  }
+
+}));

package/dialog/index.d.ts

@@ -0,0 +1,23 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+declare type TSinchDialogElement = HTMLElement & {
+    title: string;
+    readonly dialogRect: TRect;
+    readonly closeButtonRect: TRect;
+};
+declare type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
+    title: string;
+    'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchDialogElement, CustomEvent<void>>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-dialog': TSinchDialogReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-dialog': TSinchDialogElement;
+    }
+}
+export {};

package/dialog/index.js

@@ -0,0 +1,181 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$main, _$closeButton, _$backDrop, _$title, _$prevActiveElement, _focusIn, _onCloseByMouse, _onCloseByEsc, _onClose, _onCloseReactHandler;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, getRect, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{outline:0}#wrapper{position:fixed;top:0;left:0;height:100vh;width:100vw;color:var(--sinch-color-text-default);font:var(--sinch-font-body);z-index:2147483647}#backdrop{background-color:#000;position:absolute;left:0;top:0;opacity:55%;width:100%;height:100%}#main{display:flex;flex-direction:column;position:relative;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);padding:24px;width:100%;max-width:512px;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100)}#header{display:flex;flex-direction:row;justify-content:space-between;align-content:center;margin-bottom:16px}#title{font:var(--sinch-font-title-3);color:var(--sinch-color-text-default)}#content-wrapper{max-height:50vh;overflow-y:auto;margin-top:16px}#close{all:initial;cursor:pointer}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}</style><div id="wrapper"><div id="backdrop"></div><div id="main"><div id="header"><span id="title"></span> <button id="close"><sinch-icon-close size="24"></sinch-icon-close></button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+
+const getReactEventHandler = ($element, handlerName) => {
+  for (const key in $element) {
+    if (key.startsWith('__reactProps$')) {
+      return $element[key][handlerName];
+    }
+  }
+
+  return null;
+};
+
+defineCustomElement('sinch-dialog', (_$main = new WeakMap(), _$closeButton = new WeakMap(), _$backDrop = new WeakMap(), _$title = new WeakMap(), _$prevActiveElement = new WeakMap(), _focusIn = new WeakMap(), _onCloseByMouse = new WeakMap(), _onCloseByEsc = new WeakMap(), _onClose = new WeakMap(), _onCloseReactHandler = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$main, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$closeButton, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$backDrop, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$title, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$prevActiveElement, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _focusIn, {
+      writable: true,
+      value: e => {
+        if (e.target === this) {
+          return;
+        }
+
+        if (!this.contains(e.target)) {
+          _classPrivateFieldGet(this, _$closeButton).focus();
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseByMouse, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        _classPrivateFieldGet(this, _onClose).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseByEsc, {
+      writable: true,
+      value: e => {
+        switch (e.key) {
+          case 'Escape':
+            {
+              e.preventDefault();
+              e.stopPropagation();
+
+              _classPrivateFieldGet(this, _onClose).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onClose, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$prevActiveElement)?.focus();
+        this.dispatchEvent(new CustomEvent('close', {
+          bubbles: true
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'onClose')?.();
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$main, shadowRoot.querySelector('#main'));
+
+    _classPrivateFieldSet(this, _$closeButton, shadowRoot.querySelector('#close'));
+
+    _classPrivateFieldSet(this, _$backDrop, shadowRoot.querySelector('#backdrop'));
+
+    _classPrivateFieldSet(this, _$title, shadowRoot.querySelector('#title'));
+  }
+
+  static get observedAttributes() {
+    return ['title'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'title':
+        {
+          _classPrivateFieldGet(this, _$title).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  set title(title) {
+    updateAttribute(this, 'title', title);
+  }
+
+  get title() {
+    return getAttribute(this, 'title', '');
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'dialog');
+
+    _classPrivateFieldSet(this, _$prevActiveElement, document.activeElement);
+
+    _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+
+    _classPrivateFieldGet(this, _$backDrop).addEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+
+    this.addEventListener('keydown', _classPrivateFieldGet(this, _onCloseByEsc));
+    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    document.addEventListener('focusin', _classPrivateFieldGet(this, _focusIn));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldSet(this, _$prevActiveElement, null);
+
+    _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+
+    _classPrivateFieldGet(this, _$backDrop).removeEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+
+    this.removeEventListener('keydown', _classPrivateFieldGet(this, _onCloseByEsc));
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    document.removeEventListener('focusin', _classPrivateFieldGet(this, _focusIn));
+  }
+
+  get dialogRect() {
+    return getRect(_classPrivateFieldGet(this, _$main));
+  }
+
+  get closeButtonRect() {
+    return getRect(_classPrivateFieldGet(this, _$closeButton));
+  }
+
+}));

package/icon/arrow-back/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-arrow-back': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-arrow-back': TSinchIconElement;
+    }
+}

package/icon/arrow-back/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1Z"/></svg>';
+defineCustomElement('sinch-icon-arrow-back', createIconClass(templateHTML));

package/icon/arrow-downward/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-arrow-downward': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-arrow-downward': TSinchIconElement;
+    }
+}

package/icon/arrow-downward/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 1 0-1.41-1.41L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1Z"/></svg>';
+defineCustomElement('sinch-icon-arrow-downward', createIconClass(templateHTML));

package/icon/arrow-forward/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-arrow-forward': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-arrow-forward': TSinchIconElement;
+    }
+}

package/icon/arrow-forward/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 0 0 0-1.41l-6.58-6.6a.996.996 0 1 0-1.41 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1Z"/></svg>';
+defineCustomElement('sinch-icon-arrow-forward', createIconClass(templateHTML));

package/icon/arrow-upward/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-arrow-upward': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-arrow-upward': TSinchIconElement;
+    }
+}

package/icon/arrow-upward/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24"><path d="M13 19V7.83l4.88 4.88c.39.39 1.03.39 1.42 0a.996.996 0 0 0 0-1.41l-6.59-6.59a.996.996 0 0 0-1.41 0l-6.6 6.58a.996.996 0 1 0 1.41 1.41L11 7.83V19c0 .55.45 1 1 1s1-.45 1-1Z"/></svg>';
+defineCustomElement('sinch-icon-arrow-upward', createIconClass(templateHTML));

package/illustration/create-illustration-class.d.ts

@@ -0,0 +1,308 @@
+export declare const createIllustrationClass: (templateHTML: string) => {
+    new (): {
+        $svg: SVGElement;
+        size: number;
+        connectedCallback(): void;
+        attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+        accessKey: string;
+        readonly accessKeyLabel: string;
+        autocapitalize: string;
+        dir: string;
+        draggable: boolean;
+        hidden: boolean;
+        innerText: string;
+        lang: string;
+        readonly offsetHeight: number;
+        readonly offsetLeft: number;
+        readonly offsetParent: Element | null;
+        readonly offsetTop: number;
+        readonly offsetWidth: number;
+        outerText: string;
+        spellcheck: boolean;
+        title: string;
+        translate: boolean;
+        attachInternals(): ElementInternals;
+        click(): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+        removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        readonly attributes: NamedNodeMap;
+        readonly classList: DOMTokenList;
+        className: string;
+        readonly clientHeight: number;
+        readonly clientLeft: number;
+        readonly clientTop: number;
+        readonly clientWidth: number;
+        id: string;
+        readonly localName: string;
+        readonly namespaceURI: string | null;
+        onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+        onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+        outerHTML: string;
+        readonly ownerDocument: Document;
+        readonly part: DOMTokenList;
+        readonly prefix: string | null;
+        readonly scrollHeight: number;
+        scrollLeft: number;
+        scrollTop: number;
+        readonly scrollWidth: number;
+        readonly shadowRoot: ShadowRoot | null;
+        slot: string;
+        readonly tagName: string;
+        attachShadow(init: ShadowRootInit): ShadowRoot;
+        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
+        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+        closest<E extends Element = Element>(selectors: string): E | null;
+        getAttribute(qualifiedName: string): string | null;
+        getAttributeNS(namespace: string | null, localName: string): string | null;
+        getAttributeNames(): string[];
+        getAttributeNode(qualifiedName: string): Attr | null;
+        getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+        getBoundingClientRect(): DOMRect;
+        getClientRects(): DOMRectList;
+        getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+        getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
+        getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
+        getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+        getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+        hasAttribute(qualifiedName: string): boolean;
+        hasAttributeNS(namespace: string | null, localName: string): boolean;
+        hasAttributes(): boolean;
+        hasPointerCapture(pointerId: number): boolean;
+        insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+        insertAdjacentHTML(position: InsertPosition, text: string): void;
+        insertAdjacentText(where: InsertPosition, data: string): void;
+        matches(selectors: string): boolean;
+        releasePointerCapture(pointerId: number): void;
+        removeAttribute(qualifiedName: string): void;
+        removeAttributeNS(namespace: string | null, localName: string): void;
+        removeAttributeNode(attr: Attr): Attr;
+        requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
+        requestPointerLock(): void;
+        scroll(options?: ScrollToOptions | undefined): void;
+        scroll(x: number, y: number): void;
+        scrollBy(options?: ScrollToOptions | undefined): void;
+        scrollBy(x: number, y: number): void;
+        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+        scrollTo(options?: ScrollToOptions | undefined): void;
+        scrollTo(x: number, y: number): void;
+        setAttribute(qualifiedName: string, value: string): void;
+        setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+        setAttributeNode(attr: Attr): Attr | null;
+        setAttributeNodeNS(attr: Attr): Attr | null;
+        setPointerCapture(pointerId: number): void;
+        toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+        webkitMatchesSelector(selectors: string): boolean;
+        readonly baseURI: string;
+        readonly childNodes: NodeListOf<ChildNode>;
+        readonly firstChild: ChildNode | null;
+        readonly isConnected: boolean;
+        readonly lastChild: ChildNode | null;
+        readonly nextSibling: ChildNode | null;
+        readonly nodeName: string;
+        readonly nodeType: number;
+        nodeValue: string | null;
+        readonly parentElement: HTMLElement | null;
+        readonly parentNode: ParentNode | null;
+        readonly previousSibling: ChildNode | null;
+        textContent: string | null;
+        appendChild<T extends Node>(node: T): T;
+        cloneNode(deep?: boolean | undefined): Node;
+        compareDocumentPosition(other: Node): number;
+        contains(other: Node | null): boolean;
+        getRootNode(options?: GetRootNodeOptions | undefined): Node;
+        hasChildNodes(): boolean;
+        insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
+        isDefaultNamespace(namespace: string | null): boolean;
+        isEqualNode(otherNode: Node | null): boolean;
+        isSameNode(otherNode: Node | null): boolean;
+        lookupNamespaceURI(prefix: string | null): string | null;
+        lookupPrefix(namespace: string | null): string | null;
+        normalize(): void;
+        removeChild<T_2 extends Node>(child: T_2): T_2;
+        replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
+        readonly ATTRIBUTE_NODE: number;
+        readonly CDATA_SECTION_NODE: number;
+        readonly COMMENT_NODE: number;
+        readonly DOCUMENT_FRAGMENT_NODE: number;
+        readonly DOCUMENT_NODE: number;
+        readonly DOCUMENT_POSITION_CONTAINED_BY: number;
+        readonly DOCUMENT_POSITION_CONTAINS: number;
+        readonly DOCUMENT_POSITION_DISCONNECTED: number;
+        readonly DOCUMENT_POSITION_FOLLOWING: number;
+        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
+        readonly DOCUMENT_POSITION_PRECEDING: number;
+        readonly DOCUMENT_TYPE_NODE: number;
+        readonly ELEMENT_NODE: number;
+        readonly ENTITY_NODE: number;
+        readonly ENTITY_REFERENCE_NODE: number;
+        readonly NOTATION_NODE: number;
+        readonly PROCESSING_INSTRUCTION_NODE: number;
+        readonly TEXT_NODE: number;
+        dispatchEvent(event: Event): boolean;
+        ariaAtomic: string;
+        ariaAutoComplete: string;
+        ariaBusy: string;
+        ariaChecked: string;
+        ariaColCount: string;
+        ariaColIndex: string;
+        ariaColSpan: string;
+        ariaCurrent: string;
+        ariaDisabled: string;
+        ariaExpanded: string;
+        ariaHasPopup: string;
+        ariaHidden: string;
+        ariaKeyShortcuts: string;
+        ariaLabel: string;
+        ariaLevel: string;
+        ariaLive: string;
+        ariaModal: string;
+        ariaMultiLine: string;
+        ariaMultiSelectable: string;
+        ariaOrientation: string;
+        ariaPlaceholder: string;
+        ariaPosInSet: string;
+        ariaPressed: string;
+        ariaReadOnly: string;
+        ariaRequired: string;
+        ariaRoleDescription: string;
+        ariaRowCount: string;
+        ariaRowIndex: string;
+        ariaRowSpan: string;
+        ariaSelected: string;
+        ariaSetSize: string;
+        ariaSort: string;
+        ariaValueMax: string;
+        ariaValueMin: string;
+        ariaValueNow: string;
+        ariaValueText: string;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
+        after(...nodes: (string | Node)[]): void;
+        before(...nodes: (string | Node)[]): void;
+        remove(): void;
+        replaceWith(...nodes: (string | Node)[]): void;
+        innerHTML: string;
+        readonly nextElementSibling: Element | null;
+        readonly previousElementSibling: Element | null;
+        readonly childElementCount: number;
+        readonly children: HTMLCollection;
+        readonly firstElementChild: Element | null;
+        readonly lastElementChild: Element | null;
+        append(...nodes: (string | Node)[]): void;
+        prepend(...nodes: (string | Node)[]): void;
+        querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
+        querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
+        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
+        querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
+        querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
+        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
+        replaceChildren(...nodes: (string | Node)[]): void;
+        readonly assignedSlot: HTMLSlotElement | null;
+        oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        readonly style: CSSStyleDeclaration;
+        contentEditable: string;
+        enterKeyHint: string;
+        inputMode: string;
+        readonly isContentEditable: boolean;
+        onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onerror: OnErrorEventHandler;
+        onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+        ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+        onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+        onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+        autofocus: boolean;
+        readonly dataset: DOMStringMap;
+        nonce?: string | undefined;
+        tabIndex: number;
+        blur(): void;
+        focus(options?: FocusOptions | undefined): void;
+    };
+    readonly observedAttributes: string[];
+};

package/illustration/create-illustration-class.js

@@ -0,0 +1,53 @@
+import { getIntegerAttribute, updateAttribute, updateIntegerAttribute } from '../utils';
+const illustrationStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block}</style>';
+const DEFAULT_SIZE = 256;
+const MIN_SIZE = 16;
+const MAX_SIZE = 2048;
+export const createIllustrationClass = templateHTML => {
+  const template = document.createElement('template');
+  template.innerHTML = illustrationStylesHtml + templateHTML;
+  return class extends HTMLElement {
+    constructor() {
+      super();
+      const shadowRoot = this.attachShadow({
+        mode: 'closed'
+      });
+      shadowRoot.appendChild(template.content.cloneNode(true));
+      this.$svg = shadowRoot.querySelector('svg');
+    }
+
+    static get observedAttributes() {
+      return ['size'];
+    }
+
+    set size(value) {
+      updateAttribute(this, 'size', value);
+    }
+
+    get size() {
+      return getIntegerAttribute(this, 'size', DEFAULT_SIZE);
+    }
+
+    connectedCallback() {
+      updateAttribute(this.$svg, 'preserveAspectRatio', 'xMinYMin meet');
+
+      if (!this.hasAttribute('size')) {
+        updateAttribute(this, 'size', DEFAULT_SIZE);
+      }
+    }
+
+    attributeChangedCallback(name, _, newVal) {
+      switch (name) {
+        case 'size':
+          {
+            updateIntegerAttribute(this.$svg, 'height', newVal, {
+              min: MIN_SIZE,
+              max: MAX_SIZE
+            });
+            break;
+          }
+      }
+    }
+
+  };
+};

package/illustration/phone-and-cat/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIllustrationElement, TSinchIllustrationReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-illustration-phone-and-cat': TSinchIllustrationReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-illustration-phone-and-cat': TSinchIllustrationElement;
+    }
+}

package/illustration/phone-and-cat/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIllustrationClass } from '../create-illustration-class';
+const templateHTML = '<svg viewBox="0 0 868 800"><g clip-path="url(#a)"><path d="M743.029 800a65.073 65.073 0 0 1-53.216-27.573 65.073 65.073 0 0 1-8.106-59.384c5.049-14.202 10.693-26.125 17.244-36.43a16.512 16.512 0 0 1 10.349-7.26 16.52 16.52 0 0 1 17.112 6.636 16.528 16.528 0 0 1 2.747 12.34 16.528 16.528 0 0 1-2.331 6.009c-5.205 8.187-9.786 17.932-14.002 29.789a32.047 32.047 0 0 0 33.77 42.64c.093 0 .187-.02.281-.027a31.99 31.99 0 0 0 24.058-16.208l10.086-18.181a58.267 58.267 0 0 1 77.436-23.645 16.526 16.526 0 0 1 5.133 3.949 16.538 16.538 0 0 1 3.219 5.62 16.516 16.516 0 0 1-16.974 21.708 16.524 16.524 0 0 1-6.23-1.769 25.243 25.243 0 0 0-33.704 10.161l-10.088 18.184a65.081 65.081 0 0 1-49.516 33.037l-.404.041a65.03 65.03 0 0 1-6.864.363Z" fill="#F2A068"/><path d="M21.409 0h323.305a20.795 20.795 0 0 1 20.773 20.773V232.84H21.409A20.793 20.793 0 0 1 .636 212.063V20.773A20.793 20.793 0 0 1 21.409 0" fill="#007171"/><path d="M222.723 274.478H21.416a20.79 20.79 0 0 0-20.78 20.775v83.553h222.087a20.795 20.795 0 0 0 20.773-20.773v-62.78a20.796 20.796 0 0 0-20.773-20.775Z" fill="#FFBE3C"/><path d="M168.062 337.607c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.909-10.965-10.965-10.965-6.057 0-10.966 4.909-10.966 10.965 0 6.057 4.909 10.966 10.966 10.966Zm-45.997 0c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.909-10.965-10.965-10.965s-10.966 4.909-10.966 10.965c0 6.057 4.91 10.966 10.966 10.966Zm-45.992 0c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.91-10.965-10.965-10.965-6.057 0-10.966 4.909-10.966 10.965 0 6.057 4.91 10.966 10.966 10.966ZM275.57 92.165H90.555a5.386 5.386 0 0 1 0-10.771H275.57a5.386 5.386 0 1 1 0 10.771Zm-92.537 59.28H90.555a5.386 5.386 0 0 1 0-10.772h92.478a5.386 5.386 0 0 1 0 10.772Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M615.675 402.718S506.567 240.893 512.588 287.271c10.022 77.194-28.652 55.324-28.549 143.141l131.636-27.694Z" fill="#FFD03C"/><path d="M277.401 386.038c3.642 5.698 6.05 11.584 6.768 17.594.717 6.009-.089 12.206-2.169 18.991l-1.732 5.513a59.046 59.046 0 0 0-1.677 6.901 63.145 63.145 0 0 0-1.008 14.117c.364 9.405 2.681 18.401 6.01 26.604l.286.701.42.72a16513.683 16513.683 0 0 0 38.013 64.194l19.116 32.031 19.213 31.974a10.593 10.593 0 0 0 14.477 3.621 10.592 10.592 0 0 0 3.739-14.447l-18.9-32.161-18.999-32.098a10513.726 10513.726 0 0 0-38.217-64.073l.709 1.419c-2.644-6.398-4.289-12.942-4.57-19.342a42.001 42.001 0 0 1 .612-9.467c.27-1.557.634-3.096 1.09-4.609l.818-2.742.882-3.08c2.308-8.338 3.82-18.177 2.031-27.827a53.554 53.554 0 0 0-4.341-13.764 61.473 61.473 0 0 0-7.372-11.782 9.387 9.387 0 0 0-12.851-1.906 9.391 9.391 0 0 0-2.458 12.758l.114.171-.004-.011Z" fill="#894915"/><path fill-rule="evenodd" clip-rule="evenodd" d="m413.954 576.288 29.177-60.157a30.487 30.487 0 0 1 19.292-16.079 38.811 38.811 0 0 1 45.387 54.136l-46.18 96.655 28.823 45.069h-71.817a47.175 47.175 0 0 1-42.602-26.915l-93.433-196.475a29.248 29.248 0 0 1 9.154-36.183l22.281-16.292 99.918 156.241Zm391.608-43.01a40.67 40.67 0 0 0-39.183-23.337l-9.69.564a40.68 40.68 0 0 0-38.301 41.27 40.68 40.68 0 0 0 5.493 19.756c19.347 33.317 43.264 74.49 60.566 104.293a40 40 0 0 0 27.069 19.203 40.01 40.01 0 0 0 32.249-7.837 39.705 39.705 0 0 0 11.425-48.074L805.571 533.28l-.009-.002Z" fill="#894915"/><path fill-rule="evenodd" clip-rule="evenodd" d="M377.824 344.949a12.204 12.204 0 0 0-11.115-7.168h-78.603a4.447 4.447 0 0 0-4.052 6.281l69.304 152.996a4.445 4.445 0 0 0 4.049 2.612h77.034a8.69 8.69 0 0 0 8.662-8.045 8.688 8.688 0 0 0-.751-4.223c-14.487-31.99-53.076-117.177-64.528-142.453Z" fill="#666"/><path fill-rule="evenodd" clip-rule="evenodd" d="M362.697 337.781h-74.443a12.207 12.207 0 0 0-10.253 5.589 12.196 12.196 0 0 0-.861 11.646l62.278 137.486a12.195 12.195 0 0 0 11.114 7.168h85.497l-73.332-161.889Z" fill="#CCC"/><path d="m306.957 436.433 69.078 1.008a9.722 9.722 0 0 0 .527-19.439l-69.027-2.755a10.6 10.6 0 0 0-.845 21.179h.267" fill="#894915"/><path d="m311.941 433.234 50.786-38.74a8.576 8.576 0 0 0-9.958-13.954l-53.145 35.442a10.605 10.605 0 1 0 12.317 17.252" fill="#894915"/><path d="m312.976 454.594 70.035.094a9.428 9.428 0 0 0 6.592-2.705 9.428 9.428 0 0 0 .24-13.192 9.429 9.429 0 0 0-6.49-2.943l-69.993-2.445a10.6 10.6 0 0 0-.741 21.187h.357" fill="#894915"/><path d="m318.832 472.223 69.075-.122a8.792 8.792 0 0 0 8.82-8.581 8.796 8.796 0 0 0-8.392-8.999l-68.986-3.485a10.604 10.604 0 0 0-11.189 10.048 10.594 10.594 0 0 0 2.745 7.668 10.596 10.596 0 0 0 7.374 3.457c.174 0 .38.014.553.014" fill="#894915"/><path d="m724.223 600.317-.616 95.556H418.485l69.064-149.989-46.043-26.175 46.507-100.311a50.8 50.8 0 0 1 45.514-29.433l169.531-1.917 22.393 22.361-.172 26.205 26.89-17.037 59.448 126.764-84.071 59.019-3.323-5.043Z" fill="#E83452"/><path d="M557.319 352.94a62.209 62.209 0 0 1-6.19-1.828 78.44 78.44 0 0 1-52.411-74.512l.299-65.106a78.392 78.392 0 0 1 11.777-41.066c16.146-25.985 45.044-40.056 75.404-36.729a78.44 78.44 0 0 1 70.058 78.517l-.285 65.113a78.75 78.75 0 0 1-15.324 46.262l8.24 43.835c4.301 14.496 9.597 21.436 21.433 21.436h6.444l-89.524 62.401a22.706 22.706 0 0 1-22.125 2.154 22.985 22.985 0 0 1-13.714-21.766 22.98 22.98 0 0 1 2.06-8.804c8.156-17.366 18.911-40.673 22.597-50.455 2.957-7.847-4.497-15.538-12.929-18.296a78.337 78.337 0 0 1-5.372-1.044c-.164 0-.331-.016-.498-.021l.057-.085.003-.006Z" fill="#894915"/><path d="M499.89 206.638c0-24.892 20.624-44.973 45.718-44.079 23.903.85 42.501 21.22 42.501 45.137v99.733c0 40.975 47.148 94.857 109.757 94.857 51.326 0 93.148-45.871 93.148-91.582 0-14.608-4.84-31.442-10.612-46.326a61.775 61.775 0 0 0-57.687-39.679v-.046a25.351 25.351 0 0 1-24.403-18.508c-5.425-19.304-13.939-47.59-18.822-53.627-13.175-16.298-29.999-19.136-42.958-18.19-12.567.925-25.066-3.231-34.731-11.318-12.074-10.093-31.682-20.741-59.108-18.081-54.897 5.331-81.467 68.801-42.803 102.806v-1.097Z" fill="#FFD03C"/><path d="m544.235 648.578 6.06-20.583c1.713-5.689 8.482-8.984 14.852-7.083 1.193.357 2.32.907 3.336 1.627a12.68 12.68 0 0 1 9.775-1.639c5.338 1.264 8.788 5.656 8.542 10.367a12.568 12.568 0 0 1 6.359 1.129c4.837 2.267 7.083 7.365 5.666 12.067l-.361 1.2c.08.018.16.027.229.046 6.156 1.457 9.809 7.083 8.164 12.546l-4.853 16.146-65.538-3.35s6.009-16.477 7.769-22.473" fill="#842306"/><path fill-rule="evenodd" clip-rule="evenodd" d="M794.51 319.469h.023s-3.59-16.909-6.663-31.407a6.855 6.855 0 0 0-12.933-1.417l-13.4 29.451-37.492-1.081-6.66-31.407a6.852 6.852 0 0 0-5.957-5.377 6.85 6.85 0 0 0-4.129.853 6.85 6.85 0 0 0-2.85 3.108l-36.989 81.247a28.247 28.247 0 0 0-1.444 19.494 28.259 28.259 0 0 0 11.557 15.766l3.581 2.371-121.276 262.123 194.176-24.87 16.098-41.198a493.41 493.41 0 0 0 30.635-235.66c-1.849-16.132-3.942-30.832-6.277-41.996Z" fill="#F2A068"/><path d="M297.328 363.199a6.942 6.942 0 1 0 0-13.884 6.942 6.942 0 0 0 0 13.884Z" fill="#666"/><path d="M789.706 625.226 663.321 642.93a49.191 49.191 0 0 1-16.109-.409l-11.708-2.251a49.199 49.199 0 0 0-32.134 4.744c-14.519 7.59-35.929 17.781-46.17 17.781h-17.535c-7.445 0-13.939 5.736-14.167 13.178a13.59 13.59 0 0 0 3.83 9.88 13.6 13.6 0 0 0 9.759 4.131h28.909c2.248 0 4.487.27 6.67.805l10.669 2.614a77.667 77.667 0 0 0 18.476 2.23h217.714l-31.832-70.407h.013Z" fill="#894915"/><path d="M532.62 303.419c1.787.351 3.608.504 5.429.457a25.29 25.29 0 0 0 17.014-7.209 2.774 2.774 0 0 0 .83-1.981 2.77 2.77 0 0 0-.83-1.981 2.853 2.853 0 0 0-4.005 0 19.426 19.426 0 0 1-26.552.644 2.857 2.857 0 0 0-4.001.192 2.773 2.773 0 0 0-.467 3.088 2.8 2.8 0 0 0 .661.877c3.375 3 7.492 5.041 11.923 5.909" fill="#842306"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.636)" d="M0 0h867.101v800H0z"/></clipPath></defs></svg>';
+defineCustomElement('sinch-illustration-phone-and-cat', createIllustrationClass(templateHTML));

package/illustration/types.d.ts

@@ -0,0 +1,7 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchIllustrationElement = HTMLElement & {
+    size: number;
+};
+export declare type TSinchIllustrationReact = TSinchElementReact<TSinchIllustrationElement> & {
+    size?: number;
+};

package/illustration/types.js

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

package/index.d.ts

@@ -5,6 +5,9 @@ import './alert';
 import './alert-button';
 import './alert-close';
 import './button';
+import './card';
+import './card-button';
+import './card-link';
 import './checkbox';
 import './input';
 import './help-tooltip';
@@ -21,6 +24,10 @@ import './toggle';
 import './tooltip';
 import './dropdown';
 import './dropdown-option';
+import './icon/arrow-back';
+import './icon/arrow-downward';
+import './icon/arrow-forward';
+import './icon/arrow-upward';
 import './icon/keyboard-arrow-down';
 import './icon/keyboard-arrow-left';
 import './icon/keyboard-arrow-right';
@@ -45,6 +52,7 @@ import './icon/south';
 import './icon/south-east';
 import './icon/south-west';
 import './icon/west';
+import './illustration/phone-and-cat';
 import './pagination';
 import './table';
 import './table-cell';
@@ -67,3 +75,4 @@ import './icon-branded/rocket';
 import './icon-branded/settings';
 import './icon-branded/user';
 import './icon-branded/users';
+import './dialog';

package/index.js

@@ -5,6 +5,9 @@ import './alert';
 import './alert-button';
 import './alert-close';
 import './button';
+import './card';
+import './card-button';
+import './card-link';
 import './checkbox';
 import './input';
 import './help-tooltip';
@@ -21,6 +24,10 @@ import './toggle';
 import './tooltip';
 import './dropdown';
 import './dropdown-option';
+import './icon/arrow-back';
+import './icon/arrow-downward';
+import './icon/arrow-forward';
+import './icon/arrow-upward';
 import './icon/keyboard-arrow-down';
 import './icon/keyboard-arrow-left';
 import './icon/keyboard-arrow-right';
@@ -45,6 +52,7 @@ import './icon/south';
 import './icon/south-east';
 import './icon/south-west';
 import './icon/west';
+import './illustration/phone-and-cat';
 import './pagination';
 import './table';
 import './table-cell';
@@ -66,4 +74,5 @@ import './icon-branded/multiple-channels';
 import './icon-branded/rocket';
 import './icon-branded/settings';
 import './icon-branded/user';
-import './icon-branded/users';
+import './icon-branded/users';
+import './dialog';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "files": [
     "theme.css",
     "**/*/*.js",

package/theme.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --sinch-theme: 1;
   --sinch-color-honey-700: #CC8800;
   --sinch-color-honey-600: #FFAA00;
@@ -73,7 +74,7 @@
   --sinch-font-title-2: 600 24px/32px "Gilroy", "Arial", "sans-serif";
   --sinch-font-title-3: 600 20px/24px "Gilroy", "Arial", "sans-serif";
   --sinch-font-title-4: 600 16px/24px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-5: 700 16px/24px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-5: 700 14px/22px "Gilroy", "Arial", "sans-serif";
   --sinch-font-body: 400 16px/24px "Gilroy", "Arial", "sans-serif";
   --sinch-font-emphasized-body: 600 16px/24px "Gilroy", "Arial", "sans-serif";
   --sinch-font-small-text: 400 14px/22px "Gilroy", "Arial", "sans-serif";