@nectary/assets 0.3.0 → 0.4.0

package/icons/create-icon-class.js

@@ -1,5 +1,5 @@
 import { NectaryElement, updateAttribute } from '../utils';
-const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-color-icon,var(--sinch-color-stormy-500));height:var(--sinch-size-icon,24px)}</style>';
+const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));height:var(--sinch-global-size-icon,24px)}</style>';
 export const createIconClass = templateHTML => {
   const template = document.createElement('template');
   template.innerHTML = iconStylesHtml + templateHTML;

package/icons-branded/create-icon-class.js

@@ -1,5 +1,5 @@
 import { attrValueToPixels, getBooleanAttribute, getIntegerAttribute, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-color-stormy-500);height:var(--sinch-size-icon,48px)}.accent{fill:var(--sinch-color-text-link)}:host([inverted]:not([inverted=false])) svg{fill:var(--sinch-color-snow-100)}:host([inverted]:not([inverted=false])) .accent{fill:var(--sinch-color-honey-500)}</style>';
+const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-sys-color-text-default);height:var(--sinch-global-size-icon,48px)}.accent{fill:var(--sinch-sys-color-primary-default)}:host([inverted]:not([inverted=false])) svg{fill:var(--sinch-sys-color-text-inverted)}:host([inverted]:not([inverted=false])) .accent{fill:var(--sinch-sys-color-cta-default)}</style>';
 const DEFAULT_SIZE = 48;
 const MIN_SIZE = 4;
 const MAX_SIZE = 256;

package/icons-channel/create-icon-class.js

@@ -1,5 +1,5 @@
 import { attrValueToPixels, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
-const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;height:var(--sinch-size-icon,48px)}</style>';
+const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;height:var(--sinch-global-size-icon,48px)}</style>';
 const DEFAULT_SIZE = 48;
 const MIN_SIZE = 4;
 const MAX_SIZE = 256;

package/illustrations/create-illustration-class.js

@@ -1,5 +1,5 @@
 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([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>';
+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-comp-card-color-yellow-default-background-initial)}:host([background=green]) #wrapper{background-color:var(--sinch-comp-card-color-green-default-background-initial)}:host([background=blue]) #wrapper{background-color:var(--sinch-comp-card-color-blue-default-background-initial)}:host([background=white]) #wrapper{background-color:var(--sinch-comp-card-color-white-default-background-initial)}:host([background=gray]) #wrapper,:host([background=grey]) #wrapper{background-color:var(--sinch-comp-card-color-gray-default-background-initial)}</style>';
 import { backgroundValues, valignValues, halignValues } from './utils';
 const DEFAULT_SIZE = 256;
 const MIN_SIZE = 16;

package/illustrations/dream-big/index.d.ts

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

