@nyaruka/temba-components 0.49.1 → 0.49.2

package/static/svg/work/traced/browser.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.877 2.122 C 3.209 2.300,2.305 2.841,1.560 4.105 C 1.109 4.870,1.080 5.352,1.080 12.000 C 1.080 18.710,1.106 19.124,1.573 19.919 C 2.297 21.152,3.381 21.778,5.108 21.963 C 5.929 22.050,9.624 22.085,13.320 22.040 C 20.479 21.953,20.820 21.899,21.923 20.680 C 22.898 19.604,23.019 18.642,23.019 12.000 C 23.019 5.358,22.898 4.396,21.923 3.320 C 20.850 2.133,20.475 2.078,13.200 2.019 C 9.438 1.988,5.693 2.035,4.877 2.122 M20.325 4.602 C 20.782 5.031,20.880 5.371,20.880 6.522 L 20.880 7.920 12.000 7.920 L 3.120 7.920 3.120 6.555 C 3.120 5.485,3.232 5.071,3.642 4.635 L 4.164 4.080 11.966 4.080 C 19.647 4.080,19.778 4.088,20.325 4.602 M20.880 14.445 C 20.880 18.595,20.854 18.836,20.358 19.365 L 19.836 19.920 12.034 19.920 C 4.353 19.920,4.222 19.912,3.675 19.398 C 3.134 18.890,3.120 18.765,3.120 14.478 L 3.120 10.080 12.000 10.080 L 20.880 10.080 20.880 14.445 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/traced/calendar.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.337 1.337 C 7.130 1.545,6.960 2.031,6.960 2.417 C 6.960 3.080,6.904 3.120,5.976 3.120 C 4.603 3.120,3.428 3.747,2.679 4.880 L 2.040 5.845 2.040 12.942 C 2.040 20.544,2.076 20.798,3.320 21.923 C 4.396 22.898,5.358 23.019,12.000 23.019 C 18.642 23.019,19.604 22.898,20.680 21.923 C 21.924 20.798,21.960 20.544,21.960 12.942 L 21.960 5.845 21.321 4.880 C 20.572 3.747,19.397 3.120,18.024 3.120 C 17.096 3.120,17.040 3.080,17.040 2.417 C 17.040 1.675,16.508 0.960,15.956 0.960 C 15.509 0.960,14.880 1.903,14.880 2.573 C 14.880 3.112,14.837 3.120,12.000 3.120 C 9.163 3.120,9.120 3.112,9.120 2.573 C 9.120 1.903,8.491 0.960,8.044 0.960 C 7.862 0.960,7.545 1.130,7.337 1.337 M6.960 5.594 C 6.960 6.431,7.497 7.018,8.173 6.923 C 8.625 6.859,8.811 6.634,8.982 5.940 L 9.205 5.040 12.000 5.040 L 14.795 5.040 15.018 5.940 C 15.189 6.634,15.375 6.859,15.827 6.923 C 16.503 7.018,17.040 6.431,17.040 5.594 C 17.040 5.119,17.162 5.040,17.891 5.040 C 19.271 5.040,19.920 5.881,19.920 7.669 L 19.920 9.120 12.000 9.120 L 4.080 9.120 4.080 7.669 C 4.080 5.881,4.729 5.040,6.109 5.040 C 6.838 5.040,6.960 5.119,6.960 5.594 M19.920 15.438 L 19.920 19.836 19.301 20.418 L 18.681 21.000 12.000 21.000 L 5.319 21.000 4.699 20.418 L 4.080 19.836 4.080 15.438 L 4.080 11.040 12.000 11.040 L 19.920 11.040 19.920 15.438 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/traced/edit-05.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.360 1.416 C 17.189 2.156,7.485 12.060,7.211 12.796 C 6.817 13.855,6.894 16.220,7.337 16.663 C 7.780 17.106,10.145 17.183,11.204 16.789 C 11.974 16.502,22.172 6.460,22.696 5.472 C 23.154 4.610,23.132 3.229,22.647 2.410 C 21.812 0.995,19.775 0.523,18.360 1.416 M20.743 3.257 C 20.950 3.465,21.120 3.819,21.120 4.044 C 21.120 4.270,18.712 6.854,15.768 9.787 C 11.441 14.098,10.291 15.120,9.768 15.120 C 9.179 15.120,9.120 15.038,9.120 14.222 C 9.120 13.372,9.401 13.043,14.338 8.102 C 17.208 5.230,19.738 2.880,19.961 2.880 C 20.184 2.880,20.535 3.050,20.743 3.257 M3.198 3.507 C 1.164 4.510,0.983 5.267,0.972 12.840 C 0.966 16.608,1.066 19.460,1.223 20.040 C 1.577 21.343,2.694 22.456,3.972 22.778 C 5.239 23.097,16.512 23.123,17.861 22.810 C 19.105 22.522,19.899 21.901,20.500 20.746 C 20.933 19.914,20.993 19.359,20.996 16.132 C 20.999 13.131,20.935 12.423,20.640 12.236 C 20.124 11.908,19.768 11.947,19.337 12.377 C 19.029 12.685,18.960 13.388,18.960 16.204 C 18.960 19.501,18.935 19.683,18.382 20.325 L 17.805 20.996 12.490 21.085 C 6.071 21.192,4.246 21.038,3.591 20.335 C 3.146 19.857,3.120 19.452,3.120 12.932 L 3.120 6.035 3.752 5.537 C 4.323 5.088,4.709 5.040,7.728 5.040 C 11.161 5.040,12.000 4.859,12.000 4.120 C 12.000 3.226,11.542 3.120,7.692 3.125 C 4.798 3.130,3.789 3.215,3.198 3.507 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/traced/image-01.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.880 2.121 C 4.241 2.302,3.101 2.981,2.456 4.159 C 2.088 4.833,2.040 5.733,2.040 12.000 C 2.040 18.971,2.049 19.094,2.592 19.968 C 2.896 20.456,3.544 21.104,4.032 21.408 C 4.906 21.951,5.029 21.960,12.000 21.960 C 18.971 21.960,19.094 21.951,19.968 21.408 C 20.456 21.104,21.104 20.456,21.408 19.968 C 21.951 19.094,21.960 18.971,21.960 12.000 C 21.960 5.029,21.951 4.906,21.408 4.032 C 21.104 3.544,20.470 2.906,19.998 2.614 C 19.182 2.110,18.851 2.081,13.230 2.023 C 9.979 1.989,6.672 2.033,5.880 2.121 M19.331 4.669 C 19.905 5.243,19.920 5.353,19.920 8.908 L 19.920 12.559 18.263 10.959 C 17.352 10.080,16.427 9.360,16.208 9.360 C 15.400 9.360,14.659 9.991,9.812 14.812 L 4.864 19.732 4.472 19.173 C 4.132 18.688,4.080 17.724,4.080 11.936 L 4.080 5.258 4.669 4.669 L 5.258 4.080 12.000 4.080 L 18.742 4.080 19.331 4.669 M7.320 5.749 C 5.913 6.331,5.111 8.505,5.814 9.833 C 6.244 10.647,7.606 11.520,8.447 11.520 C 10.003 11.520,11.518 10.040,11.518 8.520 C 11.518 6.506,9.196 4.973,7.320 5.749 M8.896 7.688 C 9.477 8.000,9.505 9.028,8.940 9.319 C 8.400 9.597,7.980 9.440,7.658 8.839 C 7.458 8.466,7.494 8.259,7.818 7.900 C 8.304 7.363,8.292 7.366,8.896 7.688 M18.055 13.374 L 19.920 15.229 19.920 16.985 C 19.920 18.530,19.849 18.813,19.331 19.331 L 18.742 19.920 13.153 19.920 L 7.565 19.920 11.760 15.720 C 14.067 13.410,16.008 11.520,16.072 11.520 C 16.137 11.520,17.029 12.354,18.055 13.374 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/traced/list.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.829 4.407 C 2.187 4.895,1.893 5.898,2.175 6.640 C 2.505 7.506,3.084 7.903,4.031 7.912 C 5.754 7.929,6.625 5.883,5.411 4.669 C 4.754 4.012,3.515 3.886,2.829 4.407 M8.160 5.520 C 7.977 5.861,7.977 6.139,8.160 6.480 C 8.407 6.942,8.663 6.960,15.000 6.960 C 21.337 6.960,21.593 6.942,21.840 6.480 C 22.023 6.139,22.023 5.861,21.840 5.520 C 21.593 5.058,21.337 5.040,15.000 5.040 C 8.663 5.040,8.407 5.058,8.160 5.520 M2.829 10.407 C 1.837 11.161,1.837 12.839,2.829 13.593 C 4.013 14.492,6.000 13.493,6.000 12.000 C 6.000 10.507,4.013 9.508,2.829 10.407 M8.160 11.520 C 7.977 11.861,7.977 12.139,8.160 12.480 C 8.407 12.942,8.663 12.960,15.000 12.960 C 21.337 12.960,21.593 12.942,21.840 12.480 C 22.023 12.139,22.023 11.861,21.840 11.520 C 21.593 11.058,21.337 11.040,15.000 11.040 C 8.663 11.040,8.407 11.058,8.160 11.520 M2.829 16.407 C 1.837 17.161,1.837 18.839,2.829 19.593 C 4.013 20.492,6.000 19.493,6.000 18.000 C 6.000 16.507,4.013 15.508,2.829 16.407 M8.160 17.520 C 7.977 17.861,7.977 18.139,8.160 18.480 C 8.407 18.942,8.663 18.960,15.000 18.960 C 21.337 18.960,21.593 18.942,21.840 18.480 C 22.023 18.139,22.023 17.861,21.840 17.520 C 21.593 17.058,21.337 17.040,15.000 17.040 C 8.663 17.040,8.407 17.058,8.160 17.520 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/traced/palette.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.600 1.287 C 7.524 1.738,6.007 2.602,4.302 4.305 C 2.451 6.153,1.570 7.822,1.157 10.260 C 0.795 12.397,1.137 14.833,2.069 16.751 C 2.863 18.386,4.874 20.546,6.530 21.542 C 8.147 22.515,10.991 23.174,12.558 22.939 C 14.628 22.628,16.064 20.751,16.075 18.342 C 16.082 16.701,16.710 16.082,18.375 16.075 C 20.751 16.064,22.630 14.616,22.939 12.558 C 23.174 10.991,22.515 8.147,21.542 6.530 C 20.537 4.860,18.371 2.850,16.751 2.085 C 14.503 1.024,12.065 0.751,9.600 1.287 M15.915 3.948 C 17.542 4.771,19.364 6.622,20.146 8.246 C 20.498 8.977,20.752 10.032,20.827 11.075 C 20.986 13.299,20.571 13.790,18.357 13.997 C 16.731 14.148,15.748 14.533,15.069 15.284 C 14.395 16.028,13.920 17.429,13.920 18.670 C 13.920 20.331,13.226 20.955,11.424 20.913 C 8.296 20.841,5.504 18.956,3.914 15.840 C 3.302 14.641,3.240 14.288,3.240 12.000 C 3.240 9.808,3.317 9.324,3.830 8.280 C 4.868 6.170,6.917 4.294,9.094 3.459 C 9.667 3.239,10.736 3.148,12.251 3.190 C 14.229 3.244,14.729 3.348,15.915 3.948 M8.918 5.424 C 8.096 6.000,7.861 6.834,8.256 7.779 C 8.684 8.804,9.683 9.196,10.738 8.752 C 12.113 8.174,12.411 6.716,11.367 5.673 C 10.644 4.950,9.729 4.857,8.918 5.424 M14.918 6.384 C 14.096 6.960,13.861 7.794,14.256 8.739 C 14.854 10.170,16.720 10.361,17.616 9.082 C 18.846 7.325,16.675 5.154,14.918 6.384 M5.629 10.669 C 4.410 11.888,5.284 13.920,7.027 13.920 C 8.100 13.920,8.880 13.097,8.880 11.966 C 8.880 10.247,6.858 9.440,5.629 10.669 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/traced/sliders-02.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.455 2.240 C 4.125 2.480,4.074 2.948,4.131 5.163 C 4.198 7.710,4.219 7.803,4.753 7.878 C 5.798 8.026,6.000 7.569,5.996 5.071 C 5.994 3.800,5.913 2.644,5.816 2.502 C 5.517 2.065,4.866 1.939,4.455 2.240 M11.460 2.179 C 11.117 2.379,11.040 2.766,11.040 4.291 C 11.040 6.036,11.001 6.180,10.442 6.479 C 9.096 7.199,8.594 9.295,9.454 10.607 C 9.911 11.305,11.182 12.000,12.000 12.000 C 12.805 12.000,14.086 11.309,14.526 10.637 C 15.027 9.872,15.034 8.138,14.538 7.382 C 14.329 7.061,13.888 6.655,13.558 6.479 C 12.999 6.180,12.960 6.037,12.960 4.288 C 12.960 2.684,12.894 2.381,12.496 2.168 C 11.943 1.873,11.987 1.872,11.460 2.179 M18.720 2.108 C 18.077 2.329,18.007 2.713,18.004 6.043 C 18.001 8.711,18.071 9.396,18.377 9.703 C 18.823 10.149,18.855 10.153,19.456 9.832 C 19.883 9.603,19.920 9.297,19.920 6.000 C 19.920 2.830,19.872 2.392,19.500 2.201 C 19.269 2.082,18.918 2.040,18.720 2.108 M12.496 8.168 C 13.109 8.496,13.099 9.509,12.480 9.840 C 11.410 10.413,10.413 8.789,11.460 8.179 C 11.987 7.872,11.943 7.873,12.496 8.168 M3.154 10.688 C 2.300 11.407,1.821 12.683,2.037 13.667 C 2.123 14.056,2.617 14.757,3.136 15.226 L 4.080 16.079 4.080 18.831 C 4.080 21.306,4.127 21.608,4.544 21.832 C 5.145 22.153,5.177 22.149,5.623 21.703 C 5.920 21.406,6.000 20.766,6.000 18.693 L 6.000 16.061 6.960 15.148 C 7.783 14.365,7.920 14.090,7.920 13.225 C 7.920 11.262,6.759 10.080,4.830 10.080 C 4.160 10.080,3.662 10.261,3.154 10.688 M5.854 12.540 C 6.216 13.117,5.775 13.778,4.964 13.875 C 4.461 13.935,4.306 13.828,4.182 13.332 C 3.887 12.159,5.220 11.528,5.854 12.540 M17.860 12.233 C 16.864 12.635,16.080 13.875,16.080 15.047 C 16.080 15.998,16.202 16.258,17.040 17.096 C 17.972 18.029,18.000 18.104,18.000 19.691 C 18.000 20.857,18.108 21.434,18.377 21.703 C 18.823 22.149,18.855 22.153,19.456 21.832 C 19.852 21.620,19.921 21.311,19.929 19.732 C 19.938 17.917,19.954 17.870,20.700 17.400 C 21.143 17.121,21.609 16.532,21.814 15.992 C 22.708 13.639,20.224 11.277,17.860 12.233 M11.460 14.179 C 11.090 14.395,11.040 14.848,11.040 18.003 C 11.040 21.337,11.073 21.601,11.520 21.840 C 11.861 22.023,12.139 22.023,12.480 21.840 C 12.927 21.601,12.960 21.337,12.960 18.000 C 12.960 14.703,12.923 14.397,12.496 14.168 C 11.943 13.873,11.987 13.872,11.460 14.179 M19.920 15.000 C 19.920 16.018,18.491 16.360,18.133 15.428 C 17.924 14.883,18.198 14.206,18.671 14.097 C 19.331 13.946,19.920 14.372,19.920 15.000 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/used/browser.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 9H2M2 7.8L2 16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27977 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3L6.8 3C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/static/svg/work/used/calendar.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 10H3M16 2V6M8 2V6M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/static/svg/work/used/edit-05.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 3.99998H6.8C5.11984 3.99998 4.27976 3.99998 3.63803 4.32696C3.07354 4.61458 2.6146 5.07353 2.32698 5.63801C2 6.27975 2 7.11983 2 8.79998V17.2C2 18.8801 2 19.7202 2.32698 20.362C2.6146 20.9264 3.07354 21.3854 3.63803 21.673C4.27976 22 5.11984 22 6.8 22H15.2C16.8802 22 17.7202 22 18.362 21.673C18.9265 21.3854 19.3854 20.9264 19.673 20.362C20 19.7202 20 18.8801 20 17.2V13M7.99997 16H9.67452C10.1637 16 10.4083 16 10.6385 15.9447C10.8425 15.8957 11.0376 15.8149 11.2166 15.7053C11.4184 15.5816 11.5914 15.4086 11.9373 15.0627L21.5 5.49998C22.3284 4.67156 22.3284 3.32841 21.5 2.49998C20.6716 1.67156 19.3284 1.67155 18.5 2.49998L8.93723 12.0627C8.59133 12.4086 8.41838 12.5816 8.29469 12.7834C8.18504 12.9624 8.10423 13.1574 8.05523 13.3615C7.99997 13.5917 7.99997 13.8363 7.99997 14.3255V16Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/static/svg/work/used/image-01.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2 21H6.93137C6.32555 21 6.02265 21 5.88238 20.8802C5.76068 20.7763 5.69609 20.6203 5.70865 20.4608C5.72312 20.2769 5.93731 20.0627 6.36569 19.6343L14.8686 11.1314C15.2646 10.7354 15.4627 10.5373 15.691 10.4632C15.8918 10.3979 16.1082 10.3979 16.309 10.4632C16.5373 10.5373 16.7354 10.7354 17.1314 11.1314L21 15V16.2M16.2 21C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2M16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2M10.5 8.5C10.5 9.60457 9.60457 10.5 8.5 10.5C7.39543 10.5 6.5 9.60457 6.5 8.5C6.5 7.39543 7.39543 6.5 8.5 6.5C9.60457 6.5 10.5 7.39543 10.5 8.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/static/svg/work/used/list.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 12L9 12M21 6L9 6M21 18L9 18M5 12C5 12.5523 4.55228 13 4 13C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11C4.55228 11 5 11.4477 5 12ZM5 6C5 6.55228 4.55228 7 4 7C3.44772 7 3 6.55228 3 6C3 5.44772 3.44772 5 4 5C4.55228 5 5 5.44772 5 6ZM5 18C5 18.5523 4.55228 19 4 19C3.44772 19 3 18.5523 3 18C3 17.4477 3.44772 17 4 17C4.55228 17 5 17.4477 5 18Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/static/svg/work/used/palette.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 12C2 17.5228 6.47715 22 12 22C13.6569 22 15 20.6569 15 19V18.5C15 18.0356 15 17.8034 15.0257 17.6084C15.2029 16.2622 16.2622 15.2029 17.6084 15.0257C17.8034 15 18.0356 15 18.5 15H19C20.6569 15 22 13.6569 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 13C7.55228 13 8 12.5523 8 12C8 11.4477 7.55228 11 7 11C6.44772 11 6 11.4477 6 12C6 12.5523 6.44772 13 7 13Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 9C16.5523 9 17 8.55228 17 8C17 7.44772 16.5523 7 16 7C15.4477 7 15 7.44772 15 8C15 8.55228 15.4477 9 16 9Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 8C10.5523 8 11 7.55228 11 7C11 6.44772 10.5523 6 10 6C9.44772 6 9 6.44772 9 7C9 7.55228 9.44772 8 10 8Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/static/svg/work/used/sliders-02.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21L5 15M5 15C6.10457 15 7 14.1046 7 13C7 11.8954 6.10457 11 5 11C3.89543 11 3 11.8954 3 13C3 14.1046 3.89543 15 5 15ZM5 7V3M12 21V15M12 7V3M12 7C10.8954 7 10 7.89543 10 9C10 10.1046 10.8954 11 12 11C13.1046 11 14 10.1046 14 9C14 7.89543 13.1046 7 12 7ZM19 21V17M19 17C20.1046 17 21 16.1046 21 15C21 13.8954 20.1046 13 19 13C17.8954 13 17 13.8954 17 15C17 16.1046 17.8954 17 19 17ZM19 9V3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/temba-modules.ts

