@nyaruka/temba-components 0.29.3 → 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/{a439f561.js → dd72d92e.js} +256 -71
  3. package/dist/index.js +256 -71
  4. package/dist/static/icons/symbol-defs.svg +10 -20
  5. package/dist/sw.js +1 -1
  6. package/dist/sw.js.map +1 -1
  7. package/dist/templates/components-body.html +1 -1
  8. package/dist/templates/components-head.html +1 -1
  9. package/out-tsc/src/contacts/ContactName.js +19 -16
  10. package/out-tsc/src/contacts/ContactName.js.map +1 -1
  11. package/out-tsc/src/contacts/ContactNameFetch.js +36 -0
  12. package/out-tsc/src/contacts/ContactNameFetch.js.map +1 -0
  13. package/out-tsc/src/contacts/ContactUrn.js +12 -1
  14. package/out-tsc/src/contacts/ContactUrn.js.map +1 -1
  15. package/out-tsc/src/flow/FlowStoreElement.js +43 -0
  16. package/out-tsc/src/flow/FlowStoreElement.js.map +1 -0
  17. package/out-tsc/src/interfaces.js.map +1 -1
  18. package/out-tsc/src/list/RunList.js +317 -0
  19. package/out-tsc/src/list/RunList.js.map +1 -0
  20. package/out-tsc/src/list/TembaList.js +38 -14
  21. package/out-tsc/src/list/TembaList.js.map +1 -1
  22. package/out-tsc/src/options/Options.js +18 -2
  23. package/out-tsc/src/options/Options.js.map +1 -1
  24. package/out-tsc/src/store/Store.js +13 -3
  25. package/out-tsc/src/store/Store.js.map +1 -1
  26. package/out-tsc/src/tabpane/TabPane.js +3 -1
  27. package/out-tsc/src/tabpane/TabPane.js.map +1 -1
  28. package/out-tsc/src/utils/index.js +1 -0
  29. package/out-tsc/src/utils/index.js.map +1 -1
  30. package/out-tsc/src/vectoricon/VectorIcon.js +6 -6
  31. package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
  32. package/out-tsc/temba-modules.js +6 -0
  33. package/out-tsc/temba-modules.js.map +1 -1
  34. package/out-tsc/test/utils.test.js +1 -1
  35. package/out-tsc/test/utils.test.js.map +1 -1
  36. package/package.json +1 -1
  37. package/src/contacts/ContactName.ts +19 -17
  38. package/src/contacts/ContactNameFetch.ts +32 -0
  39. package/src/contacts/ContactUrn.ts +12 -1
  40. package/src/flow/FlowStoreElement.ts +42 -0
  41. package/src/interfaces.ts +19 -0
  42. package/src/list/RunList.ts +353 -0
  43. package/src/list/TembaList.ts +50 -14
  44. package/src/options/Options.ts +17 -2
  45. package/src/store/Store.ts +20 -3
  46. package/src/tabpane/TabPane.ts +3 -1
  47. package/src/utils/index.ts +3 -0
  48. package/src/vectoricon/VectorIcon.ts +5 -5
  49. package/static/css/temba-components.css +1 -1
  50. package/static/icons/Read Me.txt +15 -15
  51. package/static/icons/SVG/hourglass.svg +5 -0
  52. package/static/icons/demo-external-svg.html +142 -157
  53. package/static/icons/demo-files/demo.css +4 -4
  54. package/static/icons/demo.html +152 -177
  55. package/static/icons/selection.json +396 -339
  56. package/static/icons/style.css +0 -4
  57. package/static/icons/symbol-defs.svg +10 -20
  58. package/temba-modules.ts +6 -0
  59. package/test/utils.test.ts +1 -1
@@ -10,8 +10,8 @@
10
10
  <body>
11
11
  <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">
12
12
  <defs>
13
- <symbol id="icon-language" viewBox="0 0 20 20">
14
- <path d="M19.753 10.909c-0.624-1.707-2.366-2.726-4.661-2.726-0.090 0-0.176 0.002-0.262 0.006l-0.016-2.063c0 0 3.41-0.588 3.525-0.607s0.133-0.119 0.109-0.231c-0.023-0.111-0.167-0.883-0.188-0.976-0.027-0.131-0.102-0.127-0.207-0.109s-3.25 0.461-3.25 0.461-0.012-1.953-0.013-2.078c-0.001-0.125-0.069-0.158-0.194-0.156s-0.92 0.014-1.025 0.016c-0.105 0.002-0.164 0.049-0.162 0.148s0.033 2.307 0.033 2.307-3.061 0.527-3.144 0.543c-0.084 0.014-0.17 0.053-0.151 0.143s0.19 1.094 0.208 1.172c0.018 0.080 0.072 0.129 0.188 0.107 0.115-0.019 2.924-0.504 2.924-0.504l0.035 2.018c-1.077 0.281-1.801 0.824-2.256 1.303-0.768 0.807-1.207 1.887-1.207 2.963 0 1.586 0.971 2.529 2.328 2.695 3.162 0.387 5.119-3.060 5.769-4.715 1.097 1.506 0.256 4.354-2.094 5.98-0.043 0.029-0.098 0.129-0.033 0.207s0.541 0.662 0.619 0.756c0.080 0.096 0.206 0.059 0.256 0.023 2.51-1.73 3.661-4.515 2.869-6.683zM12.367 14.097c-0.966-0.121-0.944-0.914-0.944-1.453 0-0.773 0.327-1.58 0.876-2.156 0.335-0.354 0.75-0.621 1.229-0.799l0.082 4.277c-0.385 0.131-0.799 0.185-1.243 0.131zM14.794 13.544l0.046-4.109c0.084-0.004 0.166-0.010 0.252-0.010 0.773 0 1.494 0.145 1.885 0.361s-1.023 2.713-2.183 3.758zM5.844 5.876c-0.030-0.094-0.103-0.145-0.196-0.145h-1.95c-0.093 0-0.165 0.051-0.194 0.144-0.412 1.299-3.48 10.99-3.496 11.041s-0.011 0.076 0.062 0.076h1.733c0.075 0 0.099-0.023 0.114-0.072 0.015-0.051 1.008-3.318 1.008-3.318h3.496c0 0 0.992 3.268 1.008 3.318s0.039 0.072 0.113 0.072h1.734c0.072 0 0.078-0.025 0.062-0.076-0.014-0.050-3.083-9.741-3.494-11.040zM3.226 12.194l1.447-5.25 1.447 5.25h-2.894z"></path>
13
+ <symbol id="icon-hourglass" viewBox="0 0 24 24">
14
+ <path d="M12 11.484l3.984-3.984v-3.516h-7.969v3.516zM15.984 16.5l-3.984-3.984-3.984 3.984v3.516h7.969v-3.516zM6 2.016h12v6l-3.984 3.984 3.984 3.984v6h-12v-6l3.984-3.984-3.984-3.984v-6z"></path>
15
15
  </symbol>
16
16
  <symbol id="icon-bookmark-filled" viewBox="0 0 24 24">
17
17
  <path d="M17.016 3q0.797 0 1.383 0.609t0.586 1.406v15.984l-6.984-3-6.984 3v-15.984q0-0.797 0.586-1.406t1.383-0.609h10.031z"></path>
@@ -373,24 +373,8 @@
373
373
  <symbol id="icon-send-mobile" viewBox="0 0 24 24">
374
374
  <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>
375
375
  </symbol>
