@nectary/components 0.22.0 → 0.24.0

package/icons-channel/wechat/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconChannelElement, TSinchIconChannelReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-channel-wechat': TSinchIconChannelReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-channel-wechat': TSinchIconChannelElement;
+    }
+}

package/icons-channel/wechat/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#2dc100" d="M24 48c13.3 0 24-10.7 24-24S37.3 0 24 0 0 10.7 0 24s10.7 24 24 24z"/><g fill="#fff"><path d="M29.8 19.6c-2.8.1-5.1 1-7.1 2.9s-2.9 4.2-2.6 7.1c-1.1-.1-2.1-.3-3-.4-.3 0-.7 0-1 .2-1 .5-1.9 1.1-3 1.8.2-.9.3-1.7.6-2.5.2-.6.1-.9-.4-1.2-3.3-2.3-4.7-5.8-3.7-9.4 1-3.3 3.3-5.3 6.5-6.4 4.4-1.4 9.3 0 12 3.5 1 1.3 1.6 2.7 1.7 4.4zm-12.6-1.1c0-.7-.5-1.2-1.2-1.3-.7 0-1.3.5-1.3 1.2s.5 1.2 1.2 1.3c.7 0 1.2-.5 1.3-1.2zm6.6-1.3c-.7 0-1.3.6-1.2 1.2 0 .7.6 1.2 1.3 1.2.7 0 1.2-.5 1.2-1.2-.1-.7-.6-1.2-1.3-1.2z"/><path d="M36 36.7c-.9-.4-1.7-1-2.5-1.1-.8-.1-1.7.4-2.6.5-2.7.3-5.1-.5-7.1-2.3-3.8-3.5-3.3-8.9 1.1-11.8 3.9-2.6 9.6-1.7 12.4 1.8 2.4 3.1 2.1 7.2-.8 9.8-.8.8-1.2 1.4-.6 2.4 0 .3 0 .5.1.7zm-9.9-9.6c.6 0 1-.4 1-1s-.4-1.1-1-1.1-1.1.5-1 1.1c0 .6.4 1 1 1zm6.4-2c-.5 0-1 .4-1 1s.4 1.1 1 1.1 1-.4 1-1-.4-1.1-1-1.1z"/></g></svg>';
+defineCustomElement('sinch-icon-channel-wechat', createIconClass(templateHTML));

package/icons-channel/whatsapp/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconChannelElement, TSinchIconChannelReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-channel-whatsapp': TSinchIconChannelReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-channel-whatsapp': TSinchIconChannelElement;
+    }
+}

package/icons-channel/whatsapp/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false"><path fill="#00d741" d="M24 48c13.3 0 24-10.7 24-24S37.3 0 24 0 0 10.7 0 24s10.7 24 24 24z"/><path fill="#fff" fill-rule="evenodd" d="M33.5 14.6c-2.6-2.6-6-4-9.6-4-7.5 0-13.5 6.1-13.5 13.5 0 2.4.6 4.7 1.8 6.8l-1.9 7 7.2-1.9c2 1.1 4.2 1.6 6.5 1.6 7.5 0 13.5-6.1 13.5-13.5-.1-3.6-1.5-7-4-9.5zm-9.6 20.8c-2 0-4-.5-5.7-1.6l-.4-.2-4.3 1.1 1.1-4.2-.3-.4c-1.1-1.8-1.7-3.9-1.7-6 0-6.2 5.1-11.3 11.3-11.3 3 0 5.8 1.2 8 3.3 2.1 2.1 3.3 5 3.3 8 0 6.3-5.1 11.3-11.3 11.3zm6.2-8.4c-.3-.2-2-1-2.3-1.1-.3-.1-.5-.2-.8.2-.2.3-.9 1.1-1.1 1.3-.2.2-.4.3-.7.1-.3-.2-1.4-.5-2.7-1.7-1-.9-1.7-2-1.9-2.3-.2-.3 0-.5.1-.7.2-.2.3-.4.5-.6.2-.2.2-.3.3-.6.1-.2.1-.4 0-.6-.1-.2-.8-1.8-1-2.5-.3-.7-.6-.6-.8-.6h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.8 0 1.7 1.2 3.3 1.4 3.5.2.2 2.4 3.6 5.8 5.1.8.3 1.4.6 1.9.7.8.3 1.5.2 2.1.1.7-.1 2-.8 2.3-1.6.3-.8.3-1.5.2-1.6-.1-.1-.3-.2-.6-.3z" clip-rule="evenodd"/></svg>';
+defineCustomElement('sinch-icon-channel-whatsapp', createIconClass(templateHTML));

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

