@ably/ui 8.2.0 → 8.2.1-dev.0f465a1

package/src/core/icons/icon-display-tutorials-demos-col.svg

@@ -0,0 +1,25 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.8337 34.6667C25.8337 35.5 25.0003 36.3333 24.167 36.3333C23.3337 36.3333 6.66699 36.3333 5.83366 36.3333C5.00033 36.3333 4.16699 35.5 4.16699 34.6667C4.16699 33.8333 4.16699 7.16658 4.16699 6.33329C4.16699 5.50001 5.00033 4.66667 5.83361 4.66667C6.6669 4.66667 24.167 4.66667 24.167 4.66667C25.0003 4.66667 25.8337 5.50001 25.8337 6.33334C25.8337 6.57137 25.8337 11.0005 25.8337 14.25" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M7.5 32.1667H16.6667" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 28.8333H14.1667" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 25.5H16.6667" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 22.1667H14.1667" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.667 17.1667H15.0003" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.6827 15.551C27.8319 15.483 28.0021 15.483 28.1513 15.551L35.0744 18.7089C35.2827 18.804 35.417 19.016 35.417 19.25C35.417 19.484 35.2827 19.696 35.0744 19.7911L28.1513 22.949C28.0021 23.017 27.8319 23.017 27.6827 22.949L20.7596 19.7911C20.5513 19.696 20.417 19.484 20.417 19.25C20.417 19.016 20.5513 18.804 20.7596 18.7089L27.6827 15.551Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.5902 20.5918C35.7422 20.6966 35.834 20.8758 35.834 21.0682V29.5909C35.834 29.8203 35.7039 30.0272 35.5043 30.1154L29.0757 32.9563C28.9104 33.0294 28.7216 33.01 28.5725 32.9046C28.4235 32.7992 28.334 32.6218 28.334 32.4318V24.0985C28.334 23.8739 28.4587 23.6705 28.6521 23.5793L35.0807 20.549C35.2464 20.4709 35.4381 20.487 35.5902 20.5918Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.2438 20.5918C20.3959 20.487 20.5876 20.4709 20.7533 20.549L27.1819 23.5793C27.3753 23.6705 27.5 23.8739 27.5 24.0985V32.4318C27.5 32.6218 27.4105 32.7992 27.2614 32.9046C27.1124 33.01 26.9236 33.0294 26.7582 32.9563L20.3297 30.1154C20.13 30.0272 20 29.8203 20 29.5909V21.0682C20 20.8758 20.0917 20.6966 20.2438 20.5918Z" fill="#FF5416"/>
+<path d="M7.50054 17.1667L10.2783 15.0833L7.50054 13" stroke="#03020D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.2462 10.9979L31.9413 11.6077L31.3316 11.9125L29.9899 12.5833L31.3316 13.2542L31.9413 13.559L32.2462 14.1688L32.917 15.5104L33.5878 14.1688L33.8927 13.559L34.5024 13.2542L35.844 12.5833L34.5024 11.9125L33.8927 11.6077L33.5878 10.9979L32.917 9.65629L32.2462 10.9979Z" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M4.16699 9.66667L25.8337 9.66667" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<mask id="path-13-inside-1_422_2258" fill="white">
+<ellipse cx="11.6673" cy="7.16668" rx="0.833333" ry="0.833333"/>
+</mask>
+<ellipse cx="11.6673" cy="7.16668" rx="0.833333" ry="0.833333" fill="#03020D"/>
+<path d="M11.5007 7.16668C11.5007 7.07463 11.5753 7.00001 11.6673 7.00001V9.00001C12.6798 9.00001 13.5007 8.1792 13.5007 7.16668H11.5007ZM11.6673 7.00001C11.7594 7.00001 11.834 7.07463 11.834 7.16668H9.83398C9.83398 8.1792 10.6548 9.00001 11.6673 9.00001V7.00001ZM11.834 7.16668C11.834 7.25872 11.7594 7.33334 11.6673 7.33334V5.33334C10.6548 5.33334 9.83398 6.15415 9.83398 7.16668H11.834ZM11.6673 7.33334C11.5753 7.33334 11.5007 7.25872 11.5007 7.16668H13.5007C13.5007 6.15415 12.6798 5.33334 11.6673 5.33334V7.33334Z" fill="#03020D" mask="url(#path-13-inside-1_422_2258)"/>
+<mask id="path-15-inside-2_422_2258" fill="white">
+<ellipse cx="9.16732" cy="7.16668" rx="0.833333" ry="0.833333"/>
+</mask>
+<ellipse cx="9.16732" cy="7.16668" rx="0.833333" ry="0.833333" fill="#03020D"/>
+<path d="M9.00065 7.16668C9.00065 7.07463 9.07527 7.00001 9.16732 7.00001V9.00001C10.1798 9.00001 11.0007 8.1792 11.0007 7.16668H9.00065ZM9.16732 7.00001C9.25936 7.00001 9.33398 7.07463 9.33398 7.16668H7.33398C7.33398 8.1792 8.1548 9.00001 9.16732 9.00001V7.00001ZM9.33398 7.16668C9.33398 7.25872 9.25936 7.33334 9.16732 7.33334V5.33334C8.1548 5.33334 7.33398 6.15415 7.33398 7.16668H9.33398ZM9.16732 7.33334C9.07527 7.33334 9.00065 7.25872 9.00065 7.16668H11.0007C11.0007 6.15415 10.1798 5.33334 9.16732 5.33334V7.33334Z" fill="#03020D" mask="url(#path-15-inside-2_422_2258)"/>
+<circle cx="6.66732" cy="7.16668" r="0.5" fill="#03020D" stroke="#03020D" stroke-width="0.666667"/>
+</svg>