376
- <symbol id="icon-zapier" viewBox="0 0 32 32">
377
- <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>
378
- </symbol>
379
- <symbol id="icon-users1" viewBox="0 0 36 32">
380
- <path d="M24 24.082v-1.649c2.203-1.241 4-4.337 4-7.432 0-4.971 0-9-6-9s-6 4.029-6 9c0 3.096 1.797 6.191 4 7.432v1.649c-6.784 0.555-12 3.888-12 7.918h28c0-4.030-5.216-7.364-12-7.918z"></path>
381
- <path d="M10.225 24.854c1.728-1.13 3.877-1.989 6.243-2.513-0.47-0.556-0.897-1.176-1.265-1.844-0.95-1.726-1.453-3.627-1.453-5.497 0-2.689 0-5.228 0.956-7.305 0.928-2.016 2.598-3.265 4.976-3.734-0.529-2.39-1.936-3.961-5.682-3.961-6 0-6 4.029-6 9 0 3.096 1.797 6.191 4 7.432v1.649c-6.784 0.555-12 3.888-12 7.918h8.719c0.454-0.403 0.956-0.787 1.506-1.146z"></path>
382
- </symbol>
383
- <symbol id="icon-lock2" viewBox="0 0 32 32">
384
- <path d="M26 14h-2v-6c0-4.418-3.582-8-8-8s-8 3.582-8 8v6h-2c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h20c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2zM16 26c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM20 14h-8v-6c0-2.206 1.794-4 4-4s4 1.794 4 4v6z"></path>
385
- </symbol>
386
- <symbol id="icon-atom" viewBox="0 0 32 32">
387
- <path d="M25.998 6.46v0 0zM26.064 16c3.262-3.119 4.846-6.174 3.792-8-0.602-1.042-1.98-1.54-3.859-1.54v1.5c1.317 0 2.274 0.296 2.56 0.79 0.226 0.391 0.1 0.992-0.045 1.427-0.278 0.835-0.884 1.833-1.751 2.888-0.526 0.64-1.133 1.285-1.809 1.926-0.93-0.803-1.965-1.602-3.087-2.377-0.11-1.359-0.284-2.654-0.514-3.86 1.756-0.521 3.35-0.794 4.646-0.794l0.001-1.5c-0 0-0.001 0-0.001 0-1.412 0-3.106 0.282-4.965 0.825-1.070-4.385-2.924-7.285-5.032-7.285s-3.962 2.9-5.032 7.284c-1.859-0.543-3.553-0.825-4.965-0.825-1.879 0-3.258 0.498-3.86 1.541-1.054 1.826 0.53 4.881 3.792 8-3.262 3.119-4.846 6.174-3.792 8 0.602 1.043 1.98 1.54 3.86 1.54 1.412 0 3.106-0.282 4.965-0.825 1.070 4.385 2.924 7.285 5.032 7.285s3.962-2.9 5.032-7.284c1.859 0.543 3.553 0.825 4.965 0.825 1.879 0 3.258-0.498 3.86-1.541 1.054-1.826-0.53-4.881-3.792-8zM23.829 16c-0.582 0.496-1.202 0.987-1.855 1.468 0.017-0.484 0.025-0.973 0.025-1.468s-0.009-0.985-0.025-1.468c0.653 0.481 1.273 0.972 1.855 1.468zM19.915 22.777c-0.72-0.256-1.455-0.547-2.196-0.871 0.426-0.227 0.853-0.463 1.28-0.71 0.429-0.248 0.848-0.5 1.259-0.756-0.090 0.805-0.205 1.586-0.344 2.337zM18.25 19.897c-0.743 0.429-1.496 0.832-2.25 1.207-0.754-0.374-1.507-0.778-2.25-1.207-0.749-0.433-1.475-0.882-2.172-1.344-0.052-0.835-0.078-1.688-0.078-2.553s0.027-1.718 0.078-2.553c0.697-0.462 1.423-0.912 2.172-1.344 0.743-0.429 1.496-0.832 2.25-1.207 0.754 0.374 1.507 0.778 2.25 1.207 0.749 0.433 1.475 0.882 2.172 1.344 0.052 0.835 0.078 1.688 0.078 2.553s-0.027 1.718-0.078 2.553c-0.697 0.462-1.423 0.912-2.172 1.344zM11.741 20.44c0.411 0.256 0.83 0.509 1.259 0.756 0.428 0.247 0.855 0.483 1.28 0.71-0.741 0.323-1.475 0.615-2.196 0.871-0.138-0.751-0.254-1.532-0.344-2.337zM10.025 17.468c-0.653-0.481-1.273-0.972-1.855-1.468 0.582-0.496 1.202-0.987 1.855-1.468-0.017 0.484-0.025 0.973-0.025 1.468s0.009 0.985 0.025 1.468zM12.085 9.223c0.72 0.256 1.455 0.547 2.196 0.871-0.426 0.227-0.853 0.463-1.28 0.71-0.429 0.248-0.848 0.5-1.259 0.756 0.090-0.805 0.205-1.586 0.344-2.337zM19 10.804c-0.427-0.247-0.855-0.483-1.28-0.71 0.741-0.323 1.475-0.615 2.196-0.871 0.138 0.751 0.253 1.532 0.344 2.337-0.411-0.256-0.83-0.509-1.259-0.756zM13.162 5.213c0.479-1.278 1.041-2.302 1.625-2.961 0.304-0.343 0.762-0.752 1.213-0.752s0.909 0.409 1.213 0.752c0.584 0.658 1.146 1.682 1.625 2.961 0.291 0.776 0.546 1.624 0.764 2.53-1.161 0.404-2.37 0.901-3.602 1.485-1.232-0.585-2.442-1.082-3.602-1.486 0.218-0.905 0.473-1.754 0.764-2.53zM5.239 13.064c-0.867-1.054-1.473-2.053-1.751-2.888-0.145-0.435-0.271-1.036-0.045-1.427 0.286-0.495 1.243-0.79 2.561-0.79h0c1.297 0 2.89 0.274 4.646 0.794-0.23 1.206-0.404 2.501-0.514 3.86-1.123 0.775-2.157 1.574-3.088 2.377-0.675-0.641-1.282-1.286-1.809-1.926zM6.003 24.040c-1.318 0-2.275-0.296-2.561-0.79-0.226-0.391-0.1-0.992 0.045-1.427 0.278-0.835 0.884-1.833 1.751-2.888 0.527-0.64 1.133-1.285 1.809-1.926 0.93 0.803 1.965 1.602 3.087 2.377 0.11 1.359 0.284 2.654 0.514 3.86-1.756 0.521-3.349 0.794-4.646 0.794zM18.838 26.787c-0.479 1.278-1.041 2.302-1.625 2.961-0.304 0.343-0.762 0.752-1.213 0.752s-0.909-0.409-1.213-0.752c-0.584-0.658-1.146-1.682-1.625-2.96-0.291-0.776-0.546-1.624-0.764-2.53 1.161-0.404 2.37-0.901 3.602-1.485 1.232 0.585 2.442 1.082 3.602 1.486-0.218 0.905-0.473 1.754-0.764 2.53zM28.512 21.823c0.145 0.435 0.271 1.036 0.045 1.427-0.286 0.495-1.243 0.791-2.561 0.791-1.297 0-2.89-0.273-4.646-0.794 0.23-1.206 0.404-2.501 0.514-3.86 1.122-0.775 2.157-1.574 3.087-2.377 0.675 0.641 1.282 1.286 1.809 1.926 0.867 1.054 1.473 2.053 1.751 2.888z"></path>
388
- </symbol>
389
- <symbol id="icon-paperplane" viewBox="0 0 32 32">
390
- <path d="M14 22l12.301 4.39 5.699-24.917zM10 20.622l22-19.149-32 15.827zM14 24.124v7.876l5.805-5.805z"></path>
391
- </symbol>
392
- <symbol id="icon-cancel" viewBox="0 0 32 32">
393
- <path d="M23 0h-14l-9 9v14l9 9h14l9-9v-14l-9-9zM25 22l-3 3-6-6-6 6-3-3 6-6-6-6 3-3 6 6 6-6 3 3-6 6 6 6z"></path>
376
+ <symbol id="icon-credits" viewBox="0 0 16 16">
377
+ <path d="M10.479 4.958c-0.364 0-0.72 0.036-1.064 0.103-0.027-0.021-0.055-0.041-0.084-0.061 0.425-0.294 0.669-0.636 0.669-1v-1c0-1.105-2.239-2-5-2s-5 0.895-5 2v1c0 0.364 0.244 0.706 0.669 1-0.425 0.294-0.669 0.636-0.669 1v1c0 0.364 0.244 0.706 0.669 1-0.425 0.294-0.669 0.636-0.669 1v1c0 0.364 0.244 0.706 0.669 1-0.425 0.294-0.669 0.636-0.669 1v1c0 1.105 2.239 2 5 2 0.738 0 1.438-0.064 2.069-0.179 0.939 0.739 2.123 1.179 3.41 1.179 3.049 0 5.521-2.472 5.521-5.521s-2.472-5.521-5.521-5.521zM0.5 3c0-0.298 0.451-0.671 1.15-0.95 0.887-0.355 2.076-0.55 3.35-0.55s2.463 0.195 3.35 0.55c0.699 0.279 1.15 0.652 1.15 0.95s-0.451 0.671-1.15 0.95c-0.288 0.115-0.609 0.214-0.954 0.294-0.716 0.167-1.536 0.256-2.396 0.256s-1.68-0.089-2.396-0.256c-0.345-0.080-0.666-0.179-0.954-0.294-0.699-0.279-1.15-0.652-1.15-0.95zM0.5 9c0-0.221 0.249-0.483 0.663-0.718 0.917 0.439 2.296 0.718 3.837 0.718 0.053 0 0.106-0.001 0.159-0.001-0.131 0.471-0.201 0.968-0.201 1.481 0 0.007 0 0.014 0 0.021-0.844-0.003-1.65-0.091-2.354-0.256-0.345-0.080-0.666-0.179-0.954-0.294-0.699-0.279-1.15-0.652-1.15-0.95zM5 13.5c-1.273 0-2.463-0.195-3.35-0.55-0.699-0.279-1.15-0.652-1.15-0.95 0-0.221 0.249-0.483 0.663-0.718 0.917 0.439 2.296 0.718 3.837 0.718 0.057 0 0.114-0.001 0.17-0.002 0.151 0.527 0.378 1.022 0.668 1.472-0.274 0.019-0.554 0.029-0.839 0.029zM5 7.5c-0.859 0-1.68-0.089-2.396-0.256-0.345-0.080-0.666-0.179-0.954-0.294-0.699-0.279-1.15-0.652-1.15-0.95 0-0.221 0.249-0.483 0.663-0.718 0.917 0.439 2.296 0.718 3.837 0.718 1.030 0 1.987-0.125 2.782-0.339-0.781 0.438-1.444 1.060-1.932 1.808-0.278 0.020-0.562 0.030-0.85 0.030zM10.479 14.996c-2.495 0-4.517-2.022-4.517-4.517s2.022-4.517 4.517-4.517c2.495 0 4.517 2.022 4.517 4.517s-2.022 4.517-4.517 4.517zM11 7h-1v1h-2v3h2v1h-2v1h2v1h1v-1h2v-3h-2v-1h2v-1h-2v-1zM10 10h-1v-1h1v1zM12 11v1h-1v-1h1z"></path>
394
378
  </symbol>
