@nectary/components 2.8.7 → 2.9.0

package/button/types.d.ts

@@ -1,53 +0,0 @@
-import type { TSinchElementReact } from '../types';
-import type { TSinchSizeEx } from '../utils/size';
-export type TSinchButtonType = 'primary' | 'secondary'
-/** @deprecated */
- | 'tertiary' | 'subtle-primary' | 'subtle-secondary' | 'cta-primary' | 'cta-secondary' | 'destructive';
-export type TSinchButtonElement = HTMLElement & {
-    /** Button Type */
-    type: TSinchButtonType;
-    /** Size, `m` by default */
-    size: TSinchSizeEx;
-    /** Text content */
-    text: string;
-    /** Disabled */
-    disabled: boolean;
-    /** Toggled (pressed) */
-    toggled: boolean;
-    /** Click event */
-    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
-    /** Focus event */
-    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
-    /** Blur event */
-    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    /** Type, `primary` by default */
-    setAttribute(attr: 'type', value: TSinchButtonType): void;
-    /** Size, `m` by default */
-    setAttribute(attr: 'size', value: TSinchSizeEx): void;
-    /** Text content */
-    setAttribute(attr: 'text', value: string): void;
-    /** Disabled */
-    setAttribute(attr: 'disabled', value: ''): void;
-    /** Toggled (pressed) */
-    setAttribute(attr: 'toggled', value: ''): void;
-};
-export type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
-    /** Button Type */
-    type?: TSinchButtonType;
-    /** Size, `m` by default */
-    size?: TSinchSizeEx;
-    /** Text content */
-    text?: string;
-    /** Label that is used for a11y */
-    'aria-label': string;
-    /** Disabled */
-    disabled?: boolean;
-    /** Toggled (pressed) */
-    toggled?: boolean;
-    /** Click event handler */
-    'on-click'?: (e: CustomEvent<void>) => void;
-    /** Focus event handler */
-    'on-focus'?: (e: CustomEvent<void>) => void;
-    /** Blur event handler */
-    'on-blur'?: (e: CustomEvent<void>) => void;
-};

package/button/types.js

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

package/button/utils.d.ts

@@ -1,2 +0,0 @@
-import type { TSinchButtonType } from './types';
-export declare const typeValues: readonly TSinchButtonType[];

package/button/utils.js

@@ -1 +0,0 @@
-export const typeValues = ['primary', 'secondary', 'subtle-primary', 'subtle-secondary', 'cta-primary', 'cta-secondary', 'destructive'];

package/card/index.d.ts

@@ -1,13 +0,0 @@
-import '../title';
-import '../text';
-import type { TSinchCardElement, TSinchCardReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-card': TSinchCardReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-card': TSinchCardElement;
-    }
-}

package/card/index.js