package/illustrations/dream-big/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils/element';
+import { createIllustrationClass } from '../create-illustration-class';
+const templateHTML = '<svg viewBox="0 0 875 659" fill="none" aria-hidden="true" focusable="false"><path fill="#DEF2FF" fill-rule="evenodd" d="M307.105 326.053c-1.601-6.891-4.679-14.697-10.857-19.584-5.062-3.294-12.492-7.421-18.042-7.216-9.059.33-18.923 3.5-26.745 10.046-3.652 3.046-7.333 6.134-10.496 10.127-3.218 4.092-5.802 9.046-7.815 14.488-4.153-2.914-8.664-4.512-13.381-4.512-7.392 0-14.281 3.927-20.076 10.698-.169-.107-.339-.21-.51-.309-3.75-2.196-8.014-2.549-12.149-2.314-3.238.157-6.54.706-9.393 2.628-2.468 1.687-4.487 4.315-6.443 6.865-2.781 3.638-5.633 7.495-7.351 11.965l-.182-.001c-9.873 0-22.77 10.889-22.77 24.321 0 12.415 11.017 22.657 20.481 24.137 17.329 5.073 55.84 7.785 97.097 7.785 54.434 0 85.161-1.703 103.777-12.183 0-.424-.243-.837-.713-1.237 5.174-4.461 9.096-11.095 9.096-18.502 0-11.237-9.025-20.693-17.756-23.485-6.382-21.908-19.277-36.879-34.161-36.879-4.048 0-7.948 1.108-11.611 3.162Zm-18.801 23.279c-.28-.144-.561-.283-.844-.419l1.668-1.4a74.073 74.073 0 0 0-.824 1.819Zm412.651-170.589c1.452-6.255 4.246-13.341 9.854-17.777 4.594-2.989 11.338-6.736 16.376-6.549 8.222.299 17.175 3.176 24.274 9.117 3.315 2.766 6.656 5.568 9.528 9.193 2.919 3.713 5.265 8.209 7.093 13.148 3.768-2.644 7.862-4.094 12.144-4.094 6.709 0 12.962 3.565 18.222 9.711.153-.097.307-.19.462-.28 3.404-1.993 7.274-2.314 11.027-2.1 2.939.142 5.936.641 8.525 2.385 2.24 1.531 4.073 3.917 5.848 6.231 2.524 3.302 5.113 6.802 6.672 10.859l.165-.001c8.962 0 20.667 9.883 20.667 22.075 0 11.266-9.996 20.561-18.585 21.907-15.726 4.605-50.684 7.067-88.134 7.067-49.406 0-77.296-1.545-94.193-11.057 0-.386.221-.76.649-1.124-4.696-4.049-8.256-10.07-8.256-16.793 0-10.198 8.19-18.78 16.113-21.315 5.793-19.885 17.497-33.475 31.007-33.475 3.675 0 7.216 1.007 10.542 2.872Zm17.062 21.129c.255-.131.511-.258.769-.382l-1.519-1.275c.255.544.505 1.097.75 1.657Z" clip-rule="evenodd"/><path fill="#DEF2FF" d="M599.095 394.132c-4-18.9-19.1-34.2-36.7-42.2s-37.5-9.7-56.8-9.2c-31.5.8-65.8 8.5-93 24.4-12.7 7.4-25.5 14.9-36.5 24.6-24.2 21.5-38.1 52.8-43.9 84.7 54.4 8.8 109.6 12.5 164.7 10.9M74.996 527.933c3.4-16.8 15.4-30.2 27-42.6 6.1-6.5 12.4-13.2 20.1-17.5 8.9-4.9 19.2-6.3 29.3-6.7 12.9-.6 26.2.3 37.9 5.9 11.7 5.5 21.7 16.4 23.5 29.6-32.9 20.4-65.6 42.4-98.5 62.8-.9.5-1.8 1.1-2.9 1.1-1.1 0-2.1-.8-2.9-1.5-11.7-9.7-23.1-19.9-33.5-31.1Z"/><path fill="#F5B486" d="m78.394 478.832 12.6 10.3c6.2 3.5 13.601 3.1 22.501 1.3l35.2-9.4 11.2 49.1-64.2 14.2-8.8-20.3-8.5-45.2Z"/><path fill="#DEF2FF" d="M36.196 599.834c-3.8-17.9 88.9-36.7 100.4-50.9 13.4-16.5 33.4-28.2 54.6-28.8 21.2-.7 43.1 10.8 52.2 30 18-59 87.4-88.3 144.8-76.7 35.3 7.1 67.3 29.2 86.5 59.7 22.4-43.3 52.8-82.5 89.4-114.8 26.7-23.7 64.7-44.3 100.9-47.3 38.4-3.2 58.3 11.2 89.9 32.7 11.2 7.7 27.2 18.7 35.4 29.5 9 11.9 15.9 29.4 20.7 43.5 9.6 28.1 1.3 52-.9 81.7-2.3 31.5-19.7 59-49 72.5-13 6-43.8 10.3-43.8 10.3s-555.8 1.3-631.3 0c-25.9-.4-43.5-12.1-49.8-41.4Z"/><path fill="#FFBE3C" d="M136.746 483.85c.014-2.359 1.642-4.371 3.959-4.82 29.427-5.703 117.462-18.514 144.245-27.314 34.591-11.365 56.745-15.883 72.945-11.783l113.7 28.9-50.9 70.2s-38.3-70.2-95.2-70.2c-111.3 0-183.6 60.2-183.6 60.2-4.976-5.632-5.213-34.385-5.149-45.183Z"/><path fill="#DEF2FF" d="M86.094 641.233c0-95.8 77.7-173.6 173.6-173.6 95.9 0 173.5 77.7 173.5 173.6h-347.1Z"/><path fill="#F5B486" d="m244.293 506.836 12.8-10c4.7-5.2 25.725-26.728 25.925-35.828l12.575-22.172h40.9l-26.3 53.5-8.2 25.7-57.7-11.2Z"/><path fill="#6EBBEE" d="m191.932 509.48 19.589 2.218c7.303.838 14.561-1.267 20.344-5.89l16.816-13.399c12.23-9.807 11.552 5.539 11.552 5.539s12.93 10.524 27.49 13.095c23.318 4.118 18.033-12.619 27.029-11.144 1.423.252 2.415 1.669 2.163 3.092l-9.673 41.567c-.92 3.954-4.368 6.792-8.428 6.813-15.925.083-57.183-.733-98.654-10.029-15.002-3.363-27.572-13.57-25.915-22.309 1.688-8.281 9.38-10.455 17.687-9.553ZM49.784 439.324l6.901 18.467c2.562 6.889 7.728 12.405 14.47 15.465l19.565 8.918c14.284 6.458.297 12.808.297 12.808s-3.521 16.295.785 30.44c6.897 22.652 19.422 10.355 22.183 19.043.421 1.383-.393 2.909-1.775 3.33l-41.438 10.214c-3.942.972-8.034-.815-9.892-4.425-7.291-14.158-25.262-51.306-35.769-92.486-3.8-14.897-.398-30.728 8.142-33.212 8.147-2.248 13.57 3.623 16.531 11.438Z"/><path fill="#FFCF6E" d="M454.797 530.231c16.6 16.1 66.1 22.2 115.3 4.6 25.3-9 60.739-40.152 60.739-40.152s-94.639-52.248-119.339-74.148"/><path fill="#DEF2FF" d="M78.895 639.832c34.242 0 62-27.758 62-62 0-34.242-27.758-62-62-62-34.242 0-78.97 27.758-78.97 62 0 34.242 44.728 62 78.97 62Z"/><path fill="#FFCF6E" d="m511.493 420.532-56.7 109.7c-29.7-49.7-53.807-58.319-105.5-182.7-19.7-38.9 30.6-73.6 61.2-42.6l101 115.6Z"/><path fill="#DEF2FF" d="M303.195 635.331c0-84.9 68.9-153.8 153.8-153.8s153.8 68.9 153.8 153.8h-307.6Z"/><path fill="#FFCF6E" d="M325.87 483.978c1.832.677 3.719.047 5.015-1.415 10.85-12.239 60.779-71.411 53.206-115.728-5.498-32.176-32.896-56.804-32.896-56.804s-53.451 105.274-77.349 138.406c-2.204 3.055-1.429 7.465 1.846 9.328 12.419 7.063 39.756 22.364 50.178 26.213Z"/><path fill="#F5B486" d="m569.177 288.719-82.523-78.172-15.517 21.028c43.118 47.977 30.426 52.525 61.813 90.959 6.485 6.696 40.906 37.78 47.401 30.106 8.799-10.397-11.174-63.921-11.174-63.921Z"/><path fill="#059688" d="M610.56 314.378s-25.564-16.435-36.814-30.093c-1.602-1.944-4.899-1.361-5.752 1.009-9.301 25.86-26.088 42.661-33.302 49.495-1.424 1.35-1.302 3.699.323 4.8 5.814 3.94 21.424 21.174 29.146 21.174 0 0-42.378 46.252-66.321 44.257 19.253 20.513 57.643 117.647 104.454 102.713 27.307-8.712 48.6-55 48.6-55s46.501-101.8 2.4-111.2c-21-14.5-28.234-15.155-42.734-27.155Z"/><path fill="#F5B486" d="M644.456 347.815s-14.9-5.8-6.1-16.2c8.9-10.4 4.303-18.969-6.249-33.735-13.159-18.414-18.106-21.719-4.916-48.671 7.781-15.901 30.687-37.096 30.687-37.096s17.678 8.102 37.978 24.502c20.3 16.5 0 101.8 0 101.8l-23.899 29"/><path fill="#703E29" d="M645.371 218.022c-5.699 32.385 32.349 31.529 7.97 45.837-35.656 20.925-65.763 77.723-.004 83.702 60.258 12.603-7.144 60.472 43.156 60.572 60.3.1 132.794-72.727 64.965-88.473-32.959-7.651-54.457-15.177-42.847-49.324s-22.039-58.338-37.367-62.278c-12.057-3.099-32.14-.57-35.873 9.964Z"/><path fill="#F5B486" d="M463.841 201.668c-3.844-3.677-5.661-7-10.484-5.869l-6.71 2.051 4.403-1.556-9.785-9.192c-2.796-2.97-10.695-10.889-11.254-13.364a4.39 4.39 0 0 1 0-1.909c.35-1.768 1.678-3.252 3.565-3.677l17.824 13.93 5.242 3.606c6.5 3.606 7.199 2.481 10.969 6.205l5.121 5.601"/><path fill="#F5B486" d="m432.795 215.623 5.403-6.303 10.314-1.801 9.741 9.168 10.314-14.325-11.624-11.051c-1.228-1.146-2.947-1.719-4.666-1.392l-14.898 2.62a5.394 5.394 0 0 0-3.52 2.292s-7.858 12.033-9.25 14.325c-1.555 2.538-1.146 5.566.573 7.04 2.211 1.964 5.649 1.719 7.613-.573Z"/><path fill="#F5B486" d="M452.033 204.406c-1.228-1.146-2.947-1.637-4.584-1.391l-15.471 2.537c-2.046.328-3.683 1.801-4.338 3.766l-2.865 9.414c-.082.163-.082.327-.164.491-.573 2.701.409 4.899 3.029 5.717 2.865.901 3.664-.931 5.526-3.258l2.91-4.635a3.725 3.725 0 0 1 2.557-1.696l7.916-1.285"/><path fill="#F5B486" d="m490.506 214.393-23.33-22.756-19.073 15.962s-1.93 3.648-1.904 6.169c5.121 3.259 6.57 7.536 10.241 11.172 5.509 5.455 12.037 3.388 18.379 10.318l15.687-20.865Z"/><path fill="#DEF2FF" d="M815.496 595.535c-48.6 55.9-152.4 58.599-208.2 9.899-55.9-48.599-44.2-100.999 4.4-156.899 48.6-55.9 101.4-27.8 175.5-27.8 73 0 76.9 118.9 28.3 174.8Z"/><path fill="#DEF2FF" d="M689.496 393.132c49.8-28.1 112.545-47.508 164.941 20.974 42.084 55.005 29.022 196.483-124.98 226.179"/><path fill="#F5B486" d="M626.47 479.472c15.214-2.723 31.422-27.294 45.822-39.794-35.761-14.061-43.664-31.834-43.664-31.834l-17.53 28.071 15.372 43.557Z"/><path fill="#059688" d="M681.794 350.633c-8.5 1.4-61.496-9.03-70.696-15.93l32.696 52.93 38-37Z"/><path fill="#F5B486" d="M621.987 433.99s20.596 29.924 10.319 42.757c-5.793 7.233-37.769 3.823-56.988-6.641-19.22-10.465-31.768-17.475-70.651-51.604 4.744-13.911 9.811-20.735 9.811-20.735 34.955 11.356 70.684 32.512 107.509 36.223Z"/><path fill="#DEF2FF" d="M767.596 628.156c-64.562 26.715-171.126 31.057-359.906 31.057-188.779 0-360.981-12.037-369.752-34.046 0-15.411 180.973-21.761 369.752-21.761 188.78 0 359.906 9.339 359.906 24.75Z"/><path fill="#059688" d="m633.428 380.783-9.834 32.612s19.439 24.039 47.554 28.949c1.92.335 3.842-.588 4.696-2.34 4.311-8.837 6.262-21.006 24.101-44.792 10.1-13.4 16.748-41.036-1.911-49.609-11.1-5.1-36.206-4.92-47.406 11.38-11.3 16.4-17.2 23.8-17.2 23.8Z"/><mask id="b" width="99" height="91" x="126" y="152" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#C4C4C4" d="M126.02 160.711a8.273 8.273 0 0 1 8.273-8.273h81.446a8.273 8.273 0 0 1 8.274 8.273v73.099a8.273 8.273 0 0 1-8.274 8.274h-20.254a8.274 8.274 0 0 1-8.274-8.274v-29.669a8.274 8.274 0 0 0-2.768-6.176l-4.056-3.615a8.274 8.274 0 0 0-11.178.153l-3.695 3.48a8.273 8.273 0 0 0-2.601 6.023v2.574a8.274 8.274 0 0 1-8.274 8.274h-20.346a8.274 8.274 0 0 1-8.273-8.274v-45.869Z"/></mask><g stroke-width="12.411" mask="url(#b)"><rect width="36.826" height="105.17" x="156.596" y="183.209" stroke="#059688" rx="18.413"/><rect width="61.648" height="129.991" x="144.185" y="170.799" stroke="#FFBE3C" rx="30.824"/><rect width="85.784" height="154.444" x="132.119" y="158.572" stroke="#EF5858" rx="42.892"/></g><path fill="#DEF2FF" fill-rule="evenodd" d="M194.269 219.944c.548-2.593 1.602-5.529 3.717-7.368 1.733-1.239 4.277-2.791 6.178-2.714 3.102.124 6.479 1.317 9.157 3.779 1.251 1.146 2.511 2.308 3.594 3.81 1.102 1.539 1.987 3.402 2.676 5.449 1.422-1.096 2.966-1.697 4.581-1.697 2.532 0 4.891 1.478 6.876 4.027.058-.041.117-.08.176-.117 1.284-.826 2.744-.959 4.16-.871 1.108.059 2.239.266 3.216.989.845.635 1.536 1.623 2.206 2.582.952 1.368 1.928 2.819 2.516 4.5l.061-.001c3.381 0 7.797 4.097 7.797 9.15 0 4.672-3.776 8.526-7.018 9.08-5.935 1.908-19.119 2.927-33.243 2.927-18.638 0-29.159-.64-35.534-4.582 0-.16.083-.315.245-.466-1.772-1.678-3.114-4.173-3.114-6.959 0-4.228 3.09-7.785 6.08-8.835 2.185-8.241 6.6-13.873 11.697-13.873 1.386 0 2.721.417 3.976 1.19Zm6.437 8.755c.095-.054.191-.106.288-.157l-.57-.526c.096.224.19.452.282.683Zm-52.088-30.56c-.602-2.593-1.76-5.529-4.084-7.367-1.904-1.239-4.699-2.792-6.787-2.715-3.408.124-7.119 1.317-10.061 3.779-1.374 1.146-2.759 2.308-3.949 3.81-1.21 1.539-2.182 3.403-2.939 5.45-1.563-1.097-3.26-1.698-5.035-1.698-2.78 0-5.372 1.478-7.552 4.025a5.331 5.331 0 0 0-.19-.115c-1.41-.826-3.014-.959-4.57-.87-1.218.059-2.46.265-3.533.988-.929.635-1.688 1.624-2.424 2.583-1.046 1.368-2.118 2.818-2.765 4.499h-.07c-3.714 0-8.565 4.096-8.565 9.149 0 4.669 4.143 8.521 7.703 9.079 6.518 1.909 21.005 2.929 36.525 2.929 20.476 0 32.035-.641 39.038-4.583 0-.159-.091-.314-.267-.464 1.947-1.679 3.423-4.174 3.423-6.961 0-4.227-3.395-7.784-6.679-8.834-2.401-8.242-7.252-13.874-12.851-13.874-1.523 0-2.99.417-4.368 1.19Zm-7.072 8.755a18.655 18.655 0 0 0-.317-.157l.627-.526c-.106.225-.209.452-.31.683Z" clip-rule="evenodd"/><path fill="#F5B486" d="M481.556 375.328 465.4 365.026l-17.268-6.241c-2.134-1.12-2.997-3.81-1.989-5.982 1.03-2.169 2.329-2.063 4.554-1.144l18.234 5.018 17.121 9.08a5.208 5.208 0 0 1 1.743 1.171c.498.499.889 1.1 1.161 1.762.265.654.387 1.364.372 2.072a5.439 5.439 0 0 1-.456 2.056 5.432 5.432 0 0 1-1.221 1.714 5.28 5.28 0 0 1-1.797 1.098 5.416 5.416 0 0 1-2.083.316 5.237 5.237 0 0 1-2.042-.522l-.181-.087.008-.009Z"/><path fill="#F5B486" d="m507.98 420.895 8.418-22.748a39.24 39.24 0 0 1-15.923-15.334l-4.088-7.691a20.648 20.648 0 0 0-7.534-7.985 20.71 20.71 0 0 0-10.554-3.027l-29.977.801a4.468 4.468 0 0 0-2.244.492 4.647 4.647 0 0 0-1.727 1.529 3.967 3.967 0 0 0-.443 3.711l.059.054c.257.51.609.967 1.029 1.349.613.558 1.371.94 2.175 1.118l2.764.472a3.948 3.948 0 0 0 .036 1.598c.121.524.346 1.02.672 1.455a5.94 5.94 0 0 0 1.965 1.771 5.826 5.826 0 0 0 2.543.731l8.573 1.103a13.27 13.27 0 0 1 6.522 2.752 13.314 13.314 0 0 1 4.163 5.718l2.856 7.661a24.734 24.734 0 0 0 6.492 9.554c7.898 6.505 14.129 9.898 24.239 14.915l-.016.001Z"/><path stroke="#FFBE3C" stroke-linecap="round" stroke-width="8.241" d="m389.023 129.573 13.744-13.401m-.175 13.571L389.191 116m203.032 51.983 13.743-13.401m-.174 13.571-13.401-13.743M739.43 91.573l13.743-13.401m-.174 13.571L739.598 78M223 53.303l13.743-13.4m-.174 13.571L223.168 39.73"/><path stroke="#FFBE3C" stroke-linecap="round" stroke-width="9.872" d="m501.617 39.422 24.729-24.113m-.307 24.421L501.926 15"/></svg>';
+defineCustomElement('sinch-illustration-dream-big', createIllustrationClass(templateHTML));