395
379
  <symbol id="icon-channel" viewBox="0 0 16 16">
396
380
  <path d="M0 11l5-8 5 5 6-4-5 9-5-5z"></path>
@@ -411,6 +395,12 @@
411
395
  <symbol id="icon-cancel" viewBox="0 0 16 16">
412
396
  <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>
413
397
  </symbol>
398
+ <symbol id="icon-language" viewBox="0 0 20 20">
399
+ <path d="M19.753 10.909c-0.624-1.707-2.366-2.726-4.661-2.726-0.090 0-0.176 0.002-0.262 0.006l-0.016-2.063c0 0 3.41-0.588 3.525-0.607s0.133-0.119 0.109-0.231c-0.023-0.111-0.167-0.883-0.188-0.976-0.027-0.131-0.102-0.127-0.207-0.109s-3.25 0.461-3.25 0.461-0.012-1.953-0.013-2.078c-0.001-0.125-0.069-0.158-0.194-0.156s-0.92 0.014-1.025 0.016c-0.105 0.002-0.164 0.049-0.162 0.148s0.033 2.307 0.033 2.307-3.061 0.527-3.144 0.543c-0.084 0.014-0.17 0.053-0.151 0.143s0.19 1.094 0.208 1.172c0.018 0.080 0.072 0.129 0.188 0.107 0.115-0.019 2.924-0.504 2.924-0.504l0.035 2.018c-1.077 0.281-1.801 0.824-2.256 1.303-0.768 0.807-1.207 1.887-1.207 2.963 0 1.586 0.971 2.529 2.328 2.695 3.162 0.387 5.119-3.060 5.769-4.715 1.097 1.506 0.256 4.354-2.094 5.98-0.043 0.029-0.098 0.129-0.033 0.207s0.541 0.662 0.619 0.756c0.080 0.096 0.206 0.059 0.256 0.023 2.51-1.73 3.661-4.515 2.869-6.683zM12.367 14.097c-0.966-0.121-0.944-0.914-0.944-1.453 0-0.773 0.327-1.58 0.876-2.156 0.335-0.354 0.75-0.621 1.229-0.799l0.082 4.277c-0.385 0.131-0.799 0.185-1.243 0.131zM14.794 13.544l0.046-4.109c0.084-0.004 0.166-0.010 0.252-0.010 0.773 0 1.494 0.145 1.885 0.361s-1.023 2.713-2.183 3.758zM5.844 5.876c-0.030-0.094-0.103-0.145-0.196-0.145h-1.95c-0.093 0-0.165 0.051-0.194 0.144-0.412 1.299-3.48 10.99-3.496 11.041s-0.011 0.076 0.062 0.076h1.733c0.075 0 0.099-0.023 0.114-0.072 0.015-0.051 1.008-3.318 1.008-3.318h3.496c0 0 0.992 3.268 1.008 3.318s0.039 0.072 0.113 0.072h1.734c0.072 0 0.078-0.025 0.062-0.076-0.014-0.050-3.083-9.741-3.494-11.040zM3.226 12.194l1.447-5.25 1.447 5.25h-2.894z"></path>
400
+ </symbol>
401
+ <symbol id="icon-zapier" viewBox="0 0 32 32">
402
+ <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>
403
+ </symbol>
414
404
  <symbol id="icon-cord" viewBox="0 0 32 32">
415
405
  <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>
416
406
  </symbol>
@@ -552,679 +542,664 @@
552
542
  </div>
553
543
  </header>
554
544
  <div class="clearfix mhl ptl">
555
- <h1 class="mvm mtn fgc1">Grid Size: 20</h1>
545
+ <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
556
546
  <div class="glyph fs1">
557
547
  <div class="clearfix pbs">
558
- <svg class="icon icon-language"><use xlink:href="#icon-language"></use></svg><span class="name"> icon-language</span>
548
+ <svg class="icon icon-hourglass"><use xlink:href="#icon-hourglass"></use></svg><span class="name"> icon-hourglass</span>
559
549
  </div>
560
550
  </div>
561
- </div>
562
- <div class="clearfix mhl ptl">
563
- <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
564
- <div class="glyph fs2">
551
+ <div class="glyph fs1">
565
552
  <div class="clearfix pbs">
566
553
  <svg class="icon icon-bookmark-filled"><use xlink:href="#icon-bookmark-filled"></use></svg><span class="name"> icon-bookmark-filled</span>
567
554
  </div>
568
555
  </div>
569
- <div class="glyph fs2">
556
+ <div class="glyph fs1">
570
557
  <div class="clearfix pbs">
571
558
  <svg class="icon icon-bookmark"><use xlink:href="#icon-bookmark"></use></svg><span class="name"> icon-bookmark</span>
572
559
  </div>
573
560
  </div>
574
- <div class="glyph fs2">
561
+ <div class="glyph fs1">
575
562
  <div class="clearfix pbs">
576
563
  <svg class="icon icon-calendar"><use xlink:href="#icon-calendar"></use></svg><span class="name"> icon-calendar</span>
577
564
  </div>
578
565
  </div>
579
- <div class="glyph fs2">
566
+ <div class="glyph fs1">
580
567
  <div class="clearfix pbs">
581
568
  <svg class="icon icon-corner-down-left"><use xlink:href="#icon-corner-down-left"></use></svg><span class="name"> icon-corner-down-left</span>
582
569
  </div>
583
570
  </div>
584
- <div class="glyph fs2">
571
+ <div class="glyph fs1">
585
572
  <div class="clearfix pbs">
586
573
  <svg class="icon icon-external-link"><use xlink:href="#icon-external-link"></use></svg><span class="name"> icon-external-link</span>
587
574
  </div>
