@nectary/assets 0.1.1 → 0.3.0

package/icons/chat-bubble-friendly/index.d.ts

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

package/icons/chat-bubble-friendly/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils/element';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><mask id="a" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M24 0H0v24h24V0Z"/></mask><g mask="url(#a)"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2Zm-1 14H6l-2 2V5c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1Z"/><path fill-rule="evenodd" d="M7.544 9.11a1 1 0 0 1 1.346.434c.363.71.795 1.184 1.278 1.486.482.3 1.077.47 1.832.47.755 0 1.35-.17 1.832-.47.483-.302.915-.777 1.278-1.486a1 1 0 0 1 1.78.912c-.494.965-1.152 1.74-1.998 2.27-.85.53-1.825.774-2.892.774s-2.043-.244-2.892-.774c-.847-.53-1.504-1.305-1.998-2.27a1 1 0 0 1 .434-1.346Z" clip-rule="evenodd"/></g></svg>';
+defineCustomElement('sinch-icon-chat-bubble-friendly', createIconClass(templateHTML));

package/illustrations/cat/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIllustrationElement, TSinchIllustrationReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-illustration-cat': TSinchIllustrationReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-illustration-cat': TSinchIllustrationElement;
+    }
+}

package/illustrations/cat/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils/element';
+import { createIllustrationClass } from '../create-illustration-class';
+const templateHTML = '<svg viewBox="0 0 73 131" fill="none" aria-hidden="true" focusable="false"><path d="M0 76.93C0 82.65 4.63 87.3 10.35 87.3h34.77s1.42-4.98-4.1-5.88c4.1-6.68 7.44-19.4 7.44-19.4s0 23.25 3.47 25.28H64s1.8-1.9 1.8-4.73c-.39-2.44-2.96-1.59-4.99-2.44-1.38-12.66 1.27-32.33 6.81-49.56 0-1.5 1.8-3.1 2.68-4.33 1.7-2.33 2.7-5.2 2.7-8.31 0-.67-.05-2.64-.14-3.28V.85A.85.85 0 0 0 71.6.11l-3.98 2.3-2.45 1.4c-.84.5-1.85.63-2.8.38a14.2 14.2 0 0 0-7.12 0c-.95.26-1.96.13-2.82-.37-2.77-1.9-4.45-2.85-7.3-3.56-.78-.2-1.55 0-1.16.9 0 0 1.17 2.65 1.15 4.75 0 .51.06.93 0 1.15-.64 6.3-1.06 10.08-.12 14.08.4 1.7 1.31 2.75.12 4.03 0 0-18.36 3.05-30.17 15.92C5.84 51 0 63.62 0 76.94Z" fill="#A05735"/><path d="M68.17 14.28a2.42 2.42 0 0 0-4.6-.02" fill="#A05735"/><path fill-rule="evenodd" clip-rule="evenodd" d="M62.5 14.03a3.23 3.23 0 0 1 6.17.02c.13.43-.29.6-.72.74-.44.13-.71.18-.85-.25-.2-.65-.8-.92-1.52-.92-.71 0-1.85.28-2.05.92-.13.43-.33.38-.76.25-.44-.14-.4-.33-.27-.76Z" fill="#703E29"/><path d="M57.17 14.28a2.42 2.42 0 0 0-4.6-.01" fill="#A05735"/><path fill-rule="evenodd" clip-rule="evenodd" d="M51.79 14.02a3.23 3.23 0 0 1 6.17.01c.13.44.22.6-.21.74s-1.17.19-1.3-.24c-.21-.66-.87-.88-1.58-.88-.71 0-2.04.23-2.25.88-.13.43-.08.38-.5.24-.44-.13-.47-.32-.33-.75Z" fill="#703E29"/><path d="m60.77 20.65-.94-1.01a.98.98 0 0 1 .72-1.65h1.88a.98.98 0 0 1 .72 1.65l-.94 1.01a.98.98 0 0 1-1.44 0ZM35.24 82.05c2.67.3 1.26 3.84.4 5.3h9.42c.56-2.76-.16-4.9-3.13-5.93-.41-.14-.6-.64-.36-1 1.8-2.7 3.48-6.48 6.58-17.3.46-.73.61-4.48-1.4-7.1-2.23-2.92-12.54 1.21-19.26 4.56-.33.17-.1.82.28.8 8.89-.53 5.89 12.47 2.82 20.1-.1.24.12.5.37.47.82-.09 2.28-.13 4.28.1ZM57.9 80.67c3.34.44 2.03 4.67 1.05 6.52h5.09c.15-.31 2-2.78 2-4.63s-1.7-1.57-4.84-2.37a.59.59 0 0 1-.45-.5c-.5-5.12.56-20.88 2.36-31.39-1.77 1.4-3.97 4.54-5.42 6.89-.79 1.27-1.31 2.7-1.52 4.18-1.08 7.85.1 16.66 1.16 20.83.07.26.3.44.58.47Z" fill="#703E29"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.32 82.6a3.6 3.6 0 0 0-4.97-1.04c-9.94 5-8.61 16.43.17 23.13 6.6 4.4 14.84 7.15 20.34 11.82 2.29 1.93 4.96 7.76-.46 8.17a13.93 13.93 0 0 1-4.59-.4c-1.9-.55-3.83.4-4.21 1.73-.61 2.1 2.59 3.6 2.63 3.61 3.87 1.12 9.26 0 11.26-2.16 11.73-10.8-13.27-21.45-20.53-28.43a7.35 7.35 0 0 1-.67-11.46 3.6 3.6 0 0 0 1.03-4.98Zm10.5 41.68Z" fill="#A05735"/><path d="M46.35 2.22a8.06 8.06 0 0 1 4.1 2.64c.12.16.02.38-.18.42-.75.12-1.94.41-2.65.74-.22.1-.67-.03-.74-.27l-.84-3.22a.25.25 0 0 1 .31-.31ZM70.85 2.94a6.37 6.37 0 0 0-3.42 2.17c-.13.15-.05.4.14.47.64.25 1.62.79 2.33 1.28.24.16.95-.1.98-.39l.29-3.25a.26.26 0 0 0-.32-.28Z" fill="#F5B486"/></svg>';
+defineCustomElement('sinch-illustration-cat', createIllustrationClass(templateHTML));