@@ -1,133 +0,0 @@
-import '../title';
-import '../text';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateAttribute, setClass, NectaryElement, isAttrTrue, getRect, isAttrEqual, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-white-default-border-initial);background-color:var(--sinch-comp-card-color-white-default-background-initial);box-shadow:var(--sinch-comp-card-shadow-initial);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-comp-card-shadow-hover)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{--sinch-comp-text-font:var(--sinch-comp-card-font-label);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-title-initial)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-global-size-icon:var(--sinch-comp-card-size-icon)}#caption{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-card-font-title);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-title-initial)}#description{flex:1;min-height:0;max-height:120px;overflow-y:auto;--sinch-comp-text-font:var(--sinch-comp-card-font-description);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-description-initial)}#description:empty{display:none}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}:host([draggable=true]) #header{cursor:grab}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-card', class extends NectaryElement {
-  #$text;
-  #$label;
-  #$caption;
-  #$header;
-  #$cardBody;
-  #$iconSlot;
-  #$illustrationSlot;
-  #$illustrationSlotWrapper;
-  #isDraggingCorrectHandle = false;
-  #isDraggingSubscribed = false;
-  #controller = null;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#description');
-    this.#$label = shadowRoot.querySelector('#label');
-    this.#$caption = shadowRoot.querySelector('#caption');
-    this.#$header = shadowRoot.querySelector('#header');
-    this.#$cardBody = shadowRoot.querySelector('#wrapper');
-    this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');
-    this.#$illustrationSlot = shadowRoot.querySelector('slot[name="illustration"]');
-    this.#$illustrationSlotWrapper = shadowRoot.querySelector('#illustration-wrapper');
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#controller = new AbortController();
-    const options = {
-      signal: this.#controller.signal
-    };
-    this.#$illustrationSlot.addEventListener('slotchange', this.#onIllustrationSlotChange, options);
-    this.#onIllustrationSlotChange();
-    if (getBooleanAttribute(this, 'draggable')) {
-      this.#enableDraggable();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#disableDragging();
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  static get observedAttributes() {
-    return ['text', 'label', 'caption', 'draggable'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'label':
-        {
-          this.#$label.textContent = newVal;
-          break;
-        }
-      case 'caption':
-        {
-          updateAttribute(this.#$caption, 'text', newVal);
-          break;
-        }
-      case 'draggable':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            return;
-          }
-          const isDraggingEnabled = isAttrTrue(newVal);
-          if (isDraggingEnabled) {
-            this.#enableDraggable();
-          } else {
-            this.#disableDragging();
-          }
-          updateBooleanAttribute(this, name, isDraggingEnabled);
-          break;
-        }
-    }
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  set caption(value) {
-    updateAttribute(this, 'caption', value);
-  }
-  get caption() {
-    return getAttribute(this, 'caption', '');
-  }
-  set label(value) {
-    updateAttribute(this, 'label', value);
-  }
-  get label() {
-    return getAttribute(this, 'label', '');
-  }
-  get dragRect() {
-    return this.#isDraggingSubscribed ? getRect(this.#$header) : null;
-  }
-  #onIllustrationSlotChange = () => {
-    setClass(this.#$illustrationSlotWrapper, 'active', this.#$illustrationSlot.assignedElements().length > 0);
-  };
-  #enableDraggable() {
-    if (this.isDomConnected && !this.#isDraggingSubscribed) {
-      this.addEventListener('dragstart', this.#onDragStart);
-      this.#$cardBody.addEventListener('mousedown', this.#onDraggableMouseDown);
-      this.#isDraggingSubscribed = true;
-    }
-  }
-  #disableDragging() {
-    if (this.#isDraggingSubscribed) {
-      this.removeEventListener('dragstart', this.#onDragStart);
-      this.#$cardBody.removeEventListener('mousedown', this.#onDraggableMouseDown);
-      this.#isDraggingSubscribed = false;
-    }
-  }
-  #onDraggableMouseDown = e => {
-    this.#isDraggingCorrectHandle = this.#$header.contains(e.target) || this.#$iconSlot.assignedElements().includes(e.target);
-  };
-  #onDragStart = e => {
-    if (!this.#isDraggingCorrectHandle) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-});

package/card/types.d.ts

@@ -1,28 +0,0 @@
-import type { TRect, TSinchElementReact } from '../types';
-export type TSinchCardElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Caption */
-    caption: string;
-    /** Label */
-    label: string | null;
-    readonly dragRect: TRect | null;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Caption */
-    setAttribute(name: 'caption', value: string): void;
-    /** Label */
-    setAttribute(name: 'label', value: string): void;
-    /** Draggable */
-    setAttribute(name: 'draggable', value: ''): void;
-};
-export type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
-    /** Text */
-    text: string;
-    /** Caption */
-    caption: string;
-    /** Label */
-    label?: string;
-    /** Draggable */
-    draggable?: boolean;
-};

package/card/types.js

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

package/card-container/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchCardContainerElement, TSinchCardContainerReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-card-container': TSinchCardContainerReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-card-container': TSinchCardContainerElement;
-    }
-}

package/card-container/index.js

@@ -1,11 +0,0 @@
-import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-comp-card-color-white-default-background-initial);border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-white-default-border-initial)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-card-container', class extends NectaryElement {
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-});

package/card-container/types.d.ts

@@ -1,3 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchCardContainerElement = HTMLElement;
-export type TSinchCardContainerReact = TSinchElementReact<TSinchCardContainerElement>;

package/card-container/types.js

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

package/chat/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchChatElement, TSinchChatReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-chat': TSinchChatReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-chat': TSinchChatElement;
-    }
-}

package/chat/index.js

@@ -1,11 +0,0 @@
-import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;gap:32px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-chat', class extends NectaryElement {
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-});

package/chat/types.d.ts

@@ -1,3 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchChatElement = HTMLElement;
-export type TSinchChatReact = TSinchElementReact<TSinchChatElement>;

package/chat/types.js

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