package/src/core/icons/icon-display-virtual-events-col.svg

@@ -0,0 +1,12 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.1667 8.83334C35.8333 8.83334 37.5 10.5 37.5 12.1667C37.5 13.8333 37.5 27.1667 37.5 28.8333C37.5 30.5 35.8333 32.1667 34.1667 32.1667C33.3681 32.1667 27.2124 32.1667 20.8333 32.1667M5.83333 32.1667C4.16667 32.1667 2.5 30.5 2.5 28.8333C2.5 27.1667 2.5 13.8333 2.5 12.1667C2.5 10.5 4.16667 8.83334 5.83333 8.83334C6.52662 8.83334 11.2574 8.83334 16.6667 8.83334" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<ellipse cx="12.5001" cy="32.1667" rx="5.83333" ry="5.83333" fill="white" stroke="#03020D" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5134 29.9141C13.3192 29.2628 14.5059 29.3095 15.2571 30.0543C16.061 30.8514 16.061 32.1454 15.2571 32.9424L13.1534 35.0282C12.7991 35.3795 12.2277 35.3795 11.8733 35.0282L9.7697 32.9424C8.96577 32.1454 8.96576 30.8514 9.7697 30.0543C10.5208 29.3095 11.7076 29.2628 12.5134 29.9141Z" fill="#FF5416"/>
+<path d="M27.4999 25.9157C27.4997 26.2453 27.5973 26.5677 27.7803 26.8419C27.9633 27.1161 28.2236 27.3299 28.5281 27.4562C28.8326 27.5825 29.1678 27.6156 29.4911 27.5514C29.8145 27.4872 30.1115 27.3286 30.3447 27.0955C30.5779 26.8625 30.7368 26.5655 30.8012 26.2422C30.8655 25.9189 30.8326 25.5837 30.7065 25.2791C30.5803 24.9745 30.3667 24.7141 30.0926 24.531C29.8185 24.3478 29.4963 24.25 29.1666 24.25C28.7248 24.25 28.301 24.4255 27.9884 24.7378C27.6759 25.0501 27.5002 25.4738 27.4999 25.9157Z" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M23.5417 23.8333C23.5417 23.0279 24.1947 22.375 25.0001 22.375H33.3334C34.1388 22.375 34.7917 23.0279 34.7917 23.8333V28C34.7917 28.8054 34.1388 29.4583 33.3334 29.4583H25.0001C24.1947 29.4583 23.5417 28.8054 23.5417 28V23.8333Z" stroke="#03020D" stroke-width="1.5"/>
+<path d="M5.83342 26.2603C5.83342 25.111 6.25621 24.0088 7.00884 23.1962C7.76148 22.3835 8.7822 21.927 9.84658 21.927H15.1535C16.2179 21.927 17.2387 22.3835 17.9913 23.1962C18.744 24.0088 19.1667 25.111 19.1667 26.2603" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M27.4999 16.749C27.4997 17.0787 27.5973 17.401 27.7803 17.6752C27.9633 17.9494 28.2236 18.1632 28.5281 18.2895C28.8326 18.4158 29.1678 18.449 29.4911 18.3848C29.8145 18.3206 30.1115 18.1619 30.3447 17.9289C30.5779 17.6958 30.7368 17.3989 30.8012 17.0755C30.8655 16.7522 30.8326 16.417 30.7065 16.1124C30.5803 15.8078 30.3667 15.5475 30.0926 15.3643C29.8185 15.1811 29.4963 15.0833 29.1666 15.0833C28.7248 15.0833 28.301 15.2588 27.9884 15.5711C27.6759 15.8835 27.5002 16.3071 27.4999 16.749Z" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M23.5417 14.6667C23.5417 13.8613 24.1947 13.2083 25.0001 13.2083H33.3334C34.1388 13.2083 34.7917 13.8613 34.7917 14.6667V18.8333C34.7917 19.6388 34.1388 20.2917 33.3334 20.2917H25.0001C24.1947 20.2917 23.5417 19.6388 23.5417 18.8333V14.6667Z" stroke="#03020D" stroke-width="1.5"/>
+<path d="M8.79636 15.977C8.7959 16.7312 9.01916 17.4685 9.43781 18.0958C9.85647 18.7231 10.4518 19.2121 11.1484 19.5011C11.845 19.79 12.6117 19.8658 13.3514 19.719C14.0912 19.5721 14.7707 19.2092 15.3041 18.6761C15.8375 18.143 16.2009 17.4636 16.3482 16.724C16.4955 15.9843 16.4201 15.2176 16.1316 14.5208C15.8431 13.824 15.3544 13.2284 14.7274 12.8094C14.1004 12.3903 13.3632 12.1667 12.6091 12.1667C11.5983 12.1667 10.6288 12.568 9.9139 13.2825C9.19897 13.9971 8.79698 14.9662 8.79636 15.977Z" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M22.3206 10.617L22.4004 10.5355H30.6239C31.1366 10.5355 31.6009 10.2795 31.9255 9.94802C32.2501 9.61641 32.5 9.14275 32.5 8.62046V4.0817C32.5 3.55941 32.2501 3.08575 31.9255 2.75414C31.6009 2.42262 31.1366 2.16667 30.6239 2.16667H20.2095C19.6967 2.16667 19.2324 2.42262 18.9079 2.75414C18.5832 3.08575 18.3333 3.55941 18.3333 4.0817V11.7259C18.3333 12.2003 18.5691 12.6864 19.0289 12.8993C19.5289 13.131 20.067 12.9451 20.4684 12.5236C20.7528 12.2251 21.2768 11.6862 21.7319 11.2196C21.959 10.9868 22.1682 10.7728 22.3206 10.617Z" fill="#FF5416"/>
+</svg>