package/illustrations/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export type TSinchIllustrationBackground = 'grey' | 'green' | 'blue' | 'yellow' | 'white';
+export type TSinchIllustrationBackground = 'grey' | 'gray' | 'green' | 'blue' | 'yellow' | 'white';
 export type TSinchIllustrationVAlign = 'top' | 'center' | 'bottom';
 export type TSinchIllustrationHAlign = 'left' | 'center' | 'right';
 export type TSinchIllustrationElement = HTMLElement & {

package/illustrations/utils.js

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

package/logo/create-logo-class.d.ts

@@ -0,0 +1 @@
+export declare const createLogoClass: (templateHTML: string) => CustomElementConstructor;

package/logo/create-logo-class.js

@@ -0,0 +1,52 @@
+import { getBooleanAttribute, getIntegerAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+const logoStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;fill:var(--sinch-sys-color-text-default)}:host([inverted]:not([inverted=false])) svg{fill:var(--sinch-sys-color-text-inverted)}</style>';
+const DEFAULT_SIZE = 16;
+const MIN_SIZE = 4;
+const MAX_SIZE = 256;
+export const createLogoClass = templateHTML => {
+  const template = document.createElement('template');
+  template.innerHTML = logoStylesHtml + templateHTML;
+  return class extends NectaryElement {
+    constructor() {
+      super();
+      const shadowRoot = this.attachShadow();
+      shadowRoot.appendChild(template.content.cloneNode(true));
+      this.$svg = shadowRoot.querySelector('svg');
+    }
+    static get observedAttributes() {
+      return ['size'];
+    }
+    set size(value) {
+      updateAttribute(this, 'size', value);
+    }
+    get size() {
+      return getIntegerAttribute(this, 'size', DEFAULT_SIZE);
+    }
+    set inverted(isInverted) {
+      updateBooleanAttribute(this, 'inverted', isInverted);
+    }
+    get inverted() {
+      return getBooleanAttribute(this, 'inverted');
+    }
+    connectedCallback() {
+      if (!this.$svg.hasAttribute('preserveAspectRatio')) {
+        this.$svg.setAttribute('preserveAspectRatio', 'xMinYMin meet');
+      }
+      if (!this.hasAttribute('size')) {
+        this.size = DEFAULT_SIZE;
+      }
+    }
+    attributeChangedCallback(name, _, newVal) {
+      switch (name) {
+        case 'size':
+          {
+            updateIntegerAttribute(this.$svg, 'height', newVal, {
+              min: MIN_SIZE,
+              max: MAX_SIZE
+            });
+            break;
+          }
+      }
+    }
+  };
+};

package/logo/engage-icon/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchLogoElement, TSinchLogoReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-logo-engage-icon': TSinchLogoReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-logo-engage-icon': TSinchLogoElement;
+    }
+}