package/illustrations/create-illustration-class.js

@@ -1,6 +1,6 @@
 import { getIntegerAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-const illustrationStylesHtml = '<style>:host{display:block}svg{display:block;pointer-events:none}#wrapper{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden}#wrapper>*{flex-shrink:0}:host([valign=top]) #wrapper{align-items:flex-start}:host([valign=bottom]) #wrapper{align-items:flex-end}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-bg-secondary-yellow)}:host([background=green]) #wrapper{background-color:var(--sinch-color-bg-secondary-green)}:host([background=blue]) #wrapper{background-color:var(--sinch-color-bg-secondary-blue)}:host([background=grey]) #wrapper{background-color:var(--sinch-color-bg-primary-contrast)}:host([background=white]) #wrapper{background-color:var(--sinch-color-bg-primary-light)}</style>';
-import { backgroundValues, valignValues } from './utils';
+const illustrationStylesHtml = '<style>:host{display:block}svg{display:block;pointer-events:none}#wrapper{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden}#wrapper>*{flex-shrink:0}:host([valign=top]) #wrapper{align-items:flex-start}:host([valign=bottom]) #wrapper{align-items:flex-end}:host([halign=left]) #wrapper{justify-content:left}:host([halign=right]) #wrapper{justify-content:right}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-bg-secondary-yellow)}:host([background=green]) #wrapper{background-color:var(--sinch-color-bg-secondary-green)}:host([background=blue]) #wrapper{background-color:var(--sinch-color-bg-secondary-blue)}:host([background=grey]) #wrapper{background-color:var(--sinch-color-bg-primary-contrast)}:host([background=white]) #wrapper{background-color:var(--sinch-color-bg-primary-light)}</style>';
+import { backgroundValues, valignValues, halignValues } from './utils';
 const DEFAULT_SIZE = 256;
 const MIN_SIZE = 16;
 const MAX_SIZE = 2048;
@@ -35,6 +35,12 @@ export const createIllustrationClass = templateHTML => {
     set valign(value) {
       updateLiteralAttribute(this, valignValues, 'valign', value);
     }
+    get halign() {
+      return getLiteralAttribute(this, halignValues, 'halign', null);
+    }
+    set halign(value) {
+      updateLiteralAttribute(this, halignValues, 'halign', value);
+    }
     connectedCallback() {
       updateAttribute(this.$svg, 'preserveAspectRatio', 'xMinYMin meet');
       if (!this.hasAttribute('size')) {

package/illustrations/lightbulb/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIllustrationElement, TSinchIllustrationReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-illustration-lightbulb': TSinchIllustrationReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-illustration-lightbulb': TSinchIllustrationElement;
+    }
+}

package/illustrations/lightbulb/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils/element';
+import { createIllustrationClass } from '../create-illustration-class';
+const templateHTML = '<svg viewBox="0 0 40 58" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.1 38.19H10.91v9.84a9.09 9.09 0 0 0 18.19 0c-.02-4.85-.02-9.84-.02-9.84Z" fill="#0A273D"/><path d="M20 40.88a20 20 0 1 0 0-40 20 20 0 0 0 0 40Z" fill="#FFBE3C"/><path d="M12.43 42.64c1.58-3.25 5.47-14.46 2.84-19.72-1.47-2.94-5.07-.95-3.25 3.5a7.18 7.18 0 0 0 5.5 4.45c1 .2 4.6.2 5.52.03a7.15 7.15 0 0 0 5.7-4.48c1.8-4.43-1.79-6.44-3.26-3.5-2.62 5.26.5 16.47 2.09 19.72" stroke="#0A273D" stroke-width="2.08" stroke-miterlimit="1.06" stroke-linecap="round" stroke-linejoin="bevel"/></svg>';
+defineCustomElement('sinch-illustration-lightbulb', createIllustrationClass(templateHTML));

package/illustrations/on-a-cloud/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIllustrationElement, TSinchIllustrationReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-illustration-on-a-cloud': TSinchIllustrationReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-illustration-on-a-cloud': TSinchIllustrationElement;
+    }
+}