package/src/core/icons/icon-display-virtual-events.svg

@@ -0,0 +1,12 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.1667 8.83334C35.8333 8.83334 37.5 10.5 37.5 12.1667C37.5 13.8333 37.5 27.1667 37.5 28.8333C37.5 30.5 35.8333 32.1667 34.1667 32.1667C33.3681 32.1667 27.2124 32.1667 20.8333 32.1667M5.83333 32.1667C4.16667 32.1667 2.5 30.5 2.5 28.8333C2.5 27.1667 2.5 13.8333 2.5 12.1667C2.5 10.5 4.16667 8.83334 5.83333 8.83334C6.52662 8.83334 11.2574 8.83334 16.6667 8.83334" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<ellipse cx="12.5001" cy="32.1667" rx="5.83333" ry="5.83333" fill="white" stroke="#03020D" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5134 29.9141C13.3192 29.2628 14.5059 29.3095 15.2571 30.0543C16.061 30.8514 16.061 32.1454 15.2571 32.9424L13.1534 35.0282C12.7991 35.3795 12.2277 35.3795 11.8733 35.0282L9.7697 32.9424C8.96577 32.1454 8.96576 30.8514 9.7697 30.0543C10.5208 29.3095 11.7076 29.2628 12.5134 29.9141Z" fill="#FF5416"/>
+<path d="M27.4999 25.9157C27.4997 26.2453 27.5973 26.5677 27.7803 26.8419C27.9633 27.1161 28.2236 27.3299 28.5281 27.4562C28.8326 27.5825 29.1678 27.6156 29.4911 27.5514C29.8145 27.4872 30.1115 27.3286 30.3447 27.0955C30.5779 26.8625 30.7368 26.5655 30.8012 26.2422C30.8655 25.9189 30.8326 25.5837 30.7065 25.2791C30.5803 24.9745 30.3667 24.7141 30.0926 24.531C29.8185 24.3478 29.4963 24.25 29.1666 24.25C28.7248 24.25 28.301 24.4255 27.9884 24.7378C27.6759 25.0501 27.5002 25.4738 27.4999 25.9157Z" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M23.5417 23.8333C23.5417 23.0279 24.1947 22.375 25.0001 22.375H33.3334C34.1388 22.375 34.7917 23.0279 34.7917 23.8333V28C34.7917 28.8054 34.1388 29.4583 33.3334 29.4583H25.0001C24.1947 29.4583 23.5417 28.8054 23.5417 28V23.8333Z" stroke="#03020D" stroke-width="1.5"/>
+<path d="M5.83342 26.2603C5.83342 25.111 6.25621 24.0088 7.00884 23.1962C7.76148 22.3835 8.7822 21.927 9.84658 21.927H15.1535C16.2179 21.927 17.2387 22.3835 17.9913 23.1962C18.744 24.0088 19.1667 25.111 19.1667 26.2603" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M27.4999 16.749C27.4997 17.0787 27.5973 17.401 27.7803 17.6752C27.9633 17.9494 28.2236 18.1632 28.5281 18.2895C28.8326 18.4158 29.1678 18.449 29.4911 18.3848C29.8145 18.3206 30.1115 18.1619 30.3447 17.9289C30.5779 17.6958 30.7368 17.3989 30.8012 17.0755C30.8655 16.7522 30.8326 16.417 30.7065 16.1124C30.5803 15.8078 30.3667 15.5475 30.0926 15.3643C29.8185 15.1811 29.4963 15.0833 29.1666 15.0833C28.7248 15.0833 28.301 15.2588 27.9884 15.5711C27.6759 15.8835 27.5002 16.3071 27.4999 16.749Z" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M23.5417 14.6667C23.5417 13.8613 24.1947 13.2083 25.0001 13.2083H33.3334C34.1388 13.2083 34.7917 13.8613 34.7917 14.6667V18.8333C34.7917 19.6388 34.1388 20.2917 33.3334 20.2917H25.0001C24.1947 20.2917 23.5417 19.6388 23.5417 18.8333V14.6667Z" stroke="#03020D" stroke-width="1.5"/>
+<path d="M8.79636 15.977C8.7959 16.7312 9.01916 17.4685 9.43781 18.0958C9.85647 18.7231 10.4518 19.2121 11.1484 19.5011C11.845 19.79 12.6117 19.8658 13.3514 19.719C14.0912 19.5721 14.7707 19.2092 15.3041 18.6761C15.8375 18.143 16.2009 17.4636 16.3482 16.724C16.4955 15.9843 16.4201 15.2176 16.1316 14.5208C15.8431 13.824 15.3544 13.2284 14.7274 12.8094C14.1004 12.3903 13.3632 12.1667 12.6091 12.1667C11.5983 12.1667 10.6288 12.568 9.9139 13.2825C9.19897 13.9971 8.79698 14.9662 8.79636 15.977Z" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M22.3206 10.617L22.4004 10.5355H30.6239C31.1366 10.5355 31.6009 10.2795 31.9255 9.94802C32.2501 9.61641 32.5 9.14275 32.5 8.62046V4.0817C32.5 3.55941 32.2501 3.08575 31.9255 2.75414C31.6009 2.42262 31.1366 2.16667 30.6239 2.16667H20.2095C19.6967 2.16667 19.2324 2.42262 18.9079 2.75414C18.5832 3.08575 18.3333 3.55941 18.3333 4.0817V11.7259C18.3333 12.2003 18.5691 12.6864 19.0289 12.8993C19.5289 13.131 20.067 12.9451 20.4684 12.5236C20.7528 12.2251 21.2768 11.6862 21.7319 11.2196C21.959 10.9868 22.1682 10.7728 22.3206 10.617Z" fill="#FF5416"/>
+</svg>

