@ably/ui 5.3.0 → 6.0.1-dev.6103afe

package/core/styles.css

@@ -45,10 +45,27 @@
     --icon-color-github: #000000;
 
     --gradient-active-orange: linear-gradient(
-      62deg,
-      var(--color-active-orange) 0,
-      var(--color-active-orange) 60%,
-      var(--color-red-orange) 100%
+      61.2deg,
+      var(--color-active-orange) 10.46%,
+      #fe5215 38.63%,
+      #fc4a13 54.38%,
+      #f73c10 67.07%,
+      #f1280a 78.13%,
+      #e90f04 88.02%,
+      var(--color-red-orange) 92.73%
+    );
+
+    /* Used for smooth transitions from gradient to non-gradient backgrounds */
+    --gradient-transparent: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0)
+    );
+
+    --gradient-hot-pink: linear-gradient(
+      80.2deg,
+      var(--color-bright-red) 0%,
+      var(--color-jazzy-pink) 100%
     );
 
     --fs-title-xl: 4rem;
@@ -73,11 +90,15 @@
     --fs-overline2: 0.875rem;
     --fs-btn1: 1.125rem;
     --fs-btn2: 1rem;
+    --fs-btn3: 0.875rem;
     --fs-menu1: 1.125rem;
     --fs-menu2: 1rem;
     --fs-menu3: 0.875rem;
     --fs-quote: 1.5rem;
+    --fs-code1: 1rem;
+    --fs-code2: 0.875rem;
 
+    --lh-dense: 1;
     --lh-tight: 1.125;
     --lh-snug: 1.15;
     --lh-normal: 1.25;
@@ -109,17 +130,24 @@
     --spacing-80: 5rem;
     --spacing-88: 5.5rem;
     --spacing-96: 6rem;
+    --spacing-128: 8rem;
     --spacing-160: 10rem;
     --spacing-256: 16rem;
 
-    --spacing-btn: 0.9375rem 1.5rem; /* 15px 24px */
-    --spacing-btn-small: 0.6875rem 1rem; /* 11px 16px */
+    --spacing-btn-small: 0.875rem 1.25rem; /* 14px 16px */
+    --spacing-btn-xsmall: 0.875rem 1rem; /* 14px 16px */
+    --spacing-btn: 0.875rem 1.5rem; /* 14px 24px */
+    --spacing-btn-large: 0.875rem 1.75rem; /* 14px 28px */
     --spacing-menu-row: 0.625rem 0.5rem 0.6875rem; /* 10px 8px 11px */
     --spacing-menu-row-snug: 0.4375rem 0.5rem 0.375rem; /* 7px 8px 6px */
     --spacing-menu-row-title: 0.6875rem 0.5rem; /* 11px 8px */
     --spacing-media: 0.5rem; /* 8px */
     --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
     --spacing-overline: 0.6875rem 0; /* 11px 0 */