package/illustrations/on-a-cloud/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils/element';
+import { createIllustrationClass } from '../create-illustration-class';
+const templateHTML = '<svg viewBox="0 0 438 274" fill="none" aria-hidden="true" focusable="false"><path d="M299.52 140.32c-2-9.47-9.52-17.14-18.29-21.15-8.77-4-18.68-4.86-28.3-4.6-15.7.4-32.79 4.25-46.34 12.22-6.33 3.7-12.7 7.47-18.19 12.33-12.06 10.77-18.98 26.46-21.87 42.45a432.59 432.59 0 0 0 82.06 5.46M38.37 207.38c1.7-8.42 7.67-15.13 13.45-21.35 3.04-3.26 6.18-6.62 10.02-8.77 4.43-2.46 9.57-3.16 14.6-3.36 6.43-.3 13.05.15 18.88 2.96 5.83 2.75 10.82 8.22 11.71 14.83-16.4 10.23-32.68 21.25-49.08 31.48-.45.25-.9.55-1.44.55-.55 0-1.05-.4-1.45-.75a175.64 175.64 0 0 1-16.7-15.59Z" fill="#DEF2FF"/><path d="m40.06 182.77 6.28 5.16c3.1 1.76 6.78 1.56 11.21.66l17.54-4.72 5.58 24.61-31.99 7.12-4.38-10.17-4.24-22.66Z" fill="#F5B486"/><path d="M19.04 243.42c-1.9-8.97 44.3-18.4 50.03-25.51 6.67-8.27 16.64-14.14 27.2-14.44 10.56-.35 21.48 5.41 26.01 15.04 8.97-29.57 43.55-44.26 72.15-38.44a67.25 67.25 0 0 1 43.1 29.92 198.46 198.46 0 0 1 44.55-57.54c13.3-11.88 32.24-22.2 50.28-23.7 19.13-1.6 29.05 5.6 44.8 16.38 5.58 3.86 13.55 9.38 17.63 14.79 4.49 5.96 7.93 14.73 10.32 21.8 4.78 14.08.65 26.06-.45 40.95-1.15 15.78-9.82 29.57-24.42 36.33-6.47 3.01-21.82 5.17-21.82 5.17s-276.95.65-314.57 0c-12.9-.2-21.67-6.07-24.81-20.75Z" fill="#DEF2FF"/><path d="M69.14 185.29c0-1.19.82-2.2 1.97-2.42 14.66-2.86 58.53-9.28 71.88-13.69 17.23-5.7 28.27-7.96 36.34-5.9L236 177.76l-25.36 35.18s-19.09-35.18-47.44-35.18c-55.46 0-91.49 30.17-91.49 30.17-2.48-2.82-2.6-17.23-2.56-22.64Z" fill="#FFBE3C"/><path d="M43.9 264.17c0-48.02 38.72-87.01 86.5-87.01 47.79 0 86.45 38.94 86.45 87H43.9Z" fill="#DEF2FF"/><path d="m122.73 196.8 6.38-5c2.34-2.61 12.81-13.4 12.91-17.96l6.27-11.12h20.38l-13.1 26.82-4.09 12.88-28.75-5.61Z" fill="#F5B486"/><path d="m98.14 204.84 9.8-.6c3.66-.23 7.04-1.9 9.48-4.69l7.09-8.08c5.15-5.9 6.14 1.73 6.14 1.73s7.26 4.07 14.63 4.07c11.8 0 7.75-7.8 12.3-7.86.72 0 1.32.62 1.32 1.34l-1.14 21.36a4.36 4.36 0 0 1-3.54 4.1c-7.81 1.42-28.13 4.62-49.28 3.64-7.66-.35-14.7-4.3-14.65-8.75.1-4.23 3.7-5.98 7.85-6.25ZM25.8 162.97l3.45 9.26a13.72 13.72 0 0 0 7.2 7.75l9.75 4.47c7.12 3.23.15 6.42.15 6.42s-1.75 8.16.4 15.25c3.43 11.35 9.67 5.2 11.05 9.55.2.69-.2 1.45-.89 1.67l-20.65 5.11c-1.96.5-4-.4-4.92-2.21-3.64-7.1-12.6-25.72-17.83-46.36-1.9-7.46-.2-15.4 4.06-16.64 4.06-1.13 6.76 1.81 8.24 5.73Z" fill="#6EBBEE"/><path d="M227.62 208.53c8.27 8.07 32.93 11.13 57.45 2.3 12.6-4.5 30.26-20.12 30.26-20.12s-47.15-26.18-59.46-37.16" fill="#FFCF6E"/><path d="M40.31 263.46a30.98 30.98 0 0 0 30.9-31.07 30.98 30.98 0 0 0-30.9-31.07c-17.06 0-39.35 13.9-39.35 31.07 0 17.16 22.29 31.07 39.35 31.07Z" fill="#DEF2FF"/><path d="m255.87 153.55-28.25 54.98c-14.8-24.9-26.81-29.22-52.57-91.56-9.82-19.5 15.24-36.89 30.5-21.35l50.32 57.93Z" fill="#FFCF6E"/><path d="M152.08 261.2c0-42.54 34.33-77.07 76.63-77.07s76.64 34.53 76.64 77.08H152.08Z" fill="#DEF2FF"/><path d="M163.38 185.35c.91.34 1.85.03 2.5-.7 5.4-6.14 30.28-35.8 26.5-58C189.66 110.51 176 98.16 176 98.16s-26.64 52.76-38.55 69.37a3.23 3.23 0 0 0 .92 4.68c6.2 3.53 19.81 11.2 25 13.13Z" fill="#FFCF6E"/><path d="M289.9 86.9 243.5 48.3l-10.9 10.66c21.48 24.04 18.46 27.93 38.92 49.18 7.6 7.9 18.38-21.25 18.38-21.25Z" fill="#F5B486"/><path d="M305.23 100.35s-10.87-10.5-16.48-17.34c-.8-.98-2.44-.68-2.86.5-4.64 12.97-14.1 22.84-17.7 26.27-.7.67-.65 1.85.16 2.4 2.9 1.97 9.33 6.23 15.67 9.55 0 0-23.02 25.05-34.95 24.05 9.59 10.28 28.72 58.96 52.05 51.48 13.6-4.37 24.21-27.57 24.21-27.57s23.17-51.02 1.2-55.73c-10.47-7.27-14.07-7.6-21.3-13.6Z" fill="#059688"/><path d="M322.12 117.1s-7.42-2.9-3.04-8.11c4.44-5.21 2.15-9.5-3.11-16.9-6.56-9.24-9.02-10.9-2.45-24.4 3.88-7.97 15.3-18.6 15.3-18.6s8.8 4.07 18.92 12.29c10.11 8.27 0 51.02 0 51.02l-11.91 14.53" fill="#F5B486"/><path d="M326.19 45.13c-5.85 16.61 13.75 27.92-1.5 29.72-30.99 10.38-29.17 33-4.95 38.09 30.03 6.32 3.25 34.35 28.31 34.4 30.05.05 68.28-37.89 34.48-45.78-16.42-3.83-19.06-12.67-19.06-27.95 0-13.56-3.75-27.9-23.43-32.98-6.33-1.64-11.47-2.25-13.85 4.5Z" fill="#703E29"/><path d="m351.33 78.3-11.42-9.14a1.72 1.72 0 0 0-2.42.26L318.44 93.2c-.6.74-.47 1.83.25 2.44l11.42 9.13c.72.61 1.8.48 2.41-.25l19.06-23.8a1.7 1.7 0 0 0-.25-2.42Z" fill="#3AA7EA"/><path d="M339.82 74.67c.7-.48.9-1.45.41-2.16-.48-.7-1.44-.89-2.14-.4-.7.48-.9 1.44-.41 2.15.48.71 1.44.9 2.14.41Z" fill="#DEF2FF"/><path d="M231.14 43.13c-2.06-1.97-3.03-3.76-5.61-3.15l-3.6 1.1 2.36-.84-5.23-4.95c-1.5-1.6-5.73-5.86-6.03-7.2a2.38 2.38 0 0 1 0-1.02 2.5 2.5 0 0 1 1.91-1.98l9.54 7.5 2.8 1.94c3.49 1.94 3.86 1.34 5.88 3.34l2.74 3.02" fill="#F5B486"/><path d="m214.53 50.65 2.89-3.4 5.52-.97 5.21 4.94 5.52-7.71-6.22-5.95a2.87 2.87 0 0 0-2.5-.75l-7.97 1.41c-.75.13-1.45.57-1.89 1.23 0 0-4.2 6.48-4.95 7.72-.83 1.36-.61 3 .31 3.79a2.86 2.86 0 0 0 4.08-.31Z" fill="#F5B486"/><path d="M224.82 44.61a2.96 2.96 0 0 0-2.45-.75l-8.28 1.37c-1.1.17-1.97.97-2.33 2.02l-1.53 5.07c-.04.09-.04.18-.09.27-.3 1.45.22 2.63 1.62 3.07 1.54.49 1.97-.5 2.96-1.75l.67-1.07a5.7 5.7 0 0 1 3.92-2.6l2.57-.43" fill="#F5B486"/><path d="m245.41 49.99-12.48-12.25-10.21 8.59s-1.04 1.96-1.02 3.32c2.74 1.75 3.51 4.06 5.48 6.01 2.95 2.94 4.23 2.01 7.63 5.74l10.6-11.41Z" fill="#F5B486"/><path d="M199.77 25.2c7.08.9 14.8-.2 19.73-5.67 1.4-1.4 3.5.55 2.2 2.05A20.57 20.57 0 0 1 211.08 27c-3.88.75-7.77.5-11.56-.2-.45-.1-.75-.5-.65-.96.05-.4.45-.7.9-.65Z" fill="#703E29"/><path d="M219.03 15.55c1.75-6.63-.2-12.9-4.34-14.01-4.15-1.11-8.93 3.37-10.68 10-1.75 6.64.2 12.92 4.34 14.02 4.16 1.11 8.94-3.37 10.69-10Z" fill="#D13D42"/><path d="M214.85 23.07c2.15-3.73-.9-9.55-6.82-12.98-5.9-3.43-12.44-3.18-14.59.56-2.14 3.73.91 9.55 6.82 12.98 5.91 3.43 12.44 3.18 14.59-.56Z" fill="#EF5858"/><path d="M221 18.83c1-1.46 2-3.66 1.7-5.97h.1c.24 1.05-.1 4.81-1.2 6.27" fill="#703E29"/><path d="M222.74 13.41a.5.5 0 0 0 .5-.5.5.5 0 1 0-1 0c0 .28.23.5.5.5ZM220.9 19.03c.7-1.6 1.25-4.01.45-6.22h.1c.45 1 .85 4.71.1 6.37" fill="#703E29"/><path d="M221.45 13.41a.5.5 0 0 0 .5-.5.5.5 0 1 0-1 0c0 .28.22.5.5.5Z" fill="#703E29"/><path d="M316.67 109.42s2.1-4.85 1.77-8.15c-.45-4.63-5.73-13.31-3.56-14.7 1.19-.77 2.35-.4 2.77.6l-.17-.6a2.47 2.47 0 0 1 1.38-3.34c1.37-.58 2.37-.28 2.94 1.1l.01.03c-.57-1.37-.46-2.75 1.04-3.64 1.28-.76 2.78-.5 3.35.87-.51-.8-.86-3.37.89-4.12 1.74-.76 3.73 0 2.74 1.25.79 2.5.6 12.46 7.4 15.06 1.83.47 3.56-1.78 8.04-3.28 3.5-.6 3.7.33 3.99 1.5.2.79-1 1.3-2.24 1.78-3.24 1.22-7 5.85-7.95 6.58 0 0-4.96 3.89-6.39 7-1.43 3.1-2.56 8.58-2.56 8.58l-13.45-6.52Z" fill="#F5B486"/><path d="M407.35 241.26c-24.22 28.02-75.94 29.37-103.74 4.96-27.86-24.35-22.03-50.62 2.19-78.63 24.21-28.02 50.52-13.94 87.45-13.94 36.37 0 38.32 59.6 14.1 87.61Z" fill="#DEF2FF"/><path d="M344.57 139.82c24.81-14.08 56.08-23.81 82.18 10.51 20.97 27.57 14.46 98.48-62.27 113.36" fill="#DEF2FF"/><path d="m321.8 137.01-4.9 16.35s9.68 12.05 23.69 14.5c.96.18 1.92-.29 2.34-1.17 2.15-4.42 3.12-10.52 12-22.44 5.04-6.72 8.36-20.57-.94-24.87-5.53-2.55-18.04-2.46-23.63 5.7a237.98 237.98 0 0 1-8.56 11.93Z" fill="#059688"/><path d="M311.73 183.02c12.3-2.25 19.46-9.33 26.64-15.6-17.82-7.05-20.96-14.07-20.96-14.07l-5.68 29.67Z" fill="#F5B486"/><path d="M340.73 118.52c-4.24.7-7.68 1.05-12.26-2.4l-6.68 20.94 18.94-18.54Z" fill="#059688"/><path d="M314.87 181.92s-12.73 4-19.89 0c-4.03-2.25-2.65-16.69.89-27.06 6.97-20.4 19.37-36.55 25.47-58.67a252.36 252.36 0 0 1 11.15 10.98s-7.61 26.97-11.15 51.25c-1.45 9.99-6.47 23.5-6.47 23.5Z" fill="#F5B486"/><path d="M383.48 257.61c-32.17 13.39-85.27 15.56-179.33 15.56-94.07 0-179.88-6.03-184.25-17.06 0-7.72 90.18-10.9 184.25-10.9 94.06 0 179.33 4.68 179.33 12.4Z" fill="#DEF2FF"/></svg>';
+defineCustomElement('sinch-illustration-on-a-cloud', createIllustrationClass(templateHTML));

