@nyaruka/temba-components 0.25.2 → 0.26.2

package/static/icons/symbol-defs.svg

@@ -1,26 +1,13 @@
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
-<symbol id="icon-zapier" viewBox="0 0 32 32">
-<path fill="#ff4a00" style="fill: var(--color1, #ff4a00)" d="M20 16.005c0 1.191-0.22 2.328-0.615 3.38-1.049 0.396-2.191 0.615-3.38 0.615h-0.012c-1.191 0-2.327-0.22-3.379-0.615-0.396-1.052-0.615-2.191-0.615-3.38v-0.012c0-1.191 0.219-2.327 0.615-3.379 1.052-0.396 2.189-0.615 3.379-0.615h0.012c1.191 0 2.331 0.219 3.38 0.616 0.396 1.051 0.615 2.188 0.615 3.38zM31.78 13.333h-9.34l6.597-6.603c-0.52-0.731-1.093-1.413-1.727-2.044-0.631-0.632-1.313-1.209-2.040-1.728l-6.605 6.599v-9.337c-0.865-0.139-1.751-0.22-2.66-0.22h-0.013c-0.907 0-1.795 0.081-2.66 0.22v9.34l-6.6-6.599c-0.732 0.515-1.413 1.095-2.045 1.725-0.632 0.632-1.211 1.316-1.728 2.044l6.599 6.603h-9.337c0 0-0.22 1.755-0.22 2.66v0.012c0 0.907 0.081 1.797 0.22 2.66h9.34l-6.599 6.603c1.036 1.461 2.311 2.735 3.769 3.773l6.603-6.6v9.339c0.864 0.14 1.751 0.22 2.655 0.22h0.023c0.905 0 1.792-0.080 2.655-0.22v-9.339l6.603 6.6c0.731-0.5 1.413-1.083 2.039-1.72h0.007c0.631-0.62 1.208-1.301 1.728-2.041l-6.6-6.599h9.339c0.14-0.86 0.22-1.739 0.22-2.64v-0.041c0-0.904-0.080-1.791-0.22-2.653z"></path>
+<symbol id="icon-pause" viewBox="0 0 24 24">
+<path d="M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z"></path>
 </symbol>
-<symbol id="icon-channel" viewBox="0 0 16 16">
-<path d="M0 11l5-8 5 5 6-4-5 9-5-5z"></path>
+<symbol id="icon-play" viewBox="0 0 24 24">
+<path d="M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z"></path>
 </symbol>