package/logo/engage-icon/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createLogoClass } from '../create-logo-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M46.398 19.2a17.48 17.48 0 0 1-5.155 12.443A17.488 17.488 0 0 1 28.8 36.798H24l4.8-4.8c7.057 0 12.799-5.741 12.799-12.798S35.857 6.402 28.8 6.402c-7.057 0-12.799 5.741-12.799 12.798v.25a15.66 15.66 0 0 0-2.801-.25h-.798c-.402 0-.803.014-1.2.046V19.2a17.48 17.48 0 0 1 5.155-12.443A17.488 17.488 0 0 1 28.8 1.602c4.698 0 9.12 1.832 12.443 5.155A17.488 17.488 0 0 1 46.398 19.2Z"/><path d="M24.046 46.398H12.8c-6.176 0-11.202-5.026-11.202-11.201 0-6.176 5.026-11.202 11.202-11.202 6.174 0 11.2 5.026 11.2 11.202v1.601h-4.8v-1.601c0-3.53-2.87-6.402-6.401-6.402a6.408 6.408 0 0 0-6.402 6.402c0 3.53 2.87 6.401 6.402 6.401h6.447l4.8 4.8Z"/></svg>';
+defineCustomElement('sinch-logo-engage-icon', createLogoClass(templateHTML));

