@nectary/components 0.28.0 → 0.29.0

package/dropdown-radio-option/index.js

@@ -7,7 +7,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';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } 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;
@@ -48,7 +48,7 @@ defineCustomElement('sinch-dropdown-radio-option', (_$text = new WeakMap(), clas
 
       case 'checked':
         {
-          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
         }
     }
   }

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

@@ -5,6 +5,10 @@ export declare type TSinchDropdownRadioOptionElement = HTMLElement & {
     checked: boolean;
     selected: boolean;
     disabled: boolean;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'checked', value: ''): void;
+    setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchDropdownRadioOptionReact = TSinchElementReact<TSinchDropdownRadioOptionElement> & {
     value: string;

package/dropdown-text-option/index.js

@@ -5,7 +5,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';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 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;
@@ -58,7 +58,7 @@ export class DropdownTextOption extends NectaryElement {
 
       case 'checked':
         {
-          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
         }
     }
   }

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

@@ -6,6 +6,10 @@ export declare type TSinchDropdownTextOptionElement = HTMLElement & {
     selected: boolean;
     disabled: boolean;
     readonly icon: Element | null;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'checked', value: ''): void;
+    setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchDropdownTextOptionReact = TSinchElementReact<TSinchDropdownTextOptionElement> & {
     value: string;

package/grid/index.d.ts

@@ -1,6 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchGridElement = HTMLElement;
-export declare type TSinchGridReact = TSinchElementReact<TSinchGridElement>;
+import type { TSinchGridElement, TSinchGridReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/grid/types.d.ts

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

package/grid/types.js

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

package/grid-item/types.d.ts

@@ -4,6 +4,10 @@ export declare type TSinchGridItemElement = HTMLElement & {
     l: number | null;
     m: number | null;
     s: number | null;
+    setAttribute(name: 'xl', value: string): void;
+    setAttribute(name: 'l', value: string): void;
+    setAttribute(name: 'm', value: string): void;
+    setAttribute(name: 's', value: string): void;
 };
 export declare type TSinchGridItemReact = TSinchElementReact<TSinchGridItemElement> & {
     xl?: number;

package/help-tooltip/index.d.ts

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

package/help-tooltip/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchTooltipElement, TSinchTooltipReact } from '../tooltip/types';
+export declare type TSinchHelpTooltipElement = TSinchTooltipElement;
+export declare type TSinchHelpTooltipReact = TSinchTooltipReact;

package/help-tooltip/types.js

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

package/icon-button/index.d.ts

@@ -1,19 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent, MouseEvent } from 'react';
-export declare type TSinchIconButtonElement = HTMLElement & {
-    disabled: boolean;
-    small: boolean;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
-    'aria-label': string;
-    disabled?: boolean;
-    small?: boolean;
-    onClick: (e: MouseEvent<TSinchIconButtonElement>) => void;
-    onFocus?: (e: FocusEvent<TSinchIconButtonElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchIconButtonElement>) => void;
-};
+import type { TSinchIconButtonElement, TSinchIconButtonReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/icon-button/index.js

@@ -38,7 +38,9 @@ defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extend
     switch (name) {
       case 'disabled':
         {
-          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+          const isDisabled = isAttrTrue(newVal);
+          _classPrivateFieldGet(this, _$button).disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
     }

package/icon-button/types.d.ts

@@ -0,0 +1,14 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchIconButtonElement = HTMLElement & {
+    disabled: boolean;
+    small: boolean;
+    focus(): void;
+    blur(): void;
+    setAttribute(name: 'disabled', value: ''): void;
+    setAttribute(name: 'small', value: ''): void;
+};
+export declare type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
+    'aria-label': string;
+    disabled?: boolean;
+    small?: boolean;
+};

package/icon-button/types.js

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

package/icons/360/index.d.ts

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

package/icons/360/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 7C6.48 7 2 9.24 2 12c0 2.24 2.94 4.13 7 4.77v2.02c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79a.5.5 0 0 0-.85.36v1.52c-3.15-.56-5-1.9-5-2.73 0-1.06 3.04-3 8-3s8 1.94 8 3c0 .66-1.2 1.68-3.32 2.34-.41.13-.68.51-.68.94 0 .67.65 1.16 1.28.96C20.11 15.36 22 13.79 22 12c0-2.76-4.48-5-10-5Z"/></svg>';
+defineCustomElement('sinch-icon-360', createIconClass(templateHTML));

package/icons/4k/index.d.ts

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

package/icons/4k/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="M19 3H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2Zm-7 9.76c0 .41-.34.75-.75.75H11v.74c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-.75h-2c-.55 0-1-.45-1-1V9.75c0-.41.34-.75.75-.75s.75.34.75.75V12h1.5V9.75c0-.41.34-.75.75-.75s.75.34.75.75V12h.25c.41 0 .75.34.75.75v.01Zm5.47 1.14c.22.33.13.77-.2.98a.702.702 0 0 1-.98-.2L14.5 12v2.24c0 .41-.34.75-.75.75a.74.74 0 0 1-.75-.74v-4.5c0-.41.34-.75.75-.75s.75.34.75.75v2.24l1.79-2.68a.71.71 0 0 1 .98-.2c.33.22.41.66.2.98L16.2 12l1.27 1.9Z"/></svg>';
+defineCustomElement('sinch-icon-4k', createIconClass(templateHTML));

package/icons/5g/index.d.ts

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

package/icons/5g/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 13h1v2h-5V9h6c.55 0 1-.45 1-1s-.45-1-1-1h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h5c1.1 0 2-.9 2-2v-3c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1ZM4 13h4v2H4c-.55 0-1 .45-1 1s.45 1 1 1h4c1.1 0 2-.9 2-2v-2c0-1.1-.9-2-2-2H5V9h4c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1Z"/></svg>';
+defineCustomElement('sinch-icon-5g', createIconClass(templateHTML));

package/icons/6-ft-apart/index.d.ts

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

package/icons/6-ft-apart/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="M6 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm4 3.43c0-.81-.48-1.53-1.22-1.85a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 2 9.43V10h8v-.57ZM18 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm4 3.43c0-.81-.48-1.53-1.22-1.85a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 14 9.43V10h8v-.57Zm-.35 4.92-1.79 1.79c-.32.32-.86.1-.86-.35v-.8L5 15v.79c0 .45-.54.67-.85.35l-1.79-1.79c-.2-.2-.2-.51 0-.71l1.79-1.79a.5.5 0 0 1 .85.36v.8L19 13v-.79c0-.45.54-.67.85-.35l1.79 1.79c.2.19.2.51.01.7ZM10 18.5c0-.28-.22-.5-.5-.5h-2c-.28 0-.5.22-.5.5v3c0 .28.22.5.5.5h2c.28 0 .5-.22.5-.5V20c0-.28-.22-.5-.5-.5H8V19h1.5c.28 0 .5-.22.5-.5Zm-1 2v.5H8v-.5h1Zm8-1.5h-.5v2.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V19H15c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h2c.28 0 .5.22.5.5s-.22.5-.5.5Zm-3-.5c0 .28-.22.5-.5.5h-1v.5h.5c.28 0 .5.22.5.5s-.22.5-.5.5h-.5v1c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3c0-.28.22-.5.5-.5h1.5c.28 0 .5.22.5.5Z"/></svg>';
+defineCustomElement('sinch-icon-6-ft-apart', createIconClass(templateHTML));

package/icons/ac-unit/index.d.ts

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

package/icons/ac-unit/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 11h-3.17l2.54-2.54a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0L15 11h-2V9l3.95-3.95c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0L13 6.17V3c0-.55-.45-1-1-1s-1 .45-1 1v3.17L8.46 3.63a.996.996 0 0 0-1.41 0c-.39.39-.39 1.03 0 1.42L11 9v2H9L5.05 7.05c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41L6.17 11H3c-.55 0-1 .45-1 1s.45 1 1 1h3.17l-2.54 2.54a.996.996 0 0 0 0 1.41c.39.39 1.03.39 1.42 0L9 13h2v2l-3.95 3.95c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0L11 17.83V21c0 .55.45 1 1 1s1-.45 1-1v-3.17l2.54 2.54c.39.39 1.02.39 1.41 0 .39-.39.39-1.03 0-1.42L13 15v-2h2l3.95 3.95c.39.39 1.03.39 1.42 0a.996.996 0 0 0 0-1.41L17.83 13H21c.55 0 1-.45 1-1s-.45-1-1-1Z"/></svg>';
+defineCustomElement('sinch-icon-ac-unit', createIconClass(templateHTML));

package/icons/add-a-photo/index.d.ts

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

package/icons/add-a-photo/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 8c0 .55.45 1 1 1s1-.45 1-1V6h2c.55 0 1-.45 1-1s-.45-1-1-1H5V2c0-.55-.45-1-1-1s-1 .45-1 1v2H1c-.55 0-1 .45-1 1s.45 1 1 1h2v2Zm10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/><path d="M21 6h-3.17l-1.24-1.35A1.99 1.99 0 0 0 15.12 4h-6.4c.17.3.28.63.28 1 0 1.1-.9 2-2 2H6v1c0 1.1-.9 2-2 2-.37 0-.7-.11-1-.28V20c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2Zm-8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Z"/></svg>';
+defineCustomElement('sinch-icon-add-a-photo', createIconClass(templateHTML));

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

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

package/icons/add-business/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 6h13c.55 0 1-.45 1-1s-.45-1-1-1H3c-.55 0-1 .45-1 1s.45 1 1 1Zm12 11h2v-3h.18c.63 0 1.1-.58.98-1.2l-1-5c-.09-.46-.5-.8-.98-.8H2.82c-.48 0-.89.34-.98.8l-1 5c-.12.62.35 1.2.98 1.2H2v5c0 .55.45 1 1 1h7c.55 0 1-.45 1-1v-5h4v3Zm-6 1H4v-4h5v4Z"/><path d="M22 18h-2v-2c0-.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-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1Z"/></svg>';
+defineCustomElement('sinch-icon-add-business', createIconClass(templateHTML));

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

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

package/icons/add-location/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="M13 7c0-.55-.44-1-1-1-.55 0-1 .44-1 1v2H9c-.55 0-1 .44-1 1 0 .55.44 1 1 1h2v2c0 .55.44 1 1 1 .55 0 1-.44 1-1v-2h2c.55 0 1-.44 1-1 0-.55-.44-1-1-1h-2V7Zm-1-5c4.2 0 8 3.22 8 8.2 0 3.18-2.45 6.92-7.34 11.23-.38.33-.95.33-1.33 0C6.45 17.12 4 13.38 4 10.2 4 5.22 7.8 2 12 2Z"/></svg>';
+defineCustomElement('sinch-icon-add-location', createIconClass(templateHTML));

package/icons/add-location-alt/index.d.ts

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

package/icons/add-location-alt/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="M19 1c.55 0 1 .45 1 1v2h2c.55 0 1 .45 1 1s-.45 1-1 1h-2v2c0 .55-.45 1-1 1s-1-.45-1-1V6h-2c-.55 0-1-.45-1-1s.45-1 1-1h2V2c0-.55.45-1 1-1Zm-7 12c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm2.72-9.53c-.44.36-.72.91-.72 1.53 0 1.1.9 2 2 2h1v1c0 1.1.9 2 2 2 .32 0 .62-.08.89-.21.07.45.11.92.11 1.41 0 3.18-2.45 6.92-7.34 11.23-.38.33-.95.33-1.33 0C6.45 18.12 4 14.38 4 11.2 4 6.22 7.8 3 12 3c.94 0 1.86.16 2.72.47Z"/></svg>';
+defineCustomElement('sinch-icon-add-location-alt', createIconClass(templateHTML));

package/icons/add-photo-alternate/index.d.ts

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

package/icons/add-photo-alternate/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.02 5H19V2.98c0-.54-.44-.98-.98-.98h-.03c-.55 0-.99.44-.99.98V5h-2.01c-.54 0-.98.44-.99.98v.03c0 .55.44.99.99.99H17v2.01c0 .54.44.99.99.98h.03c.54 0 .98-.44.98-.98V7h2.02c.54 0 .98-.44.98-.98v-.04c0-.54-.44-.98-.98-.98ZM16 9.01V8h-1.01c-.53 0-1.03-.21-1.41-.58-.37-.38-.58-.88-.58-1.44 0-.36.1-.69.27-.98H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8.28c-.3.17-.64.28-1.02.28A2 2 0 0 1 16 9.01ZM15.96 19H6a.5.5 0 0 1-.4-.8l1.98-2.63c.21-.28.62-.26.82.02L10 18l2.61-3.48c.2-.26.59-.27.79-.01l2.95 3.68c.26.33.03.81-.39.81Z"/></svg>';
+defineCustomElement('sinch-icon-add-photo-alternate', createIconClass(templateHTML));

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

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

package/icons/add-road/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 18v-2c0-.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-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1h-2ZM19 4c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1s1-.45 1-1V5c0-.55-.45-1-1-1ZM5 20c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1s-1 .45-1 1v14c0 .55.45 1 1 1Zm7-12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1s-1 .45-1 1v2c0 .55.45 1 1 1Zm0 6c.55 0 1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1v2c0 .55.45 1 1 1Zm0 6c.55 0 1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1v2c0 .55.45 1 1 1Z"/></svg>';
+defineCustomElement('sinch-icon-add-road', createIconClass(templateHTML));

package/icons/add-to-photos/index.d.ts

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

package/icons/add-to-photos/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 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1Zm17-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2Zm-2 9h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3h-3c-.55 0-1-.45-1-1s.45-1 1-1h3V6c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg>';
+defineCustomElement('sinch-icon-add-to-photos', createIconClass(templateHTML));

package/icons/add-to-queue/index.d.ts

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

package/icons/add-to-queue/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 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v1c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-1h5c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2Zm-1 14H4c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h16c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1Zm-4-6c0 .55-.45 1-1 1h-2v2c0 .55-.45 1-1 1s-1-.45-1-1v-2H9c-.55 0-1-.45-1-1s.45-1 1-1h2V8c0-.55.45-1 1-1s1 .45 1 1v2h2c.55 0 1 .45 1 1Z"/></svg>';
+defineCustomElement('sinch-icon-add-to-queue', createIconClass(templateHTML));

package/icons/adjust/index.d.ts

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

package/icons/adjust/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.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm3-8c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3Z"/></svg>';
+defineCustomElement('sinch-icon-adjust', createIconClass(templateHTML));

package/icons/agriculture/index.d.ts

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

package/icons/agriculture/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="M19.5 11.97c.93 0 1.78.28 2.5.76V7.97c0-1.1-.9-2-2-2h-6.29l-1.06-1.06 1.06-1.06c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-2.83 2.83c-.2.2-.2.51 0 .71.2.2.51.2.71 0l1.06-1.06L13 6.68v2.29c0 1.1-.9 2-2 2h-.54a5.98 5.98 0 0 1 1.54 4c0 .34-.04.67-.09 1h3.14c.25-2.24 2.14-4 4.45-4Z"/><path d="M19.5 12.97c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5-1.57-3.5-3.5-3.5Zm0 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.5ZM4 8.97h5c0-1.1-.9-2-2-2H4c-.55 0-1 .45-1 1 0 .56.45 1 1 1Zm5.83 4.82-.18-.47.93-.35a4.92 4.92 0 0 0-2.31-2.43l-.4.89-.46-.21.4-.9c-.55-.21-1.17-.35-1.81-.35-.53 0-1.04.11-1.52.26l.34.91-.47.18L4 10.4a4.92 4.92 0 0 0-2.43 2.31l.89.4-.21.46-.9-.4a4.85 4.85 0 0 0-.35 1.8c0 .53.11 1.04.26 1.52l.91-.34.18.47-.93.35a4.92 4.92 0 0 0 2.31 2.43l.4-.89.46.21-.4.9c.57.22 1.18.35 1.82.35.53 0 1.04-.11 1.52-.26l-.35-.91.47-.18.35.93a4.92 4.92 0 0 0 2.43-2.31l-.89-.4.21-.46.9.4c.22-.57.35-1.18.35-1.82 0-.53-.11-1.04-.26-1.52l-.91.35Zm-2.68 3.96c-1.53.63-3.29-.09-3.92-1.62-.63-1.53.09-3.29 1.62-3.92 1.53-.63 3.29.09 3.92 1.62.64 1.53-.09 3.28-1.62 3.92Z"/></svg>';
+defineCustomElement('sinch-icon-agriculture', createIconClass(templateHTML));

package/icons/airplay/index.d.ts

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

package/icons/airplay/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="M8.41 22h7.17c.89 0 1.34-1.08.71-1.71L12.7 16.7a.996.996 0 0 0-1.41 0L7.7 20.29c-.62.63-.18 1.71.71 1.71ZM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h3c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h16c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1h-2c-.55 0-1 .45-1 1s.45 1 1 1h3c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z"/></svg>';
+defineCustomElement('sinch-icon-airplay', createIconClass(templateHTML));

package/icons/airport-shuttle/index.d.ts

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

package/icons/airport-shuttle/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="m22.41 10.41-4.83-4.83c-.37-.37-.88-.58-1.41-.58H3a2 2 0 0 0-2 2v7c0 1.1.9 2 2 2 0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3c1.1 0 2-.9 2-2v-2.17c0-.53-.21-1.04-.59-1.42ZM3 10V8c0-.55.45-1 1-1h3v4H4c-.55 0-1-.45-1-1Zm3 7.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5ZM13 11H9V7h4v4Zm5 6.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5ZM15 11V7h1l4 4h-5Z"/></svg>';
+defineCustomElement('sinch-icon-airport-shuttle', createIconClass(templateHTML));

package/icons/album/index.d.ts

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

package/icons/album/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 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5Zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1Z"/></svg>';
+defineCustomElement('sinch-icon-album', createIconClass(templateHTML));

package/icons/all-inclusive/index.d.ts

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

package/icons/all-inclusive/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.22 6.86c-2-.6-4.06-.04-5.39 1.29L12 10.66 10.48 12h.01L7.8 14.39c-.81.81-1.95 1.15-3.12.92a3.354 3.354 0 0 1-2.57-2.49 3.39 3.39 0 0 1 3.29-4.2c.91 0 1.76.35 2.44 1.03l.47.41c.38.34.95.34 1.33 0 .45-.4.45-1.1 0-1.5l-.42-.36A5.37 5.37 0 0 0 5.4 6.62C2.42 6.62 0 9.04 0 12s2.42 5.38 5.4 5.38c1.44 0 2.8-.56 3.77-1.53l2.83-2.5.01.01L13.52 12h-.01l2.69-2.39c.81-.81 1.95-1.15 3.12-.92 1.25.25 2.28 1.25 2.57 2.49a3.39 3.39 0 0 1-3.29 4.2c-.9 0-1.76-.35-2.44-1.03l-.48-.42a.995.995 0 0 0-1.33 0c-.45.4-.45 1.1 0 1.5l.42.37a5.386 5.386 0 0 0 3.82 1.57c3.27 0 5.86-2.9 5.33-6.25-.3-1.99-1.77-3.69-3.7-4.26Z"/></svg>';
+defineCustomElement('sinch-icon-all-inclusive', createIconClass(templateHTML));

package/icons/alt-route/index.js

@@ -1,4 +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="m9.78 11.16-1.42 1.42a7.282 7.282 0 0 1-1.79-2.94l1.94-.49c.32.89.77 1.5 1.27 2.01Zm.37-6.01-2.8-2.8c-.2-.2-.51-.2-.71 0l-2.79 2.8a.5.5 0 0 0 .36.85h1.81c.02.81.08 1.54.19 2.17l1.94-.49C8.08 7.2 8.03 6.63 8.02 6H9.8a.5.5 0 0 0 .35-.85Zm10 0-2.79-2.79c-.2-.2-.51-.2-.71 0l-2.79 2.79c-.32.31-.1.85.35.85h1.78c-.1 3.68-1.28 4.75-2.54 5.88-.5.44-1.01.92-1.45 1.55-.34-.49-.73-.88-1.13-1.24L9.46 13.6c.93.85 1.54 1.54 1.54 3.4v4c0 .55.45 1 1 1s1-.45 1-1v-4c0-2.02.71-2.66 1.79-3.63 1.38-1.24 3.08-2.78 3.2-7.37h1.8a.5.5 0 0 0 .36-.85Z"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9.78 11.16-1.42 1.42a7.281 7.281 0 0 1-1.79-2.94l1.94-.49c.32.89.77 1.5 1.27 2.01Zm.37-6.01-2.8-2.8c-.2-.2-.51-.2-.71 0l-2.79 2.8a.5.5 0 0 0 .36.85h1.81c.02.81.08 1.54.19 2.17l1.94-.49C8.08 7.2 8.03 6.63 8.02 6H9.8a.5.5 0 0 0 .35-.85Zm10 0-2.79-2.79c-.2-.2-.51-.2-.71 0l-2.79 2.79c-.32.31-.1.85.35.85h1.78c-.1 3.68-1.28 4.75-2.54 5.88-.5.44-1.01.92-1.45 1.55-.34-.49-.73-.88-1.13-1.24L9.46 13.6c.93.85 1.54 1.54 1.54 3.4v4c0 .55.45 1 1 1s1-.45 1-1v-4c0-2.02.71-2.66 1.79-3.63 1.38-1.24 3.08-2.78 3.2-7.37h1.8a.5.5 0 0 0 .36-.85Z"/></svg>';
 defineCustomElement('sinch-icon-alt-route', createIconClass(templateHTML));

package/icons/apartment/index.d.ts

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

package/icons/apartment/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 11V5c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v2H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h5c.55 0 1-.45 1-1v-3h2v3c0 .55.45 1 1 1h5c1.1 0 2-.9 2-2v-6c0-1.1-.9-2-2-2h-2ZM7 19H5v-2h2v2Zm0-4H5v-2h2v2Zm0-4H5V9h2v2Zm4 4H9v-2h2v2Zm0-4H9V9h2v2Zm0-4H9V5h2v2Zm4 8h-2v-2h2v2Zm0-4h-2V9h2v2Zm0-4h-2V5h2v2Zm4 12h-2v-2h2v2Zm0-4h-2v-2h2v2Z"/></svg>';
+defineCustomElement('sinch-icon-apartment', createIconClass(templateHTML));

package/icons/architecture/index.d.ts

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

package/icons/architecture/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="M6.36 18.78 6.61 21l1.62-1.54 2.77-7.6c-.68-.17-1.28-.51-1.77-.98l-2.87 7.9Zm8.41-7.9c-.49.47-1.1.81-1.77.98l2.77 7.6L17.39 21l.26-2.22-2.88-7.9Zm.17-2.28c.3-1.56-.6-2.94-1.94-3.42V4c0-.55-.45-1-1-1s-1 .45-1 1v1.18C9.84 5.6 9 6.7 9 8c0 1.84 1.66 3.3 3.56 2.95 1.18-.22 2.15-1.17 2.38-2.35ZM12 9c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Z"/></svg>';
+defineCustomElement('sinch-icon-architecture', createIconClass(templateHTML));

package/icons/art-track/index.d.ts

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

package/icons/art-track/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 13h-6c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1Zm0-6h-6c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1Zm-6 10h6c.55 0 1-.45 1-1s-.45-1-1-1h-6c-.55 0-1 .45-1 1s.45 1 1 1Zm-3-8v6c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V9c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2Zm-2.1 5.2-1.26-1.68a.508.508 0 0 0-.8-.01L6.5 14.26l-.85-1.03a.5.5 0 0 0-.78.01l-.74.95a.5.5 0 0 0 .39.81H9.5a.5.5 0 0 0 .4-.8Z"/></svg>';
+defineCustomElement('sinch-icon-art-track', createIconClass(templateHTML));