-<symbol id="icon-users1" viewBox="0 0 18 16">
-<path d="M12 12.041v-0.825c1.102-0.621 2-2.168 2-3.716 0-2.485 0-4.5-3-4.5s-3 2.015-3 4.5c0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z"></path>
-<path d="M5.112 12.427c0.864-0.565 1.939-0.994 3.122-1.256-0.235-0.278-0.449-0.588-0.633-0.922-0.475-0.863-0.726-1.813-0.726-2.748 0-1.344 0-2.614 0.478-3.653 0.464-1.008 1.299-1.633 2.488-1.867-0.264-1.195-0.968-1.98-2.841-1.98-3 0-3 2.015-3 4.5 0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h4.359c0.227-0.202 0.478-0.393 0.753-0.573z"></path>
-</symbol>
-<symbol id="icon-lock2" viewBox="0 0 16 16">
-<path d="M13 7h-1v-3c0-2.209-1.791-4-4-4s-4 1.791-4 4v3h-1c-0.55 0-1 0.45-1 1v7c0 0.55 0.45 1 1 1h10c0.55 0 1-0.45 1-1v-7c0-0.55-0.45-1-1-1zM8 13c-0.552 0-1-0.448-1-1s0.448-1 1-1 1 0.448 1 1-0.448 1-1 1zM10 7h-4v-3c0-1.103 0.897-2 2-2s2 0.897 2 2v3z"></path>
-</symbol>
-<symbol id="icon-atom" viewBox="0 0 16 16">
-<path d="M12.999 3.23v0 0zM13.032 8c1.631-1.56 2.423-3.087 1.896-4-0.301-0.521-0.99-0.77-1.929-0.77v0.75c0.659 0 1.137 0.148 1.28 0.395 0.113 0.195 0.050 0.496-0.023 0.713-0.139 0.417-0.442 0.917-0.876 1.444-0.263 0.32-0.567 0.643-0.904 0.963-0.465-0.402-0.982-0.801-1.544-1.188-0.055-0.679-0.142-1.327-0.257-1.93 0.878-0.26 1.675-0.397 2.323-0.397l0-0.75c-0 0-0 0-0 0-0.706 0-1.553 0.141-2.482 0.413-0.535-2.192-1.462-3.642-2.516-3.642s-1.981 1.45-2.516 3.642c-0.929-0.271-1.777-0.412-2.482-0.412-0.939 0-1.629 0.249-1.93 0.77-0.527 0.913 0.265 2.44 1.896 4-1.631 1.56-2.423 3.087-1.896 4 0.301 0.521 0.99 0.77 1.93 0.77 0.706 0 1.553-0.141 2.482-0.412 0.535 2.192 1.462 3.642 2.516 3.642s1.981-1.45 2.516-3.642c0.929 0.271 1.777 0.412 2.482 0.412 0.939 0 1.629-0.249 1.93-0.77 0.527-0.913-0.265-2.44-1.896-4zM11.915 8c-0.291 0.248-0.601 0.493-0.927 0.734 0.008-0.242 0.013-0.487 0.013-0.734s-0.004-0.492-0.013-0.734c0.327 0.241 0.637 0.486 0.927 0.734zM9.958 11.389c-0.36-0.128-0.728-0.274-1.098-0.435 0.213-0.113 0.426-0.232 0.64-0.355s0.424-0.25 0.63-0.378c-0.045 0.403-0.103 0.793-0.172 1.169zM9.125 9.949c-0.372 0.214-0.748 0.416-1.125 0.603-0.377-0.187-0.753-0.389-1.125-0.603-0.375-0.216-0.737-0.441-1.086-0.672-0.026-0.417-0.039-0.844-0.039-1.276s0.013-0.859 0.039-1.276c0.349-0.231 0.711-0.456 1.086-0.672 0.372-0.215 0.748-0.416 1.125-0.603 0.377 0.187 0.753 0.389 1.125 0.603 0.375 0.216 0.737 0.441 1.086 0.672 0.026 0.417 0.039 0.844 0.039 1.276s-0.013 0.859-0.039 1.276c-0.349 0.231-0.711 0.456-1.086 0.672zM5.87 10.22c0.205 0.128 0.415 0.254 0.63 0.378s0.427 0.242 0.64 0.355c-0.37 0.162-0.738 0.307-1.098 0.435-0.069-0.375-0.127-0.766-0.172-1.168zM5.013 8.734c-0.327-0.241-0.637-0.486-0.927-0.734 0.291-0.248 0.601-0.494 0.927-0.734-0.008 0.242-0.013 0.487-0.013 0.734s0.004 0.492 0.013 0.734zM6.042 4.612c0.36 0.128 0.728 0.274 1.098 0.435-0.213 0.113-0.426 0.232-0.64 0.355s-0.424 0.25-0.63 0.378c0.045-0.403 0.103-0.793 0.172-1.168zM9.5 5.402c-0.214-0.123-0.427-0.242-0.64-0.355 0.37-0.162 0.738-0.307 1.098-0.435 0.069 0.375 0.127 0.766 0.172 1.168-0.205-0.128-0.415-0.254-0.63-0.378zM6.581 2.607c0.24-0.639 0.521-1.151 0.813-1.48 0.152-0.172 0.381-0.376 0.607-0.376s0.454 0.205 0.607 0.376c0.292 0.329 0.573 0.841 0.813 1.48 0.146 0.388 0.273 0.812 0.382 1.265-0.58 0.202-1.185 0.45-1.801 0.743-0.616-0.292-1.221-0.541-1.801-0.743 0.109-0.453 0.237-0.877 0.382-1.265zM2.62 6.532c-0.434-0.527-0.736-1.026-0.876-1.444-0.073-0.218-0.135-0.518-0.023-0.713 0.143-0.247 0.621-0.395 1.28-0.395h0c0.648 0 1.445 0.137 2.323 0.397-0.115 0.603-0.202 1.251-0.257 1.93-0.561 0.387-1.079 0.787-1.544 1.188-0.338-0.321-0.641-0.643-0.904-0.963zM3.002 12.020c-0.659 0-1.137-0.148-1.28-0.395-0.113-0.195-0.050-0.496 0.023-0.713 0.139-0.417 0.442-0.917 0.876-1.444 0.263-0.32 0.567-0.643 0.904-0.963 0.465 0.402 0.982 0.801 1.544 1.188 0.055 0.679 0.142 1.327 0.257 1.93-0.878 0.26-1.675 0.397-2.323 0.397zM9.419 13.393c-0.24 0.639-0.521 1.151-0.813 1.48-0.152 0.172-0.381 0.376-0.607 0.376s-0.454-0.205-0.607-0.376c-0.292-0.329-0.573-0.841-0.813-1.48-0.146-0.388-0.273-0.812-0.382-1.265 0.58-0.202 1.185-0.45 1.801-0.743 0.616 0.292 1.221 0.541 1.801 0.743-0.109 0.453-0.236 0.877-0.382 1.265zM14.256 10.912c0.073 0.218 0.135 0.518 0.023 0.713-0.143 0.248-0.622 0.395-1.28 0.395-0.648 0-1.445-0.137-2.323-0.397 0.115-0.603 0.202-1.251 0.257-1.93 0.561-0.387 1.079-0.787 1.544-1.188 0.338 0.321 0.641 0.643 0.904 0.963 0.434 0.527 0.736 1.026 0.876 1.444z"></path>
-</symbol>
-<symbol id="icon-paperplane" viewBox="0 0 16 16">
-<path d="M7 11l6.151 2.195 2.849-12.459zM5 10.311l11-9.575-16 7.913zM7 12.062v3.938l2.902-2.902z"></path>
-</symbol>
-<symbol id="icon-cancel" viewBox="0 0 16 16">
-<path d="M11.5 0h-7l-4.5 4.5v7l4.5 4.5h7l4.5-4.5v-7l-4.5-4.5zM12.5 11l-1.5 1.5-3-3-3 3-1.5-1.5 3-3-3-3 1.5-1.5 3 3 3-3 1.5 1.5-3 3 3 3z"></path>
+<symbol id="icon-user-x" viewBox="0 0 24 24">
+<path d="M17 21v-2c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464h-7c-1.38 0-2.632 0.561-3.536 1.464s-1.464 2.156-1.464 3.536v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879h7c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121v2c0 0.552 0.448 1 1 1s1-0.448 1-1zM13.5 7c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464-2.632 0.561-3.536 1.464-1.464 2.156-1.464 3.536 0.561 2.632 1.464 3.536 2.156 1.464 3.536 1.464 2.632-0.561 3.536-1.464 1.464-2.156 1.464-3.536zM11.5 7c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121 0.335-1.577 0.879-2.121 1.292-0.879 2.121-0.879 1.577 0.335 2.121 0.879 0.879 1.292 0.879 2.121zM22.293 7.293l-1.793 1.793-1.793-1.793c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l1.793 1.793-1.793 1.793c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l1.793-1.793 1.793 1.793c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.793-1.793 1.793-1.793c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z"></path>
 </symbol>
 <symbol id="icon-cloud" viewBox="0 0 24 24">
 <path d="M18 11c1.105 0 2.103 0.447 2.828 1.172s1.172 1.723 1.172 2.828-0.447 2.103-1.172 2.828-1.723 1.172-2.828 1.172h-8.995c-1.463-0.008-2.853-0.461-4.005-1.258-1.334-0.922-2.348-2.304-2.784-3.992-0.483-1.872-0.163-3.761 0.748-5.305s2.408-2.739 4.28-3.223 3.761-0.163 5.305 0.748 2.739 2.408 3.223 4.28c0.115 0.435 0.505 0.75 0.968 0.75zM18 9h-0.52c-0.725-2.057-2.143-3.708-3.915-4.753-1.983-1.169-4.415-1.583-6.821-0.961s-4.334 2.16-5.503 4.143-1.582 4.415-0.961 6.821c0.56 2.169 1.867 3.951 3.583 5.137 1.478 1.023 3.261 1.603 5.132 1.613h9.005c1.657 0 3.158-0.673 4.243-1.757s1.757-2.586 1.757-4.243-0.673-3.158-1.757-4.243-2.586-1.757-4.243-1.757z"></path>
