@ably/ui 8.7.0-dev.fa55b85 → 8.7.0-dev.fba161a

package/src/core/icons/icon-display-kafka-at-the-edge-col.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 3.59888C9.81598 5.842 3 14.125 3 24C3 33.875 9.81598 42.158 19 44.4011M29 3.59888C32.9541 4.56464 36.4693 6.65 39.1905 9.49999M44.1304 18C44.6962 19.9011 45 21.9151 45 24C45 26.2687 44.6403 28.4533 43.9747 30.5M38.8336 38.8649C36.1649 41.528 32.7834 43.477 29 44.4011" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="42" cy="13.5" r="2" fill="#FF5416"/>
+<circle cx="24" cy="3" r="2" fill="#FF5416"/>
+<circle cx="24" cy="45" r="2" fill="#FF5416"/>
+<circle cx="42" cy="35" r="2" fill="#FF5416"/>
+<path d="M32.8453 25.5085C31.7549 25.5085 30.7774 25.9916 30.108 26.7521L28.3927 25.5378C28.5748 25.0365 28.6793 24.4982 28.6793 23.9347C28.6793 23.381 28.5784 22.8518 28.4023 22.3578L30.1138 21.1564C30.7831 21.9131 31.7581 22.3935 32.8453 22.3935C34.8578 22.3935 36.4954 20.7562 36.4954 18.7434C36.4954 16.7306 34.8578 15.0933 32.8453 15.0933C30.8328 15.0933 29.1952 16.7306 29.1952 18.7434C29.1952 19.1037 29.2496 19.4511 29.3473 19.7801L27.6347 20.9822C26.9193 20.0946 25.8892 19.475 24.7156 19.2858V17.2217C26.369 16.8745 27.6147 15.4054 27.6147 13.6501C27.6147 11.6373 25.9772 10 23.9647 10C21.9521 10 20.3146 11.6373 20.3146 13.6501C20.3146 15.3819 21.5281 16.8328 23.1484 17.2049V19.2958C20.9371 19.6839 19.25 21.6138 19.25 23.9347C19.25 26.267 20.9538 28.2039 23.1811 28.5789V30.7867C21.5442 31.1465 20.3146 32.6063 20.3146 34.3499C20.3146 36.3627 21.9521 38 23.9647 38C25.9772 38 27.6147 36.3627 27.6147 34.3499C27.6147 32.6063 26.3851 31.1465 24.7482 30.7867V28.5788C25.8988 28.3851 26.9099 27.7776 27.618 26.9098L29.3447 28.132C29.2489 28.458 29.1952 28.802 29.1952 29.1586C29.1952 31.1714 30.8328 32.8087 32.8453 32.8087C34.8578 32.8087 36.4954 31.1714 36.4954 29.1586C36.4954 27.1458 34.8578 25.5085 32.8453 25.5085V25.5085ZM32.8453 16.9737C33.8212 16.9737 34.615 17.7678 34.615 18.7434C34.615 19.7191 33.8212 20.5131 32.8453 20.5131C31.8694 20.5131 31.0756 19.7191 31.0756 18.7434C31.0756 17.7678 31.8694 16.9737 32.8453 16.9737V16.9737ZM22.1949 13.6501C22.1949 12.6745 22.9887 11.8804 23.9647 11.8804C24.9406 11.8804 25.7343 12.6745 25.7343 13.6501C25.7343 14.6258 24.9406 15.4198 23.9647 15.4198C22.9887 15.4198 22.1949 14.6258 22.1949 13.6501V13.6501ZM25.7343 34.3499C25.7343 35.3255 24.9406 36.1196 23.9647 36.1196C22.9887 36.1196 22.1949 35.3255 22.1949 34.3499C22.1949 33.3742 22.9887 32.5802 23.9647 32.5802C24.9406 32.5802 25.7343 33.3742 25.7343 34.3499ZM23.9645 26.4028C22.6034 26.4028 21.4961 25.2958 21.4961 23.9347C21.4961 22.5736 22.6034 21.4663 23.9645 21.4663C25.3256 21.4663 26.4328 22.5736 26.4328 23.9347C26.4328 25.2958 25.3256 26.4028 23.9645 26.4028V26.4028ZM32.8453 30.9284C31.8694 30.9284 31.0756 30.1343 31.0756 29.1586C31.0756 28.183 31.8694 27.3889 32.8453 27.3889C33.8212 27.3889 34.615 28.183 34.615 29.1586C34.615 30.1343 33.8212 30.9284 32.8453 30.9284Z" fill="#03020D"/>
+</svg>

package/src/core/icons/icon-display-push-notifications-col.svg

@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.5 8L7.38462 8C4.46154 7.99973 3 9.49973 3 12.4997V39.5C3 42.5 4.46154 44 7.38462 44H36.6154C39.5385 44 41 42.5 41 39.5V21.5" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.25 10C29.25 5.16751 33.1675 1.25 38 1.25C42.8325 1.25 46.75 5.16751 46.75 10C46.75 14.8325 42.8325 18.75 38 18.75C33.1675 18.75 29.25 14.8325 29.25 10Z" fill="#FF5416"/>
+<path d="M39 6.5V13.5H37.5788V7.90479H37.5394L36 8.90967V7.59717L37.6641 6.5H39Z" fill="white"/>
+<path d="M28.7528 19H14.2551C13.6569 19 13.0832 19.232 12.6603 19.6446C12.2374 20.0573 12 20.6166 12 21.2002V30.4808C12 31.0643 12.2374 31.6245 12.6603 32.0371C13.0832 32.4498 13.6569 32.6817 14.2551 32.6817H27.6977L30.0498 34.8505C30.13 34.9242 30.2304 34.9731 30.3389 34.9917C30.4474 35.0103 30.5587 34.9975 30.6598 34.9549C30.7609 34.9122 30.8471 34.8421 30.9076 34.7523C30.968 34.6625 31.0001 34.5573 31 34.4499V21.2002C31 20.618 30.7636 20.0594 30.3424 19.6469C29.9212 19.2345 29.3495 19.0021 28.7528 19Z" stroke="#03020D" stroke-width="1.5"/>
+</svg>

