@nectary/components 0.26.0 → 0.28.0

package/icons/visibility/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 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4Zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Zm0-8c-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-visibility', createIconClass(templateHTML));

package/icons/visibility-off/index.d.ts

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

package/icons/visibility-off/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 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24ZM2.71 3.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.892 11.892 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0ZM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5Zm2.97-5.33a2.97 2.97 0 0 0-2.64-2.64l2.64 2.64Z"/></svg>';
+defineCustomElement('sinch-icon-visibility-off', createIconClass(templateHTML));

package/icons/voice-over-off/index.d.ts

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

package/icons/voice-over-off/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.72 6.41c-.35.35-.44.88-.25 1.35.3.75.32 1.58.05 2.34-.16.46-.06.98.29 1.32.6.6 1.66.47 2.02-.31.64-1.39.6-2.99-.12-4.41a1.25 1.25 0 0 0-1.99-.29Zm3.46-3.52c-.4.4-.46 1.02-.13 1.48 1.93 2.68 1.95 6.25.09 9.07-.31.46-.23 1.08.16 1.47.51.51 1.38.46 1.81-.13 2.57-3.51 2.52-8.2-.17-11.77-.43-.56-1.26-.62-1.76-.12ZM9.43 5.04l3.53 3.53a3.979 3.979 0 0 0-3.53-3.53ZM3.71 3.56a.996.996 0 0 0 0 1.41l1.91 1.91a3.98 3.98 0 0 0-.47 3.2c.36 1.33 1.44 2.4 2.77 2.77 1.19.33 2.31.09 3.2-.47l4.4 4.4C13.74 15.6 10.78 15 9 15c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-.37-.11-.7-.29-1.02l2.31 2.31a.996.996 0 1 0 1.41-1.41L5.12 3.56a.996.996 0 0 0-1.41 0Z"/></svg>';
+defineCustomElement('sinch-icon-voice-over-off', createIconClass(templateHTML));

package/icons/voicemail/index.d.ts

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

package/icons/voicemail/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.5 6C15.46 6 13 8.46 13 11.5c0 1.33.47 2.55 1.26 3.5H9.74c.79-.95 1.26-2.17 1.26-3.5C11 8.46 8.54 6 5.5 6S0 8.46 0 11.5 2.46 17 5.5 17h13c3.04 0 5.5-2.46 5.5-5.5S21.54 6 18.5 6Zm-13 9C3.57 15 2 13.43 2 11.5S3.57 8 5.5 8 9 9.57 9 11.5 7.43 15 5.5 15Zm13 0c-1.93 0-3.5-1.57-3.5-3.5S16.57 8 18.5 8 22 9.57 22 11.5 20.43 15 18.5 15Z"/></svg>';
+defineCustomElement('sinch-icon-voicemail', createIconClass(templateHTML));

package/icons/vpn-key/index.d.ts

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

package/icons/vpn-key/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.65 10a5.998 5.998 0 0 0-6.88-3.88c-2.29.46-4.15 2.29-4.63 4.58A6.006 6.006 0 0 0 7 18a5.99 5.99 0 0 0 5.65-4H17v2c0 1.1.9 2 2 2s2-.9 2-2v-2c1.1 0 2-.9 2-2s-.9-2-2-2h-8.35ZM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2Z"/></svg>';
+defineCustomElement('sinch-icon-vpn-key', createIconClass(templateHTML));

package/icons/wallpaper/index.d.ts

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

