add icons

kontent-ai · Feb 22, 2025 · fb4ebba · fb4ebba
1 parent 514d123
commit fb4ebba
Show file tree

Hide file tree

Showing 11 changed files with 370 additions and 1 deletion.
diff --git a/src/components/icons/BaseIconWrapper.tsx b/src/components/icons/BaseIconWrapper.tsx
@@ -0,0 +1,33 @@
+import React, { FC, ReactNode } from "react";
+
+export interface IconProps {
+  className?: string;
+  color?: string;
+  size?: number | string;
+  screenReaderText?: string;
+  children: ReactNode;
+}
+
+export const IconWrapper: FC<IconProps> = ({
+  children,
+  className = "",
+  color = "currentColor",
+  size = "1em",
+  screenReaderText,
+}) => {
+  // You can use inline styles or Tailwind classes here.
+  const style: React.CSSProperties = {
+    color,
+    fontSize: size,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+  };
+
+  return (
+    <span className={`icon-wrapper ${className}`} style={style}>
+      {children}
+      {screenReaderText && <span className="sr-only">{screenReaderText}</span>}
+    </span>
+  );
+};
diff --git a/src/components/icons/IconArrowReturn.tsx b/src/components/icons/IconArrowReturn.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { IconProps } from "./BaseIconWrapper";
+import { IconWrapper } from "./BaseIconWrapper";
+
+type IconArrowReturnProps = Omit<IconProps, "children">;
+
+const IconArrowReturn = React.forwardRef<SVGSVGElement, IconArrowReturnProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          stroke="currentColor"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            d="M2 5.68896C2 5.63767 2.00808 5.58823 2.02305 5.54178C2.04625 5.46965 2.08697 5.40172 2.14522 5.34437L5.39522 2.1444C5.5898 1.95281 5.90638 1.95173 6.10232 2.14199C6.29826 2.33224 6.29936 2.64179 6.10478 2.83337L3.70108 5.20007L10.6818 5.20007C13.0524 5.20007 15 7.22856 15 9.60004C15 11.9715 13.0524 14 10.6818 14L2.5 14C2.22386 14 2 13.7811 2 13.5111C2 13.2411 2.22386 13.0222 2.5 13.0222H10.6818C12.4567 13.0222 14 11.4749 14 9.60004C14 7.7252 12.4567 6.17784 10.6818 6.17784H3.70118L6.10478 8.54444C6.29936 8.73603 6.29826 9.04557 6.10232 9.23583C5.90638 9.42608 5.5898 9.425 5.39522 9.23342L2.14522 6.03344C2.09766 5.98662 2.0618 5.93275 2.03761 5.87531C2.01337 5.81787 2 5.75494 2 5.68896Z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconArrowReturn.displayName = "IconArrowReturn";
+export default IconArrowReturn;
diff --git a/src/components/icons/IconCollapse.tsx b/src/components/icons/IconCollapse.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { IconProps } from "./BaseIconWrapper";
+import { IconWrapper } from "./BaseIconWrapper";
+
+type IconCollapseProps = Omit<IconProps, "children">;
+
+const IconCollapse = React.forwardRef<SVGSVGElement, IconCollapseProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          stroke="currentColor"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            d="M5.01228.5C5.01228.223858 4.78842 0 4.51228 0 4.23613 0 4.01227.223858 4.01227.5V3.99609H.501953C.225811 3.99609.00195312 4.21994.00195312 4.49609.00195312 4.77223.225811 4.99609.501953 4.99609H4.51228C4.78842 4.99609 5.01228 4.77223 5.01228 4.49609V.5ZM11.9912.5C11.9912.223858 11.7674 0 11.4912 0 11.2151 0 10.9912.223858 10.9912.5V4.49609C10.9912 4.77223 11.2151 4.99609 11.4912 4.99609H15.4956C15.7717 4.99609 15.9956 4.77223 15.9956 4.49609 15.9956 4.21994 15.7717 3.99609 15.4956 3.99609H11.9912V.5ZM10.9971 11.4888C10.9971 11.2126 11.2209 10.9888 11.4971 10.9888H15.4996C15.7757 10.9888 15.9996 11.2126 15.9996 11.4888 15.9996 11.7649 15.7757 11.9888 15.4996 11.9888H11.9971V15.4932C11.9971 15.7693 11.7732 15.9932 11.4971 15.9932 11.2209 15.9932 10.9971 15.7693 10.9971 15.4932V11.4888ZM.501953 10.9888C.225811 10.9888.00195312 11.2126.00195312 11.4888.00195312 11.7649.225811 11.9888.501953 11.9888H4.00283V15.504C4.00283 15.7801 4.22668 16.004 4.50283 16.004 4.77897 16.004 5.00283 15.7801 5.00283 15.504V11.4888C5.00283 11.2126 4.77897 10.9888 4.50283 10.9888H.501953Z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconCollapse.displayName = "IconCollapse";
+export default IconCollapse;
diff --git a/src/components/icons/IconExpand.tsx b/src/components/icons/IconExpand.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { IconProps } from "./BaseIconWrapper";
+import { IconWrapper } from "./BaseIconWrapper";
+
+type IconExpandProps = Omit<IconProps, "children">;
+
+const IconExpand = React.forwardRef<SVGSVGElement, IconExpandProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          stroke="currentColor"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            d="M1.49946 1C1.22362 1 1 1.22386 1 1.5V5.5C1 5.77614 1.22362 6 1.49946 6 1.77531 6 1.99892 5.77614 1.99892 5.5V2H5.49515C5.77099 2 5.99461 1.77614 5.99461 1.5 5.99461 1.22386 5.77099 1 5.49515 1H1.49946ZM10.5049 1C10.229 1 10.0054 1.22386 10.0054 1.5 10.0054 1.77614 10.229 2 10.5049 2H14.0011V5.5C14.0011 5.77614 14.2247 6 14.5005 6 14.7764 6 15 5.77614 15 5.5V1.5C15 1.22386 14.7764 1 14.5005 1H10.5049ZM14.4763 10.001C14.7521 10.001 14.9758 10.2248 14.9758 10.501V14.501C14.9758 14.7771 14.7521 15.001 14.4763 15.001H10.4806C10.2048 15.001 9.98116 14.7771 9.98116 14.501 9.98116 14.2248 10.2048 14.001 10.4806 14.001H13.9768V10.501C13.9768 10.2248 14.2005 10.001 14.4763 10.001ZM1.99892 10.5042C1.99892 10.2281 1.77531 10.0042 1.49946 10.0042 1.22362 10.0042 1 10.2281 1 10.5042V14.5042C1 14.7803 1.22362 15.0042 1.49946 15.0042H5.49515C5.77099 15.0042 5.99461 14.7803 5.99461 14.5042 5.99461 14.2281 5.77099 14.0042 5.49515 14.0042H1.99892V10.5042Z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconExpand.displayName = "IconExpand";
+export default IconExpand;
diff --git a/src/components/icons/IconFilePdf.tsx b/src/components/icons/IconFilePdf.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { IconProps } from "./BaseIconWrapper";
+import { IconWrapper } from "./BaseIconWrapper";
+
+type IconFilePdfProps = Omit<IconProps, "children">;
+
+const IconFilePdf = React.forwardRef<SVGSVGElement, IconFilePdfProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <g
+            fill="currentColor"
+            clipPath="url(#a)"
+          >
+            <path
+              fillRule="evenodd"
+              d="M3 9.99512V13.9951H4V12.9951H4.5C5.32843 12.9951 6 12.3235 6 11.4951 6 10.6667 5.32843 9.99512 4.5 9.99512H3ZM4.5 11.9951H4V10.9951H4.5C4.77614 10.9951 5 11.219 5 11.4951 5 11.7713 4.77614 11.9951 4.5 11.9951ZM7 9.99512H8.5C9.32843 9.99512 10 10.6667 10 11.4951V12.4951C10 13.3235 9.32843 13.9951 8.5 13.9951H7V9.99512ZM8 12.9951H8.5C8.77614 12.9951 9 12.7713 9 12.4951V11.4951C9 11.219 8.77614 10.9951 8.5 10.9951H8V12.9951Z"
+              clipRule="evenodd"
+            />
+            <path d="M11 9.99512V13.9951H12V12.9951H13V11.9951H12V10.9951H13V9.99512H11Z" />
+            <path
+              fillRule="evenodd"
+              d="M3 0H9.2L14 4.96563V8.00468L14.9999 8.00488C15.5521 8.00488 15.9999 8.4526 15.9999 9.00488V15.0002C15.9999 15.5525 15.5521 16.0002 14.9999 16.0002H1C0.447716 16.0002 0 15.5525 0 15.0002V9.00488C0 8.4526 0.447715 8.00488 1 8.00488H2V1C2 0.447717 2.44772 0 3 0ZM13 8.00468H3L3 1H7.99902V4.50928C7.99902 5.3377 8.6706 6.00928 9.49902 6.00928H13V8.00468ZM12.6514 5.00928L8.99902 1.23091V4.50928C8.99902 4.78542 9.22288 5.00928 9.49902 5.00928H12.6514ZM14.9999 9.00488H1V15.0002H14.9999V9.00488Z"
+              clipRule="evenodd"
+            />
+          </g>
+          <defs>
+            <clipPath id="a">
+              <path
+                fill="#fff"
+                d="M0 0H16V16H0z"
+              />
+            </clipPath>
+          </defs>
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconFilePdf.displayName = "IconFilePdf";
+export default IconFilePdf;
diff --git a/src/components/icons/IconLayouts.tsx b/src/components/icons/IconLayouts.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { IconProps } from "./BaseIconWrapper";
+import { IconWrapper } from "./BaseIconWrapper";
+
+type IconLayoutsProps = Omit<IconProps, "children">;
+
+const IconLayouts = React.forwardRef<SVGSVGElement, IconLayoutsProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M1 1.5C1 1.22386 1.22386 1 1.5 1H12.5C12.7761 1 13 1.22386 13 1.5V6.5C13 6.77614 12.7761 7 12.5 7H1.5C1.22386 7 1 6.77614 1 6.5V1.5ZM2 2V6H12V2H2Z"
+            clipRule="evenodd"
+          />
+          <path
+            fill="currentColor"
+            d="M14.5002 3C14.7764 3 15.0002 3.22386 15.0002 3.5V14.4998C15.0002 14.776 14.7764 14.9998 14.5002 14.9998H3.86386C3.58772 14.9998 3.36386 14.776 3.36386 14.4998C3.36386 14.2237 3.58772 13.9998 3.86386 13.9998H14.0002V3.5C14.0002 3.22386 14.2241 3 14.5002 3Z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M1.00023 8.51613C1.00024 8.23999 1.22409 8.01615 1.50023 8.01615H5.50132C5.63393 8.01615 5.76111 8.06884 5.85488 8.16261 5.94865 8.25639 6.00132 8.38357 6.00132 8.51618L6.00109 12.4974C6.00107 12.7735 5.77722 12.9974 5.50109 12.9974H1.5C1.36739 12.9974 1.24021 12.9447 1.14644 12.8509 1.05267 12.7571.999992 12.63 1 12.4973L1.00023 8.51613ZM2.0002 9.01615 2.00003 11.9974H5.00112L5.00129 9.01615H2.0002ZM7.5127 8.0166C7.23655 8.0166 7.0127 8.24046 7.0127 8.5166V12.5166C7.0127 12.7927 7.23655 13.0166 7.5127 13.0166H12.5127C12.7888 13.0166 13.0127 12.7927 13.0127 12.5166V8.5166C13.0127 8.24046 12.7888 8.0166 12.5127 8.0166H7.5127ZM8.0127 12.0166V9.0166H12.0127V12.0166H8.0127Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconLayouts.displayName = "IconLayouts";
+export default IconLayouts;
diff --git a/src/components/icons/IconProjectScheme.tsx b/src/components/icons/IconProjectScheme.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { IconProps } from "./BaseIconWrapper";
+import { IconWrapper } from "./BaseIconWrapper";
+
+type IconProjectSchemeProps = Omit<IconProps, "children">;
+
+const IconProjectScheme = React.forwardRef<SVGSVGElement, IconProjectSchemeProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M11.0005 1.49902C11.0005 1.22288 11.2243 0.999023 11.5005 0.999023H14.5009C14.777 0.999023 15.0009 1.22288 15.0009 1.49902V4.49944C15.0009 4.77558 14.777 4.99944 14.5009 4.99944H11.5005C11.2243 4.99944 11.0005 4.77558 11.0005 4.49944V4H9V8H11.0005V6.5C11.0005 6.22386 11.2243 6 11.5005 6H14.5009C14.777 6 15.0009 6.22386 15.0009 6.5V9.50041C15.0009 9.77656 14.777 10.0004 14.5009 10.0004H11.5005C11.2243 10.0004 11.0005 9.77656 11.0005 9.50041V9H9V13.0006H11.0005V11.501C11.0005 11.2248 11.2243 11.001 11.5005 11.001H14.5009C14.777 11.001 15.0009 11.2248 15.0009 11.501V14.5014C15.0009 14.7775 14.777 15.0014 14.5009 15.0014H11.5005C11.2243 15.0014 11.0005 14.7775 11.0005 14.5014V14.0006H8.5C8.22386 14.0006 8 13.7768 8 13.5006V9H5.99958V10.0006C5.99958 10.5528 5.55186 11.0006 4.99958 11.0006H1.99902C1.44674 11.0006 0.999023 10.5528 0.999023 10.0006V7C0.999023 6.44771 1.44674 6 1.99902 6H4.99958C5.55186 6 5.99958 6.44772 5.99958 7V8H8V3.5C8 3.22386 8.22386 3 8.5 3H11.0005V1.49902ZM4.99951 8.5L4.99958 8.49188V7H1.99902L1.99902 10.0006H4.99958V8.50812L4.99951 8.5ZM12.0005 3.99944H14.0009V1.99902H12.0005V3.99944ZM12.0005 7V9.00041H14.0009V7H12.0005ZM12.0005 12.001V14.0014H14.0009V12.001H12.0005Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconProjectScheme.displayName = "IconProjectScheme";
+export default IconProjectScheme;
diff --git a/src/components/icons/IconSchemeConnected.tsx b/src/components/icons/IconSchemeConnected.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { IconProps } from "./BaseIconWrapper";
+import { IconWrapper } from "./BaseIconWrapper";
+
+type IconSchemeConnectedProps = Omit<IconProps, "children">;
+
+const IconSchemeConnected = React.forwardRef<SVGSVGElement, IconSchemeConnectedProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M1 3.50279C1 4.71362 1.85816 5.72363 2.99833 5.95552L2.99833 10.0446C1.8584 10.2767 1.00049 11.2865 1.00049 12.4972C1.00049 13.8795 2.11884 15 3.4984 15C4.87795 15 5.99631 13.8795 5.99631 12.4972C5.99631 12.4251 5.99326 12.3536 5.98729 12.283L10.7959 9.39221C10.8116 9.38277 10.8266 9.3726 10.8409 9.36177C11.2823 9.7559 11.8643 9.99539 12.5021 9.99539C13.8816 9.99539 15 8.87485 15 7.4926C15 6.11034 13.8816 4.9898 12.5021 4.9898C11.6384 4.9898 10.8771 5.42902 10.4285 6.09669L5.94151 4.02432C5.9771 3.8561 5.99582 3.68164 5.99582 3.50279C5.99582 2.12054 4.87747 1 3.49791 1C2.11835 1 1 2.12054 1 3.50279ZM3.49791 2.00112C2.67018 2.00112 1.99916 2.67344 1.99916 3.50279C1.99916 4.30633 2.62905 4.96246 3.42108 5.00253C3.44612 4.99866 3.47178 4.99665 3.49791 4.99665C3.52404 4.99665 3.54969 4.99866 3.57474 5.00253C4.36677 4.96246 4.99665 4.30633 4.99665 3.50279C4.99665 2.67344 4.32564 2.00112 3.49791 2.00112ZM10.048 7.02333L5.54174 4.94204C5.18123 5.45505 4.63319 5.82623 3.99749 5.95552L3.99749 10.0444C4.72742 10.1927 5.34181 10.6599 5.68954 11.2945L10.2412 8.55818C10.0892 8.23488 10.0042 7.87368 10.0042 7.4926C10.0042 7.3322 10.0192 7.17533 10.048 7.02333ZM3.49791 11.0034C3.47182 11.0034 3.44621 11.0013 3.4212 10.9975C2.62934 11.0377 1.99965 11.6938 1.99965 12.4972C1.99965 13.3266 2.67066 13.9989 3.4984 13.9989C4.32613 13.9989 4.99714 13.3266 4.99714 12.4972C4.99714 11.6935 4.36706 11.0373 3.57486 10.9975C3.54977 11.0013 3.52408 11.0034 3.49791 11.0034ZM11.0033 7.4926C11.0033 6.66325 11.6744 5.99092 12.5021 5.99092C13.3298 5.99092 14.0008 6.66325 14.0008 7.4926C14.0008 8.32195 13.3298 8.99427 12.5021 8.99427C11.6744 8.99427 11.0033 8.32195 11.0033 7.4926Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconSchemeConnected.displayName = "IconSchemeConnected";
+export default IconSchemeConnected;
diff --git a/src/components/icons/IconSeparate.tsx b/src/components/icons/IconSeparate.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { IconProps } from "./BaseIconWrapper";
+import { IconWrapper } from "./BaseIconWrapper";
+
+type IconSeparateProps = Omit<IconProps, "children">;
+
+const IconSeparate = React.forwardRef<SVGSVGElement, IconSeparateProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M4 4C4 5.10457 3.10457 6 2 6C0.895431 6 0 5.10457 0 4C0 2.89543 0.895431 2 2 2C2.74028 2 3.38663 2.4022 3.73244 3L12.2676 3C12.6134 2.4022 13.2597 2 14 2C15.1046 2 16 2.89543 16 4C16 5.10457 15.1046 6 14 6C12.8954 6 12 5.10457 12 4H7.28417C8.13704 4.70525 8.77305 5.82822 8.77305 7.5C8.77305 8.98565 9.24082 9.82015 9.87153 10.303C10.4795 10.7684 11.3183 10.9695 12.2694 10.9967C12.6157 10.4007 13.2611 10 14 10C15.1046 10 16 10.8954 16 12C16 13.1046 15.1046 14 14 14C12.8954 14 12 13.1046 12 12C12 11.9953 12 11.9907 12 11.986C11.0216 11.9296 10.0417 11.6926 9.26366 11.097C8.32685 10.3799 7.77305 9.21435 7.77305 7.5C7.77305 6.05099 7.21307 5.19993 6.55478 4.69745C5.87286 4.17693 5.04269 4 4.5 4H4ZM15 4C15 4.55228 14.5523 5 14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3C14.5523 3 15 3.44772 15 4ZM14 13C14.5523 13 15 12.5523 15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12C13 12.5523 13.4477 13 14 13Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconSeparate.displayName = "IconSeparate";
+export default IconSeparate;
diff --git a/src/components/icons/IconStagingScheme.tsx b/src/components/icons/IconStagingScheme.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { IconProps } from "./BaseIconWrapper";
+import { IconWrapper } from "./BaseIconWrapper";
+
+type IconStagingSchemeProps = Omit<IconProps, "children">;
+
+const IconStagingScheme = React.forwardRef<SVGSVGElement, IconStagingSchemeProps>(
+  ({ className, color, screenReaderText, size, ...props }, ref) => {
+    return (
+      <IconWrapper className={className} color={color} size={size} screenReaderText={screenReaderText}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          fill="none"
+          viewBox="0 0 16 16"
+          ref={ref}
+          {...props}
+        >
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M10.9968 1.49951C10.9968 1.22364 11.2208 1 11.4972 1H14.4996C14.776 1 15 1.22364 15 1.49951V4.49656C15 4.77243 14.776 4.99606 14.4996 4.99606H13.0169V7.4936C13.0169 7.62608 12.9642 7.75313 12.8704 7.84681C12.7765 7.94048 12.6492 7.99311 12.5165 7.99311L10.0145 7.99311V9.49859C10.0145 9.77446 9.79049 9.9981 9.51413 9.9981H6.51173C6.23536 9.9981 6.01133 9.77446 6.01133 9.49859V8.99115H4.00973V11.0039H4.5028C4.77916 11.0039 5.0032 11.2276 5.0032 11.5034V14.5005C5.0032 14.7764 4.77916 15 4.5028 15H1.5004C1.22404 15 1 14.7764 1 14.5005V11.5034C1 11.2276 1.22404 11.0039 1.5004 11.0039H3.00893V8.49164C3.00893 8.21577 3.23297 7.99214 3.50933 7.99214H6.01133V6.50154C6.01133 6.22567 6.23536 6.00204 6.51173 6.00204H9.51413C9.79049 6.00204 10.0145 6.22567 10.0145 6.50154V6.99409L12.0161 6.9941V4.99606H11.4972C11.2208 4.99606 10.9968 4.77243 10.9968 4.49656V1.49951ZM13.9992 3.99705V1.99902H11.9976V3.99705H13.9992ZM9.01373 7.00105H7.01213V8.99908H9.01373V7.00105ZM4.0024 12.003H2.0008V14.001H4.0024V12.003Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+IconStagingScheme.displayName = "IconStagingScheme";
+export default IconStagingScheme;
diff --git a/src/index.css b/src/index.css
@@ -1,5 +1,17 @@
 @import "tailwindcss";
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -64,7 +76,9 @@ button {
   position: absolute;
   width: 8px;
   height: 8px;
-  background: #5b4ff5;
+  border: 1px solid #5b4ff5;
+  border-radius: 50%;
+  background: white;
 }
 
 .custom-handle.left {