588
575
  </div>
589
- <div class="glyph fs2">
576
+ <div class="glyph fs1">
590
577
  <div class="clearfix pbs">
591
578
  <svg class="icon icon-globe"><use xlink:href="#icon-globe"></use></svg><span class="name"> icon-globe</span>
592
579
  </div>
593
580
  </div>
594
- <div class="glyph fs2">
581
+ <div class="glyph fs1">
595
582
  <div class="clearfix pbs">
596
583
  <svg class="icon icon-more-horizontal"><use xlink:href="#icon-more-horizontal"></use></svg><span class="name"> icon-more-horizontal</span>
597
584
  </div>
598
585
  </div>
599
- <div class="glyph fs2">
586
+ <div class="glyph fs1">
600
587
  <div class="clearfix pbs">
601
588
  <svg class="icon icon-refresh-cw"><use xlink:href="#icon-refresh-cw"></use></svg><span class="name"> icon-refresh-cw</span>
602
589
  </div>
603
590
  </div>
604
- <div class="glyph fs2">
591
+ <div class="glyph fs1">
605
592
  <div class="clearfix pbs">
606
593
  <svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg><span class="name"> icon-search</span>
607
594
  </div>
608
595
  </div>
609
- <div class="glyph fs2">
596
+ <div class="glyph fs1">
610
597
  <div class="clearfix pbs">
611
598
  <svg class="icon icon-pause"><use xlink:href="#icon-pause"></use></svg><span class="name"> icon-pause</span>
612
599
  </div>
613
600
  </div>
614
- <div class="glyph fs2">
601
+ <div class="glyph fs1">
615
602
  <div class="clearfix pbs">
616
603
  <svg class="icon icon-play"><use xlink:href="#icon-play"></use></svg><span class="name"> icon-play</span>
617
604
  </div>
618
605
  </div>
619
- <div class="glyph fs2">
606
+ <div class="glyph fs1">
620
607
  <div class="clearfix pbs">
621
608
  <svg class="icon icon-user-x"><use xlink:href="#icon-user-x"></use></svg><span class="name"> icon-user-x</span>
622
609
  </div>
623
610
  </div>
624
- <div class="glyph fs2">
611
+ <div class="glyph fs1">
625
612
  <div class="clearfix pbs">
626
613
  <svg class="icon icon-cloud"><use xlink:href="#icon-cloud"></use></svg><span class="name"> icon-cloud</span>
627
614
  </div>
628
615
  </div>
629
- <div class="glyph fs2">
616
+ <div class="glyph fs1">
630
617
  <div class="clearfix pbs">
631
618
  <svg class="icon icon-codepen"><use xlink:href="#icon-codepen"></use></svg><span class="name"> icon-codepen</span>
632
619
  </div>
633
620
  </div>
634
- <div class="glyph fs2">
621
+ <div class="glyph fs1">
635
622
  <div class="clearfix pbs">
636
623
  <svg class="icon icon-codesandbox"><use xlink:href="#icon-codesandbox"></use></svg><span class="name"> icon-codesandbox</span>
637
624
  </div>
638
625
  </div>
639
- <div class="glyph fs2">
626
+ <div class="glyph fs1">
640
627
  <div class="clearfix pbs">
641
628
  <svg class="icon icon-git-pull-request"><use xlink:href="#icon-git-pull-request"></use></svg><span class="name"> icon-git-pull-request</span>
642
629
  </div>
643
630
  </div>
644
- <div class="glyph fs2">
631
+ <div class="glyph fs1">
645
632
  <div class="clearfix pbs">
646
633
  <svg class="icon icon-grid"><use xlink:href="#icon-grid"></use></svg><span class="name"> icon-grid</span>
647
634
  </div>
648
635
  </div>
649
- <div class="glyph fs2">
636
+ <div class="glyph fs1">
650
637
  <div class="clearfix pbs">
651
638
  <svg class="icon icon-hard-drive"><use xlink:href="#icon-hard-drive"></use></svg><span class="name"> icon-hard-drive</span>
652
639
  </div>
653
640
  </div>
654
- <div class="glyph fs2">
641
+ <div class="glyph fs1">
655
642
  <div class="clearfix pbs">
656
643
  <svg class="icon icon-layout"><use xlink:href="#icon-layout"></use></svg><span class="name"> icon-layout</span>
657
644
  </div>
658
645
  </div>
659
- <div class="glyph fs2">
646
+ <div class="glyph fs1">
660
647
  <div class="clearfix pbs">
661
648
  <svg class="icon icon-list"><use xlink:href="#icon-list"></use></svg><span class="name"> icon-list</span>
662
649
  </div>
663
650
  </div>
664
- <div class="glyph fs2">
651
+ <div class="glyph fs1">
665
652
  <div class="clearfix pbs">
666
653
  <svg class="icon icon-map-pin"><use xlink:href="#icon-map-pin"></use></svg><span class="name"> icon-map-pin</span>
667
654
  </div>
668
655
  </div>
669
- <div class="glyph fs2">
656
+ <div class="glyph fs1">
670
657
  <div class="clearfix pbs">
671
658
  <svg class="icon icon-package"><use xlink:href="#icon-package"></use></svg><span class="name"> icon-package</span>
672
659
  </div>
673
660
  </div>
674
- <div class="glyph fs2">
661
+ <div class="glyph fs1">
675
662
  <div class="clearfix pbs">
676
663
  <svg class="icon icon-bell"><use xlink:href="#icon-bell"></use></svg><span class="name"> icon-bell</span>
677
664
  </div>
678
665
  </div>
679
- <div class="glyph fs2">
666
+ <div class="glyph fs1">
680
667
  <div class="clearfix pbs">
681
668
  <svg class="icon icon-book-open"><use xlink:href="#icon-book-open"></use></svg><span class="name"> icon-book-open</span>
682
669
  </div>
683
670
  </div>
684
- <div class="glyph fs2">
671
+ <div class="glyph fs1">
685
672
  <div class="clearfix pbs">
686
673
  <svg class="icon icon-box"><use xlink:href="#icon-box"></use></svg><span class="name"> icon-box</span>
687
674
  </div>
688
675
  </div>
689
- <div class="glyph fs2">
676
+ <div class="glyph fs1">
690
677
  <div class="clearfix pbs">
691
678
  <svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg><span class="name"> icon-menu</span>
692
679
  </div>
693
680
  </div>
694
- <div class="glyph fs2">
681
+ <div class="glyph fs1">
695
682
  <div class="clearfix pbs">
696
683
  <svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg><span class="name"> icon-plus</span>
697
684
  </div>
698
685
  </div>
699
- <div class="glyph fs2">
686
+ <div class="glyph fs1">
700
687
  <div class="clearfix pbs">
701
688
  <svg class="icon icon-agent"><use xlink:href="#icon-agent"></use></svg><span class="name"> icon-agent</span>
702
689
  </div>
703
690
  </div>
704
- <div class="glyph fs2">
691
+ <div class="glyph fs1">
705
692
  <div class="clearfix pbs">
706
693
  <svg class="icon icon-arrow-down-circle"><use xlink:href="#icon-arrow-down-circle"></use></svg><span class="name"> icon-arrow-down-circle</span>
707
694
  </div>
708
695
  </div>
709
- <div class="glyph fs2">
696
+ <div class="glyph fs1">
710
697
  <div class="clearfix pbs">
711
698
  <svg class="icon icon-arrow-up-circle"><use xlink:href="#icon-arrow-up-circle"></use></svg><span class="name"> icon-arrow-up-circle</span>
712
699
  </div>
713
700
  </div>
714
- <div class="glyph fs2">
701
+ <div class="glyph fs1">
715
702
  <div class="clearfix pbs">
716
703
  <svg class="icon icon-database"><use xlink:href="#icon-database"></use></svg><span class="name"> icon-database</span>
717
704
  </div>
718
705
  </div>
719
- <div class="glyph fs2">
706
+ <div class="glyph fs1">
720
707
  <div class="clearfix pbs">
721
708
  <svg class="icon icon-download"><use xlink:href="#icon-download"></use></svg><span class="name"> icon-download</span>
722
709
  </div>
723
710
  </div>