package/icons/wallpaper/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 5c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H4c-1.1 0-2 .9-2 2v6c0 .55.45 1 1 1s1-.45 1-1V5Zm5.61 8.49-2.96 3.7c-.26.33-.03.81.39.81H17a.5.5 0 0 0 .4-.8l-2-2.67c-.2-.27-.6-.27-.8 0l-1.63 2.18-2.58-3.22a.5.5 0 0 0-.78 0ZM17 8.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5ZM20 2h-6c-.55 0-1 .45-1 1s.45 1 1 1h5c.55 0 1 .45 1 1v5c0 .55.45 1 1 1s1-.45 1-1V4c0-1.1-.9-2-2-2Zm0 17c0 .55-.45 1-1 1h-5c-.55 0-1 .45-1 1s.45 1 1 1h6c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5ZM3 13c-.55 0-1 .45-1 1v6c0 1.1.9 2 2 2h6c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1v-5c0-.55-.45-1-1-1Z"/></svg>';
+defineCustomElement('sinch-icon-wallpaper', createIconClass(templateHTML));

package/icons/watch-later/index.d.ts

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

package/icons/watch-later/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.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2Zm3.55 13.8-4.08-2.51c-.3-.18-.48-.5-.48-.85V7.75a.77.77 0 0 1 .76-.75c.41 0 .75.34.75.75v4.45l3.84 2.31c.36.22.48.69.26 1.05-.22.35-.69.46-1.05.24Z"/></svg>';
+defineCustomElement('sinch-icon-watch-later', createIconClass(templateHTML));

package/icons/widgets/index.d.ts

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

package/icons/widgets/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 14v6c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1Zm-9 7h6c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1ZM3 4v6c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1Zm12.95-1.6L11.7 6.64a.996.996 0 0 0 0 1.41l4.25 4.25c.39.39 1.02.39 1.41 0l4.25-4.25a.996.996 0 0 0 0-1.41L17.37 2.4c-.39-.39-1.03-.39-1.42 0Z"/></svg>';
+defineCustomElement('sinch-icon-widgets', createIconClass(templateHTML));

package/icons/wifi-calling/index.d.ts

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

package/icons/wifi-calling/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 4.95C21.79 4.78 19.67 3 16.5 3c-3.18 0-5.29 1.78-5.5 1.95L16.5 12 22 4.95Z"/><path d="m19.2 15.28-2.54-.29a1.99 1.99 0 0 0-1.64.57l-1.84 1.84a15.045 15.045 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.04.57-1.64L8.72 4.8a2.001 2.001 0 0 0-1.99-1.77H5c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.37 15.9 15.9 1.13.07 2.07-.87 2.07-2v-1.73c0-1.02-.76-1.87-1.77-1.99Z"/></svg>';
+defineCustomElement('sinch-icon-wifi-calling', createIconClass(templateHTML));

package/icons/wifi-lock/index.d.ts

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

package/icons/wifi-lock/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.31 9.58 24 6c-3.34-2.51-7.5-4-12-4S3.34 3.49 0 6l10.4 13.87c.8 1.07 2.4 1.07 3.2 0l1.9-2.53V14.5c0-2.76 2.24-5 5-5 .28 0 .55.04.81.08ZM23 16v-1.5a2.5 2.5 0 0 0-5 0V16c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h5c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1Zm-1 0h-3v-1.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V16Z"/></svg>';
+defineCustomElement('sinch-icon-wifi-lock', createIconClass(templateHTML));

package/icons/wifi-protected-setup/index.d.ts

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

package/icons/wifi-protected-setup/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="m16.7 5.3 1.44-1.44c.32-.32.09-.85-.35-.85H11.5c-.28 0-.5.22-.5.5V9.8c0 .45.54.67.85.35L13.3 8.7c1.97 1.46 3.25 3.78 3.25 6.42 0 .66-.08 1.31-.24 1.92-.12.5.48.86.84.49a8.474 8.474 0 0 0 2.4-5.91c0-2.51-1.11-4.76-2.85-6.32Zm-4.55 8.56L10.7 15.3c-1.97-1.46-3.25-3.78-3.25-6.42 0-.66.08-1.31.24-1.92.12-.5-.48-.86-.84-.49a8.474 8.474 0 0 0 .44 12.24l-1.44 1.44c-.32.32-.09.85.35.85h6.29c.28 0 .5-.22.5-.5v-6.29a.49.49 0 0 0-.84-.35Z"/></svg>';
+defineCustomElement('sinch-icon-wifi-protected-setup', createIconClass(templateHTML));