package/chat-block/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchChatBlockElement, TSinchChatBlockReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-chat-block': TSinchChatBlockReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-chat-block': TSinchChatBlockElement;
-    }
-}

package/chat-block/index.js

@@ -1,86 +0,0 @@
-import { typeValues } from '../chat-bubble/utils';
-import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-sys-font-body-xs);color:var(--sinch-sys-color-text-default)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-chat-block', class extends NectaryElement {
-  #$firstName;
-  #$lastName;
-  #$timeStamp;
-  #$bubbleSlot;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$firstName = shadowRoot.querySelector('#firstname');
-    this.#$lastName = shadowRoot.querySelector('#lastname');
-    this.#$timeStamp = shadowRoot.querySelector('#time');
-    this.#$bubbleSlot = shadowRoot.querySelector('slot[name="bubble"]');
-  }
-  connectedCallback() {
-    this.#$bubbleSlot.addEventListener('slotchange', this.#onBubbleSlotChange);
-  }
-  disconnectedCallback() {
-    this.#$bubbleSlot.removeEventListener('slotchange', this.#onBubbleSlotChange);
-  }
-  static get observedAttributes() {
-    return ['firstname', 'lastname', 'timestamp', 'type'];
-  }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'firstname':
-        {
-          this.#$firstName.textContent = newVal;
-          break;
-        }
-      case 'lastname':
-        {
-          this.#$lastName.textContent = newVal;
-          break;
-        }
-      case 'timestamp':
-        {
-          this.#$timeStamp.textContent = newVal;
-          break;
-        }
-      case 'type':
-        {
-          this.#updateBubbleTypes();
-          break;
-        }
-    }
-  }
-  set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
-  }
-  get type() {
-    return getLiteralAttribute(this, typeValues, 'type', null);
-  }
-  set firstName(value) {
-    updateAttribute(this, 'firstname', value);
-  }
-  get firstName() {
-    return getAttribute(this, 'firstname');
-  }
-  set lastName(value) {
-    updateAttribute(this, 'lastname', value);
-  }
-  get lastName() {
-    return getAttribute(this, 'lastname');
-  }
-  set timestamp(value) {
-    updateAttribute(this, 'timestamp', value);
-  }
-  get timestamp() {
-    return getAttribute(this, 'timestamp');
-  }
-  #onBubbleSlotChange = () => {
-    this.#updateBubbleTypes();
-  };
-  #updateBubbleTypes() {
-    const typeValue = getAttribute(this, 'type');
-    this.#$bubbleSlot.assignedElements().forEach(el => {
-      updateAttribute(el, 'data-type', typeValue);
-    });
-  }
-});

package/chat-block/types.d.ts

@@ -1,30 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchChatBlockType = 'customer' | 'agent' | 'agent-prev';
-export type TSinchChatBlockElement = HTMLElement & {
-    /** Type */
-    type: TSinchChatBlockType | null;
-    /** First name */
-    firstName: string | null;
-    /** Last name */
-    lastName: string | null;
-    /** Timestamp */
-    timestamp: string | null;
-    /** Type */
-    setAttribute(name: 'type', value: TSinchChatBlockType): void;
-    /** First name */
-    setAttribute(name: 'firstName', value: string): void;
-    /** Last name */
-    setAttribute(name: 'lastName', value: string): void;
-    /** Timestamp */
-    setAttribute(name: 'timestamp', value: string): void;
-};
-export type TSinchChatBlockReact = TSinchElementReact<TSinchChatBlockElement> & {
-    /** Type */
-    type: TSinchChatBlockType;
-    /** First name */
-    firstName?: string;
-    /** Last name */
-    lastName?: string;
-    /** Timestamp */
-    timestamp?: string;
-};

package/chat-block/types.js

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

package/chat-bubble/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchChatBubbleElement, TSinchChatBubbleReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-chat-bubble': TSinchChatBubbleReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-chat-bubble': TSinchChatBubbleElement;
-    }
-}

package/chat-bubble/index.js