724
- <div class="glyph fs2">
711
+ <div class="glyph fs1">
725
712
  <div class="clearfix pbs">
726
713
  <svg class="icon icon-help-circle"><use xlink:href="#icon-help-circle"></use></svg><span class="name"> icon-help-circle</span>
727
714
  </div>
728
715
  </div>
729
- <div class="glyph fs2">
716
+ <div class="glyph fs1">
730
717
  <div class="clearfix pbs">
731
718
  <svg class="icon icon-life-buoy"><use xlink:href="#icon-life-buoy"></use></svg><span class="name"> icon-life-buoy</span>
732
719
  </div>
733
720
  </div>
734
- <div class="glyph fs2">
721
+ <div class="glyph fs1">
735
722
  <div class="clearfix pbs">
736
723
  <svg class="icon icon-log-out"><use xlink:href="#icon-log-out"></use></svg><span class="name"> icon-log-out</span>
737
724
  </div>
738
725
  </div>
739
- <div class="glyph fs2">
726
+ <div class="glyph fs1">
740
727
  <div class="clearfix pbs">
741
728
  <svg class="icon icon-more-vertical"><use xlink:href="#icon-more-vertical"></use></svg><span class="name"> icon-more-vertical</span>
742
729
  </div>
743
730
  </div>
744
- <div class="glyph fs2">
731
+ <div class="glyph fs1">
745
732
  <div class="clearfix pbs">
746
733
  <svg class="icon icon-star"><use xlink:href="#icon-star"></use></svg><span class="name"> icon-star</span>
747
734
  </div>
748
735
  </div>
749
- <div class="glyph fs2">
736
+ <div class="glyph fs1">
750
737
  <div class="clearfix pbs">
751
738
  <svg class="icon icon-upload"><use xlink:href="#icon-upload"></use></svg><span class="name"> icon-upload</span>
752
739
  </div>
753
740
  </div>
754
- <div class="glyph fs2">
741
+ <div class="glyph fs1">
755
742
  <div class="clearfix pbs">
756
743
  <svg class="icon icon-publish"><use xlink:href="#icon-publish"></use></svg><span class="name"> icon-publish</span>
757
744
  </div>
758
745
  </div>
759
- <div class="glyph fs2">
746
+ <div class="glyph fs1">
760
747
  <div class="clearfix pbs">
761
748
  <svg class="icon icon-coffee"><use xlink:href="#icon-coffee"></use></svg><span class="name"> icon-coffee</span>
762
749
  </div>
763
750
  </div>
764
- <div class="glyph fs2">
751
+ <div class="glyph fs1">
765
752
  <div class="clearfix pbs">
766
753
  <svg class="icon icon-frown"><use xlink:href="#icon-frown"></use></svg><span class="name"> icon-frown</span>
767
754
  </div>
768
755
  </div>
769
- <div class="glyph fs2">
756
+ <div class="glyph fs1">
770
757
  <div class="clearfix pbs">
771
758
  <svg class="icon icon-mail"><use xlink:href="#icon-mail"></use></svg><span class="name"> icon-mail</span>
772
759
  </div>
773
760
  </div>
774
- <div class="glyph fs2">
761
+ <div class="glyph fs1">
775
762
  <div class="clearfix pbs">
776
763
  <svg class="icon icon-meh"><use xlink:href="#icon-meh"></use></svg><span class="name"> icon-meh</span>
777
764
  </div>
778
765
  </div>
779
- <div class="glyph fs2">
766
+ <div class="glyph fs1">
780
767
  <div class="clearfix pbs">
781
768
  <svg class="icon icon-dollar-sign"><use xlink:href="#icon-dollar-sign"></use></svg><span class="name"> icon-dollar-sign</span>
782
769
  </div>
783
770
  </div>
784
- <div class="glyph fs2">
771
+ <div class="glyph fs1">
785
772
  <div class="clearfix pbs">
786
773
  <svg class="icon icon-log"><use xlink:href="#icon-log"></use></svg><span class="name"> icon-log</span>
787
774
  </div>
788
775
  </div>
789
- <div class="glyph fs2">
776
+ <div class="glyph fs1">
790
777
  <div class="clearfix pbs">
791
778
  <svg class="icon icon-campaign"><use xlink:href="#icon-campaign"></use></svg><span class="name"> icon-campaign</span>
792
779
  </div>
793
780
  </div>
794
- <div class="glyph fs2">
781
+ <div class="glyph fs1">
795
782
  <div class="clearfix pbs">
796
783
  <svg class="icon icon-contact"><use xlink:href="#icon-contact"></use></svg><span class="name"> icon-contact</span>
797
784
  </div>
798
785
  </div>
799
- <div class="glyph fs2">
786
+ <div class="glyph fs1">
800
787
  <div class="clearfix pbs">
801
788
  <svg class="icon icon-flow"><use xlink:href="#icon-flow"></use></svg><span class="name"> icon-flow</span>
802
789
  </div>
803
790
  </div>
804
- <div class="glyph fs2">
791
+ <div class="glyph fs1">
805
792
  <div class="clearfix pbs">
806
793
  <svg class="icon icon-activity"><use xlink:href="#icon-activity"></use></svg><span class="name"> icon-activity</span>
807
794
  </div>
808
795
  </div>
809
- <div class="glyph fs2">
796
+ <div class="glyph fs1">
810
797
  <div class="clearfix pbs">
811
798
  <svg class="icon icon-alert-circle"><use xlink:href="#icon-alert-circle"></use></svg><span class="name"> icon-alert-circle</span>
812
799
  </div>
813
800
  </div>
814
- <div class="glyph fs2">
801
+ <div class="glyph fs1">
815
802
  <div class="clearfix pbs">
816
803
  <svg class="icon icon-alert-octagon"><use xlink:href="#icon-alert-octagon"></use></svg><span class="name"> icon-alert-octagon</span>
817
804
  </div>
818
805
  </div>
819
- <div class="glyph fs2">
806
+ <div class="glyph fs1">
820
807
  <div class="clearfix pbs">
821
808
  <svg class="icon icon-alert-triangle"><use xlink:href="#icon-alert-triangle"></use></svg><span class="name"> icon-alert-triangle</span>
822
809
  </div>
823
810
  </div>
824
- <div class="glyph fs2">
811
+ <div class="glyph fs1">
825
812
  <div class="clearfix pbs">
826
813
  <svg class="icon icon-archive"><use xlink:href="#icon-archive"></use></svg><span class="name"> icon-archive</span>
827
814
  </div>
828
815
  </div>
829
- <div class="glyph fs2">
816
+ <div class="glyph fs1">
830
817
  <div class="clearfix pbs">
831
818
  <svg class="icon icon-battery"><use xlink:href="#icon-battery"></use></svg><span class="name"> icon-battery</span>
832
819
  </div>
833
820
  </div>
834
- <div class="glyph fs2">
821
+ <div class="glyph fs1">
835
822
  <div class="clearfix pbs">
836
823
  <svg class="icon icon-battery-charging"><use xlink:href="#icon-battery-charging"></use></svg><span class="name"> icon-battery-charging</span>
837
824
  </div>
838
825
  </div>
839
- <div class="glyph fs2">
826
+ <div class="glyph fs1">
840
827
  <div class="clearfix pbs">
841
828
  <svg class="icon icon-book"><use xlink:href="#icon-book"></use></svg><span class="name"> icon-book</span>
842
829
  </div>
843
830
  </div>
844
- <div class="glyph fs2">
831
+ <div class="glyph fs1">
845
832
  <div class="clearfix pbs">
846
833
  <svg class="icon icon-briefcase"><use xlink:href="#icon-briefcase"></use></svg><span class="name"> icon-briefcase</span>
847
834
  </div>
848
835
  </div>
849
- <div class="glyph fs2">
836
+ <div class="glyph fs1">
850
837
  <div class="clearfix pbs">
851
838
  <svg class="icon icon-calendar1"><use xlink:href="#icon-calendar1"></use></svg><span class="name"> icon-calendar1</span>
852
839
  </div>
853
840
  </div>
854
- <div class="glyph fs2">
841
+ <div class="glyph fs1">
855
842
  <div class="clearfix pbs">