package/src/core/icons/icon-gui-copy.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_222_232)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66634 0.835938C1.65382 0.835938 0.833008 1.65675 0.833008 2.66927V9.33594C0.833008 10.3485 1.65382 11.1693 2.66634 11.1693H3.33301C3.60915 11.1693 3.83301 10.9454 3.83301 10.6693C3.83301 10.3931 3.60915 10.1693 3.33301 10.1693H2.66634C2.2061 10.1693 1.83301 9.79618 1.83301 9.33594V2.66927C1.83301 2.20903 2.2061 1.83594 2.66634 1.83594H9.33301C9.79325 1.83594 10.1663 2.20903 10.1663 2.66927V3.33594C10.1663 3.61208 10.3902 3.83594 10.6663 3.83594C10.9425 3.83594 11.1663 3.61208 11.1663 3.33594V2.66927C11.1663 1.65675 10.3455 0.835938 9.33301 0.835938H2.66634ZM6.66634 4.83594C5.65382 4.83594 4.83301 5.65675 4.83301 6.66927V13.3359C4.83301 14.3485 5.65382 15.1693 6.66634 15.1693H13.333C14.3455 15.1693 15.1663 14.3485 15.1663 13.3359V6.66927C15.1663 5.65675 14.3455 4.83594 13.333 4.83594H6.66634ZM5.83301 6.66927C5.83301 6.20903 6.2061 5.83594 6.66634 5.83594H13.333C13.7932 5.83594 14.1663 6.20903 14.1663 6.66927V13.3359C14.1663 13.7962 13.7932 14.1693 13.333 14.1693H6.66634C6.2061 14.1693 5.83301 13.7962 5.83301 13.3359V6.66927Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_222_232">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/core/images/icon-tech-aws.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4021 17.3463C11.4021 17.8287 11.4542 18.2198 11.5455 18.5066C11.6498 18.7934 11.7802 19.1063 11.9627 19.4452C12.0279 19.5495 12.0539 19.6538 12.0539 19.7451C12.0539 19.8754 11.9757 20.0058 11.8062 20.1362L10.9849 20.6837C10.8676 20.7619 10.7503 20.801 10.646 20.801C10.5156 20.801 10.3852 20.7359 10.2549 20.6185C10.0724 20.423 9.91592 20.2144 9.78555 20.0058C9.65518 19.7842 9.52482 19.5365 9.38141 19.2366C8.36455 20.436 7.08695 21.0357 5.54862 21.0357C4.45354 21.0357 3.58008 20.7228 2.94128 20.0971C2.30248 19.4713 1.97656 18.6369 1.97656 17.594C1.97656 16.4859 2.36766 15.5864 3.1629 14.9084C3.95814 14.2305 5.01412 13.8916 6.3569 13.8916C6.80014 13.8916 7.25643 13.9307 7.73879 13.9959C8.22114 14.0611 8.71654 14.1653 9.23801 14.2827V13.331C9.23801 12.3402 9.02942 11.6493 8.62528 11.2451C8.20811 10.841 7.50413 10.6454 6.5003 10.6454C6.04401 10.6454 5.57469 10.6976 5.09234 10.8149C4.60998 10.9322 4.14066 11.0756 3.68437 11.2582C3.47578 11.3494 3.31934 11.4016 3.22809 11.4276C3.13683 11.4537 3.07165 11.4668 3.0195 11.4668C2.83699 11.4668 2.74573 11.3364 2.74573 11.0626V10.4238C2.74573 10.2152 2.7718 10.0588 2.83699 9.96753C2.90217 9.87627 3.0195 9.78502 3.20201 9.69376C3.6583 9.4591 4.20584 9.26355 4.84464 9.10711C5.48344 8.93763 6.16135 8.85941 6.87836 8.85941C8.42973 8.85941 9.56393 9.2114 10.294 9.91538C11.011 10.6194 11.376 11.6884 11.376 13.1224V17.3463H11.4021ZM6.1092 19.3279C6.53941 19.3279 6.98266 19.2497 7.45198 19.0932C7.9213 18.9368 8.33848 18.65 8.69047 18.2589C8.89905 18.0112 9.05549 17.7374 9.13371 17.4245C9.21194 17.1116 9.26408 16.7336 9.26408 16.2903V15.7428C8.88602 15.6515 8.48188 15.5733 8.0647 15.5212C7.64753 15.469 7.24339 15.4429 6.83925 15.4429C5.9658 15.4429 5.327 15.6124 4.89678 15.9644C4.46657 16.3164 4.25799 16.8118 4.25799 17.4636C4.25799 18.0764 4.41443 18.5326 4.74034 18.8455C5.05323 19.1714 5.50951 19.3279 6.1092 19.3279ZM16.5777 20.7359C16.343 20.7359 16.1866 20.6967 16.0823 20.6055C15.978 20.5273 15.8867 20.3447 15.8085 20.0971L12.7449 10.0197C12.6667 9.75894 12.6276 9.58946 12.6276 9.49821C12.6276 9.28962 12.7318 9.17229 12.9404 9.17229H14.218C14.4657 9.17229 14.6352 9.2114 14.7265 9.30266C14.8308 9.38088 14.909 9.56339 14.9872 9.81109L17.1774 18.4414L19.2111 9.81109C19.2763 9.55035 19.3545 9.38088 19.4588 9.30266C19.5631 9.22444 19.7456 9.17229 19.9803 9.17229H21.0232C21.2709 9.17229 21.4404 9.2114 21.5447 9.30266C21.649 9.38088 21.7402 9.56339 21.7924 9.81109L23.8522 18.5457L26.1075 9.81109C26.1857 9.55035 26.277 9.38088 26.3682 9.30266C26.4725 9.22444 26.642 9.17229 26.8767 9.17229H28.0891C28.2977 9.17229 28.415 9.27658 28.415 9.49821C28.415 9.56339 28.402 9.62858 28.3889 9.7068C28.3759 9.78502 28.3498 9.88931 28.2977 10.0327L25.1558 20.1101C25.0776 20.3708 24.9863 20.5403 24.8821 20.6185C24.7778 20.6967 24.6083 20.7489 24.3867 20.7489H23.2655C23.0178 20.7489 22.8483 20.7098 22.744 20.6185C22.6397 20.5273 22.5485 20.3578 22.4963 20.0971L20.4756 11.6884L18.468 20.084C18.4028 20.3447 18.3246 20.5142 18.2203 20.6055C18.116 20.6967 17.9335 20.7359 17.6988 20.7359H16.5777ZM33.3298 21.0878C32.6519 21.0878 31.974 21.0096 31.3222 20.8532C30.6704 20.6967 30.1619 20.5273 29.823 20.3317C29.6144 20.2144 29.471 20.084 29.4188 19.9667C29.3667 19.8494 29.3406 19.719 29.3406 19.6017V18.9368C29.3406 18.663 29.4449 18.5326 29.6405 18.5326C29.7187 18.5326 29.7969 18.5457 29.8751 18.5718C29.9533 18.5978 30.0707 18.65 30.201 18.7021C30.6443 18.8977 31.1266 19.0541 31.6351 19.1584C32.1565 19.2627 32.665 19.3148 33.1864 19.3148C34.0078 19.3148 34.6465 19.1714 35.0898 18.8846C35.533 18.5978 35.7677 18.1807 35.7677 17.6462C35.7677 17.2811 35.6504 16.9813 35.4157 16.7336C35.1811 16.4859 34.7378 16.2643 34.099 16.0557L32.2087 15.469C31.257 15.1692 30.553 14.7259 30.1228 14.1393C29.6926 13.5657 29.471 12.9269 29.471 12.249C29.471 11.7014 29.5883 11.2191 29.823 10.8019C30.0576 10.3847 30.3705 10.0197 30.7616 9.73287C31.1527 9.43302 31.596 9.2114 32.1174 9.05496C32.6389 8.89852 33.1864 8.83334 33.7601 8.83334C34.0469 8.83334 34.3467 8.84637 34.6335 8.88548C34.9334 8.92459 35.2071 8.97674 35.4809 9.02889C35.7416 9.09407 35.9893 9.15925 36.224 9.23747C36.4586 9.31569 36.6412 9.39391 36.7715 9.47213C36.954 9.57643 37.0844 9.68072 37.1626 9.79805C37.2409 9.90235 37.28 10.0457 37.28 10.2283V10.841C37.28 11.1148 37.1757 11.2582 36.9801 11.2582C36.8758 11.2582 36.7063 11.206 36.4847 11.1017C35.7416 10.7628 34.9073 10.5933 33.9817 10.5933C33.2386 10.5933 32.6519 10.7106 32.2478 10.9583C31.8437 11.206 31.6351 11.5841 31.6351 12.1186C31.6351 12.4836 31.7654 12.7965 32.0262 13.0442C32.2869 13.2919 32.7693 13.5396 33.4602 13.7612L35.3114 14.3479C36.2501 14.6477 36.928 15.0649 37.3321 15.5994C37.7362 16.1339 37.9318 16.7466 37.9318 17.4245C37.9318 17.9851 37.8145 18.4935 37.5928 18.9368C37.3582 19.38 37.0453 19.7711 36.6412 20.084C36.237 20.4099 35.7547 20.6446 35.1941 20.8141C34.6074 20.9966 33.9947 21.0878 33.3298 21.0878Z" fill="#252F3E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.5608 25.2204C33.9557 25.0509 37.0324 24.6859 37.5799 25.3899C38.1275 26.0808 36.9672 28.988 36.4457 30.2786C36.2893 30.6697 36.6283 30.8262 36.9802 30.5263C39.2747 28.5969 39.8744 24.5685 39.4051 23.9819C38.9357 23.4083 34.9074 22.9129 32.4565 24.6337C32.0784 24.9075 32.1436 25.2725 32.5608 25.2204ZM19.9152 32.2734C25.2733 32.2734 31.5048 30.5917 35.7939 27.4238C36.4979 26.9023 35.8852 26.1071 35.1681 26.433C30.3576 28.4667 25.1299 29.4575 20.3715 29.4575C13.3186 29.4575 6.50042 27.515 0.972856 24.308C0.490498 24.0212 0.12547 24.5166 0.529608 24.8816C5.64 29.4966 12.406 32.2734 19.9152 32.2734Z" fill="#FF9900"/>
+</svg>