package/src/core/icons/icon-gui-check-circled-fill-black.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8321 7.55471L11.1654 17.5547L9.55246 17.6247L6.21913 13.458L7.78087 12.2087L10.2599 15.3074L16.1679 6.44531L17.8321 7.55471Z" fill="black"/>
+</svg>

package/src/core/icons/icon-gui-filter-flow-step-1.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1.68174 2.24805H22.3939C22.6536 2.24792 22.904 2.32367 23.1187 2.46046C23.3329 2.59689 23.5017 2.78725 23.6159 3.00505C23.7296 3.22241 23.7879 3.46429 23.7888 3.70656C23.7898 3.94884 23.7336 4.1907 23.6217 4.40889L23.618 4.41617L21.547 8.34759C21.4172 8.59388 21.1618 8.74805 20.8834 8.74805H3.19524C2.91687 8.74805 2.66141 8.59388 2.53167 8.34759L0.458326 4.41162C0.345422 4.19369 0.288491 3.95179 0.288818 3.70936C0.289149 3.46693 0.346753 3.22517 0.460294 3.00753C0.573964 2.78964 0.74233 2.59905 0.95601 2.46221C1.17049 2.32486 1.42057 2.24847 1.68052 2.24805H1.68174Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.56484 10.248H20.511C20.5111 10.248 20.5109 10.248 20.511 10.248C20.7467 10.2479 20.9747 10.3151 21.171 10.4374C21.367 10.5595 21.5228 10.7307 21.6285 10.9279C21.7338 11.1246 21.7879 11.3441 21.7888 11.5642C21.7897 11.7844 21.7375 12.0038 21.6339 12.2013L21.63 12.2086L19.9356 15.3538C19.8047 15.5966 19.5512 15.748 19.2753 15.748H4.80316C4.52731 15.748 4.27372 15.5966 4.14289 15.3538L2.446 12.204C2.34146 12.0067 2.28851 11.7872 2.28882 11.5669C2.28913 11.3465 2.3427 11.1271 2.44783 10.9301C2.55309 10.7328 2.70836 10.5615 2.90396 10.439C3.10014 10.3161 3.32782 10.2484 3.56365 10.248L3.56484 10.248ZM20.1743 11.748L18.8274 14.248H5.25102L3.90417 11.748H20.1743ZM20.5122 11.748C20.5125 11.748 20.5119 11.748 20.5122 11.748Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4468 17.248L5.44795 17.248L18.6282 17.248C18.6283 17.248 18.6281 17.248 18.6282 17.248C18.8377 17.248 19.0419 17.3055 19.2194 17.4121C19.3969 17.5187 19.5404 17.6697 19.6388 17.8468C19.7369 18.0234 19.788 18.2218 19.7888 18.4218C19.7896 18.6218 19.7404 18.8202 19.6439 18.9976L19.6399 19.005L18.3219 21.3638C18.1894 21.6011 17.9389 21.748 17.6672 21.748H6.41109C6.13935 21.748 5.88888 21.6011 5.75634 21.3638L4.43588 19.0004C4.33849 18.8231 4.28853 18.6246 4.28882 18.4244C4.28911 18.2241 4.33965 18.0258 4.43757 17.8488C4.5356 17.6716 4.67873 17.5204 4.85584 17.4135C5.03324 17.3063 5.23713 17.2484 5.4468 17.248ZM18.0651 18.748H6.01314L6.85118 20.248H17.2271L18.0651 18.748Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-gui-filter-flow-step-2.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22.3939 2.24805H1.68174ZM1.68174 2.24805L1.68052 2.24805ZM22.3939 2.24805C22.6536 2.24792 22.904 2.32367 23.1187 2.46046C23.3329 2.59689 23.5017 2.78725 23.6159 3.00505C23.7296 3.22241 23.7879 3.46429 23.7888 3.70656C23.7898 3.94884 23.7336 4.1907 23.6217 4.40889L23.618 4.41617L21.547 8.34759C21.4172 8.59388 21.1618 8.74805 20.8834 8.74805H3.19524C2.91687 8.74805 2.66141 8.59388 2.53167 8.34759L0.458326 4.41162C0.345422 4.19369 0.288491 3.95179 0.28882 3.70936C0.289149 3.46693 0.346753 3.22517 0.460294 3.00753C0.573964 2.78964 0.74233 2.59905 0.95601 2.46221C1.17049 2.32486 1.42057 2.24847 1.68052 2.24805M22.2745 3.74805H1.80416L3.64786 7.24805H20.4308L22.2745 3.74805ZM22.395 3.74805C22.3953 3.74805 22.3947 3.74805 22.395 3.74805Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.56484 10.248H20.511C20.7467 10.2479 20.9747 10.3151 21.171 10.4374C21.367 10.5595 21.5228 10.7307 21.6285 10.9279C21.7338 11.1246 21.7879 11.3441 21.7888 11.5642C21.7897 11.7844 21.7375 12.0038 21.6339 12.2013L21.63 12.2086L19.9356 15.3538C19.8047 15.5966 19.5512 15.748 19.2753 15.748H4.80316C4.52731 15.748 4.27372 15.5966 4.14289 15.3538L2.446 12.204C2.34146 12.0067 2.28851 11.7872 2.28882 11.5669C2.28913 11.3465 2.3427 11.1271 2.44783 10.9301C2.55309 10.7328 2.70836 10.5615 2.90396 10.439C3.10014 10.3161 3.32782 10.2484 3.56365 10.248L3.56484 10.248Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4468 17.248L5.44795 17.248L18.6282 17.248C18.6283 17.248 18.6281 17.248 18.6282 17.248C18.8377 17.248 19.0419 17.3055 19.2194 17.4121C19.3969 17.5187 19.5404 17.6697 19.6388 17.8468C19.7369 18.0234 19.788 18.2218 19.7888 18.4218C19.7896 18.6218 19.7404 18.8202 19.6439 18.9976L19.6399 19.005L18.3219 21.3638C18.1894 21.6011 17.9389 21.748 17.6672 21.748H6.41109C6.13935 21.748 5.88888 21.6011 5.75634 21.3638L4.43588 19.0004C4.33849 18.8231 4.28853 18.6246 4.28882 18.4244C4.28911 18.2241 4.33965 18.0258 4.43757 17.8488C4.5356 17.6716 4.67873 17.5204 4.85584 17.4135C5.03324 17.3063 5.23713 17.2484 5.4468 17.248ZM18.0651 18.748H6.01314L6.85118 20.248H17.2271L18.0651 18.748Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-gui-filter-flow-step-3.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22.3939 2.24805H1.68174ZM1.68174 2.24805L1.68052 2.24805ZM22.3939 2.24805C22.6536 2.24792 22.904 2.32367 23.1187 2.46046C23.3329 2.59689 23.5017 2.78725 23.6159 3.00505C23.7296 3.22241 23.7879 3.46429 23.7888 3.70656C23.7898 3.94884 23.7336 4.1907 23.6217 4.40889L23.618 4.41617L21.547 8.34759C21.4172 8.59388 21.1618 8.74805 20.8834 8.74805H3.19524C2.91687 8.74805 2.66141 8.59388 2.53167 8.34759L0.458326 4.41162C0.345422 4.19369 0.288491 3.95179 0.28882 3.70936C0.289149 3.46693 0.346753 3.22517 0.460294 3.00753C0.573964 2.78964 0.74233 2.59905 0.95601 2.46221C1.17049 2.32486 1.42057 2.24847 1.68052 2.24805M22.2745 3.74805H1.80416L3.64786 7.24805H20.4308L22.2745 3.74805ZM22.395 3.74805C22.3953 3.74805 22.3947 3.74805 22.395 3.74805Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.56484 10.248H20.511C20.5111 10.248 20.5109 10.248 20.511 10.248C20.7467 10.2479 20.9747 10.3151 21.171 10.4374C21.367 10.5595 21.5228 10.7307 21.6285 10.9279C21.7338 11.1246 21.7879 11.3441 21.7888 11.5642C21.7897 11.7844 21.7375 12.0038 21.6339 12.2013L21.63 12.2086L19.9356 15.3538C19.8047 15.5966 19.5512 15.748 19.2753 15.748H4.80316C4.52731 15.748 4.27372 15.5966 4.14289 15.3538L2.446 12.204C2.34146 12.0067 2.28851 11.7872 2.28882 11.5669C2.28913 11.3465 2.3427 11.1271 2.44783 10.9301C2.55309 10.7328 2.70836 10.5615 2.90396 10.439C3.10014 10.3161 3.32782 10.2484 3.56365 10.248L3.56484 10.248ZM20.1743 11.748L18.8274 14.248H5.25102L3.90417 11.748H20.1743ZM20.5122 11.748C20.5125 11.748 20.5119 11.748 20.5122 11.748Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4468 17.248L5.44795 17.248L18.6282 17.248C18.8377 17.248 19.0419 17.3055 19.2194 17.4121C19.3969 17.5187 19.5404 17.6697 19.6388 17.8468C19.7369 18.0234 19.788 18.2218 19.7888 18.4218C19.7896 18.6218 19.7404 18.8202 19.6439 18.9976L19.6399 19.005L18.3219 21.3638C18.1894 21.6011 17.9389 21.748 17.6672 21.748H6.41109C6.13935 21.748 5.88888 21.6011 5.75634 21.3638L4.43588 19.0004C4.33849 18.8231 4.28853 18.6246 4.28882 18.4244C4.28911 18.2241 4.33965 18.0258 4.43757 17.8488C4.5356 17.6716 4.67873 17.5204 4.85584 17.4135C5.03324 17.3063 5.23713 17.2484 5.4468 17.248Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-gui-resources.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 fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5C4.30964 1.5 3.75 2.05964 3.75 2.75V3.75H5C5.41421 3.75 5.75 4.08579 5.75 4.5C5.75 4.91421 5.41421 5.25 5 5.25H3.75V6.75H5C5.41421 6.75 5.75 7.08579 5.75 7.5C5.75 7.91421 5.41421 8.25 5 8.25H3.75V9.75H5C5.41421 9.75 5.75 10.0858 5.75 10.5C5.75 10.9142 5.41421 11.25 5 11.25H3.75V12.75H5C5.41421 12.75 5.75 13.0858 5.75 13.5C5.75 13.9142 5.41421 14.25 5 14.25H3.75V15.75H5C5.41421 15.75 5.75 16.0858 5.75 16.5C5.75 16.9142 5.41421 17.25 5 17.25H3.75V18.75H5C5.41421 18.75 5.75 19.0858 5.75 19.5C5.75 19.9142 5.41421 20.25 5 20.25H3.75V21.25C3.75 21.9404 4.30964 22.5 5 22.5H18.5C19.1904 22.5 19.75 21.9404 19.75 21.25V19.75H12C10.4812 19.75 9.25 18.5188 9.25 17V12C9.25 10.4812 10.4812 9.25 12 9.25H19.75V3.75C19.75 2.50736 18.7426 1.5 17.5 1.5H5ZM2.25 2.75V3.75H1C0.585786 3.75 0.25 4.08579 0.25 4.5C0.25 4.91421 0.585786 5.25 1 5.25H2.25V6.75H1C0.585786 6.75 0.25 7.08579 0.25 7.5C0.25 7.91421 0.585786 8.25 1 8.25H2.25V9.75H1C0.585786 9.75 0.25 10.0858 0.25 10.5C0.25 10.9142 0.585786 11.25 1 11.25H2.25V12.75H1C0.585786 12.75 0.25 13.0858 0.25 13.5C0.25 13.9142 0.585786 14.25 1 14.25H2.25V15.75H1C0.585786 15.75 0.25 16.0858 0.25 16.5C0.25 16.9142 0.585786 17.25 1 17.25H2.25V18.75H1C0.585786 18.75 0.25 19.0858 0.25 19.5C0.25 19.9142 0.585786 20.25 1 20.25H2.25V21.25C2.25 22.7688 3.48122 24 5 24H18.5C20.0188 24 21.25 22.7688 21.25 21.25V19.7388C22.6516 19.6125 23.75 18.4345 23.75 17V12C23.75 10.5655 22.6516 9.38752 21.25 9.26121V3.75C21.25 1.67893 19.5711 0 17.5 0H5C3.48122 0 2.25 1.23122 2.25 2.75ZM20.5 10.75H12C11.3096 10.75 10.75 11.3096 10.75 12V17C10.75 17.6904 11.3096 18.25 12 18.25H20.5H21C21.6904 18.25 22.25 17.6904 22.25 17V12C22.25 11.3096 21.6904 10.75 21 10.75H20.5ZM12.5 4.25C12.5 3.42157 13.1716 2.75 14 2.75H17C17.8284 2.75 18.5 3.42157 18.5 4.25V5.25C18.5 6.07843 17.8284 6.75 17 6.75H14C13.1716 6.75 12.5 6.07843 12.5 5.25V4.25ZM14 3.75C13.7239 3.75 13.5 3.97386 13.5 4.25V5.25C13.5 5.52614 13.7239 5.75 14 5.75H17C17.2761 5.75 17.5 5.52614 17.5 5.25V4.25C17.5 3.97386 17.2761 3.75 17 3.75H14ZM15.5 13.2582L17.4746 14.4992L15.5 15.7402V13.2582ZM18.0421 15.3236C18.6526 14.9399 18.6526 14.0585 18.0421 13.6747L16.0176 12.4024C15.377 11.9998 14.5 12.4363 14.5 13.2268V15.7716C14.5 16.5621 15.377 16.9986 16.0176 16.596L18.0421 15.3236Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-tech-apachekafka.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.3062 26.586C30.437 26.586 28.7612 27.4141 27.6137 28.7179L24.6732 26.6362C24.9853 25.7768 25.1645 24.854 25.1645 23.8881C25.1645 22.9389 24.9915 22.0316 24.6897 21.1849L27.6236 19.1252C28.7711 20.4225 30.4424 21.2461 32.3062 21.2461C35.7562 21.2461 38.5635 18.4393 38.5635 14.9888C38.5635 11.5382 35.7562 8.73143 32.3062 8.73143C28.8562 8.73143 26.0489 11.5382 26.0489 14.9888C26.0489 15.6064 26.1422 16.2019 26.3097 16.7659L23.3737 18.8266C22.1473 17.3051 20.3815 16.2428 18.3696 15.9185V12.3801C21.204 11.7848 23.3396 9.26646 23.3396 6.25732C23.3396 2.80681 20.5323 0 17.0823 0C13.6322 0 10.825 2.80681 10.825 6.25732C10.825 9.22616 12.9053 11.7134 15.683 12.3512V15.9356C11.8921 16.601 9 19.9094 9 23.8881C9 27.8862 11.9208 31.2067 15.739 31.8495V35.6343C12.9329 36.2511 10.825 38.7536 10.825 41.7427C10.825 45.1932 13.6322 48 17.0823 48C20.5323 48 23.3396 45.1932 23.3396 41.7427C23.3396 38.7536 21.2317 36.2511 18.4256 35.6343V31.8494C20.3979 31.5172 22.1313 30.4759 23.3451 28.9882L26.3053 31.0834C26.1409 31.6423 26.0489 32.232 26.0489 32.8433C26.0489 36.2938 28.8562 39.1007 32.3062 39.1007C35.7562 39.1007 38.5635 36.2938 38.5635 32.8433C38.5635 29.3928 35.7562 26.586 32.3062 26.586ZM32.3062 11.9549C33.9792 11.9549 35.3399 13.3162 35.3399 14.9888C35.3399 16.6613 33.9792 18.0225 32.3062 18.0225C30.6332 18.0225 29.2725 16.6613 29.2725 14.9888C29.2725 13.3162 30.6332 11.9549 32.3062 11.9549ZM14.0484 6.25732C14.0484 4.58479 15.4093 3.22359 17.0823 3.22359C18.7553 3.22359 20.116 4.58479 20.116 6.25732C20.116 7.92986 18.7553 9.29106 17.0823 9.29106C15.4093 9.29106 14.0484 7.92986 14.0484 6.25732ZM20.116 41.7427C20.116 43.4152 18.7553 44.7764 17.0823 44.7764C15.4093 44.7764 14.0484 43.4152 14.0484 41.7427C14.0484 40.0701 15.4093 38.7089 17.0823 38.7089C18.7553 38.7089 20.116 40.0701 20.116 41.7427ZM17.082 28.1192C14.7487 28.1192 12.8505 26.2213 12.8505 23.8881C12.8505 21.5548 14.7487 19.6566 17.082 19.6566C19.4152 19.6566 21.3134 21.5548 21.3134 23.8881C21.3134 26.2213 19.4152 28.1192 17.082 28.1192ZM32.3062 35.8772C30.6332 35.8772 29.2725 34.5159 29.2725 32.8433C29.2725 31.1708 30.6332 29.8096 32.3062 29.8096C33.9792 29.8096 35.3399 31.1708 35.3399 32.8433C35.3399 34.5159 33.9792 35.8772 32.3062 35.8772Z" fill="#03020D"/>
+</svg>