856
843
  <svg class="icon icon-camera"><use xlink:href="#icon-camera"></use></svg><span class="name"> icon-camera</span>
857
844
  </div>
858
845
  </div>
859
- <div class="glyph fs2">
846
+ <div class="glyph fs1">
860
847
  <div class="clearfix pbs">
861
848
  <svg class="icon icon-check"><use xlink:href="#icon-check"></use></svg><span class="name"> icon-check</span>
862
849
  </div>
863
850
  </div>
864
- <div class="glyph fs2">
851
+ <div class="glyph fs1">
865
852
  <div class="clearfix pbs">
866
853
  <svg class="icon icon-check-square"><use xlink:href="#icon-check-square"></use></svg><span class="name"> icon-check-square</span>
867
854
  </div>
868
855
  </div>
869
- <div class="glyph fs2">
856
+ <div class="glyph fs1">
870
857
  <div class="clearfix pbs">
871
858
  <svg class="icon icon-chevron-down"><use xlink:href="#icon-chevron-down"></use></svg><span class="name"> icon-chevron-down</span>
872
859
  </div>
873
860
  </div>
874
- <div class="glyph fs2">
861
+ <div class="glyph fs1">
875
862
  <div class="clearfix pbs">
876
863
  <svg class="icon icon-chevron-left"><use xlink:href="#icon-chevron-left"></use></svg><span class="name"> icon-chevron-left</span>
877
864
  </div>
878
865
  </div>
879
- <div class="glyph fs2">
866
+ <div class="glyph fs1">
880
867
  <div class="clearfix pbs">
881
868
  <svg class="icon icon-chevron-right"><use xlink:href="#icon-chevron-right"></use></svg><span class="name"> icon-chevron-right</span>
882
869
  </div>
883
870
  </div>
884
- <div class="glyph fs2">
871
+ <div class="glyph fs1">
885
872
  <div class="clearfix pbs">
886
873
  <svg class="icon icon-chevron-up"><use xlink:href="#icon-chevron-up"></use></svg><span class="name"> icon-chevron-up</span>
887
874
  </div>
888
875
  </div>
889
- <div class="glyph fs2">
876
+ <div class="glyph fs1">
890
877
  <div class="clearfix pbs">
891
878
  <svg class="icon icon-chevrons-down"><use xlink:href="#icon-chevrons-down"></use></svg><span class="name"> icon-chevrons-down</span>
892
879
  </div>
893
880
  </div>
894
- <div class="glyph fs2">
881
+ <div class="glyph fs1">
895
882
  <div class="clearfix pbs">
896
883
  <svg class="icon icon-chevrons-left"><use xlink:href="#icon-chevrons-left"></use></svg><span class="name"> icon-chevrons-left</span>
897
884
  </div>
898
885
  </div>
899
- <div class="glyph fs2">
886
+ <div class="glyph fs1">
900
887
  <div class="clearfix pbs">
901
888
  <svg class="icon icon-chevrons-right"><use xlink:href="#icon-chevrons-right"></use></svg><span class="name"> icon-chevrons-right</span>
902
889
  </div>
903
890
  </div>
904
- <div class="glyph fs2">
891
+ <div class="glyph fs1">
905
892
  <div class="clearfix pbs">
906
893
  <svg class="icon icon-chevrons-up"><use xlink:href="#icon-chevrons-up"></use></svg><span class="name"> icon-chevrons-up</span>
907
894
  </div>
908
895
  </div>
909
- <div class="glyph fs2">
896
+ <div class="glyph fs1">
910
897
  <div class="clearfix pbs">
911
898
  <svg class="icon icon-circle"><use xlink:href="#icon-circle"></use></svg><span class="name"> icon-circle</span>
912
899
  </div>
913
900
  </div>
914
- <div class="glyph fs2">
901
+ <div class="glyph fs1">
915
902
  <div class="clearfix pbs">
916
903
  <svg class="icon icon-clipboard"><use xlink:href="#icon-clipboard"></use></svg><span class="name"> icon-clipboard</span>
917
904
  </div>
918
905
  </div>
919
- <div class="glyph fs2">
906
+ <div class="glyph fs1">
920
907
  <div class="clearfix pbs">
921
908
  <svg class="icon icon-clock"><use xlink:href="#icon-clock"></use></svg><span class="name"> icon-clock</span>
922
909
  </div>
923
910
  </div>
924
- <div class="glyph fs2">
911
+ <div class="glyph fs1">
925
912
  <div class="clearfix pbs">
926
913
  <svg class="icon icon-cloud1"><use xlink:href="#icon-cloud1"></use></svg><span class="name"> icon-cloud1</span>
927
914
  </div>
928
915
  </div>
929
- <div class="glyph fs2">
916
+ <div class="glyph fs1">
930
917
  <div class="clearfix pbs">
931
918
  <svg class="icon icon-code"><use xlink:href="#icon-code"></use></svg><span class="name"> icon-code</span>
932
919
  </div>
933
920
  </div>
934
- <div class="glyph fs2">
921
+ <div class="glyph fs1">
935
922
  <div class="clearfix pbs">
936
923
  <svg class="icon icon-copy"><use xlink:href="#icon-copy"></use></svg><span class="name"> icon-copy</span>
937
924
  </div>
938
925
  </div>
939
- <div class="glyph fs2">
926
+ <div class="glyph fs1">
940
927
  <div class="clearfix pbs">
941
928
  <svg class="icon icon-credit-card"><use xlink:href="#icon-credit-card"></use></svg><span class="name"> icon-credit-card</span>
942
929
  </div>
943
930
  </div>
944
- <div class="glyph fs2">
931
+ <div class="glyph fs1">
945
932
  <div class="clearfix pbs">
946
933
  <svg class="icon icon-disc"><use xlink:href="#icon-disc"></use></svg><span class="name"> icon-disc</span>
947
934
  </div>
948
935
  </div>
949
- <div class="glyph fs2">
936
+ <div class="glyph fs1">
950
937
  <div class="clearfix pbs">
951
938
  <svg class="icon icon-edit"><use xlink:href="#icon-edit"></use></svg><span class="name"> icon-edit</span>
952
939
  </div>
953
940
  </div>
954
- <div class="glyph fs2">
941
+ <div class="glyph fs1">
955
942
  <div class="clearfix pbs">
956
943
  <svg class="icon icon-edit-3"><use xlink:href="#icon-edit-3"></use></svg><span class="name"> icon-edit-3</span>
957
944
  </div>
958
945
  </div>
959
- <div class="glyph fs2">
946
+ <div class="glyph fs1">
960
947
  <div class="clearfix pbs">
961
948
  <svg class="icon icon-external-link1"><use xlink:href="#icon-external-link1"></use></svg><span class="name"> icon-external-link1</span>
962
949
  </div>
963
950
  </div>
964
- <div class="glyph fs2">
951
+ <div class="glyph fs1">
965
952
  <div class="clearfix pbs">
966
953
  <svg class="icon icon-flag"><use xlink:href="#icon-flag"></use></svg><span class="name"> icon-flag</span>
967
954
  </div>
968
955
  </div>
969
- <div class="glyph fs2">
956
+ <div class="glyph fs1">
970
957
  <div class="clearfix pbs">
971
958
  <svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span class="name"> icon-home</span>
972
959
  </div>
973
960
  </div>
974
- <div class="glyph fs2">
961
+ <div class="glyph fs1">
975
962
  <div class="clearfix pbs">
976
963
  <svg class="icon icon-image"><use xlink:href="#icon-image"></use></svg><span class="name"> icon-image</span>
977
964
  </div>
978
965
  </div>
979
- <div class="glyph fs2">
966
+ <div class="glyph fs1">
980
967
  <div class="clearfix pbs">
981
968
  <svg class="icon icon-inbox"><use xlink:href="#icon-inbox"></use></svg><span class="name"> icon-inbox</span>
982
969
  </div>
983
970
  </div>
984
- <div class="glyph fs2">
971
+ <div class="glyph fs1">
985
972
  <div class="clearfix pbs">
986
973
  <svg class="icon icon-info"><use xlink:href="#icon-info"></use></svg><span class="name"> icon-info</span>
987
974
  </div>
988
975
  </div>
989
- <div class="glyph fs2">
976
+ <div class="glyph fs1">
990
977
  <div class="clearfix pbs">