package/src/core/styles/layout.css

@@ -7,6 +7,10 @@
     @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
   }
 
+  .ui-grid-gap-x {
+    @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32;
+  }
+
   .ui-grid-px {
     @apply px-24 sm:px-32 md:px-40 lg:px-64;
   }

package/src/core/MeganavContentWhyAbly/component.html.erb

@@ -1,70 +0,0 @@
-<section class="ui-meganav-content ui-grid-gap md:grid-cols-3">
-  <div>
-    <h3 class="ui-meganav-overline" id="meganav-why-ably-panel-list-why-companies">Why companies choose Ably</h3>
-    <ul aria-labelledby="meganav-why-ably-panel-list-why-companies">
-      <li>
-        <%= link_to abs_url("/customers"), class: "group ui-meganav-media py-12" do %>
-          <p class="ui-meganav-media-heading">Customers</p>
-        <% end %>
-      </li>
-
-      <li>
-        <%= link_to abs_url("/case-studies"), class: "group ui-meganav-media py-12" do %>
-          <p class="ui-meganav-media-heading">Case studies</p>
-        <% end %>
-      </li>
-
-      <li>
-        <%= link_to abs_url("/compare"), class: "group ui-meganav-media py-12" do %>
-          <p class="ui-meganav-media-heading">Compare our tech</p>
-        <% end %>
-      </li>
-
-      <li>
-        <%= link_to abs_url("/aws"), class: "group ui-meganav-media py-12" do %>
-          <p class="ui-meganav-media-heading">Ably & AWS</p>
-        <% end %>
-      </li>
-
-      <li>
-        <%= link_to abs_url("/resources"), class: "group ui-meganav-media py-12" do %>
-          <p class="ui-meganav-media-heading">Resources</p>
-        <% end %>
-      </li>
-    </ul>
-  </div>
-
-  <div>
-    <h3 class="ui-meganav-overline" id="meganav-why-ably-panel-list-four-pillars">Four pillars of dependability</h3>
-    <ul class="mb-8" aria-labelledby="meganav-why-ably-panel-list-four-pillars">
-      <li>
-        <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Predictable performance</p>
-          <p class="ui-meganav-media-copy">A low-latency global edge network across 200+ PoPs.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/four-pillars-of-dependability#integrity"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Guaranteed ordering & delivery</p>
-          <p class="ui-meganav-media-copy">We guarantee in-order data delivery, even after disconnections.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/four-pillars-of-dependability#reliability"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Fault tolerant infrastructure</p>
-          <p class="ui-meganav-media-copy">Redundant at regional and global levels with 99.999% uptime SLAs.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/four-pillars-of-dependability#availability"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">High scalability & availability</p>
-          <p class="ui-meganav-media-copy">Elastic, battle-tested global infrastructure for massive scale.</p>
-        <% end %>
-      </li>
-    </ul>
-
-    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"))) do %>Explore our Four Pillars of Dependability<% end %>
-  </div>
-
-  <%= render(AblyUi::Core::MeganavBlogPostsList.new(url_base: url_base)) %>
-</section>