package/src/core/icons/stackoverflow.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.8833 17.0404L6.44573 14.8304L6.89029 12.7367L17.3279 14.9467L16.8833 17.0404ZM17.4825 14.3457L7.81808 9.82876L8.72653 7.89014L18.391 12.4071L17.4825 14.3457ZM18.7002 11.9031L10.5048 5.05977L11.8771 3.41195L20.0726 10.2552L18.7002 11.9031ZM14.0806 1.27948L15.8009 0L22.1601 8.58804L20.4398 9.86753L14.0806 1.27948ZM16.8833 19.7351H6.25244V17.6026H16.8833V19.7351ZM21.1356 15.4701H19.0094V21.8675H4.12617V15.4701H2V24H21.1356V15.4701Z" fill="#03020D"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.8833 17.0404L6.44573 14.8304L6.89029 12.7367L17.3279 14.9467L16.8833 17.0404ZM17.4825 14.3457L7.81808 9.82876L8.72653 7.89014L18.391 12.4071L17.4825 14.3457ZM18.7002 11.9031L10.5048 5.05977L11.8771 3.41195L20.0726 10.2552L18.7002 11.9031ZM14.0806 1.27948L15.8009 0L22.1601 8.58804L20.4398 9.86753L14.0806 1.27948ZM16.8833 19.7351H6.25244V17.6026H16.8833V19.7351ZM21.1356 15.4701H19.0094V21.8675H4.12617V15.4701H2V24H21.1356V15.4701Z" fill="currentColor"/>
 </svg>