package/icons/wifi-tethering/index.d.ts

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

package/icons/wifi-tethering/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 11c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 2a6 6 0 0 0-6.75-5.95c-2.62.32-4.78 2.41-5.18 5.02-.33 2.15.49 4.11 1.93 5.4.48.43 1.23.33 1.56-.23l.01-.01c.24-.42.14-.93-.22-1.26a3.997 3.997 0 0 1-1.22-3.94 3.954 3.954 0 0 1 2.9-2.91A3.999 3.999 0 0 1 16 13c0 1.18-.52 2.23-1.33 2.96-.36.32-.47.84-.23 1.26l.01.01c.31.53 1.03.69 1.5.28A5.996 5.996 0 0 0 18 13Zm-7.17-9.93c-4.62.52-8.35 4.33-8.78 8.96a9.966 9.966 0 0 0 4.02 9.01c.48.35 1.16.2 1.46-.31.25-.43.14-.99-.26-1.29-2.28-1.69-3.65-4.55-3.16-7.7.54-3.5 3.46-6.29 6.98-6.68C15.91 4.51 20 8.28 20 13c0 2.65-1.29 4.98-3.27 6.44-.4.3-.51.85-.26 1.29.3.52.98.66 1.46.31A9.96 9.96 0 0 0 22 13c0-5.91-5.13-10.62-11.17-9.93Z"/></svg>';
+defineCustomElement('sinch-icon-wifi-tethering', createIconClass(templateHTML));

package/icons/work/index.d.ts

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

package/icons/work/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 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2Zm-6 0h-4V4h4v2Z"/></svg>';
+defineCustomElement('sinch-icon-work', createIconClass(templateHTML));

package/icons/work-off/index.d.ts

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

package/icons/work-off/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 2.54A.996.996 0 1 0 2.7 3.95L4.74 6H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h15.74l1.29 1.29a.996.996 0 1 0 1.41-1.41L4.11 2.54ZM10 4h4v2h-3.6L22 17.6V8c0-1.11-.89-2-2-2h-4V4c0-1.11-.89-2-2-2h-4c-.99 0-1.8.7-1.96 1.64L10 5.6V4Z"/></svg>';
+defineCustomElement('sinch-icon-work-off', createIconClass(templateHTML));

package/icons/work-outline/index.d.ts

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

package/icons/work-outline/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 6V4h-4v2h4ZM4 9v9c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1Zm16-3c1.11 0 2 .89 2 2v11c0 1.11-.89 2-2 2H4c-1.11 0-2-.89-2-2l.01-11c0-1.11.88-2 1.99-2h4V4c0-1.11.89-2 2-2h4c1.11 0 2 .89 2 2v2h4Z"/></svg>';
+defineCustomElement('sinch-icon-work-outline', createIconClass(templateHTML));

package/icons/wysiwyg/index.d.ts

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

package/icons/wysiwyg/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 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2Zm0 16H5V7h14v12Zm-3-7H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1Zm-4 4H8c-.55 0-1-.45-1-1s.45-1 1-1h4c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg>';
+defineCustomElement('sinch-icon-wysiwyg', createIconClass(templateHTML));

package/icons/youtube-searched-for/index.d.ts

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