package/logo/engage-icon-wordmark/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchLogoElement, TSinchLogoReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-logo-engage-icon-wordmark': TSinchLogoReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-logo-engage-icon-wordmark': TSinchLogoElement;
+    }
+}

package/logo/engage-icon-wordmark/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createLogoClass } from '../create-logo-class';
+const templateHTML = '<svg viewBox="0 0 159 48" aria-hidden="true"><path d="M53.94 40.214V16.722h15.338v3.456H58.236v6.444h10.035v3.356H58.236v6.78h11.042v3.456H53.94Zm17.62 0V23.568h3.792l.336 2.819a5.862 5.862 0 0 1 2.231-2.35c.974-.582 2.119-.872 3.44-.872 2.06 0 3.658.65 4.8 1.947 1.14 1.296 1.711 3.2 1.711 5.705v9.397h-4.296V31.22c0-1.43-.29-2.53-.872-3.29-.583-.758-1.49-1.14-2.719-1.14-1.229 0-2.198.423-2.97 1.275-.772.852-1.158 2.035-1.158 3.557v8.592H71.56Zm25.774-4.967a8.905 8.905 0 0 1-2.248-.269l-1.242 1.242c.382.202.893.37 1.544.504.65.134 1.699.268 3.154.402 2.215.202 3.826.726 4.833 1.578 1.007.851 1.51 2.026 1.51 3.524 0 .985-.268 1.917-.805 2.802s-1.364 1.598-2.484 2.148c-1.12.55-2.55.822-4.295.822-2.37 0-4.284-.44-5.74-1.326-1.455-.885-2.18-2.21-2.18-3.977 0-1.497.725-2.798 2.18-3.893a7.352 7.352 0 0 1-1.157-.637 6.089 6.089 0 0 1-.856-.705v-.772l2.92-3.087c-1.296-1.142-1.947-2.606-1.947-4.397 0-1.12.273-2.135.823-3.054.55-.919 1.325-1.644 2.332-2.181 1.007-.537 2.228-.806 3.658-.806.94 0 1.813.134 2.618.403h6.309v2.618l-2.852.201c.449.852.671 1.791.671 2.82 0 1.12-.269 2.134-.806 3.053s-1.313 1.645-2.332 2.181c-1.02.537-2.22.806-3.608.806Zm-4.027 7.014c0 .827.386 1.447 1.158 1.863.772.415 1.715.62 2.836.62 1.12 0 1.946-.218 2.617-.654.672-.436 1.007-1.023 1.007-1.762a1.97 1.97 0 0 0-.654-1.51c-.437-.403-1.305-.65-2.601-.738a26.661 26.661 0 0 1-2.55-.302c-.651.356-1.113.75-1.394 1.174-.28.424-.42.86-.42 1.31Zm4.027-10.303c.873 0 1.594-.235 2.165-.705.57-.47.856-1.14.856-2.013s-.286-1.544-.856-2.014c-.57-.47-1.292-.705-2.165-.705-.919 0-1.657.235-2.215.705-.558.47-.839 1.141-.839 2.014 0 .872.281 1.543.84 2.013.557.47 1.295.705 2.214.705Zm16.109 8.659c-1.43 0-2.605-.231-3.524-.688-.918-.458-1.598-1.07-2.047-1.83a4.851 4.851 0 0 1-.671-2.516c0-1.544.604-2.798 1.812-3.76 1.208-.96 3.021-1.442 5.437-1.442h4.229v-.403c0-1.141-.323-1.98-.973-2.517-.651-.537-1.456-.805-2.417-.805-.872 0-1.632.205-2.282.62-.65.416-1.053 1.024-1.208 1.83h-4.195c.113-1.209.52-2.262 1.225-3.155.705-.894 1.615-1.582 2.735-2.064 1.12-.483 2.37-.722 3.759-.722 2.37 0 4.241.592 5.604 1.779 1.364 1.187 2.048 2.865 2.048 5.034v10.236h-3.659l-.402-2.685a6.205 6.205 0 0 1-2.064 2.215c-.885.583-2.018.873-3.407.873Zm.974-3.356c1.229 0 2.185-.403 2.869-1.209.684-.805 1.112-1.8 1.292-2.986h-3.658c-1.141 0-1.959.205-2.45.62-.491.416-.738.923-.738 1.527 0 .65.247 1.154.738 1.51.491.357 1.141.538 1.947.538Zm18.022-2.014a8.905 8.905 0 0 1-2.249-.269l-1.242 1.242c.382.202.894.37 1.544.504s1.699.268 3.155.402c2.215.202 3.826.726 4.833 1.578 1.006.851 1.51 2.026 1.51 3.524 0 .985-.269 1.917-.806 2.802s-1.363 1.598-2.483 2.148-2.551.822-4.296.822c-2.37 0-4.283-.44-5.739-1.326-1.456-.885-2.181-2.21-2.181-3.977 0-1.497.725-2.798 2.181-3.893a7.349 7.349 0 0 1-1.158-.637 6.052 6.052 0 0 1-.855-.705v-.772l2.919-3.087c-1.296-1.142-1.946-2.606-1.946-4.397 0-1.12.272-2.135.822-3.054.55-.919 1.326-1.644 2.333-2.181 1.006-.537 2.227-.806 3.658-.806.939 0 1.812.134 2.617.403h6.31v2.618l-2.853.201c.449.852.671 1.791.671 2.82 0 1.12-.268 2.134-.805 3.053s-1.313 1.645-2.333 2.181c-1.019.537-2.219.806-3.607.806Zm-4.028 7.014c0 .827.386 1.447 1.158 1.863.772.415 1.716.62 2.836.62 1.12 0 1.947-.218 2.618-.654.671-.436 1.007-1.023 1.007-1.762 0-.604-.219-1.107-.655-1.51-.436-.403-1.304-.65-2.601-.738a26.617 26.617 0 0 1-2.55-.302c-.651.356-1.112.75-1.393 1.174-.281.424-.42.86-.42 1.31Zm4.028-10.303c.872 0 1.594-.235 2.164-.705.571-.47.856-1.14.856-2.013s-.285-1.544-.856-2.014c-.57-.47-1.292-.705-2.164-.705-.919 0-1.657.235-2.215.705-.558.47-.839 1.141-.839 2.014 0 .872.281 1.543.839 2.013.558.47 1.296.705 2.215.705Zm17.787 8.659c-1.678 0-3.168-.357-4.464-1.074a7.806 7.806 0 0 1-3.054-3.02c-.738-1.297-1.107-2.799-1.107-4.498 0-1.699.365-3.255 1.09-4.598a7.911 7.911 0 0 1 3.021-3.137c1.288-.751 2.802-1.125 4.547-1.125 1.632 0 3.075.357 4.33 1.074a7.715 7.715 0 0 1 2.936 2.937c.705 1.241 1.057 2.622 1.057 4.144 0 .248-.004.504-.016.772-.013.269-.03.55-.051.84h-12.652c.088 1.296.541 2.315 1.359 3.053.818.739 1.808 1.108 2.97 1.108.873 0 1.607-.197 2.198-.588a3.632 3.632 0 0 0 1.326-1.527h4.363a7.93 7.93 0 0 1-1.561 2.87 7.688 7.688 0 0 1-2.684 2.03c-1.062.491-2.266.739-3.608.739Zm.033-13.961c-1.053 0-1.98.297-2.785.889-.806.591-1.322 1.493-1.544 2.701h8.29c-.068-1.094-.47-1.967-1.209-2.617-.738-.65-1.657-.974-2.752-.974ZM56.944 11.742c-.604 0-1.137-.105-1.598-.31a2.524 2.524 0 0 1-1.091-.894c-.264-.386-.403-.86-.411-1.414h1.586c.016.386.155.71.415.97s.625.394 1.087.394c.398 0 .717-.097.952-.29a.944.944 0 0 0 .352-.768c0-.318-.105-.6-.31-.788-.206-.189-.483-.34-.827-.457l-1.103-.378c-.634-.218-1.12-.5-1.452-.847-.331-.344-.499-.802-.499-1.376-.008-.487.11-.902.348-1.25a2.37 2.37 0 0 1 .982-.81c.415-.193.894-.29 1.435-.29s1.032.097 1.451.294c.42.197.747.47.986.822.24.353.365.772.382 1.259h-1.611a1.109 1.109 0 0 0-.336-.768c-.214-.222-.516-.336-.897-.336-.328-.008-.604.072-.827.24-.222.167-.335.41-.335.734 0 .272.088.49.26.65.172.16.407.298.704.407.298.109.638.226 1.024.352.407.143.78.307 1.116.495.336.19.608.437.81.747.205.31.306.705.306 1.191 0 .433-.11.831-.327 1.2-.218.37-.546.663-.974.885-.432.223-.96.336-1.585.336h-.013Zm6.553-.138V3.38h1.502v8.223h-1.502Zm5.449 0V3.38h1.502l3.864 5.79V3.38h1.502v8.223h-1.502l-3.864-5.781v5.78h-1.502Zm14.544.138c-.83 0-1.543-.176-2.139-.533a3.565 3.565 0 0 1-1.376-1.493c-.323-.638-.482-1.376-.482-2.215 0-.84.159-1.578.482-2.22a3.56 3.56 0 0 1 1.376-1.501c.596-.361 1.309-.541 2.14-.541.985 0 1.795.243 2.424.734.63.49 1.024 1.174 1.18 2.06h-1.658a1.782 1.782 0 0 0-.65-1.053c-.332-.256-.772-.382-1.322-.382-.759 0-1.355.26-1.787.776-.432.516-.646 1.225-.646 2.127 0 .902.214 1.606.646 2.118.432.512 1.028.768 1.787.768.55 0 .99-.117 1.322-.357.331-.239.55-.57.65-.994h1.657c-.155.848-.55 1.506-1.179 1.984-.629.479-1.439.718-2.425.718v.004Zm7.283-.138V3.38h1.502V6.8h3.687V3.38h1.502v8.223h-1.502V8.02h-3.687v3.582h-1.502Zm-48.6 5.847c0 4.275-1.665 8.29-4.686 11.31a15.895 15.895 0 0 1-11.31 4.686h-4.363l4.363-4.363c6.415 0 11.633-5.218 11.633-11.633 0-6.414-5.218-11.632-11.633-11.632-6.414 0-11.633 5.218-11.633 11.633v.226a14.231 14.231 0 0 0-2.546-.227h-.726c-.365 0-.73.013-1.09.042v-.041c0-4.275 1.665-8.29 4.685-11.31a15.895 15.895 0 0 1 11.31-4.686c4.27 0 8.29 1.665 11.31 4.686a15.896 15.896 0 0 1 4.686 11.31Z"/><path d="M21.856 42.173H11.633c-5.613 0-10.181-4.568-10.181-10.181 0-5.613 4.568-10.182 10.181-10.182 5.613 0 10.181 4.569 10.181 10.182v1.455h-4.362v-1.455c0-3.21-2.61-5.819-5.819-5.819a5.824 5.824 0 0 0-5.819 5.819 5.824 5.824 0 0 0 5.819 5.818h5.86l4.363 4.363Z"/></svg>';
+defineCustomElement('sinch-logo-engage-icon-wordmark', createLogoClass(templateHTML));