package/src/core/icons/youtube.svg

@@ -1,6 +1,6 @@
 <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g clip-path="url(#clip0_1509_18255)">
-    <path d="M30.525 3.44433C30.1655 2.09844 29.113 1.03726 27.778 0.6749C25.3391 0.00195312 15.5834 0.00195312 15.5834 0.00195312C15.5834 0.00195312 5.82773 0.00195312 3.38881 0.649017C2.0795 1.01137 1.00124 2.09844 0.64182 3.44433C0 5.90318 0 11.002 0 11.002C0 11.002 0 16.1268 0.64182 18.5597C1.00124 19.9056 2.05382 20.9668 3.38881 21.3292C5.8534 22.0021 15.5834 22.0021 15.5834 22.0021C15.5834 22.0021 25.3391 22.0021 27.778 21.3551C29.113 20.9927 30.1655 19.9315 30.525 18.5856C31.1668 16.1268 31.1668 11.0279 31.1668 11.0279C31.1668 11.0279 31.1925 5.90318 30.525 3.44433Z" fill="#282828"/>
+    <path d="M30.525 3.44433C30.1655 2.09844 29.113 1.03726 27.778 0.6749C25.3391 0.00195312 15.5834 0.00195312 15.5834 0.00195312C15.5834 0.00195312 5.82773 0.00195312 3.38881 0.649017C2.0795 1.01137 1.00124 2.09844 0.64182 3.44433C0 5.90318 0 11.002 0 11.002C0 11.002 0 16.1268 0.64182 18.5597C1.00124 19.9056 2.05382 20.9668 3.38881 21.3292C5.8534 22.0021 15.5834 22.0021 15.5834 22.0021C15.5834 22.0021 25.3391 22.0021 27.778 21.3551C29.113 20.9927 30.1655 19.9315 30.525 18.5856C31.1668 16.1268 31.1668 11.0279 31.1668 11.0279C31.1668 11.0279 31.1925 5.90318 30.525 3.44433Z" fill="currentColor"/>
     <path d="M20.5892 11.0021L12.4766 6.2915V15.7128L20.5892 11.0021Z" fill="white"/>
   </g>
   <defs>