@@ -103,7 +90,7 @@
 <symbol id="icon-upload" viewBox="0 0 24 24">
 <path d="M20 15v4c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1v4c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 5.414v9.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-9.586l3.293 3.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5-5c-0.092-0.092-0.202-0.166-0.324-0.217-0.245-0.101-0.521-0.101-0.766 0-0.118 0.049-0.228 0.121-0.324 0.217l-5 5c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>
 </symbol>
-<symbol id="icon-upload-cloud" viewBox="0 0 24 24">
+<symbol id="icon-publish" viewBox="0 0 24 24">
 <path d="M11 14.414v6.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6.586l2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-4-4c-0.092-0.092-0.202-0.166-0.324-0.217s-0.253-0.076-0.383-0.076c-0.256 0-0.512 0.098-0.707 0.293l-4 4c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM20.869 19.268c1.454-0.793 2.451-2.102 2.884-3.574s0.305-3.112-0.488-4.566c-0.679-1.245-1.737-2.155-2.959-2.663-0.724-0.301-1.505-0.46-2.299-0.465h-0.527c-0.725-2.057-2.144-3.708-3.917-4.752-1.983-1.168-4.415-1.581-6.821-0.959s-4.333 2.162-5.502 4.145-1.581 4.415-0.959 6.821c0.372 1.437 1.073 2.709 1.975 3.713 0.369 0.411 1.002 0.444 1.412 0.075s0.444-1.002 0.075-1.412c-0.688-0.765-1.235-1.75-1.526-2.877-0.484-1.872-0.164-3.761 0.746-5.305s2.407-2.74 4.279-3.224 3.761-0.164 5.305 0.746 2.74 2.407 3.224 4.279c0.116 0.435 0.506 0.75 0.969 0.75h1.253c0.536 0.004 1.061 0.111 1.545 0.312 0.815 0.339 1.517 0.943 1.97 1.773 0.529 0.97 0.615 2.061 0.325 3.044s-0.953 1.854-1.923 2.382c-0.485 0.264-0.664 0.872-0.399 1.357s0.872 0.664 1.357 0.399z"></path>
 </symbol>
 <symbol id="icon-coffee" viewBox="0 0 24 24">
@@ -349,6 +336,28 @@
 <symbol id="icon-send-mobile" viewBox="0 0 24 24">
 <path d="M17.016 17.016h1.969v3.984q0 0.844-0.586 1.43t-1.383 0.586h-10.031q-0.797 0-1.383-0.586t-0.586-1.43v-18q0-0.844 0.586-1.406t1.383-0.563l10.031-0.047q0.797 0 1.383 0.586t0.586 1.43v3.984h-1.969v-0.984h-10.031v12h10.031v-0.984zM21.984 12l-3.984-3.984v3h-5.016v1.969h5.016v3z"></path>
 </symbol>