package/icons/youtube-searched-for/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.01 14h-.8l-.27-.27a6.48 6.48 0 0 0 1.51-5.09C17.11 6 15.1 3.78 12.5 3.18 8.26 2.2 4.51 5.53 4.51 9.5h-2.1a.5.5 0 0 0-.31.89l3.4 2.75c.19.2.51.21.71.01l2.9-2.79c.32-.31.1-.86-.35-.86H6.51c0-2.49 2-4.48 4.46-4.5 2.44-.02 4.54 2.05 4.54 4.49 0 2.48-2.02 4.51-4.5 4.51-.45 0-.89-.07-1.3-.19-.34-.1-.71 0-.96.26-.53.53-.32 1.45.39 1.66.59.17 1.22.27 1.87.27 1.61 0 3.08-.59 4.22-1.57l.27.27v.79l4.27 4.25c.41.41 1.07.41 1.48 0 .41-.41.41-1.08 0-1.49L17.01 14Z"/></svg>';
+defineCustomElement('sinch-icon-youtube-searched-for', createIconClass(templateHTML));

package/icons/zoom-in/index.d.ts

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

package/icons/zoom-in/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.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.78 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.26 4.25c.41.41 1.07.41 1.48 0l.01-.01c.41-.41.41-1.07 0-1.48L15.5 14Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Zm0-7c-.28 0-.5.22-.5.5V9H7.5c-.28 0-.5.22-.5.5s.22.5.5.5H9v1.5c0 .28.22.5.5.5s.5-.22.5-.5V10h1.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H10V7.5c0-.28-.22-.5-.5-.5Z"/></svg>';
+defineCustomElement('sinch-icon-zoom-in', createIconClass(templateHTML));

package/icons/zoom-out/index.d.ts

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

package/icons/zoom-out/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.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.26 4.25c.41.41 1.07.41 1.48 0l.01-.01c.41-.41.41-1.07 0-1.48L15.5 14Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Zm-2-5h4c.28 0 .5.22.5.5s-.22.5-.5.5h-4c-.28 0-.5-.22-.5-.5s.22-.5.5-.5Z"/></svg>';
+defineCustomElement('sinch-icon-zoom-out', createIconClass(templateHTML));

package/icons-branded/credit-card/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconBrandedElement, TSinchIconBrandedReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-branded-credit-card': TSinchIconBrandedReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-branded-credit-card': TSinchIconBrandedElement;
+    }
+}

package/icons-branded/credit-card/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M36 35a3 3 0 0 0 3-3V16a3 3 0 0 0-3-3H12a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h24Zm0-19.99a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1L12 33a1 1 0 0 1-1-1V16a1 1 0 0 1 1-1l24 .01Z"/><path d="M37 23H11v-4h26v4Z" class="accent"/></svg>';
+defineCustomElement('sinch-icon-branded-credit-card', createIconClass(templateHTML));

package/icons-branded/finance/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconBrandedElement, TSinchIconBrandedReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-branded-finance': TSinchIconBrandedReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-branded-finance': TSinchIconBrandedElement;
+    }
+}

package/icons-branded/finance/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path class="accent" d="m21.01 16.055.005-1.246c0-.216.107-.422.295-.574.188-.151.443-.236.708-.235.265.001.52.088.706.241a.74.74 0 0 1 .29.576l-.004 1.187a3.48 3.48 0 0 1 1.094.622c.114.1.2.225.252.365a.87.87 0 0 1-.128.838.947.947 0 0 1-.35.282.998.998 0 0 1-.607.129c-.212-.023-.563-.134-.563-.134s-.629-.117-.898-.118c-.319 0-.748.107-.75.38 0 .274.286.53 1.378.836 1.234.36 2.555.803 2.549 2.408-.006 1.27-.783 2.029-2.01 2.286l-.005 1.293a.745.745 0 0 1-.296.574 1.127 1.127 0 0 1-.708.235 1.127 1.127 0 0 1-.706-.241.745.745 0 0 1-.29-.576l.005-1.273a3.697 3.697 0 0 1-1.651-.835.96.96 0 0 1-.238-.363.923.923 0 0 1 .1-.829.991.991 0 0 1 .316-.303c.188-.115.49-.164.712-.138a.978.978 0 0 1 .582.28 1.666 1.666 0 0 0 1.167.415c.729.003.96-.25.96-.515.003-.424-.492-.56-1.446-.82l-.093-.025c-1.264-.352-2.392-.968-2.386-2.408.01-.335.09-.664.24-.967.148-.303.36-.573.624-.795a2.595 2.595 0 0 1 1.146-.552ZM27 31H16a1 1 0 0 1 0-2h11a1 1 0 0 1 0 2Zm-11 4h11a1 1 0 0 0 0-2H16a1 1 0 0 0 0 2Z"/><path d="M34.45 18.38H33V11a3 3 0 0 0-3-3H13a3 3 0 0 0-3 3v26.92a3 3 0 0 0 3 3h18a7 7 0 0 0 7-7V21.87a3.5 3.5 0 0 0-3.55-3.49Zm1.553 15.54c0 1.317-.573 2.632-1.5 3.568A5 5 0 0 1 31 38.97H13a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h17a1 1 0 0 1 1 1v22l2-1V20.38h1.503a1.5 1.5 0 0 1 1.057.436c.281.279.44.608.443 1.004v12.1Z"/></svg>';
+defineCustomElement('sinch-icon-branded-finance', createIconClass(templateHTML));