+    --spacing-chip-xsmall: 0.375rem 0.5rem; /* 6px 8px */
+    --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
+    --spacing-chip: 0.75rem 1rem; /* 6px 8px */
+    --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
 
     /* In components, when looking at implementing viewport margin and spacing between elements,
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
@@ -145,8 +173,39 @@
     @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;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-alt {
+    transition: background-position 0.2s;
+    background: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 5%,
+      #fe5215 19%,
+      #fc4a13 27%,
+      #f73c10 33%,
+      #f1280a 39%,
+      #e90f04 44%,
+      var(--color-red-orange) 50%
+    );
+    background-size: 200% 100%;
+    background-position: 0% 0%;
+
+    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply focus:outline-gui-focus;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-alt:hover,
+  .ui-btn-alt:focus {
+    background-position: 100% 0%;
+  }
+
+  .ui-btn-alt:disabled {
+    background: linear-gradient(var(--gradient-transparent));
+    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
   }
 
   .ui-btn-invert {
@@ -154,8 +213,9 @@
     @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;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
+    @apply inline-flex items-center justify-center;
   }
 
   .ui-btn-secondary {
@@ -163,8 +223,9 @@
     @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;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
     @apply transition-colors;
+    @apply inline-flex items-center justify-center;
   }
 
   .ui-btn-secondary-invert {
@@ -172,9 +233,63 @@
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-icon {
+    @apply w-24 h-24 mr-16;
+  }
+
+  .ui-btn-icon-small {
+    @apply w-20 h-20 mr-12;
+  }
+
+  .ui-btn-icon-xsmall {
+    @apply w-16 h-16 mr-8;
+  }
+
+  .ui-chip {
+    @apply text-btn3 p-chip rounded text-cool-black;
+    @apply hover:bg-mid-grey;
+    @apply active:bg-red-orange active:text-white;
+    @apply focus:bg-red-orange focus:text-white focus:outline-none;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
   }
+
+  .ui-chip[data-selected] {
+    @apply bg-active-orange text-white;
+  }
+
+  .ui-chip[data-selected]:hover {
+    @apply bg-mid-grey text-cool-black;
+  }
+
+  .ui-chip[data-selected]:focus {
+    @apply bg-red-orange text-white;
+  }
+
+  .ui-chip-alt {
+    @apply text-btn3 p-chip rounded text-white;
+    @apply hover:bg-gui-hover;
+    @apply active:bg-gui-active active:text-white;
+    @apply focus:bg-gui-active focus:text-white focus:outline-none;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+  }
+
+  .ui-chip-alt[data-selected] {
+    @apply bg-dark-grey text-white;
+  }
+  .ui-chip-alt[data-selected]:hover {
+    @apply bg-gui-hover text-white;
+  }
+
+  .ui-chip-alt[data-selected]:focus {
+    @apply bg-gui-active text-white;
+  }
 }
 @layer components {
   .ui-standard-container {
@@ -209,7 +324,7 @@
   .ui-text-h2 {
     @apply font-sans font-medium text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.01;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h3 {
@@ -283,6 +398,119 @@
     @apply font-sans font-light text-cool-black;
     @apply text-menu3;
   }
+
+  .ui-text-code1 {
+    @apply font-mono font-normal text-code1;
+  }
+
+  .ui-text-code2 {
+    @apply font-mono font-normal text-code2;
+  }
+
+  .ui-unordered-list {
+    @apply text-p1 font-light text-cool-black;
+    @apply list-disc ml-32 mb-24;
+  }
+
+  .ui-unordered-list ul {
+    @apply ml-24 mt-16 list-circle;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply list-square;
+  }
+
+  .ui-unordered-list-with-emphasis {
+    @apply text-p1 font-light text-cool-black;
+    @apply list-disc ml-32 mt-32 -mb-12;
+  }
+
+  .ui-unordered-list-with-emphasis li div {
+    @apply relative -top-12;
+  }
+
+  .ui-unordered-list-with-emphasis li div > strong {
+    @apply block;
+  }
+
+  .ui-unordered-list-with-emphasis ul {
+    margin-top: calc(var(--spacing-16) + var(--spacing-8));
+    @apply ml-24 list-disc;
+  }
+
+  .ui-unordered-list-with-emphasis ul ul {
+    @apply list-circle;
+  }
+
+  /* visited needs to come before :hover et all else it overrides them */
+  .ui-link:visited {
+    @apply text-gui-viewed;
+  }
+
+  .ui-link {
+    @apply hover:text-active-orange active:text-red-orange;
+    -webkit-text-decoration-color: var(--color-active-orange);
+            text-decoration-color: var(--color-active-orange);
+    text-underline-offset: 4px; /* px used here as behaves weird with rem's */
+    -webkit-text-decoration-line: underline;
+            text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
+  }
+
+  .ui-link:focus {
+    @apply focus:text-white focus:bg-active-orange focus:outline-none;
+    text-decoration: none;
+  }
+}
+@layer components {
+  .ui-checkbox-p1 {
+    @apply flex items-start mb-16 font-sans;
+  }
+
+  .ui-checkbox-p2 {
+    @apply flex items-start mb-12 font-sans;
+  }
+
+  .ui-checkbox-input {
+    @apply opacity-0 absolute h-20 w-20;
+  }
+
+  .ui-checkbox-styled {
+    @apply w-20 h-20 mr-16;
+    @apply bg-white flex flex-shrink-0 justify-center items-center;
+    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+  }
+
+  .ui-checkbox-styled-tick {
+    @apply hidden text-white;
+  }
+
+  .ui-checkbox-label-p1 {
+    @apply select-none;
+    @apply text-p1 font-light text-cool-black;
+  }
+
+  .ui-checkbox-label-p2 {
+    @apply select-none;
+    @apply text-p2 font-light text-cool-black;
+  }
+
+  .ui-checkbox-input:disabled + .ui-checkbox-styled {
+    @apply bg-gui-unavailable border;
+  }
+
+  .ui-checkbox-input:focus + .ui-checkbox-styled {
+    border-width: 0.125rem;
+    @apply border-gui-focus;
+  }
+
+  .ui-checkbox-input:checked + .ui-checkbox-styled {
+    @apply bg-active-orange border-dark-grey border;
+  }
+
+  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
+    @apply block;
+  }
 }
 @layer components {
   .ui-input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "5.3.0",
+  "version": "6.0.1-dev.6103afe",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

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

@@ -1,3 +1,3 @@
-<div class="hljs p-32 overflow-auto" data-id="code">
-  <pre lang="<%= @language %>"><code class="font-mono language-<%= @language %>"><%= @snippet %></code></pre>
-</div>
+<%= tag.div class: "hljs p-32 overflow-auto", data: { id: "code" } do %>
+  <%= tag.pre lang: @language do %><%= tag.code class: "language-#{@language} #{@text_size}" do %><%= @snippet %><% end %><% end %>
+<% end %>

package/src/core/Code/component.jsx

@@ -4,9 +4,9 @@ import T from "prop-types";
 import "./component.css";
 import { highlight } from "./component.js";
 
-const Code = ({ language, snippet }) => {
+const Code = ({ language, snippet, textSize = "ui-text-code1" }) => {
   const HTMLraw = highlight(language, `${snippet}`.trim());
-  const className = `font-mono language-${language}`;
+  const className = `language-${language} ${textSize}`;
   return (
     <div className="hljs p-32 overflow-auto" data-id="code">
       <pre lang={language}>
@@ -19,6 +19,7 @@ const Code = ({ language, snippet }) => {
 Code.propTypes = {
   language: T.string,
   snippet: T.string,
+  textSize: T.string,
 };
 
 export default Code;

package/src/core/Code/component.rb

@@ -2,9 +2,10 @@ module AblyUi
   module Core
     class Code < ViewComponent::Base
       include AblyUi::Core::Util
-      def initialize(language:, snippet:)
+      def initialize(language:, snippet:, text_size: 'ui-text-code1')
         @language = language
         @snippet = snippet.try(:strip)
+        @text_size = text_size
       end
     end
   end

package/src/core/CompanyAutocomplete/component.css

@@ -0,0 +1,45 @@
+@layer components {
+  .ui-company-autocomplete-container {
+    @apply shadow-container absolute bg-white w-full z-10 font-sans;
+  }
+
+  .ui-company-autocomplete-list {
+    @apply border border-mid-grey border-t-0;
+  }
+
+  .ui-company-autocomplete-listitem {
+    @apply border-b border-mid-grey h-48;
+  }
+
+  .ui-company-autocomplete-btn {
+    @apply h-full w-full flex items-center py-4 px-12;
+  }
+
+  .ui-company-autocomplete-btn:focus {
+    @apply focus:text-gui-focus;
+  }
+
+  .ui-company-autocomplete-listitem:last-child {
+    @apply border-b-0;
+  }
+
+  .ui-company-autocomplete-listitem:hover {
+    @apply bg-light-grey cursor-pointer;
+  }
+
+  .ui-company-autocomplete-listitem:hover .ui-company-autocomplete-name {
+    @apply text-gui-hover;
+  }
+
+  .ui-company-autocomplete-logo {
+    @apply w-32;
+  }
+
+  .ui-company-autocomplete-name {
+    @apply font-sans font-light text-cool-black ml-8 text-p3 text-left;
+  }
+
+  .ui-company-autocomplete-domain {
+    @apply font-sans font-light text-dark-grey ml-auto text-p3;
+  }
+}

package/src/core/CompanyAutocomplete/component.js

@@ -0,0 +1,202 @@
+import "./component.css";
+
+import throttle from "lodash.throttle";
+
+const COMPANY_AUTOCOMPLETE_DROPDOWN = "[data-id=company-autocomplete-dropdown]";
+
+const getContainer = (input) =>
+  input.parentNode.querySelector(COMPANY_AUTOCOMPLETE_DROPDOWN);
+const getItems = (container) =>
+  container ? container.querySelectorAll("li > button") : [];
+const getFocusedItemIndex = (items) =>
+  Array.from(items).indexOf(document.activeElement);
+
+const clearList = (input) => {
+  const container = getContainer(input);
+
+  if (container) {
+    container.classList.add("hidden");
+    container.querySelector("ol").innerHTML = "";
+  }
+};
+
+const renderItems = (data) =>
+  data.map((element) => {
+    const listItem = document.createElement("li");
+    listItem.classList.add("ui-company-autocomplete-listitem");
+
+    const btn = document.createElement("button");
+    btn.classList.add("ui-company-autocomplete-btn");
+    btn.dataset.name = element.name;
+
+    const logo = document.createElement("img");
+    logo.alt = `${element.name} logo`;
+    logo.src = element.logo;
+    logo.classList.add("ui-company-autocomplete-logo");
+
+    const name = document.createElement("p");
+    name.textContent = element.name;
+    name.classList.add("ui-company-autocomplete-name");
+
+    const domain = document.createElement("p");
+    domain.textContent = element.domain;
+    domain.classList.add("ui-company-autocomplete-domain");
+
+    btn.append(logo);
+    btn.append(name);
+    btn.append(domain);
+    listItem.append(btn);
+
+    return listItem;
+  });
+
+const renderContainer = (input) => {
+  let container = getContainer(input);
+
+  if (!container) {
+    input.parentNode.style.position = "relative";
+
+    container = document.createElement("div");
+    container.dataset.id = "company-autocomplete-dropdown";
+    container.classList.add("ui-company-autocomplete-container");
+
+    const list = document.createElement("ol");
+    list.classList.add("ui-company-autocomplete-list");
+
+    return { container, list };
+  }
+
+  return { container, list: container.querySelector("ol") };
+};
+
+const renderDropdown = (input, data) => {
+  const parent = input.parentNode;
+  const { container, list } = renderContainer(input);
+  const items = renderItems(data);
+
+  clearList(input);
+
+  items.forEach((item, index) => {
+    list.append(item);
+    item.addEventListener("click", (event) => {
+      input.value = data[index].name;
+      event.preventDefault();
+    });
+  });
+
+  container.append(list);
+  container.classList.remove("hidden");
+  parent.append(container);
+};
+
+const fetchData = async (url, query) => {
+  try {
+    if (!query) {
+      return [];
+    }
+
+    const res = await fetch(`${url}?query=${query}`);
+    const payload = await res.json();
+
+    return payload;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    return [];
+  }
+};
+
+const handleDownArrow = (input, event) => {
+  const container = getContainer(input);
+  const items = getItems(container);
+  const focusedItemIndex = getFocusedItemIndex(items);
+
+  if (items.length === 0) {
+    return;
+  } else if (document.activeElement === input) {
+    items[0].focus();
+  } else if (focusedItemIndex >= 0 && focusedItemIndex < items.length - 1) {
+    items[focusedItemIndex + 1].focus();
+  }
+
+  event.preventDefault();
+};
+
+const handleUpArrow = (input, event) => {
+  const container = getContainer(input);
+  const items = getItems(container);
+  const focusedItemIndex = getFocusedItemIndex(items);
+
+  if (items.length === 0) {
+    return;
+  } else if (focusedItemIndex === 0) {
+    input.focus();
+  } else if (focusedItemIndex > 0) {
+    items[focusedItemIndex - 1].focus();
+  }
+
+  event.preventDefault();
+};
+
+const handleTab = (input, event) => {
+  const container = getContainer(input);
+  const items = getItems(container);
+  const focusedItemIndex = getFocusedItemIndex(items);
+
+  if (document.activeElement === input && event.shiftKey) {
+    clearList(input);
+  } else if (focusedItemIndex === items.length - 1) {
+    clearList(input);
+  }
+};
+
+const handleEnter = (input, event) => {
+  if (event.target.dataset.name) {
+    input.value = event.target.dataset.name;
+    clearList(input);
+    input.focus();
+    event.preventDefault();
+  }
+};
+
+const CompanyAutocomplete = (input, url) => {
+  if (!input || !url) return;
+
+  input.addEventListener(
+    "keyup",
+    throttle(
+      async (event) => {
+        if (["Enter", "Space", "Tab", "Escape"].includes(event.code)) return;
+
+        const query = event.target.value;
+        const data = await fetchData(url, query);
+
+        if (data && data.length > 0) {
+          renderDropdown(input, data);
+        }
+      },
+      100,
+      { trailing: true }
+    )
+  );
+
+  input.parentNode.addEventListener("keydown", (event) => {
+    if (event.code === "ArrowDown") {
+      handleDownArrow(input, event);
+    } else if (event.code === "ArrowUp") {
+      handleUpArrow(input, event);
+    } else if (event.code === "Enter" || event.code === "Space") {
+      handleEnter(input, event);
+    } else if (event.code === "Tab") {
+      handleTab(input, event);
+    } else if (event.code === "Escape") {
+      clearList(input);
+    }
+  });
+
+  document.body.addEventListener("click", () => {
+    clearList(input);
+  });
+};
+
+export default CompanyAutocomplete;

package/src/core/FeaturedLink/component.css

@@ -1,7 +1,6 @@
 @layer components {
   .ui-featured-link {
-    max-width: calc(100% - 1.25rem);
-    @apply font-medium block;
+    @apply font-sans font-medium block;
     @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
   }
 

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

@@ -1,4 +1,4 @@
-<%= link_to(@url, class: "ui-featured-link #{@text_size} #{@flush ? '' : 'py-8'}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
+<%= link_to(@url, class: "ui-featured-link #{@text_size} #{@flush ? '' : 'py-8'}  #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
   <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
                                                    size: "calc(var(--featured-link-icon-size) * 1.25)",
                                                    color: @icon_color,

package/src/core/FeaturedLink/component.rb

@@ -5,12 +5,14 @@ module AblyUi
         url:,
         text_size: 'text-menu3',
         icon_color: 'text-cool-black',
-        flush: false
+        flush: false,
+        additional_css: ''
       )
         @url = url
         @text_size = text_size
         @icon_color = icon_color
         @flush = flush
+        @additional_css = additional_css
       end
     end
   end

package/src/core/icons/icon-display-api-keys.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 fill-rule="evenodd" clip-rule="evenodd" d="M23.9975 1.25001L24 1.25C30.2947 1.25 34.8666 5.48148 36.9677 11.5435C39.9369 11.7908 42.5707 12.9175 44.499 14.8032C46.5441 16.8032 47.75 19.6133 47.75 23C47.75 26.4402 46.5053 29.2339 44.403 31.1816C42.3094 33.1213 39.4195 34.1729 36.2009 34.2498L36.183 34.25H36C34.2051 34.25 32.75 35.7051 32.75 37.5V41.5C32.75 41.538 32.7472 41.5754 32.7417 41.6119C33.7603 41.9279 34.5 42.8775 34.5 44C34.5 45.3807 33.3807 46.5 32 46.5C30.6193 46.5 29.5 45.3807 29.5 44C29.5 42.8775 30.2397 41.9279 31.2583 41.6119C31.2528 41.5754 31.25 41.538 31.25 41.5V37.5C31.25 34.8766 33.3766 32.75 36 32.75H36.1739C39.0895 32.6786 41.6049 31.7291 43.3835 30.0813C45.1552 28.44 46.25 26.0569 46.25 23C46.25 19.9872 45.1862 17.5733 43.4502 15.8757C41.7085 14.1724 39.2446 13.1467 36.3792 13.0077C36.0667 12.9926 35.7964 12.7851 35.7011 12.4871C33.8169 6.59587 29.6288 2.75057 24.0012 2.75C16.999 2.77388 13.4625 5.84333 11.6103 9.01639C9.90907 11.9307 9.59656 14.9789 9.47898 16.1258C9.46599 16.2525 9.45537 16.356 9.44553 16.4335C9.40186 16.7776 9.1279 17.0469 8.78309 17.0846C4.68819 17.5327 1.75 20.5577 1.75 25C1.75 27.3994 2.61404 29.3228 4.00756 30.6484C5.40559 31.9784 7.38279 32.75 9.678 32.75H12C14.6234 32.75 16.75 34.8766 16.75 37.5V41.5C16.75 41.538 16.7472 41.5754 16.7417 41.6119C17.7603 41.9279 18.5 42.8775 18.5 44C18.5 45.3807 17.3807 46.5 16 46.5C14.6193 46.5 13.5 45.3807 13.5 44C13.5 42.8775 14.2397 41.9279 15.2583 41.6119C15.2528 41.5754 15.25 41.538 15.25 41.5V37.5C15.25 35.7051 13.7949 34.25 12 34.25H9.678C7.04421 34.25 4.68241 33.3607 2.97369 31.7352C1.26046 30.1054 0.25 27.7788 0.25 25C0.25 19.9901 3.49532 16.4323 8.01664 15.6768C8.15873 14.3389 8.57927 11.2334 10.3148 8.2602C12.4266 4.6425 16.4461 1.27535 23.9975 1.25001ZM24 32.75C24.4142 32.75 24.75 33.0858 24.75 33.5V41.6145C25.7643 41.933 26.5 42.8806 26.5 44C26.5 45.3807 25.3807 46.5 24 46.5C22.6193 46.5 21.5 45.3807 21.5 44C21.5 42.8806 22.2357 41.933 23.25 41.6145V33.5C23.25 33.0858 23.5858 32.75 24 32.75ZM14.5 44C14.5 43.1716 15.1716 42.5 16 42.5C16.8284 42.5 17.5 43.1716 17.5 44C17.5 44.8284 16.8284 45.5 16 45.5C15.1716 45.5 14.5 44.8284 14.5 44ZM32 42.5C31.1716 42.5 30.5 43.1716 30.5 44C30.5 44.8284 31.1716 45.5 32 45.5C32.8284 45.5 33.5 44.8284 33.5 44C33.5 43.1716 32.8284 42.5 32 42.5ZM22.5 44C22.5 43.1716 23.1716 42.5 24 42.5C24.8284 42.5 25.5 43.1716 25.5 44C25.5 44.8284 24.8284 45.5 24 45.5C23.1716 45.5 22.5 44.8284 22.5 44ZM17 17.75C14.1005 17.75 11.75 20.1005 11.75 23C11.75 25.8995 14.1005 28.25 17 28.25C18.9423 28.25 20.6392 27.1956 21.5481 25.6245L21.6444 25.458L24.1049 23.968C24.9592 23.4507 26.0267 23.4372 26.8938 23.9326L28.3798 24.7818C28.7641 25.0014 29.2359 25.0014 29.6202 24.7818L31.1356 23.9158C31.9811 23.4327 33.0189 23.4327 33.8644 23.9158L34.9166 24.5171C35.4428 24.8178 36.109 24.6977 36.497 24.232L37.3904 23.16C37.4676 23.0673 37.4676 22.9327 37.3903 22.84L35.7237 20.84C35.6762 20.783 35.6058 20.75 35.5316 20.75H21.7647L21.5481 20.3755C20.6392 18.8044 18.9423 17.75 17 17.75ZM10.25 23C10.25 19.2721 13.2721 16.25 17 16.25C19.3413 16.25 21.4033 17.4424 22.6132 19.25H35.5316C36.051 19.25 36.5435 19.4807 36.876 19.8797L38.5427 21.8797C39.0835 22.5287 39.0835 23.4713 38.5427 24.1203L37.6494 25.1923C36.7957 26.2167 35.3301 26.481 34.1724 25.8195L33.1202 25.2182C32.7359 24.9986 32.2641 24.9986 31.8798 25.2182L30.3644 26.0842C29.5189 26.5673 28.4811 26.5673 27.6356 26.0842L26.1496 25.235C25.7555 25.0098 25.2702 25.0159 24.8819 25.2511L22.7451 26.5451C21.5568 28.467 19.4287 29.75 17 29.75C13.2721 29.75 10.25 26.7279 10.25 23ZM14.5 23C14.5 22.4477 14.9477 22 15.5 22C16.0523 22 16.5 22.4477 16.5 23C16.5 23.5523 16.0523 24 15.5 24C14.9477 24 14.5 23.5523 14.5 23ZM15.5 21C14.3954 21 13.5 21.8954 13.5 23C13.5 24.1046 14.3954 25 15.5 25C16.6046 25 17.5 24.1046 17.5 23C17.5 21.8954 16.6046 21 15.5 21Z" fill="#03020D"/>
+</svg>

package/src/core/icons/icon-display-cloud-servers.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 fill-rule="evenodd" clip-rule="evenodd" d="M22.9305 1.25L22.928 1.25001C19.1663 1.26263 16.3209 2.16727 14.179 3.58598C12.0396 5.00308 10.6518 6.89994 9.74914 8.81907C8.26167 11.9815 8.06171 15.3211 7.9923 16.6843C3.42863 17.5061 0 21.7056 0 26.6695C0 32.2864 4.35972 36.25 9.678 36.25C10.0922 36.25 10.428 35.9142 10.428 35.5C10.428 35.0858 10.0922 34.75 9.678 34.75C5.13828 34.75 1.5 31.409 1.5 26.6695C1.5 22.1862 4.72837 18.5284 8.78309 18.0846C9.1279 18.0469 9.40186 17.7776 9.44553 17.4335C9.46441 17.2847 9.47723 17.0562 9.49373 16.7619C9.57379 15.3345 9.7405 12.3616 11.1065 9.45752C11.9185 7.73117 13.1435 6.0711 15.0074 4.83653C16.8686 3.60372 19.4169 2.762 22.9317 2.75C28.6269 2.75058 33.8404 6.66921 35.7011 12.4871C35.7964 12.7851 36.0667 12.9926 36.3792 13.0077C41.9981 13.2802 46.5 18.103 46.5 24.1293C46.5 30.207 41.9083 34.6131 36.1651 34.7502C35.751 34.7601 35.4233 35.1038 35.4332 35.5179C35.4431 35.932 35.7868 36.2597 36.2009 36.2498C42.7337 36.0938 48 31.0459 48 24.1293C48 17.5374 43.19 12.1193 36.9665 11.5457C34.791 5.41533 29.1621 1.25 22.9305 1.25ZM33 26.5H13C12.1716 26.5 11.5 27.1716 11.5 28V32C11.5 32.8284 12.1716 33.5 13 33.5H33C33.8284 33.5 34.5 32.8284 34.5 32V28C34.5 27.1716 33.8284 26.5 33 26.5ZM13 25C11.3431 25 10 26.3431 10 28V32C10 33.6569 11.3431 35 13 35H33C34.6569 35 36 33.6569 36 32V28C36 26.3431 34.6569 25 33 25H13ZM14 27.75C14.4142 27.75 14.75 28.0858 14.75 28.5V31.5C14.75 31.9142 14.4142 32.25 14 32.25C13.5858 32.25 13.25 31.9142 13.25 31.5V28.5C13.25 28.0858 13.5858 27.75 14 27.75ZM17.25 28.5C17.25 28.0858 16.9142 27.75 16.5 27.75C16.0858 27.75 15.75 28.0858 15.75 28.5V31.5C15.75 31.9142 16.0858 32.25 16.5 32.25C16.9142 32.25 17.25 31.9142 17.25 31.5V28.5ZM33 30C33 30.5523 32.5523 31 32 31C31.4477 31 31 30.5523 31 30C31 29.4477 31.4477 29 32 29C32.5523 29 33 29.4477 33 30ZM29 31C29.5523 31 30 30.5523 30 30C30 29.4477 29.5523 29 29 29C28.4477 29 28 29.4477 28 30C28 30.5523 28.4477 31 29 31ZM33 37.5H13C12.1716 37.5 11.5 38.1716 11.5 39V43C11.5 43.8284 12.1716 44.5 13 44.5H33C33.8284 44.5 34.5 43.8284 34.5 43V39C34.5 38.1716 33.8284 37.5 33 37.5ZM13 36C11.3431 36 10 37.3431 10 39V43C10 44.6569 11.3431 46 13 46H33C34.6569 46 36 44.6569 36 43V39C36 37.3431 34.6569 36 33 36H13ZM14.75 39.5C14.75 39.0858 14.4142 38.75 14 38.75C13.5858 38.75 13.25 39.0858 13.25 39.5V42.5C13.25 42.9142 13.5858 43.25 14 43.25C14.4142 43.25 14.75 42.9142 14.75 42.5V39.5ZM16.5 38.75C16.9142 38.75 17.25 39.0858 17.25 39.5V42.5C17.25 42.9142 16.9142 43.25 16.5 43.25C16.0858 43.25 15.75 42.9142 15.75 42.5V39.5C15.75 39.0858 16.0858 38.75 16.5 38.75ZM32 42C32.5523 42 33 41.5523 33 41C33 40.4477 32.5523 40 32 40C31.4477 40 31 40.4477 31 41C31 41.5523 31.4477 42 32 42ZM30 41C30 41.5523 29.5523 42 29 42C28.4477 42 28 41.5523 28 41C28 40.4477 28.4477 40 29 40C29.5523 40 30 40.4477 30 41Z" fill="#03020D"/>
+</svg>