package/illustrations/types.d.ts

@@ -1,16 +1,20 @@
 import type { TSinchElementReact } from '../types';
 export type TSinchIllustrationBackground = 'grey' | 'green' | 'blue' | 'yellow' | 'white';
 export type TSinchIllustrationVAlign = 'top' | 'center' | 'bottom';
+export type TSinchIllustrationHAlign = 'left' | 'center' | 'right';
 export type TSinchIllustrationElement = HTMLElement & {
     size: number;
     background: TSinchIllustrationBackground | null;
     valign: TSinchIllustrationVAlign | null;
+    halign: TSinchIllustrationHAlign | null;
     setAttribute(name: 'size', value: string): void;
     setAttribute(name: 'background', value: TSinchIllustrationBackground): void;
     setAttribute(name: 'valign', value: TSinchIllustrationVAlign): void;
+    setAttribute(name: 'halign', value: TSinchIllustrationHAlign): void;
 };
 export type TSinchIllustrationReact = TSinchElementReact<TSinchIllustrationElement> & {
     size?: number;
     background?: TSinchIllustrationBackground;
     valign?: TSinchIllustrationVAlign;
+    halign?: TSinchIllustrationHAlign;
 };

package/illustrations/utils.d.ts

@@ -1,3 +1,4 @@
-import type { TSinchIllustrationBackground, TSinchIllustrationVAlign } from './types';
+import type { TSinchIllustrationBackground, TSinchIllustrationVAlign, TSinchIllustrationHAlign } from './types';
 export declare const backgroundValues: TSinchIllustrationBackground[];
 export declare const valignValues: TSinchIllustrationVAlign[];
+export declare const halignValues: TSinchIllustrationHAlign[];

package/illustrations/utils.js

@@ -1,2 +1,3 @@
 export const backgroundValues = ['blue', 'grey', 'green', 'yellow', 'white'];
-export const valignValues = ['top', 'center', 'bottom'];
+export const valignValues = ['top', 'center', 'bottom'];
+export const halignValues = ['left', 'center', 'right'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/assets",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",