package/icons-branded/global-settings/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconBrandedElement, TSinchIconBrandedReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-branded-global-settings': TSinchIconBrandedReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-branded-global-settings': TSinchIconBrandedElement;
+    }
+}

package/icons-branded/global-settings/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.612 39.995C14.955 39.79 8 32.707 8 24c0-8.837 7.163-16 16-16s16 7.163 16 16v.032l-.245-.027h-1.808a.2.2 0 0 1-.19-.134L37.454 23h.512a13.921 13.921 0 0 0-2.375-6.855 14.867 14.867 0 0 1-3.183 2.13c.335.858.609 1.768.799 2.729h-1.033c-.349 0-.682.09-.973.252a14.326 14.326 0 0 0-.669-2.187A18.575 18.575 0 0 1 25 20.088V23h5.055l-.293.838a.2.2 0 0 1-.231.13l-2.066-.45a2 2 0 0 0-1.987.705l-1.587 1.984a2 2 0 0 0-.365 1.784l.426 1.535a.2.2 0 0 1-.126.242l-.826.29v-.131a16.51 16.51 0 0 0-4.635.907c.767 1.399 1.695 2.65 2.637 3.726v.845a2 2 0 0 0 1.257 1.856l1.555.623a.2.2 0 0 1 .11.262l-.388.933a1 1 0 0 0 .076.916Zm-2.186-29.759a13.974 13.974 0 0 0-7.545 4.09c.787.74 1.681 1.38 2.66 1.912 1.5-2.76 3.509-4.803 4.885-6.002ZM10.036 23a13.923 13.923 0 0 1 2.57-7.136c.915.844 1.95 1.574 3.08 2.178A15.849 15.849 0 0 0 14.531 23h-4.497Zm6.504 0c.116-1.458.48-2.833 1-4.11A18.488 18.488 0 0 0 23 20.06V23h-6.46ZM25 18.087a16.669 16.669 0 0 0 4.682-.837c-1.323-2.442-3.145-4.44-4.682-5.858v6.695Zm1.574-7.851c1.413 1.23 3.492 3.35 5.004 6.224a12.763 12.763 0 0 0 2.775-1.884 13.98 13.98 0 0 0-7.78-4.34Zm-8.165 6.849c1.42.526 2.967.856 4.591.97v-6.663c-1.502 1.386-3.276 3.325-4.59 5.693Zm-5.888 14.932A13.923 13.923 0 0 1 10.035 25h4.497a15.821 15.821 0 0 0 1.11 4.849 14.75 14.75 0 0 0-3.121 2.168Zm1.26 1.552a13.976 13.976 0 0 0 7.645 4.195c-1.393-1.214-3.435-3.293-4.941-6.105a12.645 12.645 0 0 0-2.704 1.91ZM23 27.924a18.41 18.41 0 0 0-5.495 1.1A13.727 13.727 0 0 1 16.54 25H23v2.924Z"/><path class="accent" d="M34.998 33.484c0 .887-.716 1.606-1.6 1.606-.883 0-1.6-.719-1.6-1.606 0-.887.717-1.606 1.6-1.606.884 0 1.6.719 1.6 1.606Z"/><path class="accent" fill-rule="evenodd" clip-rule="evenodd" d="M43.48 31.636c.286.334.468.746.52 1.184l-.032.75v.653a2.211 2.211 0 0 1-1.621 1.917l-1.557.407v.085l.853 1.414a2.149 2.149 0 0 1-.235 2.506l-.896.91a2.213 2.213 0 0 1-2.57.257l-1.365-.857h-.064l-.288 1.478A2.225 2.225 0 0 1 34.348 44h-1.45a2.203 2.203 0 0 1-1.91-1.628l-.405-1.563h-.085l-1.408.857a2.126 2.126 0 0 1-2.528-.258l-.938-.963a2.55 2.55 0 0 1-.352-.654 2.225 2.225 0 0 1 0-1.563l.053-.107.853-1.414v-.085l-1.546-.407A2.221 2.221 0 0 1 23 34.34v-1.403a2.221 2.221 0 0 1 1.621-1.917l1.557-.407v-.086l-.853-1.413a2.148 2.148 0 0 1 .235-2.506l.896-.9a2.13 2.13 0 0 1 2.58-.32l1.291.802h.085l.395-1.553A2.225 2.225 0 0 1 32.684 23h1.45a2.14 2.14 0 0 1 1.952 1.724l.395 1.51h.085l1.408-.857a2.126 2.126 0 0 1 2.517.257l.864.814a2.146 2.146 0 0 1 .33 2.592l-.853 1.424v.086l1.557.396c.424.116.804.356 1.09.69Zm-3.97-3.731-.619-.622-1.482 1.007a1.659 1.659 0 0 1-1.6.064l-.512-.203a1.631 1.631 0 0 1-.97-1.167l-.438-1.778h-.874l-.438 1.81a1.652 1.652 0 0 1-1.066 1.135l-.555.225a1.678 1.678 0 0 1-1.46-.097l-1.537-.931-.618.62.917 1.714a1.665 1.665 0 0 1 0 1.585l-.203.503a1.596 1.596 0 0 1-1.162.975l-1.717.428v.878l1.802.45a1.64 1.64 0 0 1 1.141 1.071l.203.6c.088.195.132.407.128.621a2.757 2.757 0 0 1-.117.642l-.064.118c-.34.484-.65.988-.928 1.51l.618.578 1.675-1.017c.24-.083.492-.13.746-.139.245.002.486.06.704.171l.544.215a1.62 1.62 0 0 1 .97 1.177l.449 1.778h.874l.438-1.81a1.672 1.672 0 0 1 1.066-1.145l.555-.225a1.721 1.721 0 0 1 1.46.096l1.59.942.619-.62-.96-1.618a1.653 1.653 0 0 1-.064-1.606l.192-.514a1.627 1.627 0 0 1 1.173-.975l1.653-.503v-.867l-1.803-.44a1.662 1.662 0 0 1-1.14-1.07l-.225-.547a1.74 1.74 0 0 1 .107-1.477l.928-1.542Z"/></svg>';
+defineCustomElement('sinch-icon-branded-global-settings', createIconClass(templateHTML));

