@nectary/components 0.26.0 → 0.28.0

package/dropdown-radio-option/index.js

@@ -0,0 +1,96 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text;
+
+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, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:4px 12px 4px 6px;align-items:center;gap:6px;user-select:none;cursor:pointer}#text{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-container{position:relative;width:32px;height:32px}#icon-container::before{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-snow-100);box-shadow:0 0 0 2px var(--sinch-color-stormy-300) inset;transition:background-color .1s linear}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-tropical-500);pointer-events:none}:host([checked]:not([checked=false])) #icon-container::before{box-shadow:0 0 0 2px var(--sinch-color-tropical-500) inset}:host([checked]:not([checked=false])) #icon-knob{opacity:1}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial}:host([disabled]:not([disabled=false])) #icon-container::before{box-shadow:0 0 0 2px var(--sinch-color-stormy-100) inset}@media (prefers-reduced-motion){#icon-container::before,#icon-knob{transition:none}}</style><div id="wrapper"><div id="icon-container"><div id="icon-knob"></div></div><span id="text"></span></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-dropdown-radio-option', (_$text = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'option');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'checked'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'checked':
+        {
+          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+        }
+    }
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+
+  set selected(isSelected) {
+    updateBooleanAttribute(this, 'data-selected', isSelected);
+  }
+
+  get selected() {
+    return getBooleanAttribute(this, 'data-selected');
+  }
+
+}));

package/dropdown-radio-option/types.d.ts

@@ -0,0 +1,14 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchDropdownRadioOptionElement = HTMLElement & {
+    value: string;
+    text: string;
+    checked: boolean;
+    selected: boolean;
+    disabled: boolean;
+};
+export declare type TSinchDropdownRadioOptionReact = TSinchElementReact<TSinchDropdownRadioOptionElement> & {
+    value: string;
+    text: string;
+    disabled?: boolean;
+    'aria-label': string;
+};

package/dropdown-radio-option/types.js

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

package/dropdown-text-option/index.d.ts

@@ -0,0 +1,30 @@
+import { NectaryElement } from '../utils';
+import type { TSinchDropdownTextOptionElement, TSinchDropdownTextOptionReact } from './types';
+export declare class DropdownTextOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set text(value: string);
+    get text(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set checked(isChecked: boolean);
+    get checked(): boolean;
+    set selected(isSelected: boolean);
+    get selected(): boolean;
+    get icon(): Element | null;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-dropdown-text-option': TSinchDropdownTextOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-dropdown-text-option': TSinchDropdownTextOptionElement;
+    }
+}

package/{dropdown-option → dropdown-text-option}/index.js

@@ -6,7 +6,7 @@ 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, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}:host()>*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:6px 12px;width:100%;align-items:center;gap:12px;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([checked])>#wrapper{padding-right:36px}:host([checked])>#wrapper::after{content:"";position:absolute;top:12px;right:11px;width:18px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 11.17 1.83 7 .41 8.41 6 14 18 2 16.59.59 6 11.17Z\' fill=\'%230A273D\'/%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:6px 12px;align-items:center;gap:12px;user-select:none;cursor:pointer;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([checked])>#wrapper{padding-right:36px}:host([checked])>#wrapper::after{content:"";position:absolute;top:12px;right:11px;width:18px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 11.17 1.83 7 .41 8.41 6 14 18 2 16.59.59 6 11.17Z\' fill=\'%230A273D\'/%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 
@@ -14,7 +14,7 @@ var _$iconSlot = new WeakMap();
 
 var _$content = new WeakMap();
 