package/logo/sinch-icon/index.d.ts

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

package/logo/sinch-icon/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createLogoClass } from '../create-logo-class';
+const templateHTML = '<svg viewBox="0 0 93 48" aria-hidden="true"><path d="M92.298 25.271a17.167 17.167 0 0 1-.814 5.312c-1.51 4.734-5.27 8.678-10.06 10.549-5.64 2.202-12.252 1.416-18.624-2.21l-4.649-2.67a16.424 16.424 0 0 1-3.563 3.064l-14.817 8.679-.027.015v-7.501l.027-.014 22.29-13.057a16.017 16.017 0 0 1-.713 3.206l4.656 2.65c5.95 3.386 10.388 2.85 13.065 1.806 2.991-1.167 5.323-3.59 6.245-6.483.692-2.15.679-4.467-.04-6.609-.955-2.88-3.319-5.275-6.324-6.41-2.688-1.014-7.132-1.494-13.04 1.962L29.7 38.747l-.043.028c-4.017 2.35-8.14 3.556-12.065 3.58a18.162 18.162 0 0 1-6.53-1.145C6.247 39.396 2.44 35.498.874 30.783A17.116 17.116 0 0 1 .81 20.166c1.51-4.733 5.272-8.676 10.063-10.548 5.64-2.202 12.252-1.416 18.623 2.212l4.649 2.67a16.377 16.377 0 0 1 3.563-3.067l.281-.163 1.726-1.011-7.37-4.197A3.238 3.238 0 0 1 35.551.437l10.591 6.06L56.52.457a3.238 3.238 0 0 1 3.27 5.588l-29.528 17.05c.132-1.017.36-2.019.683-2.992l-4.656-2.65c-5.946-3.383-10.384-2.847-13.061-1.803-2.991 1.167-5.325 3.59-6.247 6.481a10.623 10.623 0 0 0 .039 6.608c.956 2.882 3.321 5.277 6.324 6.41 2.689 1.012 7.136 1.495 13.042-1.966l36.256-21.208c4.017-2.349 8.14-3.555 12.067-3.579a18.112 18.112 0 0 1 6.53 1.145c4.812 1.813 8.62 5.712 10.187 10.426a17.23 17.23 0 0 1 .872 5.304Z"/></svg>';
+defineCustomElement('sinch-logo-sinch-icon', createLogoClass(templateHTML));