package/src/core/MeganavContentWhyAbly/component.jsx

@@ -1,95 +0,0 @@
-import React from "react";
-import T from "prop-types";
-
-import FeaturedLink from "../FeaturedLink/component.jsx";
-import MeganavBlogPostsList from "../MeganavBlogPostsList/component.jsx";
-import ConnectStateWrapper from "../ConnectStateWrapper/component.jsx";
-
-import { selectRecentBlogPosts } from "../remote-blogs-posts";
-
-const MeganavContentWhyAbly = ({ absUrl }) => {
-  const BlogPostsList = ConnectStateWrapper(MeganavBlogPostsList, { recentBlogPosts: selectRecentBlogPosts });
-
-  return (
-    <section className="ui-meganav-content ui-grid-gap md:grid-cols-3">
-      <div>
-        <h3 className="ui-meganav-overline" id="meganav-why-ably-panel-list-why-companies">
-          Why companies choose Ably
-        </h3>
-        <ul aria-labelledby="meganav-why-ably-panel-list-why-companies">
-          <li>
-            <a href={absUrl("/customers")} className="group ui-meganav-media py-12">
-              <p className="ui-meganav-media-heading">Customers</p>
-            </a>
-          </li>
-
-          <li>
-            <a href={absUrl("/case-studies")} className="group ui-meganav-media py-12">
-              <p className="ui-meganav-media-heading">Case studies</p>
-            </a>
-          </li>
-
-          <li>
-            <a href={absUrl("/compare")} className="group ui-meganav-media py-12">
-              <p className="ui-meganav-media-heading">Compare our tech</p>
-            </a>
-          </li>
-
-          <li>
-            <a href={absUrl("/aws")} className="group ui-meganav-media py-12">
-              <p className="ui-meganav-media-heading">Ably & AWS</p>
-            </a>
-          </li>
-
-          <li>
-            <a href={absUrl("/resources")} className="group ui-meganav-media py-12">
-              <p className="ui-meganav-media-heading">Resources</p>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div>
-        <h3 className="ui-meganav-overline" id="meganav-why-ably-panel-list-four-pillars">
-          Four pillars of dependability
-        </h3>
-        <ul className="mb-8" aria-labelledby="meganav-why-ably-panel-list-four-pillars">
-          <li>
-            <a href={absUrl("/four-pillars-of-dependability#performance")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Predictable performance</p>
-              <p className="ui-meganav-media-copy">A low-latency global edge network across 200+ PoPs.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/four-pillars-of-dependability#integrity")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Guaranteed ordering & delivery</p>
-              <p className="ui-meganav-media-copy">We guarantee in-order data delivery, even after disconnections.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/four-pillars-of-dependability#reliability")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Fault tolerant infrastructure</p>
-              <p className="ui-meganav-media-copy">Redundant at regional and global levels with 99.999% uptime SLAs.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/four-pillars-of-dependability#availability")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">High scalability & availability</p>
-              <p className="ui-meganav-media-copy">Elastic, battle-tested global infrastructure for massive scale.</p>
-            </a>
-          </li>
-        </ul>
-
-        <FeaturedLink url={absUrl("/four-pillars-of-dependability")}>Explore our Four Pillars of Dependability</FeaturedLink>
-      </div>
-
-      <BlogPostsList absUrl={absUrl} />
-    </section>
-  );
-};
-
-MeganavContentWhyAbly.propTypes = {
-  absUrl: T.func,
-};
-
-export default MeganavContentWhyAbly;