+<symbol id="icon-zapier" viewBox="0 0 32 32">
+<path fill="#ff4a00" style="fill: var(--color1, #ff4a00)" d="M20 16.005c0 1.191-0.22 2.328-0.615 3.38-1.049 0.396-2.191 0.615-3.38 0.615h-0.012c-1.191 0-2.327-0.22-3.379-0.615-0.396-1.052-0.615-2.191-0.615-3.38v-0.012c0-1.191 0.219-2.327 0.615-3.379 1.052-0.396 2.189-0.615 3.379-0.615h0.012c1.191 0 2.331 0.219 3.38 0.616 0.396 1.051 0.615 2.188 0.615 3.38zM31.78 13.333h-9.34l6.597-6.603c-0.52-0.731-1.093-1.413-1.727-2.044-0.631-0.632-1.313-1.209-2.040-1.728l-6.605 6.599v-9.337c-0.865-0.139-1.751-0.22-2.66-0.22h-0.013c-0.907 0-1.795 0.081-2.66 0.22v9.34l-6.6-6.599c-0.732 0.515-1.413 1.095-2.045 1.725-0.632 0.632-1.211 1.316-1.728 2.044l6.599 6.603h-9.337c0 0-0.22 1.755-0.22 2.66v0.012c0 0.907 0.081 1.797 0.22 2.66h9.34l-6.599 6.603c1.036 1.461 2.311 2.735 3.769 3.773l6.603-6.6v9.339c0.864 0.14 1.751 0.22 2.655 0.22h0.023c0.905 0 1.792-0.080 2.655-0.22v-9.339l6.603 6.6c0.731-0.5 1.413-1.083 2.039-1.72h0.007c0.631-0.62 1.208-1.301 1.728-2.041l-6.6-6.599h9.339c0.14-0.86 0.22-1.739 0.22-2.64v-0.041c0-0.904-0.080-1.791-0.22-2.653z"></path>
+</symbol>
+<symbol id="icon-channel" viewBox="0 0 16 16">
+<path d="M0 11l5-8 5 5 6-4-5 9-5-5z"></path>
+</symbol>
+<symbol id="icon-users1" viewBox="0 0 18 16">
+<path d="M12 12.041v-0.825c1.102-0.621 2-2.168 2-3.716 0-2.485 0-4.5-3-4.5s-3 2.015-3 4.5c0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z"></path>
+<path d="M5.112 12.427c0.864-0.565 1.939-0.994 3.122-1.256-0.235-0.278-0.449-0.588-0.633-0.922-0.475-0.863-0.726-1.813-0.726-2.748 0-1.344 0-2.614 0.478-3.653 0.464-1.008 1.299-1.633 2.488-1.867-0.264-1.195-0.968-1.98-2.841-1.98-3 0-3 2.015-3 4.5 0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h4.359c0.227-0.202 0.478-0.393 0.753-0.573z"></path>
+</symbol>
+<symbol id="icon-lock2" viewBox="0 0 16 16">
+<path d="M13 7h-1v-3c0-2.209-1.791-4-4-4s-4 1.791-4 4v3h-1c-0.55 0-1 0.45-1 1v7c0 0.55 0.45 1 1 1h10c0.55 0 1-0.45 1-1v-7c0-0.55-0.45-1-1-1zM8 13c-0.552 0-1-0.448-1-1s0.448-1 1-1 1 0.448 1 1-0.448 1-1 1zM10 7h-4v-3c0-1.103 0.897-2 2-2s2 0.897 2 2v3z"></path>
+</symbol>
+<symbol id="icon-atom" viewBox="0 0 16 16">
+<path d="M12.999 3.23v0 0zM13.032 8c1.631-1.56 2.423-3.087 1.896-4-0.301-0.521-0.99-0.77-1.929-0.77v0.75c0.659 0 1.137 0.148 1.28 0.395 0.113 0.195 0.050 0.496-0.023 0.713-0.139 0.417-0.442 0.917-0.876 1.444-0.263 0.32-0.567 0.643-0.904 0.963-0.465-0.402-0.982-0.801-1.544-1.188-0.055-0.679-0.142-1.327-0.257-1.93 0.878-0.26 1.675-0.397 2.323-0.397l0-0.75c-0 0-0 0-0 0-0.706 0-1.553 0.141-2.482 0.413-0.535-2.192-1.462-3.642-2.516-3.642s-1.981 1.45-2.516 3.642c-0.929-0.271-1.777-0.412-2.482-0.412-0.939 0-1.629 0.249-1.93 0.77-0.527 0.913 0.265 2.44 1.896 4-1.631 1.56-2.423 3.087-1.896 4 0.301 0.521 0.99 0.77 1.93 0.77 0.706 0 1.553-0.141 2.482-0.412 0.535 2.192 1.462 3.642 2.516 3.642s1.981-1.45 2.516-3.642c0.929 0.271 1.777 0.412 2.482 0.412 0.939 0 1.629-0.249 1.93-0.77 0.527-0.913-0.265-2.44-1.896-4zM11.915 8c-0.291 0.248-0.601 0.493-0.927 0.734 0.008-0.242 0.013-0.487 0.013-0.734s-0.004-0.492-0.013-0.734c0.327 0.241 0.637 0.486 0.927 0.734zM9.958 11.389c-0.36-0.128-0.728-0.274-1.098-0.435 0.213-0.113 0.426-0.232 0.64-0.355s0.424-0.25 0.63-0.378c-0.045 0.403-0.103 0.793-0.172 1.169zM9.125 9.949c-0.372 0.214-0.748 0.416-1.125 0.603-0.377-0.187-0.753-0.389-1.125-0.603-0.375-0.216-0.737-0.441-1.086-0.672-0.026-0.417-0.039-0.844-0.039-1.276s0.013-0.859 0.039-1.276c0.349-0.231 0.711-0.456 1.086-0.672 0.372-0.215 0.748-0.416 1.125-0.603 0.377 0.187 0.753 0.389 1.125 0.603 0.375 0.216 0.737 0.441 1.086 0.672 0.026 0.417 0.039 0.844 0.039 1.276s-0.013 0.859-0.039 1.276c-0.349 0.231-0.711 0.456-1.086 0.672zM5.87 10.22c0.205 0.128 0.415 0.254 0.63 0.378s0.427 0.242 0.64 0.355c-0.37 0.162-0.738 0.307-1.098 0.435-0.069-0.375-0.127-0.766-0.172-1.168zM5.013 8.734c-0.327-0.241-0.637-0.486-0.927-0.734 0.291-0.248 0.601-0.494 0.927-0.734-0.008 0.242-0.013 0.487-0.013 0.734s0.004 0.492 0.013 0.734zM6.042 4.612c0.36 0.128 0.728 0.274 1.098 0.435-0.213 0.113-0.426 0.232-0.64 0.355s-0.424 0.25-0.63 0.378c0.045-0.403 0.103-0.793 0.172-1.168zM9.5 5.402c-0.214-0.123-0.427-0.242-0.64-0.355 0.37-0.162 0.738-0.307 1.098-0.435 0.069 0.375 0.127 0.766 0.172 1.168-0.205-0.128-0.415-0.254-0.63-0.378zM6.581 2.607c0.24-0.639 0.521-1.151 0.813-1.48 0.152-0.172 0.381-0.376 0.607-0.376s0.454 0.205 0.607 0.376c0.292 0.329 0.573 0.841 0.813 1.48 0.146 0.388 0.273 0.812 0.382 1.265-0.58 0.202-1.185 0.45-1.801 0.743-0.616-0.292-1.221-0.541-1.801-0.743 0.109-0.453 0.237-0.877 0.382-1.265zM2.62 6.532c-0.434-0.527-0.736-1.026-0.876-1.444-0.073-0.218-0.135-0.518-0.023-0.713 0.143-0.247 0.621-0.395 1.28-0.395h0c0.648 0 1.445 0.137 2.323 0.397-0.115 0.603-0.202 1.251-0.257 1.93-0.561 0.387-1.079 0.787-1.544 1.188-0.338-0.321-0.641-0.643-0.904-0.963zM3.002 12.020c-0.659 0-1.137-0.148-1.28-0.395-0.113-0.195-0.050-0.496 0.023-0.713 0.139-0.417 0.442-0.917 0.876-1.444 0.263-0.32 0.567-0.643 0.904-0.963 0.465 0.402 0.982 0.801 1.544 1.188 0.055 0.679 0.142 1.327 0.257 1.93-0.878 0.26-1.675 0.397-2.323 0.397zM9.419 13.393c-0.24 0.639-0.521 1.151-0.813 1.48-0.152 0.172-0.381 0.376-0.607 0.376s-0.454-0.205-0.607-0.376c-0.292-0.329-0.573-0.841-0.813-1.48-0.146-0.388-0.273-0.812-0.382-1.265 0.58-0.202 1.185-0.45 1.801-0.743 0.616 0.292 1.221 0.541 1.801 0.743-0.109 0.453-0.236 0.877-0.382 1.265zM14.256 10.912c0.073 0.218 0.135 0.518 0.023 0.713-0.143 0.248-0.622 0.395-1.28 0.395-0.648 0-1.445-0.137-2.323-0.397 0.115-0.603 0.202-1.251 0.257-1.93 0.561-0.387 1.079-0.787 1.544-1.188 0.338 0.321 0.641 0.643 0.904 0.963 0.434 0.527 0.736 1.026 0.876 1.444z"></path>
+</symbol>
+<symbol id="icon-paperplane" viewBox="0 0 16 16">
+<path d="M7 11l6.151 2.195 2.849-12.459zM5 10.311l11-9.575-16 7.913zM7 12.062v3.938l2.902-2.902z"></path>
+</symbol>
+<symbol id="icon-cancel" viewBox="0 0 16 16">
+<path d="M11.5 0h-7l-4.5 4.5v7l4.5 4.5h7l4.5-4.5v-7l-4.5-4.5zM12.5 11l-1.5 1.5-3-3-3 3-1.5-1.5 3-3-3-3 1.5-1.5 3 3 3-3 1.5 1.5-3 3 3 3z"></path>
+</symbol>
 <symbol id="icon-cord" viewBox="0 0 32 32">
 <path d="M27.59 12.41c-0.464-0.464-1.216-0.464-1.679 0l-4.91 4.91-6.321-6.321 4.91-4.91c0.464-0.464 0.464-1.216 0-1.679s-1.216-0.464-1.679 0l-4.91 4.91-2.91-2.91c-0.464-0.464-1.216-0.464-1.679 0s-0.464 1.216 0 1.679l2.093 2.093-4.16 4.16c-2.636 2.636-3.048 6.653-1.236 9.721l-4.521 4.521c-0.781 0.781-0.781 2.047 0 2.828 0.391 0.391 0.902 0.586 1.414 0.586s1.024-0.195 1.414-0.586l4.521-4.521c3.068 1.812 7.085 1.4 9.721-1.236l4.16-4.16 2.093 2.093c0.232 0.232 0.536 0.348 0.84 0.348s0.608-0.116 0.84-0.348c0.464-0.464 0.464-1.216 0-1.679l-2.91-2.91 4.91-4.91c0.464-0.464 0.464-1.216 0-1.679z"></path>
 </symbol>