package/src/core/styles/buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -24,7 +24,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
     @apply focus:outline-gui-focus;
     @apply inline-flex items-center justify-center;
   }
@@ -40,7 +40,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -50,7 +50,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block border-btn border-cool-black rounded p-btn;
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -60,7 +60,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus:outline-gui-focus;

package/src/core/styles/forms.css

@@ -1,10 +1,10 @@
 @layer components {
   .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-sans;
+    @apply flex items-start mb-16 font-manrope font-medium;
   }
 
   .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans;
+    @apply flex items-start mb-12 font-manrope font-medium;
   }
 
   .ui-checkbox-input {
@@ -23,12 +23,12 @@
 
   .ui-checkbox-label-p1 {
     @apply select-none;
-    @apply text-p1 font-light text-cool-black;
+    @apply text-p1 font-medium text-cool-black;
   }
 
   .ui-checkbox-label-p2 {
     @apply select-none;
-    @apply text-p2 font-light text-cool-black;
+    @apply text-p2 font-medium text-cool-black;
   }
 
   .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -49,7 +49,7 @@
   }
 
   .ui-textarea {
-    @apply font-sans font-light text-cool-black text-p1;
+    @apply font-manrope font-medium text-cool-black text-p1;
     @apply p-input mb-16;
     @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;

package/src/core/styles/properties.css

@@ -1,34 +1,132 @@
 @layer base {
   :root {
-    --color-cool-black: #03020d;
-    --color-active-orange: #ff5416;
-    --color-red-orange: #e40000;
-    --color-white: #ffffff;
-    --color-electric-cyan: #4af7ff;
-    --color-zingy-green: #08ff13;
-    --color-bright-red: #ff2739;
-    --color-jazzy-pink: #ff17d2;
-    --color-extra-light-grey: #fafafb;
-    --color-light-grey: #f5f5f6;
-    --color-mid-grey: #d9d9da;
-    --color-dark-grey: #76767c;
-    --color-charcoal-grey: #292831;
-    --color-gui-default: #0073e6;
-    --color-gui-hover: #0867c4;
-    --color-gui-focus: #0073e6;
+    /* Neutral colors */
+    --color-neutral-000: #ffffff;
+    --color-neutral-100: #f8fafc;
+    --color-neutral-200: #f4f8fb;
+    --color-neutral-300: #edf1f7;
+    --color-neutral-400: #e2e7ef;
+    --color-neutral-500: #c6ced9;
+    --color-neutral-600: #adb6c2;
+    --color-neutral-700: #89929f;
+    --color-neutral-800: #667085;
+    --color-neutral-900: #39414e;
+    --color-neutral-1000: #2b303b;
+    --color-neutral-1100: #202531;
+    --color-neutral-1200: #141924;
+    --color-neutral-1300: #03020d;
+
+    /* Ably orange */
+    --color-orange-100: #fff5f1;
+    --color-orange-200: #ffe3d8;
+    --color-orange-300: #ffc4ae;
+    --color-orange-400: #ff9c79;
+    --color-orange-500: #ff723f;
+    --color-orange-600: #ff5416;
+    --color-orange-700: #ff2739;
+    --color-orange-800: #e40000;
+    --color-orange-900: #b82202;
+    --color-orange-1000: #751500;
+    --color-orange-1100: #2a0b00;
+
+    /* Secondary colours */
+    --color-yellow-100: #fffbef;
+    --color-yellow-200: #fff0ba;
+    --color-yellow-300: #ffe27c;
+    --color-yellow-400: #ffd43d;
+    --color-yellow-500: #f8c100;
+    --color-yellow-600: #e8a700;
+    --color-yellow-700: #ac8600;
+    --color-yellow-800: #654f00;
+    --color-yellow-900: #291c01;
+    --color-green-100: #f1fff1;
+    --color-green-200: #b8ffbb;
+    --color-green-300: #80ff85;
+    --color-green-400: #08ff13;
+    --color-green-500: #00e80b;
+    --color-green-600: #00c008;
+    --color-green-700: #008e06;
+    --color-green-800: #005303;
+    --color-green-900: #002a02;
+    --color-blue-100: #f1fbff;
+    --color-blue-200: #b8eaff;
+    --color-blue-300: #80d9ff;
+    --color-blue-400: #4ad4ff;
+    --color-blue-500: #2cc0ff;
+    --color-blue-600: #00a5ec;
+    --color-blue-700: #0284cd;
+    --color-blue-800: #004b75;
+    --color-blue-900: #001b2a;
+    --color-violet-100: #f7f2fe;
+    --color-violet-200: #d8bcfb;
+    --color-violet-300: #b986f8;
+    --color-violet-400: #9951f5;
+    --color-violet-500: #7a1bf2;
+    --color-violet-600: #5f0bc9;
+    --color-violet-700: #460894;
+    --color-violet-800: #2d055e;
+    --color-violet-900: #130228;
+    --color-pink-100: #fff1fc;
+    --color-pink-200: #ffb8f1;
+    --color-pink-300: #ff80e6;
+    --color-pink-400: #ff47db;
+    --color-pink-500: #ff17d2;
+    --color-pink-600: #d400ab;
+    --color-pink-700: #9c007e;
+    --color-pink-800: #630050;
+    --color-pink-900: #2a0022;
+
+    /* GUI colours */
+    /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
+    --color-gui-blue-default-light: #006edc;
+    --color-gui-blue-hover-light: #0862b9;
+    --color-gui-blue-active-light: #074095;
+    --color-gui-blue-default-dark: #4da6ff;
+    --color-gui-blue-hover-dark: #2894ff;
+    --color-gui-blue-active-dark: #0080ff;
+    --color-gui-blue-focus: #80b9f2;
+    --color-gui-unavailable: #a8a8a8;
+    --color-gui-success-green: #11cb24;
+    --color-gui-error-red: #fb0c0c;
+    --color-gui-focus: #80b9f2;
     --color-gui-focus-outline: #80b9f2;
-    --color-gui-active: #074095;
     --color-gui-visited: #4887c2;
-    --color-gui-unavailable: #a8a8a8;
-    --color-gui-error: #fb0c0c;
-    --color-gui-success: #11cb24;
+
+    /* Colours replaced by neutral colours */
+    --color-white: var(--color-neutral-000);
+    --color-extra-light-grey: var(--color-neutral-100);
+    --color-light-grey: var(--color-neutral-200);
+    --color-mid-grey: var(--color-neutral-500);
+    --color-dark-grey: var(--color-neutral-800);
+    --color-charcoal-grey: var(--color-neutral-1000);
+    --color-cool-black: var(--color-neutral-1300);
+
+    /* Colours replaced by orange colours */
+    --color-active-orange: var(--color-orange-600);
+    --color-bright-red: var(--color-orange-700);
+    --color-red-orange: var(--color-orange-800);
+
+    /* Colours replaced by secondary colours */
+    --color-electric-cyan: var(--color-blue-400);
+    --color-zingy-green: var(--color-green-400);
+    --color-jazzy-pink: var(--color-pink-500);
+
+    /* Colours replaced by GUI colours */
+    --color-gui-default: var(--color-gui-blue-default-light);
+    --color-gui-hover: var(--color-gui-blue-hover-light);
+    --color-gui-active: var(--color-gui-blue-active-light);
+    --color-gui-error: var(--color-gui-error-red);
+    --color-gui-success: var(--color-gui-success-green);
+    --color-gui-default-dark: var(--color-gui-blue-default-dark);
+    --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
+    --color-gui-active-dark: var(--color-gui-blue-active-dark);
 
     /* code syntax: theme */
-    --syntax-black: var(--color-cool-black);
-    --syntax-dark-grey: var(--color-dark-grey);
-    --syntax-mid-grey: var(--color-mid-grey);
-    --syntax-light-grey: var(--color-light-grey);
-    --syntax-extra-light-grey: var(--color-extra-light-grey);
+    --syntax-black: var(--color-neutral-1300);
+    --syntax-dark-grey: var(--color-neutral-800);
+    --syntax-mid-grey: var(--color-neutral-500);
+    --syntax-light-grey: var(--color-neutral-200);
+    --syntax-extra-light-grey: var(--color-neutral-100);
     --syntax-orange: #e78c45;
     --syntax-yellow: #e7c547;
     --syntax-blue: #3490ec;
@@ -70,44 +168,51 @@
 
     --gradient-hot-pink: linear-gradient(
       80.2deg,
-      var(--color-bright-red) 0%,
+      var(--color-orange-700) 0%,
       var(--color-jazzy-pink) 100%
     );
 
-    --fs-title-xl: 4rem;
-    --fs-title: 3.5rem;
-    --fs-title-xs: 3rem;
-    --fs-h1-xl: 3.5rem;
-    --fs-h1: 3rem;
-    --fs-h1-xs: 2.625rem;
-    --fs-h2-xl: 2.5rem;
+    --fs-title-xl: 3rem;
+    --fs-title: 2.75rem;
+    --fs-title-xs: 2.5rem;
+    --fs-h1-xl: 2.5rem;
+    --fs-h1: 2.25rem;
+    --fs-h1-xs: 2rem;
+
+    --fs-h2-xl: 2.125rem;
     --fs-h2: 2rem;
-    --fs-h2-xs: 1.875rem;
+    --fs-h2-xs: 1.75rem;
+
     --fs-h3: 1.5rem;
-    --fs-h4: 1.125rem;
-    --fs-p1: 1.125rem;
-    --fs-p2: 1rem;
+    --fs-h4: 1.25rem;
+    --fs-h5: 1rem;
+
+    --fs-p1: 1rem;
+    --fs-p2: 0.938rem;
     --fs-p3: 0.875rem;
     --fs-standfirst-xl: 2.25rem;
     --fs-standfirst: 1.5rem;
-    --fs-sub-header: 1.5rem;
-    --fs-sub-header-xs: 1.125rem;
+    --fs-sub-header: 1.125rem;
+    --fs-sub-header-xs: 1.063rem;
     --fs-overline1: 1rem;
     --fs-overline2: 0.875rem;
-    --fs-btn1: 1.125rem;
-    --fs-btn2: 1rem;
+    --fs-btn1: 1rem;
+    --fs-btn2: 0.938rem;
     --fs-btn3: 0.875rem;
-    --fs-menu1: 1.125rem;
-    --fs-menu2: 1rem;
+    --fs-menu1: 1rem;
+    --fs-menu2: 0.938rem;
     --fs-menu3: 0.875rem;
-    --fs-quote: 1.5rem;
-    --fs-code: 0.875rem;
+    --fs-quote: 1.25rem;
+    --fs-code: 0.938rem;
+    --fs-code2: 0.813rem;
 
     --lh-dense: 1;
     --lh-tight: 1.125;
     --lh-snug: 1.15;
+    --lh-min-normal: 1.2;
     --lh-normal: 1.25;
     --lh-relaxed: 1.45;
+    --lh-extra-relaxed: 1.6;
 
     --ls-tighten-0_025: -0.025em;
     --ls-tighten-0_02: -0.02em;
@@ -115,7 +220,9 @@
     --ls-tighten-0_01: -0.01em;
     --ls-tighten-0_005: -0.005em;
     --ls-tighten-0_0025: -0.0025em;
+    --ls-tighten-0_0015: -0.0015em;
     --ls-widen-0_1: 0.1em;
+    --ls-widen-0_16: 0.16em;
     --ls-widen-0_15: 0.15em;
 
     --spacing-0: 0px;
@@ -130,6 +237,7 @@
     --spacing-20: 1.25rem;
     --spacing-24: 1.5rem;
     --spacing-32: 2rem;
+    --spacing-36: 2.25rem;
     --spacing-40: 2.5rem;
     --spacing-48: 3rem;
     --spacing-64: 4rem;

package/src/core/styles/text.css

@@ -1,46 +1,52 @@
 @layer components {
   .ui-text-title {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-manrope font-extrabold text-cool-black;
     @apply text-title-xs xs:text-title xl:text-title-xl;
-    @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
   }
 
   .ui-text-h1 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-manrope font-extrabold text-cool-black;
     @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-    @apply tracking-tighten-0.01;
+    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
   }
 
   .ui-text-h2 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-manrope font-extrabold text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.005;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
   }
 
   .ui-text-h3 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-manrope font-extrabold text-cool-black;
     @apply text-h3;
-    @apply tracking-tighten-0.0025;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h4 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-h4 uppercase;
-    @apply tracking-widen-0.1;
+    @apply font-manrope font-extrabold text-cool-black;
+    @apply text-h4;
+    @apply tracking-tighten-0.0015;
+  }
+
+  .ui-text-h5 {
+    @apply font-manrope font-extrabold text-cool-black;
+    @apply text-h5;
+    @apply tracking-tighten-0.0025;
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-manrope font-medium text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-manrope font-medium text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-manrope font-medium text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -51,60 +57,63 @@
   }
 
   .ui-text-quote {
-    @apply font-sans font-light text-cool-black;
-    @apply text-quote;
-    @apply tracking-tighten-0.025;
+    @apply font-manrope font-normal text-cool-black;
+    @apply text-quote leading-normal;
+    @apply tracking-tighten-0.0015;
   }
 
   .ui-text-sub-header {
-    @apply font-sans font-light text-dark-grey;
-    @apply text-sub-header-xs xs:text-sub-header;
-    @apply tracking-tighten-0.025;
+    @apply font-manrope font-semibold text-neutral-900;
+    @apply text-sub-header-xs xs:text-sub-header leading-normal;
   }
 
   .ui-text-overline1 {
-    @apply font-sans font-medium text-dark-grey uppercase;
-    @apply text-overline1;
-    @apply tracking-widen-0.15;
+    @apply font-jetbrains_mono font-medium text-active-orange uppercase;
+    @apply text-overline1 leading-normal;
+    @apply tracking-widen-0.16;
   }
 
   .ui-text-overline2 {
-    @apply font-sans font-medium text-dark-grey uppercase;
-    @apply text-overline2;
-    @apply tracking-widen-0.1;
+    @apply font-jetbrains_mono font-medium text-active-orange uppercase;
+    @apply text-overline2 leading-normal;
+    @apply tracking-widen-0.16;
   }
 
   .ui-text-menu1 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu1;
+    @apply font-manrope font-medium text-cool-black;
+    @apply text-menu1 leading-snug;
   }
 
   .ui-text-menu2 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu2;