@@ -1,41 +0,0 @@
-import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;padding:12px 16px;border-radius:16px;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#wrapper{background-color:var(--sinch-sys-color-container-contrast-primary-default);border-top-left-radius:0}:host([data-type=agent-prev])>#wrapper{background-color:var(--sinch-sys-color-container-contrast-primary-active);border-top-right-radius:0}:host([data-type=agent])>#wrapper{background-color:var(--sinch-sys-color-container-complement-primary-hover);border-top-right-radius:0}#text{--sinch-global-color-text:var(--sinch-sys-color-text-default)}#icon-error,#icon-received,#icon-seen,#icon-sending,#icon-sent{display:none;position:absolute;right:16px;bottom:12px;height:16px}#icon-sending{fill:var(--sinch-sys-color-text-default)}#icon-sent{fill:var(--sinch-sys-color-text-default)}#icon-received{fill:var(--sinch-sys-color-text-default)}#icon-seen{fill:var(--sinch-sys-color-feedback-success-contrast)}#icon-error{fill:var(--sinch-sys-color-feedback-invalid-contrast)}:host([status=error]) #icon-error,:host([status=received]) #icon-received,:host([status=seen]) #icon-seen,:host([status=sending]) #icon-sending,:host([status=sent]) #icon-sent{display:block}:host([status]:not([status=""])) #wrapper{padding-right:42px}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><svg id="icon-sending" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24a.71.71 0 0 0-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72Z"/></svg><svg id="icon-sent" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg><svg id="icon-received" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.3 6.3a.996.996 0 0 0-1.41 0l-5.64 5.64 1.41 1.41L17.3 7.7c.38-.38.38-1.02 0-1.4Zm4.24-.01-9.88 9.88-3.48-3.47a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L22.95 7.71a.996.996 0 0 0 0-1.41h-.01a.975.975 0 0 0-1.4-.01ZM1.12 14.12 5.3 18.3c.39.39 1.02.39 1.41 0l.7-.7-4.88-4.9a.996.996 0 0 0-1.41 0c-.39.39-.39 1.03 0 1.42Z"/></svg><svg id="icon-seen" id="icon-received" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.3 6.3a.996.996 0 0 0-1.41 0l-5.64 5.64 1.41 1.41L17.3 7.7c.38-.38.38-1.02 0-1.4Zm4.24-.01-9.88 9.88-3.48-3.47a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L22.95 7.71a.996.996 0 0 0 0-1.41h-.01a.975.975 0 0 0-1.4-.01ZM1.12 14.12 5.3 18.3c.39.39 1.02.39 1.41 0l.7-.7-4.88-4.9a.996.996 0 0 0-1.41 0c-.39.39-.39 1.03 0 1.42Z"/></svg><svg id="icon-error" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 7c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V8c0-.55.45-1 1-1Zm-.01-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm1-3h-2v-2h2v2Z"/></svg></div>';
-import { statusValues, typeValues } from './utils';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
-  #$text;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#text');
-  }
-  static get observedAttributes() {
-    return ['text'];
-  }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-    }
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  get type() {
-    return getLiteralAttribute(this, typeValues, 'data-type', null);
-  }
-  set status(value) {
-    updateLiteralAttribute(this, statusValues, 'status', value);
-  }
-  get status() {
-    return getLiteralAttribute(this, statusValues, 'status', null);
-  }
-});

package/chat-bubble/types.d.ts

@@ -1,20 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchChatBubbleType = 'customer' | 'agent' | 'agent-prev';
-export type TSinchChatBubbleStatus = 'sending' | 'sent' | 'received' | 'seen' | 'error';
-export type TSinchChatBubbleElement = HTMLElement & {
-    readonly type: TSinchChatBubbleType | null;
-    /** Text */
-    text: string;
-    /** Status */
-    status: TSinchChatBubbleStatus | null;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Status */
-    setAttribute(name: 'status', value: TSinchChatBubbleStatus): void;
-};
-export type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
-    /** Text */
-    text: string;
-    /** Status */
-    status?: TSinchChatBubbleStatus;
-};

package/chat-bubble/types.js

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

package/chat-bubble/utils.d.ts

@@ -1,3 +0,0 @@
-import type { TSinchChatBubbleStatus, TSinchChatBubbleType } from './types';
-export declare const typeValues: readonly TSinchChatBubbleType[];
-export declare const statusValues: readonly TSinchChatBubbleStatus[];

package/chat-bubble/utils.js

@@ -1,2 +0,0 @@
-export const typeValues = ['customer', 'agent', 'agent-prev'];
-export const statusValues = ['sending', 'sent', 'received', 'seen', 'error'];

package/checkbox/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchCheckboxElement, TSinchCheckboxReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-checkbox': TSinchCheckboxReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-checkbox': TSinchCheckboxElement;
-    }
-}