991
978
  <svg class="icon icon-layers"><use xlink:href="#icon-layers"></use></svg><span class="name"> icon-layers</span>
992
979
  </div>
993
980
  </div>
994
- <div class="glyph fs2">
981
+ <div class="glyph fs1">
995
982
  <div class="clearfix pbs">
996
983
  <svg class="icon icon-loader"><use xlink:href="#icon-loader"></use></svg><span class="name"> icon-loader</span>
997
984
  </div>
998
985
  </div>
999
- <div class="glyph fs2">
986
+ <div class="glyph fs1">
1000
987
  <div class="clearfix pbs">
1001
988
  <svg class="icon icon-lock"><use xlink:href="#icon-lock"></use></svg><span class="name"> icon-lock</span>
1002
989
  </div>
1003
990
  </div>
1004
- <div class="glyph fs2">
991
+ <div class="glyph fs1">
1005
992
  <div class="clearfix pbs">
1006
993
  <svg class="icon icon-mail1"><use xlink:href="#icon-mail1"></use></svg><span class="name"> icon-mail1</span>
1007
994
  </div>
1008
995
  </div>
1009
- <div class="glyph fs2">
996
+ <div class="glyph fs1">
1010
997
  <div class="clearfix pbs">
1011
998
  <svg class="icon icon-message-square"><use xlink:href="#icon-message-square"></use></svg><span class="name"> icon-message-square</span>
1012
999
  </div>
1013
1000
  </div>
1014
- <div class="glyph fs2">
1001
+ <div class="glyph fs1">
1015
1002
  <div class="clearfix pbs">
1016
1003
  <svg class="icon icon-mic"><use xlink:href="#icon-mic"></use></svg><span class="name"> icon-mic</span>
1017
1004
  </div>
1018
1005
  </div>
1019
- <div class="glyph fs2">
1006
+ <div class="glyph fs1">
1020
1007
  <div class="clearfix pbs">
1021
1008
  <svg class="icon icon-paperclip"><use xlink:href="#icon-paperclip"></use></svg><span class="name"> icon-paperclip</span>
1022
1009
  </div>
1023
1010
  </div>
1024
- <div class="glyph fs2">
1011
+ <div class="glyph fs1">
1025
1012
  <div class="clearfix pbs">
1026
1013
  <svg class="icon icon-phone"><use xlink:href="#icon-phone"></use></svg><span class="name"> icon-phone</span>
1027
1014
  </div>
1028
1015
  </div>
1029
- <div class="glyph fs2">
1016
+ <div class="glyph fs1">
1030
1017
  <div class="clearfix pbs">
1031
1018
  <svg class="icon icon-phone-forwarded"><use xlink:href="#icon-phone-forwarded"></use></svg><span class="name"> icon-phone-forwarded</span>
1032
1019
  </div>
1033
1020
  </div>
1034
- <div class="glyph fs2">
1021
+ <div class="glyph fs1">
1035
1022
  <div class="clearfix pbs">
1036
1023
  <svg class="icon icon-phone-incoming"><use xlink:href="#icon-phone-incoming"></use></svg><span class="name"> icon-phone-incoming</span>
1037
1024
  </div>
1038
1025
  </div>
1039
- <div class="glyph fs2">
1026
+ <div class="glyph fs1">
1040
1027
  <div class="clearfix pbs">
1041
1028
  <svg class="icon icon-phone-missed"><use xlink:href="#icon-phone-missed"></use></svg><span class="name"> icon-phone-missed</span>
1042
1029
  </div>
1043
1030
  </div>
1044
- <div class="glyph fs2">
1031
+ <div class="glyph fs1">
1045
1032
  <div class="clearfix pbs">
1046
1033
  <svg class="icon icon-phone-outgoing"><use xlink:href="#icon-phone-outgoing"></use></svg><span class="name"> icon-phone-outgoing</span>
1047
1034
  </div>
1048
1035
  </div>
1049
- <div class="glyph fs2">
1036
+ <div class="glyph fs1">
1050
1037
  <div class="clearfix pbs">
1051
1038
  <svg class="icon icon-radio"><use xlink:href="#icon-radio"></use></svg><span class="name"> icon-radio</span>
1052
1039
  </div>
1053
1040
  </div>
1054
- <div class="glyph fs2">
1041
+ <div class="glyph fs1">
1055
1042
  <div class="clearfix pbs">
1056
1043
  <svg class="icon icon-repeat"><use xlink:href="#icon-repeat"></use></svg><span class="name"> icon-repeat</span>
1057
1044
  </div>
1058
1045
  </div>
1059
- <div class="glyph fs2">
1046
+ <div class="glyph fs1">
1060
1047
  <div class="clearfix pbs">
1061
1048
  <svg class="icon icon-send"><use xlink:href="#icon-send"></use></svg><span class="name"> icon-send</span>
1062
1049
  </div>
1063
1050
  </div>
1064
- <div class="glyph fs2">
1051
+ <div class="glyph fs1">
1065
1052
  <div class="clearfix pbs">
1066
1053
  <svg class="icon icon-settings"><use xlink:href="#icon-settings"></use></svg><span class="name"> icon-settings</span>
1067
1054
  </div>
1068
1055
  </div>
1069
- <div class="glyph fs2">
1056
+ <div class="glyph fs1">
1070
1057
  <div class="clearfix pbs">
1071
1058
  <svg class="icon icon-shield"><use xlink:href="#icon-shield"></use></svg><span class="name"> icon-shield</span>
1072
1059
  </div>
1073
1060
  </div>
1074
- <div class="glyph fs2">
1061
+ <div class="glyph fs1">
1075
1062
  <div class="clearfix pbs">
1076
1063
  <svg class="icon icon-shield-off"><use xlink:href="#icon-shield-off"></use></svg><span class="name"> icon-shield-off</span>
1077
1064
  </div>
1078
1065
  </div>
1079
- <div class="glyph fs2">
1066
+ <div class="glyph fs1">
1080
1067
  <div class="clearfix pbs">
1081
1068
  <svg class="icon icon-sidebar"><use xlink:href="#icon-sidebar"></use></svg><span class="name"> icon-sidebar</span>
1082
1069
  </div>
1083
1070
  </div>
1084
- <div class="glyph fs2">
1071
+ <div class="glyph fs1">
1085
1072
  <div class="clearfix pbs">
1086
1073
  <svg class="icon icon-slash"><use xlink:href="#icon-slash"></use></svg><span class="name"> icon-slash</span>
1087
1074
  </div>
1088
1075
  </div>
1089
- <div class="glyph fs2">
1076
+ <div class="glyph fs1">
1090
1077
  <div class="clearfix pbs">
1091
1078
  <svg class="icon icon-sliders"><use xlink:href="#icon-sliders"></use></svg><span class="name"> icon-sliders</span>
1092
1079
  </div>
1093
1080
  </div>
1094
- <div class="glyph fs2">
1081
+ <div class="glyph fs1">
1095
1082
  <div class="clearfix pbs">
1096
1083
  <svg class="icon icon-smartphone"><use xlink:href="#icon-smartphone"></use></svg><span class="name"> icon-smartphone</span>
1097
1084
  </div>
1098
1085
  </div>
1099
- <div class="glyph fs2">
1086
+ <div class="glyph fs1">
1100
1087
  <div class="clearfix pbs">
1101
1088
  <svg class="icon icon-square"><use xlink:href="#icon-square"></use></svg><span class="name"> icon-square</span>
1102
1089
  </div>
1103
1090
  </div>
1104
- <div class="glyph fs2">
1091
+ <div class="glyph fs1">
1105
1092
  <div class="clearfix pbs">
1106
1093
  <svg class="icon icon-tag"><use xlink:href="#icon-tag"></use></svg><span class="name"> icon-tag</span>
1107
1094
  </div>
1108
1095
  </div>
1109
- <div class="glyph fs2">
1096
+ <div class="glyph fs1">
1110
1097
  <div class="clearfix pbs">
1111
1098
  <svg class="icon icon-tool"><use xlink:href="#icon-tool"></use></svg><span class="name"> icon-tool</span>
1112
1099
  </div>
1113
1100
  </div>