+    @apply font-manrope font-medium text-cool-black;
+    @apply text-menu2 leading-snug;
   }
 
   .ui-text-menu3 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu3;
+    @apply font-manrope font-medium text-cool-black;
+    @apply text-menu3 leading-snug;
   }
 
   .ui-text-code {
-    @apply font-mono font-semibold text-code;
+    @apply font-jetbrains_mono font-medium text-code;
+  }
+
+  .ui-text-code2 {
+    @apply font-jetbrains_mono font-medium text-code2;
   }
 
   .ui-text-code-inline {
-    @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @apply font-jetbrains_mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
   }
 
   .ui-unordered-list {
-    @apply text-p1 font-light text-cool-black;
-    @apply list-disc ml-32 mb-24;
+    @apply text-p1 font-medium text-cool-black;
+    @apply list-disc ml-32 my-16;
   }
 
   .ui-ordered-list {
-    @apply text-p1 font-light text-cool-black;
-    @apply ml-32 mb-24 list-decimal;
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16 list-decimal;
   }
 
   .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -121,11 +130,21 @@
   }
 
   .ui-unordered-list ul ul {
-    @apply list-square;
+    @apply list-square my-8;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply my-8;
+  }
+
+  .ui-ordered-list li,
+  .ui-unordered-list li {
+    @apply font-medium font-manrope tracking-widen-0;
+    line-height: var(--lh-extra-relaxed);
   }
 
   .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-light text-cool-black;
+    @apply text-p1 font-medium text-cool-black;
     @apply list-disc ml-32 mt-32 -mb-12;
   }
 

package/src/core/utils/syntax-highlighter-registry.js

@@ -22,6 +22,7 @@ import php from "highlight.js/lib/languages/php";
 import python from "highlight.js/lib/languages/python";
 import ruby from "highlight.js/lib/languages/ruby";
 import swift from "highlight.js/lib/languages/swift";
+import kotlin from "highlight.js/lib/languages/kotlin";
 import sql from "highlight.js/lib/languages/sql";
 import xml from "highlight.js/lib/languages/xml";
 import yaml from "highlight.js/lib/languages/yaml";
@@ -44,6 +45,7 @@ const registry = [
   { label: "C++", key: "cpp", module: cpp },
   { label: "Dart", key: "dart", module: dart },
   { label: "Swift", key: "swift", module: swift },
+  { label: "Kotlin", key: "kotlin", module: kotlin },
   { label: "Objective C", key: "objectivec", module: objectivec },
   { label: "Node.js", key: "javascript", module: javascript },
   { label: "JSON", key: "json", module: json },

package/src/core/utils/syntax-highlighter.css

@@ -1,5 +1,7 @@
 @layer base {
   @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
 }
 
 @layer components {