package/icons-branded/help/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconBrandedElement, TSinchIconBrandedReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-branded-help': TSinchIconBrandedReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-branded-help': TSinchIconBrandedElement;
+    }
+}

package/icons-branded/help/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 40c8.837 0 16-7.163 16-16S32.837 8 24 8 8 15.163 8 24s7.163 16 16 16Zm0-2c7.732 0 14-6.268 14-14s-6.268-14-14-14-14 6.268-14 14 6.268 14 14 14Z"/><path class="accent" d="M22.395 27.16h2.53c0-2.376 3.872-3.278 3.872-6.622 0-2.772-2.376-4.224-4.818-4.224-2.244 0-4.268 1.1-5.104 3.256l2.178 1.232c.44-1.298 1.474-2.024 2.86-2.024 1.408 0 2.354.638 2.354 1.914 0 2.398-3.872 3.234-3.872 6.468Zm1.276 5.104c.902 0 1.65-.748 1.65-1.65 0-.924-.748-1.65-1.65-1.65-.924 0-1.65.726-1.65 1.65 0 .902.726 1.65 1.65 1.65Z"/></svg>';
+defineCustomElement('sinch-icon-branded-help', createIconClass(templateHTML));

package/icons-branded/verified-phone/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconBrandedElement, TSinchIconBrandedReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-branded-verified-phone': TSinchIconBrandedReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-branded-verified-phone': TSinchIconBrandedElement;
+    }
+}

