@nectary/components 0.27.0 → 0.28.0

package/dropdown/index.d.ts

@@ -1,29 +1,5 @@
-import type { TRect, TSinchElementReact } from '../types';
-import type { FocusEvent, SyntheticEvent } from 'react';
-declare const orientationValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
-export declare type TSinchDropdownOrientation = typeof orientationValues[number];
-export declare type TSinchDropdownElement = HTMLElement & {
-    open: boolean;
-    multiple: boolean;
-    orientation: TSinchDropdownOrientation;
-    value: string;
-    maxVisibleItems: number | null;
-    readonly dropdownRect: TRect;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownElement> & {
-    open: boolean;
-    multiple?: boolean;
-    orientation?: TSinchDropdownOrientation;
-    value: string;
-    maxVisibleItems?: number;
-    'aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchDropdownElement, CustomEvent<void>>) => void;
-    onChange: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
-    onFocus?: (e: FocusEvent<TSinchDropdownElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchDropdownElement>) => void;
-};
+import '../popover';
+import type { TSinchDropdownElement, TSinchDropdownReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -34,4 +10,3 @@ declare global {
         'sinch-dropdown': TSinchDropdownElement;
     }
 }
-export {};

package/dropdown/index.js

@@ -11,9 +11,10 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
+import { orientationValues } from '../popover/utils';
+import '../popover';
 import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}sinch-popover{width:100%}</style><sinch-popover><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
-const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/dropdown/types.d.ts