package/logo/sinch-icon-wordmark/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchLogoElement, TSinchLogoReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-logo-sinch-icon-wordmark': TSinchLogoReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-logo-sinch-icon-wordmark': TSinchLogoElement;
+    }
+}

package/logo/sinch-icon-wordmark/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createLogoClass } from '../create-logo-class';
+const templateHTML = '<svg viewBox="0 0 236 48" aria-hidden="true"><path d="m100.82 36.72 6.606-3.801c1.299 2.603 3.5 3.903 6.602 3.9 2.914 0 4.704-1.299 4.704-3.201 0-1.902-2.498-2.498-6.806-3.401-5.903-1.303-9.703-3.7-9.703-8.704 0-5.412 5.503-9.108 11.605-9.108 5.204 0 8.804 1.403 12.006 5.411l-6.303 3.605c-1.199-2.081-3.001-3.101-5.603-3.101-2.701 0-4.2 1.199-4.2 2.802 0 1.998 3.001 2.397 7.002 3.4 5.503 1.4 9.707 3.301 9.707 8.805 0 5.702-5.603 9.603-12.609 9.603-5.802-.008-10.207-1.607-13.008-6.21Zm29.618 5.41V16.739l7.405-4.333v29.717l-7.405.009Zm12.608 0V26.517c0-8.004 5.903-14.111 14.108-14.111 8.325 0 14.107 6.506 14.107 14.111v15.606h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106l-7.514.009Zm32.203-14.515c0-8.904 6.402-15.21 15.402-15.21 5.603 0 10.602 2.914 13.004 7.405l-6.402 3.805a7.36 7.36 0 0 0-6.702-4.005c-4.404 0-7.705 3.302-7.705 8.005 0 4.604 3.101 8.105 7.705 8.105 3.001 0 5.603-1.503 6.802-4.004l6.402 3.704a14.887 14.887 0 0 1-13.104 7.493c-8.883.009-15.402-6.394-15.402-15.298Zm32.519 14.507V4.304L215.186 0v14.607a12.584 12.584 0 0 1 6.902-2.202c8.204 0 13.907 5.603 13.907 13.907v15.819h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106h-7.526ZM82.892 27.578a15.068 15.068 0 0 1-9.766 14.244C68.06 43.8 62.124 43.072 56.4 39.837l-4.162-2.398a14.752 14.752 0 0 1-3.197 2.752l-13.32 7.792h-.026v-6.722h.025l20.02-11.735a14.647 14.647 0 0 1-.641 2.876l4.162 2.381c5.345 3.04 9.333 2.56 11.735 1.624a9.484 9.484 0 0 0 5.607-5.828 9.67 9.67 0 0 0 .458-2.972 9.257 9.257 0 0 0-6.17-8.717c-2.418-.911-6.406-1.344-11.713 1.761L26.675 39.679l-.038.025c-3.605 2.11-7.31 3.197-10.823 3.217-2.001.02-3.99-.328-5.865-1.028a15.185 15.185 0 0 1-9.22-18.898 15.352 15.352 0 0 1 9.037-9.475c5.066-1.977 11.002-1.274 16.725 1.986l4.163 2.398a14.678 14.678 0 0 1 3.201-2.752l.28-.166 1.552-.908-6.619-3.746a2.915 2.915 0 0 1 2.86-5.058l9.512 5.44 9.32-5.41a2.914 2.914 0 0 1 2.939 5.007l-26.52 15.31a14.67 14.67 0 0 1 .616-2.68l-4.163-2.382c-5.341-3.038-9.325-2.56-11.73-1.619a9.317 9.317 0 0 0 .103 17.508c2.415.912 6.407 1.345 11.714-1.76l32.557-19.053c3.604-2.11 7.31-3.193 10.823-3.214 2-.02 3.987.329 5.86 1.029a15.077 15.077 0 0 1 9.937 14.128"/></svg>';
+defineCustomElement('sinch-logo-sinch-icon-wordmark', createLogoClass(templateHTML));

package/logo/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchLogoElement = HTMLElement & {
+    size: number;
+    inverted: boolean;
+    setAttribute(name: 'size', value: string): void;
+    setAttribute(name: 'inverted', value: ''): void;
+};
+export type TSinchLogoReact = TSinchElementReact<TSinchLogoElement> & {
+    size?: number;
+    inverted?: boolean;
+};

package/logo/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/assets",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -12,18 +12,18 @@
     "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13"
+    "@babel/runtime": "^7.21.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.12",
-    "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.18.6",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.27",
-    "babel-plugin-html-inline-minifier": "workspace:^0.0.0",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.4",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.4",
+    "@types/node": "^18.16.0",
+    "@types/react": "^18.0.38",
+    "babel-plugin-html-inline-minifier": "workspace:*",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.4"
   }
 }

package/utils/element.js

@@ -25,8 +25,8 @@ export const setAssetsRegistry = registry => {
 export class NectaryElement extends HTMLElement {
   attachShadow() {
     return super.attachShadow({
-      mode: 'closed',
-      delegatesFocus: false,
+      mode: 'open',
+      delegatesFocus: true,
       customElements: nectaryRegistry
     });
   }