package/icons-branded/verified-phone/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path class="accent" d="M33.568 22.8a1 1 0 0 0-1.505-1.318l-4.164 4.756-2.126-2.205a1 1 0 1 0-1.44 1.388l2.882 2.988a1 1 0 0 0 1.472-.035l4.88-5.575Z"/><path class="accent" fill-rule="evenodd" clip-rule="evenodd" d="M20 25c0-4.979 4.021-9 9-9 4.883 0 8.904 3.925 9 9 0 4.979-4.021 9-9 9a8.99 8.99 0 0 1-9-9Zm1.915-.096A7.07 7.07 0 0 0 29 31.99c3.83-.095 6.99-3.16 7.085-7.085A7.07 7.07 0 0 0 29 17.82a7.07 7.07 0 0 0-7.085 7.085Z"/><path d="M33 38.5v-3.063l2-1.31V38.5c0 2-1.5 3.6-3.4 3.6H16.5c-2 0-3.5-1.6-3.5-3.5V9.5c0-2 1.5-3.5 3.5-3.5h15c2 0 3.5 1.5 3.5 3.5v8.817a8.968 8.968 0 0 0-2-1.372V9.5c0-.8-.7-1.5-1.4-1.5H16.5c-.8 0-1.5.7-1.5 1.5v29c0 .8.7 1.5 1.5 1.5h15c.8 0 1.5-.7 1.5-1.5Z"/><path d="M28 10h-8c-.6 0-1 .4-1 1s.4 1 1 1h8c.6 0 1-.4 1-1s-.4-1-1-1Zm-2.5 26.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/></svg>';
+defineCustomElement('sinch-icon-branded-verified-phone', createIconClass(templateHTML));

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@nectary/components",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "files": [
     "theme.css",
     "**/*/*.js",
     "**/*/*.d.ts",
     "utils.js",
     "utils.d.ts",
-    "index.js",
-    "index.d.ts",
     "types.d.ts",
     "colors.json"
   ],

package/popover/index.d.ts

@@ -1,6 +1,6 @@
+import { orientationValues } from './utils';
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-declare const orientationValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
 export declare type TSinchPopoverOrientation = typeof orientationValues[number];
 export declare type TSinchPopoverElement = HTMLElement & {
     open: boolean;
@@ -23,4 +23,3 @@ declare global {
         'sinch-popover': TSinchPopoverElement;
     }
 }
-export {};

package/popover/index.js