1114
- <div class="glyph fs2">
1101
+ <div class="glyph fs1">
1115
1102
  <div class="clearfix pbs">
1116
1103
  <svg class="icon icon-trash"><use xlink:href="#icon-trash"></use></svg><span class="name"> icon-trash</span>
1117
1104
  </div>
1118
1105
  </div>
1119
- <div class="glyph fs2">
1106
+ <div class="glyph fs1">
1120
1107
  <div class="clearfix pbs">
1121
1108
  <svg class="icon icon-trash-2"><use xlink:href="#icon-trash-2"></use></svg><span class="name"> icon-trash-2</span>
1122
1109
  </div>
1123
1110
  </div>
1124
- <div class="glyph fs2">
1111
+ <div class="glyph fs1">
1125
1112
  <div class="clearfix pbs">
1126
1113
  <svg class="icon icon-user"><use xlink:href="#icon-user"></use></svg><span class="name"> icon-user</span>
1127
1114
  </div>
1128
1115
  </div>
1129
- <div class="glyph fs2">
1116
+ <div class="glyph fs1">
1130
1117
  <div class="clearfix pbs">
1131
1118
  <svg class="icon icon-users"><use xlink:href="#icon-users"></use></svg><span class="name"> icon-users</span>
1132
1119
  </div>
1133
1120
  </div>
1134
- <div class="glyph fs2">
1121
+ <div class="glyph fs1">
1135
1122
  <div class="clearfix pbs">
1136
1123
  <svg class="icon icon-speaker"><use xlink:href="#icon-speaker"></use></svg><span class="name"> icon-speaker</span>
1137
1124
  </div>
1138
1125
  </div>
1139
- <div class="glyph fs2">
1126
+ <div class="glyph fs1">
1140
1127
  <div class="clearfix pbs">
1141
1128
  <svg class="icon icon-x"><use xlink:href="#icon-x"></use></svg><span class="name"> icon-x</span>
1142
1129
  </div>
1143
1130
  </div>
1144
- <div class="glyph fs2">
1131
+ <div class="glyph fs1">
1145
1132
  <div class="clearfix pbs">
1146
1133
  <svg class="icon icon-x-octagon"><use xlink:href="#icon-x-octagon"></use></svg><span class="name"> icon-x-octagon</span>
1147
1134
  </div>
1148
1135
  </div>
1149
- <div class="glyph fs2">
1136
+ <div class="glyph fs1">
1150
1137
  <div class="clearfix pbs">
1151
1138
  <svg class="icon icon-zap"><use xlink:href="#icon-zap"></use></svg><span class="name"> icon-zap</span>
1152
1139
  </div>
1153
1140
  </div>
1154
- <div class="glyph fs2">
1141
+ <div class="glyph fs1">
1155
1142
  <div class="clearfix pbs">
1156
1143
  <svg class="icon icon-contact-cal"><use xlink:href="#icon-contact-cal"></use></svg><span class="name"> icon-contact-cal</span>
1157
1144
  </div>
1158
1145
  </div>
1159
- <div class="glyph fs2">
1146
+ <div class="glyph fs1">
1160
1147
  <div class="clearfix pbs">
1161
1148
  <svg class="icon icon-send-mobile"><use xlink:href="#icon-send-mobile"></use></svg><span class="name"> icon-send-mobile</span>
1162
1149
  </div>
1163
1150
  </div>
1164
1151
  </div>
1165
1152
  <div class="clearfix mhl ptl">
1166
- <h1 class="mvm mtn fgc1">Grid Size: 0</h1>
1167
- <div class="glyph fs3">
1153
+ <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
1154
+ <div class="glyph fs2">
1168
1155
  <div class="clearfix pbs">
1169
- <svg class="icon icon-zapier"><use xlink:href="#icon-zapier"></use></svg><span class="name"> icon-zapier</span>
1156
+ <svg class="icon icon-credits"><use xlink:href="#icon-credits"></use></svg><span class="name"> icon-credits</span>
1170
1157
  </div>
1171
1158
  </div>
1172
- <div class="glyph fs3">
1159
+ <div class="glyph fs2">
1160
+ <div class="clearfix pbs">
1161
+ <svg class="icon icon-channel"><use xlink:href="#icon-channel"></use></svg><span class="name"> icon-channel</span>
1162
+ </div>
1163
+ </div>
1164
+ <div class="glyph fs2">
1173
1165
  <div class="clearfix pbs">
1174
1166
  <svg class="icon icon-users1"><use xlink:href="#icon-users1"></use></svg><span class="name"> icon-users1</span>
1175
1167
  </div>
1176
1168
  </div>
1177
- <div class="glyph fs3">
1169
+ <div class="glyph fs2">
1178
1170
  <div class="clearfix pbs">
1179
1171
  <svg class="icon icon-lock2"><use xlink:href="#icon-lock2"></use></svg><span class="name"> icon-lock2</span>
1180
1172
  </div>
1181
1173
  </div>
1182
- <div class="glyph fs3">
1174
+ <div class="glyph fs2">
1183
1175
  <div class="clearfix pbs">
1184
1176
  <svg class="icon icon-atom"><use xlink:href="#icon-atom"></use></svg><span class="name"> icon-atom</span>
1185
1177
  </div>
1186
1178
  </div>
1187
- <div class="glyph fs3">
1179
+ <div class="glyph fs2">
1188
1180
  <div class="clearfix pbs">
1189
1181
  <svg class="icon icon-paperplane"><use xlink:href="#icon-paperplane"></use></svg><span class="name"> icon-paperplane</span>
1190
1182
  </div>
1191
1183
  </div>
1192
- <div class="glyph fs3">
1184
+ <div class="glyph fs2">
1193
1185
  <div class="clearfix pbs">
1194
1186
  <svg class="icon icon-cancel"><use xlink:href="#icon-cancel"></use></svg><span class="name"> icon-cancel</span>
1195
1187
  </div>
1196
1188
  </div>
1197
1189
  </div>
1198
1190
  <div class="clearfix mhl ptl">
1199
- <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
1200
- <div class="glyph fs4">
1201
- <div class="clearfix pbs">
1202
- <svg class="icon icon-channel"><use xlink:href="#icon-channel"></use></svg><span class="name"> icon-channel</span>
1203
- </div>
1204
- </div>
1205
- <div class="glyph fs4">
1206
- <div class="clearfix pbs">
1207
- <svg class="icon icon-users1"><use xlink:href="#icon-users1"></use></svg><span class="name"> icon-users1</span>
1208
- </div>
1209
- </div>
1210
- <div class="glyph fs4">
1211
- <div class="clearfix pbs">
1212
- <svg class="icon icon-lock2"><use xlink:href="#icon-lock2"></use></svg><span class="name"> icon-lock2</span>
1213
- </div>
1214
- </div>
1215
- <div class="glyph fs4">
1216
- <div class="clearfix pbs">
1217
- <svg class="icon icon-atom"><use xlink:href="#icon-atom"></use></svg><span class="name"> icon-atom</span>
1218
- </div>
1219
- </div>
1220
- <div class="glyph fs4">
1191
+ <h1 class="mvm mtn fgc1">Grid Size: 20</h1>
1192
+ <div class="glyph fs3">
1221
1193
  <div class="clearfix pbs">
1222
- <svg class="icon icon-paperplane"><use xlink:href="#icon-paperplane"></use></svg><span class="name"> icon-paperplane</span>
1194
+ <svg class="icon icon-language"><use xlink:href="#icon-language"></use></svg><span class="name"> icon-language</span>
1223
1195
  </div>
1224
1196
  </div>
1197
+ </div>
1198
+ <div class="clearfix mhl ptl">
1199
+ <h1 class="mvm mtn fgc1">Grid Size: 0</h1>
1225
1200
  <div class="glyph fs4">
1226
1201
  <div class="clearfix pbs">
1227
- <svg class="icon icon-cancel"><use xlink:href="#icon-cancel"></use></svg><span class="name"> icon-cancel</span>
1202
+ <svg class="icon icon-zapier"><use xlink:href="#icon-zapier"></use></svg><span class="name"> icon-zapier</span>
1228
1203
  </div>
1229
1204
  </div>
1230
1205
  </div>