Merge branch 'main' into add-open-change-to-select

Author: vineethasok

src/components/Icon/IconCommon.tsx

@@ -56,6 +56,7 @@ import FolderOpen from "../icons/FolderOpen";
 import FolderClosed from "../icons/FolderClosed";
 import Gift from "@/components/icons/Gift";
 import Home from "@/components/icons/Home";
+import HorizontalLoading from "@/components/icons/HorizontalLoading";
 import Http from "@/components/icons/Http";
 import Integrations from "@/components/icons/Integrations";
 import LightBulb from "@/components/icons/LightBulb";
@@ -155,6 +156,7 @@ export const ICONS_MAP = {
   gift: Gift,
   history: HistoryIcon,
   home: Home,
+  "horizontal-loading": HorizontalLoading,
   http: Http,
   "info-in-circle": InfoInCircleIcon,
   information: InformationIcon,

src/components/Icon/types.ts

@@ -59,6 +59,7 @@ export type IconName =
   | "folder-open"
   | "gift"
   | "history"
+  | "horizontal-loading"
   | "home"
   | "http"
   | "info-in-circle"

src/components/icons/HorizontalLoading.tsx

@@ -0,0 +1,69 @@
+import DotsHorizontal from "./DotsHorizontal";
+import styled, { keyframes } from "styled-components";
+
+const animationCircle1 = keyframes`
+  0 {
+    r: 0;
+  }
+  30% {
+    r: 1.5;
+  }
+  60% {
+    r: 0;
+  }
+  100% {
+    r: 0;
+  }
+`;
+const animationCircle2 = keyframes`
+  0 {
+    r: 0;
+  }
+  20% {
+    r: 0;
+  }
+  40% {
+    r: 1.5;
+  }
+  80% {
+    r: 0;
+  }
+  100% {
+   r: 0
+  }
+`;
+const animationCircle3 = keyframes`
+  0 {
+    r: 0;
+  }
+  40% {
+    r: 0;
+  }
+  80% {
+    r: 1.5;
+  }
+  100% {
+   r: 0
+  }
+`;
+
+const HorizontalLoading = styled(DotsHorizontal)`
+  circle {
+    r: 0;
+    animation-name: example;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    &:nth-child(1) {
+      animation-name: ${animationCircle1};
+    }
+    &:nth-child(2) {
+      animation-name: ${animationCircle2};
+    }
+    &:nth-child(3) {
+      animation-name: ${animationCircle3};
+    }
+  }
+`;
+
+export default HorizontalLoading;

tokens/themes/primitives.json

@@ -697,6 +697,15 @@
             }
           },
           "mono": {
+            "xs": {
+              "value": {
+                "fontFamily": "{typography.font.families.mono}",
+                "fontWeight": "{typography.font.weights.2}",
+                "lineHeight": "{typography.font.line-height.2}",
+                "fontSize": "{typography.font.sizes.0}"
+              },
+              "type": "typography"
+            },
             "sm": {
               "value": {
                 "fontFamily": "{typography.font.families.mono}",