@@ -12,11 +12,12 @@ 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 dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 6px rgba(0,0,0,.15);border:none;border-radius:4px;overflow-y:auto;contain:content;padding:0;box-sizing:border-box}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
-const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, getCssVar } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;left:0;right:0;margin:auto;outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 6px rgba(0,0,0,.15);border:1px solid var(--sinch-color-snow-500);border-radius:4px;contain:content;padding:0;box-sizing:border-box}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#target{display:flex;flex-direction:column}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
+import { orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
+const POPOVER_VERTICAL_OFFSET = 4;
 defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
@@ -49,6 +50,10 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
     _classPrivateFieldInitSpec(this, _onBackdropClick, {
       writable: true,
       value: e => {
+        if (e.target !== _classPrivateFieldGet(this, _$dialog)) {
+          return;
+        }
+
         const rect = this.popoverRect;
         const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
 
@@ -165,21 +170,28 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 }));
 
 function _onExpand2() {
+  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    return;
+  }
+
   _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
 
-  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-    _classPrivateFieldGet(this, _$dialog).showModal();
-  }
+  _classPrivateFieldGet(this, _$dialog).showModal();
 
   _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+
+  document.body.style.overflow = 'hidden';
 }
 
 function _onCollapse2() {
+  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    return;
+  }
+
   _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
 
-  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-    _classPrivateFieldGet(this, _$dialog).close?.();
-  }
+  _classPrivateFieldGet(this, _$dialog).close?.();
+  document.body.style.overflow = '';
 }
 
 function _isOpen2() {
@@ -187,37 +199,39 @@ function _isOpen2() {
 }
 
 function _updateOrientation2() {
-  _classPrivateFieldGet(this, _$dialog).style.transform = `initial`;
-  _classPrivateFieldGet(this, _$dialog).style.width = `max-content`;
+  _classPrivateFieldGet(this, _$dialog).style.transform = 'initial';
+  _classPrivateFieldGet(this, _$dialog).style.width = 'fit-content';
 
-  const buttonRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
+  const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
 
   const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
 
-  const width = Math.max(modalRect.width, buttonRect.width);
-  const widthDiff = Math.max(buttonRect.width - modalRect.width, 0);
   let leftOffset = 0;
   let topOffset = 0;
   const orient = this.orientation;
+  const shouldExpandWidthToTarget = getCssVar(this, '--sinch-popover-expand-width') !== null;
+  const largestWidth = Math.max(modalRect.width, targetRect.width);
+  const widthDiff = shouldExpandWidthToTarget ? Math.max(largestWidth - modalRect.width, 0) * 0.5 : 0;
+  const resultWidth = shouldExpandWidthToTarget ? largestWidth : modalRect.width;
 
   if (orient === 'bottom-right' || orient === 'top-right') {
-    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x - modalRect.x + widthDiff * 0.5));
+    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, targetRect.x - modalRect.x) + widthDiff);
   }
 
   if (orient === 'bottom-left' || orient === 'top-left') {
-    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x + buttonRect.width - modalRect.x - modalRect.width - widthDiff * 0.5));
+    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, targetRect.x + targetRect.width - modalRect.x - modalRect.width) - widthDiff);
   }
 
   if (orient === 'bottom-left' || orient === 'bottom-right') {
-    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y + buttonRect.height - modalRect.y + 8));
+    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, targetRect.y + targetRect.height - modalRect.y + POPOVER_VERTICAL_OFFSET));
   }
 
   if (orient === 'top-left' || orient === 'top-right') {
-    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y - modalRect.y - modalRect.height - 8));
+    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, targetRect.y - modalRect.y - modalRect.height - POPOVER_VERTICAL_OFFSET));
   }
 
-  _classPrivateFieldGet(this, _$dialog).style.transform = `translateX(${leftOffset}px) translateY(${topOffset}px)`;
-  _classPrivateFieldGet(this, _$dialog).style.width = `${width}px`;
+  _classPrivateFieldGet(this, _$dialog).style.transform = `translate(${leftOffset}px, ${topOffset}px)`;
+  _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
 }
 
 function _dispatchCloseEvent2() {

package/popover/utils.d.ts

@@ -0,0 +1 @@
+export declare const orientationValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];