@@ -0,0 +1,25 @@
+import type { TSinchPopoverOrientation } from '../popover';
+import type { TRect, TSinchElementReact } from '../types';
+import type { FocusEvent, SyntheticEvent } from 'react';
+export declare type TSinchDropdownElement = HTMLElement & {
+    open: boolean;
+    multiple: boolean;
+    orientation: TSinchPopoverOrientation;
+    value: string;
+    maxVisibleItems: number | null;
+    readonly dropdownRect: TRect;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownElement> & {
+    open: boolean;
+    multiple?: boolean;
+    orientation?: TSinchPopoverOrientation;
+    value: string;
+    maxVisibleItems?: number;
+    'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchDropdownElement, CustomEvent<void>>) => void;
+    onChange: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
+    onFocus?: (e: FocusEvent<TSinchDropdownElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchDropdownElement>) => void;
+};

package/dropdown/types.js

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

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

@@ -1,17 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchDropdownCheckboxOptionElement = HTMLElement & {
-    value: string;
-    text: string;
-    checked: boolean;
-    selected: boolean;
-    disabled: boolean;
-};
-export declare type TSinchDropdownCheckboxOptionReact = TSinchElementReact<TSinchDropdownCheckboxOptionElement> & {
-    value: string;
-    text: string;
-    disabled?: boolean;
-    'aria-label': string;
-};
+import type { TSinchDropdownCheckboxOptionElement, TSinchDropdownCheckboxOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

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

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

package/dropdown-checkbox-option/types.js

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

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

@@ -1,17 +1,4 @@
-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;
-};
+import type { TSinchDropdownRadioOptionElement, TSinchDropdownRadioOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

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

@@ -1,5 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchElementReact } from '../types';
+import type { TSinchDropdownTextOptionElement, TSinchDropdownTextOptionReact } from './types';
 export declare class DropdownTextOption extends NectaryElement {
     #private;
     constructor();
@@ -18,20 +18,6 @@ export declare class DropdownTextOption extends NectaryElement {
     get selected(): boolean;
     get icon(): Element | null;
 }
-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;
-};
 declare global {
     namespace JSX {
         interface IntrinsicElements {

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/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/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-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/admin-panel-settings/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="M17 11c.34 0 .67.04 1 .09V7.58c0-.8-.47-1.52-1.2-1.83l-5.5-2.4c-.51-.22-1.09-.22-1.6 0l-5.5 2.4C3.47 6.07 3 6.79 3 7.58v3.6c0 4.54 3.2 8.79 7.5 9.82.55-.13 1.08-.32 1.6-.55-.69-.98-1.1-2.17-1.1-3.45 0-3.31 2.69-6 6-6Z"/><path d="M17 13c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4Zm0 1.38c.62 0 1.12.51 1.12 1.12 0 .61-.51 1.12-1.12 1.12-.61 0-1.12-.51-1.12-1.12 0-.61.5-1.12 1.12-1.12Zm0 5.37c-.93 0-1.74-.46-2.24-1.17.05-.72 1.51-1.08 2.24-1.08.73 0 2.19.36 2.24 1.08-.5.71-1.31 1.17-2.24 1.17Z" fill="#0A273D"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17 11c.34 0 .67.04 1 .09V7.58c0-.8-.47-1.52-1.2-1.83l-5.5-2.4c-.51-.22-1.09-.22-1.6 0l-5.5 2.4C3.47 6.07 3 6.79 3 7.58v3.6c0 4.54 3.2 8.79 7.5 9.82.55-.13 1.08-.32 1.6-.55-.69-.98-1.1-2.17-1.1-3.45 0-3.31 2.69-6 6-6Z"/><path d="M17 13c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4Zm0 1.38c.62 0 1.12.51 1.12 1.12 0 .61-.51 1.12-1.12 1.12-.61 0-1.12-.51-1.12-1.12 0-.61.5-1.12 1.12-1.12Zm0 5.37c-.93 0-1.74-.46-2.24-1.17.05-.72 1.51-1.08 2.24-1.08.73 0 2.19.36 2.24 1.08-.5.71-1.31 1.17-2.24 1.17Z"/></svg>';
 defineCustomElement('sinch-icon-admin-panel-settings', createIconClass(templateHTML));

package/icons/airplanemode-active/index.d.ts

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

package/icons/airplanemode-active/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.48 13.7 13.5 9V3.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5V9l-7.98 4.7c-.32.18-.52.53-.52.9 0 .7.67 1.2 1.34 1.01l7.16-2.1V19l-2.26 1.35c-.15.09-.24.26-.24.43v.58c0 .33.31.57.62.49l2.92-.73L12 21l.38.09.42.11 1.9.48.67.17c.32.08.62-.16.62-.49v-.58c0-.18-.09-.34-.24-.43L13.5 19v-5.5l7.16 2.1c.67.2 1.34-.3 1.34-1 0-.37-.2-.72-.52-.9Z"/></svg>';
+defineCustomElement('sinch-icon-airplanemode-active', createIconClass(templateHTML));

package/icons/airplanemode-inactive/index.d.ts

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

package/icons/airplanemode-inactive/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 14.6c0 .7-.67 1.2-1.34 1.01l-3.15-.93-7.01-7.01V3.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V9l7.98 4.7c.32.18.52.53.52.9Zm-8.5-1.1L9.56 9.56 3.51 3.51A.996.996 0 1 0 2.1 4.92l5.67 5.67-5.25 3.11c-.32.18-.52.53-.52.9 0 .7.67 1.2 1.34 1.01l7.16-2.1V19l-2.26 1.35c-.15.09-.24.26-.24.43v.58c0 .33.31.57.62.49l2.92-.73L12 21l.38.09.42.11 1.9.48.67.17c.32.08.62-.16.62-.49v-.58c0-.18-.09-.34-.24-.43L13.5 19v-2.67l5.57 5.57a.996.996 0 1 0 1.41-1.41L13.5 13.5Z"/></svg>';
+defineCustomElement('sinch-icon-airplanemode-inactive', createIconClass(templateHTML));

package/icons/alternate-email/index.d.ts

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

package/icons/alternate-email/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.72 2.03A9.991 9.991 0 0 0 2.03 12.72C2.39 18.01 7.01 22 12.31 22H16c.55 0 1-.45 1-1s-.45-1-1-1h-3.67c-3.73 0-7.15-2.42-8.08-6.03-1.49-5.8 3.91-11.21 9.71-9.71C17.58 5.18 20 8.6 20 12.33v1.1c0 .79-.71 1.57-1.5 1.57s-1.5-.78-1.5-1.57v-1.25c0-2.51-1.78-4.77-4.26-5.12a5.008 5.008 0 0 0-5.66 5.87 4.996 4.996 0 0 0 3.72 3.94c1.84.43 3.59-.16 4.74-1.33.89 1.22 2.67 1.86 4.3 1.21 1.34-.53 2.16-1.9 2.16-3.34v-1.09c0-5.31-3.99-9.93-9.28-10.29ZM12 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3Z"/></svg>';
+defineCustomElement('sinch-icon-alternate-email', createIconClass(templateHTML));

package/icons/app-blocking/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="M18 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4Zm-2.5 4A2.5 2.5 0 0 1 18 9.5c.42 0 .8.11 1.15.29l-3.36 3.36c-.18-.35-.29-.73-.29-1.15Zm2.5 2.5c-.42 0-.8-.11-1.15-.29l3.36-3.36c.18.35.29.73.29 1.15a2.5 2.5 0 0 1-2.5 2.5Z"/><path d="M17 18H7V6h10v1h2V3c0-1.1-.9-2-2-2H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-4h-2v1Z" fill="#0A273D"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4Zm-2.5 4A2.5 2.5 0 0 1 18 9.5c.42 0 .8.11 1.15.29l-3.36 3.36c-.18-.35-.29-.73-.29-1.15Zm2.5 2.5c-.42 0-.8-.11-1.15-.29l3.36-3.36c.18.35.29.73.29 1.15a2.5 2.5 0 0 1-2.5 2.5Z"/><path d="M17 18H7V6h10v1h2V3c0-1.1-.9-2-2-2H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-4h-2v1Z"/></svg>';
 defineCustomElement('sinch-icon-app-blocking', createIconClass(templateHTML));

package/icons/arrow-left/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="M12.29 8.71 9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7Z" fill="#0A273D"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.29 8.71 9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7Z"/></svg>';
 defineCustomElement('sinch-icon-arrow-left', createIconClass(templateHTML));

package/icons/attach-email/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="M21 10V4c0-1.1-.9-2-2-2H3c-1.1 0-1.99.9-1.99 2L1 16c0 1.1.9 2 2 2h11v-5c0-1.66 1.34-3 3-3h4Zm-9.47.67c-.32.2-.74.2-1.06 0L3.4 6.25a.85.85 0 1 1 .9-1.44L11 9l6.7-4.19a.85.85 0 1 1 .9 1.44l-7.07 4.42Z" fill="#0A273D"/><path d="M22 14c-.55 0-1 .45-1 1v3c0 1.1-.9 2-2 2s-2-.9-2-2v-4.5c0-.28.22-.5.5-.5s.5.22.5.5V17c0 .55.45 1 1 1s1-.45 1-1v-3.5a2.5 2.5 0 0 0-5 0V18c0 2.21 1.79 4 4 4s4-1.79 4-4v-3c0-.55-.45-1-1-1Z"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 10V4c0-1.1-.9-2-2-2H3c-1.1 0-1.99.9-1.99 2L1 16c0 1.1.9 2 2 2h11v-5c0-1.66 1.34-3 3-3h4Zm-9.47.67c-.32.2-.74.2-1.06 0L3.4 6.25a.85.85 0 1 1 .9-1.44L11 9l6.7-4.19a.85.85 0 1 1 .9 1.44l-7.07 4.42Z"/><path d="M22 14c-.55 0-1 .45-1 1v3c0 1.1-.9 2-2 2s-2-.9-2-2v-4.5c0-.28.22-.5.5-.5s.5.22.5.5V17c0 .55.45 1 1 1s1-.45 1-1v-3.5a2.5 2.5 0 0 0-5 0V18c0 2.21 1.79 4 4 4s4-1.79 4-4v-3c0-.55-.45-1-1-1Z"/></svg>';
 defineCustomElement('sinch-icon-attach-email', createIconClass(templateHTML));

package/icons/attribution/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"><path d="M12 8.5c-.91 0-2.75.46-2.75 1.38V14c0 .28.22.5.5.5h1v3.25a1.25 1.25 0 0 0 2.5 0V14.5h1c.28 0 .5-.22.5-.5V9.88c0-.91-1.84-1.38-2.75-1.38ZM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z"/><path d="M12 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" fill="#0A273D"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8.5c-.91 0-2.75.46-2.75 1.38V14c0 .28.22.5.5.5h1v3.25a1.25 1.25 0 0 0 2.5 0V14.5h1c.28 0 .5-.22.5-.5V9.88c0-.91-1.84-1.38-2.75-1.38ZM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z"/><path d="M12 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/></svg>';
 defineCustomElement('sinch-icon-attribution', createIconClass(templateHTML));

package/icons/backup-table/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="M20 7v12c0 .55-.45 1-1 1H7c-.55 0-1 .45-1 1s.45 1 1 1h13c1.1 0 2-.9 2-2V7c0-.55-.45-1-1-1s-1 .45-1 1Z"/><path d="M16 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2ZM9 16H4v-5h5v5Zm7 0h-5v-5h5v5Zm0-7H4V4h12v5Z" fill="#0A273D"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20 7v12c0 .55-.45 1-1 1H7c-.55 0-1 .45-1 1s.45 1 1 1h13c1.1 0 2-.9 2-2V7c0-.55-.45-1-1-1s-1 .45-1 1Z"/><path d="M16 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2ZM9 16H4v-5h5v5Zm7 0h-5v-5h5v5Zm0-7H4V4h12v5Z"/></svg>';
 defineCustomElement('sinch-icon-backup-table', createIconClass(templateHTML));

package/icons/battery-alert/index.d.ts

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

package/icons/battery-alert/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.67 4H14V3c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.34 22h7.32c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4ZM13 18h-2v-2h2v2Zm0-5c0 .55-.45 1-1 1s-1-.45-1-1v-3c0-.55.45-1 1-1s1 .45 1 1v3Z"/></svg>';
+defineCustomElement('sinch-icon-battery-alert', createIconClass(templateHTML));

package/icons/battery-charging-full/index.d.ts

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

package/icons/battery-charging-full/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.67 4H14V3c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.34 22h7.32c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4Zm-1.06 9.24-2.67 5c-.24.45-.94.28-.94-.24v-3.5H9.83a.5.5 0 0 1-.44-.74l2.67-5c.24-.45.94-.28.94.24v3.5h1.17c.37 0 .62.4.44.74Z"/></svg>';
+defineCustomElement('sinch-icon-battery-charging-full', createIconClass(templateHTML));

package/icons/battery-full/index.d.ts

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

package/icons/battery-full/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.67 4H14V3c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.34 22h7.32c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4Z"/></svg>';
+defineCustomElement('sinch-icon-battery-full', createIconClass(templateHTML));

package/icons/battery-std/index.d.ts

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

package/icons/battery-std/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.67 4H14V3c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.34 22h7.32c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4Z"/></svg>';
+defineCustomElement('sinch-icon-battery-std', createIconClass(templateHTML));

package/icons/battery-unknown/index.d.ts

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

package/icons/battery-unknown/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.67 4H14V3c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.34 22h7.32c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4ZM13 18h-2v-2h2v2Zm1.3-5.31s-.38.42-.67.71c-.14.14-.27.31-.39.47l-.09.15c-.08.12-.14.25-.19.37-.09.22-.16.43-.16.61h-1.6c0-.42.12-.8.29-1.13.06-.11.13-.21.2-.31.03-.05.06-.11.1-.16.11-.14.23-.28.34-.4l.93-.94A1.498 1.498 0 0 0 12 9.5c-.65 0-1.21.41-1.41.99a.75.75 0 0 1-.71.51c-.52 0-.88-.52-.71-1.01A3.005 3.005 0 0 1 12 8c1.66 0 3 1.34 3 3 0 .66-.27 1.26-.7 1.69Z"/></svg>';
+defineCustomElement('sinch-icon-battery-unknown', createIconClass(templateHTML));

package/icons/biotech/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"><path d="M7 19c-1.1 0-2 .9-2 2h14c0-1.1-.9-2-2-2h-4v-2h3c1.1 0 2-.9 2-2h-8c-1.66 0-3-1.34-3-3 0-1.09.59-2.04 1.46-2.56C8.17 9.03 8 8.54 8 8c0-.21.04-.42.09-.62A5.01 5.01 0 0 0 5 12c0 2.76 2.24 5 5 5v2H7Z"/><path d="M10.56 5.51C11.91 5.54 13 6.64 13 8c0 .75-.33 1.41-.85 1.87l.25.68c.19.52.76.79 1.28.6.19.52.76.79 1.28.6.52-.19.79-.76.6-1.28.52-.19.79-.76.6-1.28L14.1 3.54a.998.998 0 0 0-1.28-.6.998.998 0 0 0-1.28-.6c-.52.19-.79.76-.6 1.28-.52.19-.79.76-.6 1.28l.22.61Z" fill="#0A273D"/><path d="M10.5 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" fill="#0A273D"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 19c-1.1 0-2 .9-2 2h14c0-1.1-.9-2-2-2h-4v-2h3c1.1 0 2-.9 2-2h-8c-1.66 0-3-1.34-3-3 0-1.09.59-2.04 1.46-2.56C8.17 9.03 8 8.54 8 8c0-.21.04-.42.09-.62A5.01 5.01 0 0 0 5 12c0 2.76 2.24 5 5 5v2H7Z"/><path d="M10.56 5.51C11.91 5.54 13 6.64 13 8c0 .75-.33 1.41-.85 1.87l.25.68c.19.52.76.79 1.28.6.19.52.76.79 1.28.6.52-.19.79-.76.6-1.28.52-.19.79-.76.6-1.28L14.1 3.54a.998.998 0 0 0-1.28-.6.998.998 0 0 0-1.28-.6c-.52.19-.79.76-.6 1.28-.52.19-.79.76-.6 1.28l.22.61Z"/><path d="M10.5 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/></svg>';
 defineCustomElement('sinch-icon-biotech', createIconClass(templateHTML));