package/temba-modules.ts

@@ -22,6 +22,9 @@ import { Omnibox } from './src/omnibox/Omnibox';
 import { Tip } from './src/tip/Tip';
 import { TembaMenu } from './src/list/TembaMenu';
 import { Anchor } from './src/anchor/Anchor';
+import { Dropdown } from './src/dropdown/Dropdown';
+import { TabPane } from './src/tabpane/TabPane';
+import { Tab } from './src/tabpane/Tab';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -54,3 +57,6 @@ addCustomElement('temba-list', TembaList);
 addCustomElement('temba-menu', TembaMenu);
 addCustomElement('temba-contact-search', ContactSearch);
 addCustomElement('temba-icon', VectorIcon);
+addCustomElement('temba-dropdown', Dropdown);
+addCustomElement('temba-tabs', TabPane);
+addCustomElement('temba-tab', Tab);

package/test/temba-contact-history.test.ts

@@ -14,7 +14,7 @@ export const createHistory = async (def: string) => {
   const parentNode = document.createElement('div');
   parentNode.setAttribute(
     'style',
-    'width: 500px;height:750px;display:flex;flex-direction:column'
+    'width: 500px;height:750px;display:flex;flex-direction:column;flex-grow:1;min-height:0;'
   );
   const history = (await fixture(def, { parentNode })) as ContactHistory;
 
@@ -29,7 +29,8 @@ export const createHistory = async (def: string) => {
   return history;
 };
 
-const getHistoryHTML = (attrs: any = {}) =>
+const getHistoryHTML = (attrs: any = {} as any) =>
+  // attrs = "min-height:0;display:flex;flex-grow:1;flex-direction:column";
   getHTML('temba-contact-history', attrs);
 
 const getHistoryClip = (ele: ContactHistory) => {
@@ -74,10 +75,11 @@ describe('temba-contact-history', () => {
     // we should have scrolled to the bottom
     const events = history.shadowRoot.querySelector('.events');
     const top = events.scrollHeight - events.getBoundingClientRect().height;
-    expect(top).to.equal(218);
+
+    expect(top).to.equal(539);
 
     // make sure we actually scrolled to there
-    expect(events.scrollTop).to.equal(top - 1);
+    expect(events.scrollTop).to.equal(top - 4);
 
     await assertScreenshot('contacts/history', getHistoryClip(history));
   });
@@ -90,14 +92,16 @@ describe('temba-contact-history', () => {
     );
 
     // our groups with collapsed events
-    const groups = [3, 11];
+    const groups = [3, 5, 7];
     for (const idx of groups) {
       const group = history.shadowRoot.querySelector(
-        `[data-group-index='${idx}']`
+        `.event-count[data-group-index='${idx}']`
       ) as HTMLDivElement;
       group.click();
     }
 
+    await waitFor(500);
+
     await assertScreenshot(
       'contacts/history-expanded',
       getHistoryClip(history)

package/test/temba-dialog.test.ts

@@ -12,7 +12,7 @@ const getDialogClip = (dialog: Dialog) => {
 const getDialogHTML = (hideOnClick = false) => {
   return `
     <temba-dialog header="Hello Dialog" ${hideOnClick ? 'hideOnClick' : ''}>
-      <textarea name="comment" style="margin: 10px"></textarea>
+      <input name="comment" type="text" style="margin: 10px"/>
     </temba-dialog>
   `;
 };
@@ -89,8 +89,8 @@ describe('temba-dialog', () => {
     const dialog: Dialog = await fixture(getDialogHTML());
     await open(dialog);
 
-    const textarea = dialog.querySelector('textarea');
-    expect(document.activeElement).to.equal(textarea);
+    const input = dialog.querySelector('input');
+    expect(document.activeElement).to.equal(input);
     await assertScreenshot('dialog/focused', getDialogClip(dialog));
   });
 
@@ -98,9 +98,8 @@ describe('temba-dialog', () => {
     const dialog: Dialog = await fixture(getDialogHTML(true));
     await open(dialog);
 
-    const mask: HTMLDivElement = dialog.shadowRoot.querySelector(
-      '#dialog-mask'
-    );
+    const mask: HTMLDivElement =
+      dialog.shadowRoot.querySelector('#dialog-mask');
     mask.click();
 
     await dialog.updateComplete;

package/test-assets/modax/form.html

@@ -1,6 +1,6 @@
 <html>
   <div>
-    <textarea>This is a remote form</textarea>
+    <input type="text" value="This is a remote form"/>
     <div class="form-actions">
       <input type="submit" value="Save Everything"/>
     </div>

package/test-assets/style.css

@@ -15,6 +15,7 @@ html input {
 }
 
 html {
+  --transition-speed: 0ms !important;
   --input-caret: transparent !important;
   --font-family: 'Roboto';
   --primary-rgb: 35, 135, 202;
@@ -168,6 +169,12 @@ temba-button.light.active {
   --button-bg-img: linear-gradient(to bottom, transparent, rgba(0,0,0,.02));
 }
 
+temba-contact-history {
+  min-height:0;
+  display:flex;
+  flex-grow:1;
+  flex-direction:column;
+}
 
 temba-select:focus {
   outline: none;

package/web-test-runner.config.mjs

@@ -1,23 +1,23 @@
 import { puppeteerLauncher } from '@web/test-runner-puppeteer';
-import fs from  "fs";
-import * as path from "path";
-import * as pngs from "pngjs";
+import fs from 'fs';
+import * as path from 'path';
+import * as pngs from 'pngjs';
 import dynamicpixelmatch from 'dynamicpixelmatch';
 import pixelmatch from 'pixelmatch';
 import sizeOf from 'image-size';
 
-import rimraf from "rimraf";
+import rimraf from 'rimraf';
 
 const SCREENSHOTS = 'screenshots';
 const DIFF = 'diff';
-const TEST = "test";
-const TRUTH = "truth";
+const TEST = 'test';
+const TRUTH = 'truth';
 
 const PNG = pngs.PNG;
 
-const fileExists = (filename) => {
+const fileExists = filename => {
   return new Promise((resolve, reject) => {
-    fs.access(filename, fs.F_OK, (err) => {
+    fs.access(filename, fs.F_OK, err => {
       if (err) {
         resolve(false);
       }
@@ -28,35 +28,31 @@ const fileExists = (filename) => {
 
 const ensureExists = function (mydir) {
   return new Promise((resolve, reject) => {
-    fs.mkdir(mydir, {recursive: true }, function (err) {
+    fs.mkdir(mydir, { recursive: true }, function (err) {
       if (err) {
-        if (err.code == "EEXIST")
-          resolve("ignore the error if the folder already exists");
+        if (err.code == 'EEXIST')
+          resolve('ignore the error if the folder already exists');
         else reject(err); // something else went wrong
       }
-      resolve("path created");
+      resolve('path created');
     });
   });
 };
 
-
 const getPath = async (type, filename) => {
-  const file = path.resolve(SCREENSHOTS, type, filename)
+  const file = path.resolve(SCREENSHOTS, type, filename);
 
   // make sure our directory exists
   const parts = filename.split(path.sep);
   let pngdir = parts.slice(0, parts.length - 1);
   await ensureExists(path.resolve(SCREENSHOTS, type, ...pngdir));
-  
-  return file;
-}
 
+  return file;
+};
 
 const checkScreenshot = async (filename, excluded, threshold) => {
-  
   return new Promise(async (resolve, reject) => {
     const doneReading = async () => {
-      
       // Wait until both files are read.
       if (++filesRead < 2) return;
 
@@ -64,20 +60,25 @@ const checkScreenshot = async (filename, excluded, threshold) => {
       if (img1.width != img2.width || img1.height !== img2.height) {
         // resolve(`Screenshot was ${img2.width}x${img2.height} but should be ${img1.width}x${img1.height}:\n${testImg}`);
 
-
         reject({
           message: 'Screenshot was not the right size',
           expected: `${img1.width}x${img1.height}`,
           actual: `${img2.width}x${img2.height}`,
-          files: [testImg, truthImg, path.resolve(SCREENSHOTS)]
+          files: [testImg, truthImg, path.resolve(SCREENSHOTS)],
         });
         return;
       }
 
       // Do the visual diff.
       const diff = new PNG({ width: img1.width, height: img2.height });
-      const matchOptions = { threshold: threshold || 0.3 };
-      const numDiffPixels = excluded != null && excluded.length != 0
+      const matchOptions = {
+        threshold: threshold || 0.3,
+        includeAA: false,
+        diffColor: [255, 0, 0],
+        aaColor: [0, 0, 255],
+      };
+      const numDiffPixels =
+        excluded != null && excluded.length != 0
           ? dynamicpixelmatch(
               img1.data,
               img2.data,
@@ -101,9 +102,12 @@ const checkScreenshot = async (filename, excluded, threshold) => {
         // console.error("number of different pixels are not 0");
         const diffImg = await getPath(DIFF, filename);
         diff.pack().pipe(fs.createWriteStream(diffImg));
-        reject({message:"Pixel match failed", files: [diffImg, testImg, truthImg, path.resolve(SCREENSHOTS)]});
-      } 
-      resolve("success");
+        reject({
+          message: 'Pixel match failed',
+          files: [diffImg, testImg, truthImg, path.resolve(SCREENSHOTS)],
+        });
+      }
+      resolve('success');
     };
 
     let filesRead = 0;
@@ -114,18 +118,16 @@ const checkScreenshot = async (filename, excluded, threshold) => {
     const img1 = fs
       .createReadStream(truthImg)
       .pipe(new PNG())
-      .on("parsed", await doneReading);
-      
+      .on('parsed', await doneReading);
+
     const img2 = fs
       .createReadStream(testImg)
       .pipe(new PNG())
-      .on("parsed", await doneReading);
+      .on('parsed', await doneReading);
   });
 };
 
-
 const wireScreenshots = async (page, context) => {
-
   // clear out any past tests
   const diffs = path.resolve(SCREENSHOTS, DIFF);
   const tests = path.resolve(SCREENSHOTS, TEST);
@@ -133,111 +135,108 @@ const wireScreenshots = async (page, context) => {
   rimraf.sync(diffs);
   rimraf.sync(tests);
 
-  await page.exposeFunction("matchPageSnapshot", (filename, clip, excluded, threshold) =>{
-
-    return new Promise(async (resolve, reject) => {
-    
-      const testFile = await getPath(TEST, filename);
-      const truthFile = await getPath(TRUTH, filename);
-
-      if (!await fileExists(truthFile)) {
-      
-        // no truth yet, record it
-        await page.screenshot({ path: truthFile, clip});
-
-      } else {
-
-        // if its close, force our file to be the same size as our truth for pixelmatch
-        const dimensions = sizeOf(truthFile);
-        let { width, height} = dimensions;
-
-        // we should have a device ratio of 2
-        width /= 2;
-        height /= 2;
-
-        const wDiff = Math.abs((clip.width - width) / width);
-        const hDiff = Math.abs((clip.height - height) / height);
-
-
-        if (wDiff < .15) {
-          clip.width = width;
-        }
+  await page.exposeFunction(
+    'matchPageSnapshot',
+    (filename, clip, excluded, threshold) => {
+      return new Promise(async (resolve, reject) => {
+        const testFile = await getPath(TEST, filename);
+        const truthFile = await getPath(TRUTH, filename);
+
+        if (!(await fileExists(truthFile))) {
+          // no truth yet, record it
+          await page.screenshot({ path: truthFile, clip });
+        } else {
+          // if its close, force our file to be the same size as our truth for pixelmatch
+          const dimensions = sizeOf(truthFile);
+          let { width, height } = dimensions;
+
+          // we should have a device ratio of 2
+          width /= 2;
+          height /= 2;
+
+          const wDiff = Math.abs((clip.width - width) / width);
+          const hDiff = Math.abs((clip.height - height) / height);
+
+          if (wDiff < 0.15) {
+            clip.width = width;
+          }
 
-        if(hDiff < .15) {
-          clip.height = height;
-        }
+          if (hDiff < 0.15) {
+            clip.height = height;
+          }
 
-        if (!clip.width || !clip.height) {
-          reject({message: "Couldn't take screenshot clip is empty"});
-          return;
-        }
+          if (!clip.width || !clip.height) {
+            reject({ message: "Couldn't take screenshot clip is empty" });
+            return;
+          }
 
-        // create a test screenshot to compare with our truth
-        await page.screenshot({ path: testFile, clip });
+          // create a test screenshot to compare with our truth
+          await page.screenshot({ path: testFile, clip });
 
-        try {
-          const result = await checkScreenshot(filename);
-          resolve(result);
-        } catch(error) {
-          reject(error);
-          return;
+          try {
+            const result = await checkScreenshot(filename);
+            resolve(result);
+          } catch (error) {
+            reject(error);
+            return;
+          }
         }
-      }
-
-      resolve(true);
-
-    });
 
-  });
+        resolve(true);
+      });
+    }
+  );
 
-  await page.exposeFunction("setViewport", async (options) => {
+  await page.exposeFunction('setViewport', async options => {
     await page.setViewport(options);
   });
-  
-  await page.exposeFunction("waitFor", (millis)=>{
+
+  await page.exposeFunction('waitFor', millis => {
     return new Promise(async (resolve, reject) => {
       await page.waitForTimeout(millis);
       resolve();
     });
   });
 
-  await page.exposeFunction("moveMouse", (x, y) => {
+  await page.exposeFunction('moveMouse', (x, y) => {
     return new Promise(async (resolve, reject) => {
-      await page.mouse.move(x,y);
+      await page.mouse.move(x, y);
       resolve();
     });
   });
 
-  await page.exposeFunction("click", async (element) => {    
-    const frame = await page.frames().find((f) => { 
+  await page.exposeFunction('click', async element => {
+    const frame = await page.frames().find(f => {
       return true;
     });
     const ele = await frame.$(element);
     await ele.click({});
   });
 
-  await page.exposeFunction("typeInto", async (selector, text, replace=false) => {
-    // console.log("frames", page.frames().length);
-    const frame = await page.frames().find((f) => { 
-      return true
-    });
-    const element = await frame.$(selector);
-
-    await element.click({clickCount: replace ? 3 : 1});
-    await page.keyboard.type(text);
-  });
+  await page.exposeFunction(
+    'typeInto',
+    async (selector, text, replace = false) => {
+      // console.log("frames", page.frames().length);
+      const frame = await page.frames().find(f => {
+        return true;
+      });
+      const element = await frame.$(selector);
+
+      await element.click({ clickCount: replace ? 3 : 1 });
+      await page.keyboard.type(text);
+    }
+  );
 
-  await page.exposeFunction("pressKey", async (key, times, options) => {
-    for (let i=0; i<times; i++) {
+  await page.exposeFunction('pressKey', async (key, times, options) => {
+    for (let i = 0; i < times; i++) {
       await page.keyboard.press(key, options);
     }
   });
 
-  await page.exposeFunction("type", async (text) => {
+  await page.exposeFunction('type', async text => {
     await page.keyboard.type(text);
   });
-}
-
+};
 
 export default {
   rootDir: './',
@@ -248,7 +247,12 @@ export default {
       name: 'add-style',
       transform(context) {
         if (context.response.is('html')) {
-          return { body: context.body.replace(/<head>/, `<head><link rel="stylesheet" href="/test-assets/style.css">`) };
+          return {
+            body: context.body.replace(
+              /<head>/,
+              `<head><link rel="stylesheet" href="/test-assets/style.css">`
+            ),
+          };
         }
       },
     },
@@ -267,32 +271,41 @@ export default {
   browsers: [
     puppeteerLauncher({
       launchOptions: {
+        args: [
+          '--font-render-hinting=medium',
+          '--force-color-profile=srgb',
+          '--hide-scrollbars',
+          '--disable-web-security',
+          '--force-device-scale-factor=1'
+        ],
         headless: true,
       },
-      createBrowserContext: ( { browser, config }) => browser.defaultBrowserContext(),      
+      createBrowserContext: ({ browser, config }) =>
+        browser.defaultBrowserContext(),
       createPage: async ({ context, config }) => {
         const page = await context.newPage();
-        await page.exposeFunction("readStaticFile", (filename)=> {
+        await page.setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36");
+        await page.exposeFunction('readStaticFile', filename => {
           try {
-            var content = fs.readFileSync("./" + filename, 'utf8');
+            var content = fs.readFileSync('./' + filename, 'utf8');
             return content;
-          } catch(err) {
+          } catch (err) {
             console.log(err);
           }
-          return "Not Found";
-        })
-        
+          return 'Not Found';
+        });
+
         await page.once('load', async () => {
-          await page.addScriptTag(({content: `
+          await page.addScriptTag({
+            content: `
             window.watched = ${config.watch};
-          `}));
+          `,
+          });
           await wireScreenshots(page, context);
         });
-       
+
         return page;
       },
-   }),
+    }),
   ],
 };
-
-