@@ -46,6 +46,7 @@ import { TembaDate } from './src/date/TembaDate';
 import Remote from './src/remote/Remote';
 import { Compose } from './src/compose/Compose';
 import { Lightbox } from './src/lightbox/Lightbox';
+import { ColorPicker } from './src/colorpicker/ColorPicker';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -102,3 +103,4 @@ addCustomElement('temba-contact-tickets', ContactTickets);
 addCustomElement('temba-slider', TembaSlider);
 addCustomElement('temba-content-menu', ContentMenu);
 addCustomElement('temba-compose', Compose);
+addCustomElement('temba-color-picker', ColorPicker);

package/test/temba-color-picker.test.ts

@@ -0,0 +1,57 @@
+import { assert } from '@open-wc/testing';
+import { ColorPicker } from '../src/colorpicker/ColorPicker';
+import { assertScreenshot, getClip, getComponent } from './utils.test';
+
+const TAG = 'temba-color-picker';
+const getPicker = async (attrs: any = {}) => {
+  const picker = (await getComponent(TAG, attrs, '', 400)) as ColorPicker;
+  return picker;
+};
+
+describe('temba-color-picker', () => {
+  it('renders default', async () => {
+    const picker: ColorPicker = await getPicker({
+      name: 'primary',
+      label: 'Primary Color',
+    });
+    assert.instanceOf(picker, ColorPicker);
+    await assertScreenshot('colorpicker/default', getClip(picker));
+  });
+
+  it('initializes value', async () => {
+    const picker: ColorPicker = await getPicker({
+      name: 'primary',
+      label: 'Primary Color',
+      value: '#2387ca',
+    });
+    await assertScreenshot('colorpicker/initialized', getClip(picker));
+  });
+
+  it('shows spectrum picker', async () => {
+    const picker: ColorPicker = await getPicker({
+      name: 'primary',
+      label: 'Primary Color',
+      value: '#2387ca',
+    });
+    (picker.shadowRoot.querySelector('.preview') as HTMLElement).click();
+
+    await assertScreenshot('colorpicker/focused', getClip(picker));
+  });
+
+  it('selects color', async () => {
+    const picker: ColorPicker = await getPicker({
+      name: 'primary',
+      label: 'Primary Color',
+      value: '#2387ca',
+    });
+    (picker.shadowRoot.querySelector('.preview') as HTMLElement).click();
+
+    const clip = getClip(picker);
+
+    // move our mouse over the count to show the summary
+    const page = window as any;
+    await page.mouseClick(clip.left + 200, clip.top + 35);
+
+    await assertScreenshot('colorpicker/selected', getClip(picker));
+  });
+});

package/web-test-runner.config.mjs

@@ -208,8 +208,17 @@ const wireScreenshots = async (page, context, wait) => {
   });
 
   await page.exposeFunction('moveMouse', (x, y) => {
+    return new Promise(async (resolve, reject) => {
+      await page.mouse.move(x, y, {steps: 5});
+      resolve();
+    });
+  });
+
+  await page.exposeFunction('mouseClick', (x, y) => {
     return new Promise(async (resolve, reject) => {
       await page.mouse.move(x, y);
+      await page.mouse.down();
+      await page.mouse.up();
       resolve();
     });
   });