-export class DropdownOption extends NectaryElement {
+export class DropdownTextOption extends NectaryElement {
   constructor() {
     super();
 
@@ -33,7 +33,7 @@ export class DropdownOption extends NectaryElement {
 
     _classPrivateFieldSet(this, _$iconSlot, shadowRoot.querySelector('slot'));
 
-    _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('span'));
+    _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('#content'));
   }
 
   connectedCallback() {
@@ -108,7 +108,4 @@ export class DropdownOption extends NectaryElement {
   }
 
 }
-defineCustomElement('sinch-dropdown-option', DropdownOption);
-export const isDropdownOptionElement = element => {
-  return element instanceof DropdownOption;
-};
+defineCustomElement('sinch-dropdown-text-option', DropdownTextOption);

package/dropdown-text-option/types.d.ts

@@ -0,0 +1,15 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchDropdownTextOptionElement = HTMLElement & {
+    value: string;
+    text: string;
+    checked: boolean;
+    selected: boolean;
+    disabled: boolean;
+    readonly icon: Element | null;
+};
+export declare type TSinchDropdownTextOptionReact = TSinchElementReact<TSinchDropdownTextOptionElement> & {
+    value: string;
+    text: string;
+    disabled?: boolean;
+    'aria-label': string;
+};

package/dropdown-text-option/types.js

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

package/grid/index.d.ts

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import '../grid-item';
 export declare type TSinchGridElement = HTMLElement;
 export declare type TSinchGridReact = TSinchElementReact<TSinchGridElement>;
 declare global {

package/grid/index.js

@@ -1,6 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{--sinch-grid-gutter:24px;--sinch-grid-margin:32px;--sinch-grid-num-columns:12;display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),minmax(0,1fr));grid-column-gap:var(--sinch-grid-gutter);grid-row-gap:var(--sinch-grid-gutter);padding:var(--sinch-grid-margin)}@media only screen and (max-width:1439px){:host{--sinch-grid-gutter:24px;--sinch-grid-margin:24px;--sinch-grid-num-columns:12}}@media only screen and (max-width:1023px){:host{--sinch-grid-gutter:24px;--sinch-grid-margin:24px;--sinch-grid-num-columns:8}}@media only screen and (max-width:767px){:host{--sinch-grid-gutter:16px;--sinch-grid-margin:16px;--sinch-grid-num-columns:4}}</style><slot name="item"></slot>';
-import '../grid-item';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-grid', class extends NectaryElement {

package/grid-item/index.d.ts

@@ -1,23 +1,11 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchGridElement = HTMLElement & {
-    xl: number | null;
-    l: number | null;
-    m: number | null;
-    s: number | null;
-};
-export declare type TSinchGridReact = TSinchElementReact<TSinchGridElement> & {
-    xl?: number;
-    l?: number;
-    m?: number;
-    s?: number;
-};
+import type { TSinchGridItemElement, TSinchGridItemReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-grid-item': TSinchGridReact;
+            'sinch-grid-item': TSinchGridItemReact;
         }
     }
     interface HTMLElementTagNameMap {
-        'sinch-grid-item': TSinchGridElement;
+        'sinch-grid-item': TSinchGridItemElement;
     }
 }

package/grid-item/types.d.ts

@@ -0,0 +1,13 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchGridItemElement = HTMLElement & {
+    xl: number | null;
+    l: number | null;
+    m: number | null;
+    s: number | null;
+};
+export declare type TSinchGridItemReact = TSinchElementReact<TSinchGridItemElement> & {
+    xl?: number;
+    l?: number;
+    m?: number;
+    s?: number;
+};

package/grid-item/types.js

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

package/help-tooltip/index.d.ts

@@ -1,6 +1,6 @@
 import '../tooltip';
 import '../icons/help-outline';