@@ -4,6 +4,7 @@ export declare const createIllustrationClass: (templateHTML: string) => {
         size: number;
         connectedCallback(): void;
         attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+        attachShadow(): ShadowRoot;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -50,7 +51,6 @@ export declare const createIllustrationClass: (templateHTML: string) => {
         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;

package/illustration/create-illustration-class.js

@@ -1,4 +1,4 @@
-import { getIntegerAttribute, updateAttribute, updateIntegerAttribute } from '../utils';
+import { getIntegerAttribute, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
 const illustrationStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none}</style>';
 const DEFAULT_SIZE = 256;
 const MIN_SIZE = 16;
@@ -6,12 +6,10 @@ const MAX_SIZE = 2048;
 export const createIllustrationClass = templateHTML => {
   const template = document.createElement('template');
   template.innerHTML = illustrationStylesHtml + templateHTML;
-  return class extends HTMLElement {
+  return class extends NectaryElement {
     constructor() {
       super();
-      const shadowRoot = this.attachShadow({
-        mode: 'closed'
-      });
+      const shadowRoot = this.attachShadow();
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }

package/index.d.ts

@@ -25,90 +25,124 @@ 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';
-import './icon/keyboard-arrow-up';
-import './icon/chevron-left';
-import './icon/chevron-right';
-import './icon/expand-less';
-import './icon/expand-more';
-import './icon/arrow-back-ios';
-import './icon/arrow-forward-ios';
-import './icon/cancel';
-import './icon/close';
-import './icon/east';
-import './icon/help-outline';
-import './icon/more-horiz';
-import './icon/more-vert';
-import './icon/north';
-import './icon/north-east';
-import './icon/north-west';
-import './icon/open-in-new';
-import './icon/search';
-import './icon/south';
-import './icon/south-east';
-import './icon/south-west';
-import './icon/west';
-import './icon/add-alert';
-import './icon/auto-delete';
-import './icon/error';
-import './icon/error-outline';
-import './icon/notification-important';
-import './icon/attach-email';
-import './icon/attachment';
-import './icon/cloud';
-import './icon/cloud-circle';
-import './icon/cloud-done';
-import './icon/cloud-download';
-import './icon/cloud-off';
-import './icon/cloud-queue';
-import './icon/cloud-upload';
-import './icon/create-new-folder';
-import './icon/download';
-import './icon/download-done';
-import './icon/folder';
-import './icon/folder-open';
-import './icon/folder-shared';
-import './icon/request-quote';
-import './icon/rule-folder';
-import './icon/snippet-folder';
-import './icon/text-snippet';
-import './icon/topic';
-import './icon/upload';
-import './icon/app-settings-alt';
-import './icon/apps';
-import './icon/arrow-drop-down';
-import './icon/arrow-drop-down-circle';
-import './icon/arrow-drop-up';
-import './icon/arrow-left';
-import './icon/arrow-right';
-import './icon/campaign';
-import './icon/check';
-import './icon/double-arrow';
-import './icon/filter-list';
-import './icon/first-page';
-import './icon/fullscreen';
-import './icon/fullscreen-exit';
-import './icon/home-work';
-import './icon/last-page';
-import './icon/legend-toggle';
-import './icon/menu';
-import './icon/menu-open';
-import './icon/payments';
-import './icon/refresh';
-import './icon/subdirectory-arrow-left';
-import './icon/subdirectory-arrow-right';
-import './icon/switch-left';
-import './icon/switch-right';
-import './icon/unfold-less';
-import './icon/unfold-more';
-import './icon/warning';
-import './icon/warning-amber';
+import './icons/alt-route';
+import './icons/arrow-back';
+import './icons/arrow-downward';
+import './icons/arrow-forward';
+import './icons/arrow-upward';
+import './icons/keyboard-arrow-down';
+import './icons/keyboard-arrow-left';
+import './icons/keyboard-arrow-right';
+import './icons/keyboard-arrow-up';
+import './icons/chevron-left';
+import './icons/chevron-right';
+import './icons/expand-less';
+import './icons/expand-more';
+import './icons/arrow-back-ios';
+import './icons/arrow-forward-ios';
+import './icons/play-circle-outline';
+import './icons/pause-circle-outline';
+import './icons/check-circle-outline';
+import './icons/cancel';
+import './icons/close';
+import './icons/east';
+import './icons/help-outline';
+import './icons/more-horiz';
+import './icons/more-vert';
+import './icons/north';
+import './icons/north-east';
+import './icons/north-west';
+import './icons/open-in-new';
+import './icons/search';
+import './icons/south';
+import './icons/south-east';
+import './icons/south-west';
+import './icons/west';
+import './icons/add-alert';
+import './icons/auto-delete';
+import './icons/error';
+import './icons/error-outline';
+import './icons/notification-important';
+import './icons/attach-email';
+import './icons/attachment';
+import './icons/cloud';
+import './icons/cloud-circle';
+import './icons/cloud-done';
+import './icons/cloud-download';
+import './icons/cloud-off';
+import './icons/cloud-queue';
+import './icons/cloud-upload';
+import './icons/create-new-folder';
+import './icons/download';
+import './icons/download-done';
+import './icons/folder';
+import './icons/folder-open';
+import './icons/folder-shared';
+import './icons/request-quote';
+import './icons/rule-folder';
+import './icons/snippet-folder';
+import './icons/text-snippet';
+import './icons/topic';
+import './icons/upload';
+import './icons/access-time';
+import './icons/app-settings-alt';
+import './icons/apps';
+import './icons/add-comment';
+import './icons/arrow-drop-down';
+import './icons/arrow-drop-down-circle';
+import './icons/arrow-drop-up';
+import './icons/arrow-left';
+import './icons/arrow-right';
+import './icons/assignment';
+import './icons/campaign';
+import './icons/check';
+import './icons/comment';
+import './icons/double-arrow';
+import './icons/filter-list';
+import './icons/first-page';
+import './icons/fullscreen';
+import './icons/fullscreen-exit';
+import './icons/home-work';
+import './icons/last-page';
+import './icons/legend-toggle';
+import './icons/menu';
+import './icons/menu-open';
+import './icons/notes';
+import './icons/payments';
+import './icons/refresh';
+import './icons/star-outline';
+import './icons/subdirectory-arrow-left';
+import './icons/subdirectory-arrow-right';
+import './icons/unfold-less';
+import './icons/unfold-more';
+import './icons/warning';
+import './icons/warning-amber';
+import './icons/send';
+import './icons/undo';
+import './icons/mark-chat-unread';
+import './icons/switch-right';
+import './icons/switch-left';
+import './icons/volume-up';
+import './icons/volume-off';
+import './icons/update';
+import './icons/swap-vert';
+import './icons/stop';
+import './icons/settings';
+import './icons/notifications-none';
+import './icons/more-time';
+import './icons/mic-none';
+import './icons/mark-chat-read';
+import './icons/insert-emoticon';
+import './icons/done-all';
+import './icons/create';
+import './icons/chat';
+import './icons/reply';
+import './icons/local-offer';
+import './icons/info-outline';
+import './icons/history';
+import './icons/forum';
+import './icons/chat-bubble-outline';
+import './icons/star';
 import './illustration/phone-and-cat';
 import './pagination';
 import './table';
@@ -120,17 +154,28 @@ import './table-row';
 import './spinner';
 import './logo/sinch-icon';
 import './logo/sinch-icon-wordmark';
-import './icon-branded/barchart-down';
-import './icon-branded/barchart-up';
-import './icon-branded/campaigns';
-import './icon-branded/chatbot';
-import './icon-branded/contact';
-import './icon-branded/home';
-import './icon-branded/multiple-channels';
-import './icon-branded/rocket';
-import './icon-branded/settings';
-import './icon-branded/user';
-import './icon-branded/users';
+import './icons-branded/barchart-down';
+import './icons-branded/barchart-up';
+import './icons-branded/campaigns';
+import './icons-branded/chatbot';
+import './icons-branded/contact';
+import './icons-branded/home';
+import './icons-branded/multiple-channels';
+import './icons-branded/rocket';
+import './icons-branded/settings';
+import './icons-branded/user';
+import './icons-branded/users';
+import './icons-branded/bell';
+import './icons-channel/telegram';
+import './icons-channel/apple-business-chat';
+import './icons-channel/facebook-messenger';
+import './icons-channel/instagram';
+import './icons-channel/line';
+import './icons-channel/talk';
+import './icons-channel/twitter';
+import './icons-channel/viber';
+import './icons-channel/wechat';
+import './icons-channel/whatsapp';
 import './dialog';
 import './grid';
 import './grid-item';

package/index.js

@@ -25,90 +25,124 @@ 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';
-import './icon/keyboard-arrow-up';
-import './icon/chevron-left';
-import './icon/chevron-right';
-import './icon/expand-less';
-import './icon/expand-more';
-import './icon/arrow-back-ios';
-import './icon/arrow-forward-ios';
-import './icon/cancel';
-import './icon/close';
-import './icon/east';
-import './icon/help-outline';
-import './icon/more-horiz';
-import './icon/more-vert';
-import './icon/north';
-import './icon/north-east';
-import './icon/north-west';
-import './icon/open-in-new';
-import './icon/search';
-import './icon/south';
-import './icon/south-east';
-import './icon/south-west';
-import './icon/west';
-import './icon/add-alert';
-import './icon/auto-delete';
-import './icon/error';
-import './icon/error-outline';
-import './icon/notification-important';
-import './icon/attach-email';
-import './icon/attachment';
-import './icon/cloud';
-import './icon/cloud-circle';
-import './icon/cloud-done';
-import './icon/cloud-download';
-import './icon/cloud-off';
-import './icon/cloud-queue';
-import './icon/cloud-upload';
-import './icon/create-new-folder';
-import './icon/download';
-import './icon/download-done';
-import './icon/folder';
-import './icon/folder-open';
-import './icon/folder-shared';
-import './icon/request-quote';
-import './icon/rule-folder';
-import './icon/snippet-folder';
-import './icon/text-snippet';
-import './icon/topic';
-import './icon/upload';
-import './icon/app-settings-alt';
-import './icon/apps';
-import './icon/arrow-drop-down';
-import './icon/arrow-drop-down-circle';
-import './icon/arrow-drop-up';
-import './icon/arrow-left';
-import './icon/arrow-right';
-import './icon/campaign';
-import './icon/check';
-import './icon/double-arrow';
-import './icon/filter-list';
-import './icon/first-page';
-import './icon/fullscreen';
-import './icon/fullscreen-exit';
-import './icon/home-work';
-import './icon/last-page';
-import './icon/legend-toggle';
-import './icon/menu';
-import './icon/menu-open';
-import './icon/payments';
-import './icon/refresh';
-import './icon/subdirectory-arrow-left';
-import './icon/subdirectory-arrow-right';
-import './icon/switch-left';
-import './icon/switch-right';
-import './icon/unfold-less';
-import './icon/unfold-more';
-import './icon/warning';
-import './icon/warning-amber';
+import './icons/alt-route';
+import './icons/arrow-back';
+import './icons/arrow-downward';
+import './icons/arrow-forward';
+import './icons/arrow-upward';
+import './icons/keyboard-arrow-down';
+import './icons/keyboard-arrow-left';
+import './icons/keyboard-arrow-right';
+import './icons/keyboard-arrow-up';
+import './icons/chevron-left';
+import './icons/chevron-right';
+import './icons/expand-less';
+import './icons/expand-more';
+import './icons/arrow-back-ios';
+import './icons/arrow-forward-ios';
+import './icons/play-circle-outline';
+import './icons/pause-circle-outline';
+import './icons/check-circle-outline';
+import './icons/cancel';
+import './icons/close';
+import './icons/east';
+import './icons/help-outline';
+import './icons/more-horiz';
+import './icons/more-vert';
+import './icons/north';
+import './icons/north-east';
+import './icons/north-west';
+import './icons/open-in-new';
+import './icons/search';
+import './icons/south';
+import './icons/south-east';
+import './icons/south-west';
+import './icons/west';
+import './icons/add-alert';
+import './icons/auto-delete';
+import './icons/error';
+import './icons/error-outline';
+import './icons/notification-important';
+import './icons/attach-email';
+import './icons/attachment';
+import './icons/cloud';
+import './icons/cloud-circle';
+import './icons/cloud-done';
+import './icons/cloud-download';
+import './icons/cloud-off';
+import './icons/cloud-queue';
+import './icons/cloud-upload';
+import './icons/create-new-folder';
+import './icons/download';
+import './icons/download-done';
+import './icons/folder';
+import './icons/folder-open';
+import './icons/folder-shared';
+import './icons/request-quote';
+import './icons/rule-folder';
+import './icons/snippet-folder';
+import './icons/text-snippet';
+import './icons/topic';
+import './icons/upload';
+import './icons/access-time';
+import './icons/app-settings-alt';
+import './icons/apps';
+import './icons/add-comment';
+import './icons/arrow-drop-down';
+import './icons/arrow-drop-down-circle';
+import './icons/arrow-drop-up';
+import './icons/arrow-left';
+import './icons/arrow-right';
+import './icons/assignment';
+import './icons/campaign';
+import './icons/check';
+import './icons/comment';
+import './icons/double-arrow';
+import './icons/filter-list';
+import './icons/first-page';
+import './icons/fullscreen';
+import './icons/fullscreen-exit';
+import './icons/home-work';
+import './icons/last-page';
+import './icons/legend-toggle';
+import './icons/menu';
+import './icons/menu-open';
+import './icons/notes';
+import './icons/payments';
+import './icons/refresh';
+import './icons/star-outline';
+import './icons/subdirectory-arrow-left';
+import './icons/subdirectory-arrow-right';
+import './icons/unfold-less';
+import './icons/unfold-more';
+import './icons/warning';
+import './icons/warning-amber';
+import './icons/send';
+import './icons/undo';
+import './icons/mark-chat-unread';
+import './icons/switch-right';
+import './icons/switch-left';
+import './icons/volume-up';
+import './icons/volume-off';
+import './icons/update';
+import './icons/swap-vert';
+import './icons/stop';
+import './icons/settings';
+import './icons/notifications-none';
+import './icons/more-time';
+import './icons/mic-none';
+import './icons/mark-chat-read';
+import './icons/insert-emoticon';
+import './icons/done-all';
+import './icons/create';
+import './icons/chat';
+import './icons/reply';
+import './icons/local-offer';
+import './icons/info-outline';
+import './icons/history';
+import './icons/forum';
+import './icons/chat-bubble-outline';
+import './icons/star';
 import './illustration/phone-and-cat';
 import './pagination';
 import './table';
@@ -120,17 +154,28 @@ import './table-row';
 import './spinner';
 import './logo/sinch-icon';
 import './logo/sinch-icon-wordmark';
-import './icon-branded/barchart-down';
-import './icon-branded/barchart-up';
-import './icon-branded/campaigns';
-import './icon-branded/chatbot';
-import './icon-branded/contact';
-import './icon-branded/home';
-import './icon-branded/multiple-channels';
-import './icon-branded/rocket';
-import './icon-branded/settings';
-import './icon-branded/user';
-import './icon-branded/users';
+import './icons-branded/barchart-down';
+import './icons-branded/barchart-up';
+import './icons-branded/campaigns';
+import './icons-branded/chatbot';
+import './icons-branded/contact';
+import './icons-branded/home';
+import './icons-branded/multiple-channels';
+import './icons-branded/rocket';
+import './icons-branded/settings';
+import './icons-branded/user';
+import './icons-branded/users';
+import './icons-branded/bell';
+import './icons-channel/telegram';
+import './icons-channel/apple-business-chat';
+import './icons-channel/facebook-messenger';
+import './icons-channel/instagram';
+import './icons-channel/line';
+import './icons-channel/talk';
+import './icons-channel/twitter';
+import './icons-channel/viber';
+import './icons-channel/wechat';
+import './icons-channel/whatsapp';
 import './dialog';
 import './grid';
 import './grid-item';

package/input/index.js

@@ -7,12 +7,12 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const inputTypes = ['text', 'password'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -105,10 +105,7 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       }
     });
 
-    const shadowRoot = this.attachShadow({
-      mode: 'closed',
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));

package/link/index.d.ts

@@ -1,4 +1,4 @@
-import '../icon/cancel';
+import '../icons/cancel';
 import type { TSinchElementReact } from '../types';
 import type { FocusEvent, MouseEvent } from 'react';
 export declare type TSinchLinkElement = HTMLElement & {