-import type { TSinchTooltipElement, TSinchTooltipReact } from '../tooltip';
+import type { TSinchTooltipElement, TSinchTooltipReact } from '../tooltip/types';
 export declare type TSinchHelpTooltipElement = TSinchTooltipElement;
 export declare type TSinchHelpTooltipReact = TSinchTooltipReact;
 declare global {

package/icons/3d-rotation/index.d.ts

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

package/icons/3d-rotation/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g clip-path="url(#a)"><path d="M8.41 14.96c-.19 0-.37-.03-.52-.08a1.07 1.07 0 0 1-.4-.24c-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44.23-.19.42-.43.55-.72.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56a1.67 1.67 0 0 0-.23-.51c-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31a2.098 2.098 0 0 0 .89-.75c.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96a1.78 1.78 0 0 0-.51-.69c-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45a.94.94 0 0 1 .25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49a.87.87 0 0 1-.25.37c-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33Zm9.3-4.72c-.18-.47-.43-.87-.75-1.2-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57Zm-1.13 1.96c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.11h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.41Zm-1.43-8.36 1.33-1.33c3.09 1.46 5.34 4.37 5.89 7.86.06.41.44.69.86.62.41-.06.69-.45.62-.86-.6-3.81-2.96-7.01-6.24-8.75A11.81 11.81 0 0 0 11.34.02l3.81 3.82Zm-6.3 16.31-1.33 1.33a10.504 10.504 0 0 1-5.89-7.86.737.737 0 0 0-.86-.62c-.41.06-.69.45-.62.86.6 3.81 2.96 7.01 6.24 8.75 1.67.89 3.83 1.51 6.27 1.36l-3.81-3.82Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>';
+defineCustomElement('sinch-icon-3d-rotation', createIconClass(templateHTML));

package/icons/access-alarm/index.d.ts

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

package/icons/access-alarm/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m15.87 15.25-3.37-2V8.72c0-.4-.32-.72-.72-.72h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l3.65 2.19c.34.2.78.1.98-.24.21-.35.1-.8-.25-1Zm5.31-10.24L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13a1 1 0 0 0-.12-1.41ZM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41a.988.988 0 0 0-1.4-.13L2.82 5.01a1 1 0 0 0-.12 1.41c.35.43.98.48 1.4.13ZM12 4a9 9 0 1 0 .001 18.001A9 9 0 0 0 12 4Zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7Z"/></svg>';
+defineCustomElement('sinch-icon-access-alarm', createIconClass(templateHTML));

package/icons/access-alarms/index.d.ts

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

package/icons/access-alarms/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m15.87 15.25-3.37-2V8.72c0-.4-.32-.72-.72-.72h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l3.65 2.19c.34.2.78.1.98-.24.21-.35.1-.8-.25-1Zm5.31-10.24L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13a1 1 0 0 0-.12-1.41ZM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41a.988.988 0 0 0-1.4-.13L2.82 5.01a1 1 0 0 0-.12 1.41c.35.43.98.48 1.4.13ZM12 4a9 9 0 1 0 .001 18.001A9 9 0 0 0 12 4Zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7Z"/></svg>';
+defineCustomElement('sinch-icon-access-alarms', createIconClass(templateHTML));

package/icons/accessibility/index.d.ts

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

package/icons/accessibility/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2Zm8 7h-5v12c0 .55-.45 1-1 1s-1-.45-1-1v-5h-2v5c0 .55-.45 1-1 1s-1-.45-1-1V9H4c-.55 0-1-.45-1-1s.45-1 1-1h16c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg>';
+defineCustomElement('sinch-icon-accessibility', createIconClass(templateHTML));

package/icons/accessibility-new/index.d.ts

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

package/icons/accessibility-new/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.75 6.99c-.14-.55-.69-.87-1.24-.75-2.38.53-5.03.76-7.51.76-2.48 0-5.13-.23-7.51-.76-.55-.12-1.1.2-1.24.75-.14.56.2 1.13.75 1.26 1.61.36 3.35.61 5 .75v12c0 .55.45 1 1 1s1-.45 1-1v-5h2v5c0 .55.45 1 1 1s1-.45 1-1V9c1.65-.14 3.39-.39 4.99-.75.56-.13.9-.7.76-1.26ZM12 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Z"/></svg>';
+defineCustomElement('sinch-icon-accessibility-new', createIconClass(templateHTML));

package/icons/accessible/index.d.ts

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

package/icons/accessible/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm7 5.9c0-.49-.36-.89-.84-.97a5.762 5.762 0 0 1-3.23-1.76l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.37-.21-.78-.31-1.25-.25C10.73 7.15 10 8.07 10 9.1V15c0 1.1.9 2 2 2h5v4c0 .55.45 1 1 1s1-.45 1-1v-4.5c0-1.1-.9-2-2-2h-3v-3.45c1 .83 2.4 1.54 3.8 1.82.62.13 1.2-.34 1.2-.97ZM12.83 18c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1a5 5 0 1 0 5.9 5.9h-2.07Z"/></svg>';
+defineCustomElement('sinch-icon-accessible', createIconClass(templateHTML));

package/icons/accessible-forward/index.d.ts

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

package/icons/accessible-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" aria-hidden="true" focusable="false"><path d="M18 6.54a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM15 17h-2c0 1.65-1.35 3-3 3s-3-1.35-3-3 1.35-3 3-3v-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5Zm3-3.5h-1.86l1.67-3.67C18.42 8.5 17.44 7 15.96 7h-5.2c-.81 0-1.54.47-1.87 1.2l-.28.76c-.21.56.11 1.17.68 1.33.49.14 1-.11 1.2-.58l.3-.71H13l-1.83 4.1c-.6 1.33.39 2.9 1.85 2.9H18v4c0 .55.45 1 1 1s1-.45 1-1v-4.5c0-1.1-.9-2-2-2Z"/></svg>';
+defineCustomElement('sinch-icon-accessible-forward', createIconClass(templateHTML));

package/icons/account-balance/index.d.ts

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

package/icons/account-balance/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 11.5v4c0 .83.67 1.5 1.5 1.5S7 16.33 7 15.5v-4c0-.83-.67-1.5-1.5-1.5S4 10.67 4 11.5Zm6 0v4c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5ZM3.5 22h16c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-16c-.83 0-1.5.67-1.5 1.5S2.67 22 3.5 22ZM16 11.5v4c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5ZM10.57 1.49l-7.9 4.16c-.41.21-.67.64-.67 1.1C2 7.44 2.56 8 3.25 8h16.51C20.44 8 21 7.44 21 6.75c0-.46-.26-.89-.67-1.1l-7.9-4.16c-.58-.31-1.28-.31-1.86 0Z"/></svg>';
+defineCustomElement('sinch-icon-account-balance', createIconClass(templateHTML));

package/icons/account-balance-wallet/index.d.ts

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

package/icons/account-balance-wallet/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 16V8a2 2 0 0 1 2-2h9V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-1h-9a2 2 0 0 1-2-2Zm3-8c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h9V8h-9Zm3 5.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5Z"/></svg>';
+defineCustomElement('sinch-icon-account-balance-wallet', createIconClass(templateHTML));

package/icons/account-box/index.d.ts

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

package/icons/account-box/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2Zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3Zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1Z"/></svg>';
+defineCustomElement('sinch-icon-account-box', createIconClass(templateHTML));

package/icons/account-circle/index.d.ts

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

package/icons/account-circle/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3Zm0 14.2a7.2 7.2 0 0 1-6-3.22c.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08a7.2 7.2 0 0 1-6 3.22Z"/></svg>';
+defineCustomElement('sinch-icon-account-circle', createIconClass(templateHTML));

package/icons/ad-units/index.d.ts

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

package/icons/ad-units/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2Zm-1 18H8c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h8c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1Z"/><path d="M15 6H9c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1Z"/></svg>';
+defineCustomElement('sinch-icon-ad-units', createIconClass(templateHTML));

package/icons/add-alarm/index.d.ts

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

package/icons/add-alarm/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15 12h-2v-2c0-.55-.45-1-1-1s-1 .45-1 1v2H9c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1Zm6.18-6.99L18.1 2.45c-.42-.35-1.05-.3-1.41.13-.35.42-.29 1.05.13 1.41l3.07 2.56c.42.35 1.05.3 1.41-.13a1 1 0 0 0-.12-1.41ZM4.1 6.55l3.07-2.56c.43-.36.49-.99.13-1.41a.988.988 0 0 0-1.4-.13L2.82 5.01a1 1 0 0 0-.12 1.41c.35.43.98.48 1.4.13ZM12 4a9 9 0 1 0 .001 18.001A9 9 0 0 0 12 4Zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7Z"/></svg>';
+defineCustomElement('sinch-icon-add-alarm', createIconClass(templateHTML));

package/icons/add-ic-call/index.d.ts

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

package/icons/add-ic-call/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14 8h2v2c0 .55.45 1 1 1s1-.45 1-1V8h2c.55 0 1-.45 1-1s-.45-1-1-1h-2V4c0-.55-.45-1-1-1s-1 .45-1 1v2h-2c-.55 0-1 .45-1 1s.45 1 1 1Zm5.21 7.27-2.54-.29a1.99 1.99 0 0 0-1.64.57l-1.84 1.84A15.045 15.045 0 0 1 6.6 10.8l1.85-1.85c.43-.43.64-1.04.57-1.64l-.29-2.52a2 2 0 0 0-1.98-1.78H5.02c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.36 15.89 15.89 1.13.07 2.07-.87 2.07-2v-1.73c.01-1-.76-1.86-1.77-1.97Z"/></svg>';
+defineCustomElement('sinch-icon-add-ic-call', createIconClass(templateHTML));

package/icons/add-shopping-cart/index.d.ts

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

package/icons/add-shopping-cart/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 9c.55 0 1-.45 1-1V6h2c.55 0 1-.45 1-1s-.45-1-1-1h-2V2c0-.55-.45-1-1-1s-1 .45-1 1v2H9c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1Zm-5 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2Zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2Zm-8.9-5h7.45c.75 0 1.41-.41 1.75-1.03l3.38-6.13c.27-.48.09-1.09-.39-1.36a.997.997 0 0 0-1.35.39L15.55 11H8.53L4.54 2.57a.993.993 0 0 0-.9-.57H2c-.55 0-1 .45-1 1s.45 1 1 1h1l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h11c.55 0 1-.45 1-1s-.45-1-1-1H7l1.1-2Z"/></svg>';
+defineCustomElement('sinch-icon-add-shopping-cart', createIconClass(templateHTML));

package/icons/add-task/index.d.ts

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

package/icons/add-task/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m21.29 5.89-10 10a.996.996 0 0 1-1.41 0l-2.83-2.83a.996.996 0 1 1 1.41-1.41l2.12 2.12 9.29-9.29a.996.996 0 0 1 1.41 0c.4.39.4 1.02.01 1.41ZM12 20c-4.71 0-8.48-4.09-7.95-8.9.39-3.52 3.12-6.41 6.61-6.99 1.81-.3 3.53.02 4.99.78a1.003 1.003 0 0 0 .93-1.78c-1.47-.75-3.13-1.16-4.9-1.11-5.14.16-9.41 4.34-9.67 9.47C1.72 17.24 6.3 22 12 22c1.2 0 2.34-.21 3.41-.6.68-.25.87-1.13.35-1.65a.98.98 0 0 0-1.04-.23c-.85.31-1.77.48-2.72.48Zm7-5h-2c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1h-2v-2c0-.55-.45-1-1-1s-1 .45-1 1v2Z"/></svg>';
+defineCustomElement('sinch-icon-add-task', createIconClass(templateHTML));

package/icons/add-to-home-screen/index.d.ts

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

package/icons/add-to-home-screen/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 1.01 8 1c-1.1 0-2 .9-2 2v3c0 .55.45 1 1 1s1-.45 1-1V5h10v14H8v-1c0-.55-.45-1-1-1s-1 .45-1 1v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99ZM11 15c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1s.45 1 1 1h2.59L3.7 14.89a.996.996 0 1 0 1.41 1.41L10 11.41V14c0 .55.45 1 1 1Z"/></svg>';
+defineCustomElement('sinch-icon-add-to-home-screen', createIconClass(templateHTML));

package/icons/addchart/index.d.ts

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

package/icons/addchart/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11 10c0-.55.45-1 1-1s1 .45 1 1v7h-2v-7Zm9 3c-.55 0-1 .45-1 1v5H5V5h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5c0-.55-.45-1-1-1Zm1-8h-2V3c0-.55-.45-1-1-1s-1 .45-1 1v2h-2c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1Zm-5 8c-.55 0-1 .45-1 1v3h2v-3c0-.55-.45-1-1-1Zm-9-1v5h2v-5c0-.55-.45-1-1-1s-1 .45-1 1Z"/></svg>';
+defineCustomElement('sinch-icon-addchart', createIconClass(templateHTML));