@vygruppen/spor-react 12.24.16 → 13.0.0

package/src/loader/ProgressLoader.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { BoxProps, chakra, RecipeVariantProps, Text } from "@chakra-ui/react";
-import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
+import React, { useEffect, useId, useRef, useState } from "react";
 import { useProgressBar } from "react-aria";
 
 import { createTexts, useTranslation } from "..";
@@ -87,93 +87,90 @@ const ProgressLoaderWrapper = chakra("div", progressLoaderRecipe);
  * ```
  */
 
-export const ProgressLoader = forwardRef<HTMLDivElement, ProgressLoaderProps>(
-  (
-    {
-      value,
-      label,
-      labelRotationDelay = 5000,
-      "aria-label": ariaLabel,
-      width,
-      ...rest
-    },
-    ref,
-  ) => {
-    const { t } = useTranslation();
-    const currentLoadingText = useRotatingLabel({
-      label,
-      delay: labelRotationDelay,
-    });
-    const { labelProps, progressBarProps } = useProgressBar({
-      isIndeterminate: value === undefined,
-      value,
-      "aria-label": ariaLabel ?? t(texts.fallbackLabel(value ?? "?")),
-    });
-    const {
-      pathRef,
-      pathLength: progressPathLength,
-      progressOffset,
-    } = usePathLength(value);
+export const ProgressLoader = ({
+  ref,
+  value,
+  label,
+  labelRotationDelay = 5000,
+  "aria-label": ariaLabel,
+  width,
+  ...rest
+}: ProgressLoaderProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const { t } = useTranslation();
+  const currentLoadingText = useRotatingLabel({
+    label,
+    delay: labelRotationDelay,
+  });
+  const { labelProps, progressBarProps } = useProgressBar({
+    isIndeterminate: value === undefined,
+    value,
+    "aria-label": ariaLabel ?? t(texts.fallbackLabel(value ?? "?")),
+  });
+  const {
+    pathRef,
+    pathLength: progressPathLength,
+    progressOffset,
+  } = usePathLength(value);
 
-    const id = useId();
+  const id = useId();
 
-    return (
-      <ProgressLoaderWrapper
-        {...progressBarProps}
-        width={width}
-        role="progressbar"
-        aria-valuenow={value}
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-label={ariaLabel ?? t(texts.fallbackLabel(value ?? "?"))}
-        {...rest}
-        ref={ref}
-      >
-        <chakra.svg as="svg" viewBox="0 0 246 78" fill="none">
-          <path
-            id={`${id}-start-dot`}
-            d="M14.0479 44.8251C19.4332 44.8251 23.7988 40.5242 23.7988 35.2187C23.7988 29.9133 19.4332 25.6124 14.0479 25.6124C8.66254 25.6124 4.29688 29.9133 4.29688 35.2187C4.29688 40.5242 8.66254 44.8251 14.0479 44.8251Z"
-            fill="#FFB466"
-          />
-          <path
-            id={`${id}-track`}
-            d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
-            strokeWidth="13.6469"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            id={`${id}-progress`}
-            d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
-            strokeWidth="13.6469"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeDasharray={progressPathLength}
-            strokeDashoffset={progressOffset}
-            style={{ transition: "stroke-dashoffset .2s ease-out" }}
-            ref={pathRef}
-          />
-          <path
-            id={`${id}-end-dot`}
-            d="M226.025 44.8251C231.411 44.8251 235.776 40.5242 235.776 35.2187C235.776 29.9133 231.411 25.6124 226.025 25.6124C220.64 25.6124 216.274 29.9133 216.274 35.2187C216.274 40.5242 220.64 44.8251 226.025 44.8251Z"
-            fill="#688CBA"
-          />
-        </chakra.svg>
-        {currentLoadingText && (
-          <Text
-            textAlign="center"
-            marginTop={2}
-            fontWeight="bold"
-            {...labelProps}
-          >
-            {currentLoadingText}
-          </Text>
-        )}
-      </ProgressLoaderWrapper>
-    );
-  },
-);
-ProgressLoader.displayName = "ProgressLoader";
+  return (
+    <ProgressLoaderWrapper
+      {...progressBarProps}
+      width={width}
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={ariaLabel ?? t(texts.fallbackLabel(value ?? "?"))}
+      {...rest}
+      ref={ref}
+    >
+      <chakra.svg as="svg" viewBox="0 0 246 78" fill="none">
+        <path
+          id={`${id}-start-dot`}
+          d="M14.0479 44.8251C19.4332 44.8251 23.7988 40.5242 23.7988 35.2187C23.7988 29.9133 19.4332 25.6124 14.0479 25.6124C8.66254 25.6124 4.29688 29.9133 4.29688 35.2187C4.29688 40.5242 8.66254 44.8251 14.0479 44.8251Z"
+          fill="#FFB466"
+        />
+        <path
+          id={`${id}-track`}
+          d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
+          strokeWidth="13.6469"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id={`${id}-progress`}
+          d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
+          strokeWidth="13.6469"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray={progressPathLength}
+          strokeDashoffset={progressOffset}
+          style={{ transition: "stroke-dashoffset .2s ease-out" }}
+          ref={pathRef}
+        />
+        <path
+          id={`${id}-end-dot`}
+          d="M226.025 44.8251C231.411 44.8251 235.776 40.5242 235.776 35.2187C235.776 29.9133 231.411 25.6124 226.025 25.6124C220.64 25.6124 216.274 29.9133 216.274 35.2187C216.274 40.5242 220.64 44.8251 226.025 44.8251Z"
+          fill="#688CBA"
+        />
+      </chakra.svg>
+      {currentLoadingText && (
+        <Text
+          textAlign="center"
+          marginTop={2}
+          fontWeight="bold"
+          {...labelProps}
+        >
+          {currentLoadingText}
+        </Text>
+      )}
+    </ProgressLoaderWrapper>
+  );
+};
 
 const texts = createTexts({
   fallbackLabel: (value) => ({

package/src/loader/Skeleton.tsx

@@ -11,7 +11,6 @@ import {
   useRecipe,
 } from "@chakra-ui/react";
 import * as React from "react";
-import { forwardRef } from "react";
 
 import { skeletonRecipe } from "@/theme/recipes/skeleton";
 
@@ -22,10 +21,12 @@ export type SkeletonCircleProps = ChakraSkeletonProps &
     size?: CircleProps["size"];
   };
 
-export const SkeletonCircle = React.forwardRef<
-  HTMLDivElement,
-  SkeletonCircleProps
->(function SkeletonCircle(props, ref) {
+export const SkeletonCircle = function SkeletonCircle({
+  ref,
+  ...props
+}: SkeletonCircleProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
   const recipe = useRecipe({ key: "skeleton" });
 
   const [recipeProps, restProps] = recipe.splitVariantProps({
@@ -41,58 +42,65 @@ export const SkeletonCircle = React.forwardRef<
       <ChakraSkeleton css={{ ...recipe(recipeProps), ...css }} {...rest} />
     </Circle>
   );
-});
+};
 
 export type SkeletonTextProps = ChakraSkeletonProps &
   SkeletonVariantProps & {
     noOfLines?: number;
   };
 
-export const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(
-  function SkeletonText(props, ref) {
-    const recipe = useRecipe({ key: "skeleton" });
-    const [recipeProps, restProps] = recipe.splitVariantProps({
-      loading: true,
-      variant: "pulse",
-      ...props,
-    });
-    const { noOfLines = 3, height = "0.5rem", gap, css, ...rest } = restProps;
+export const SkeletonText = function SkeletonText(
+  props: SkeletonTextProps & { ref?: React.Ref<HTMLDivElement> },
+) {
+  const recipe = useRecipe({ key: "skeleton" });
+  const [recipeProps, restProps] = recipe.splitVariantProps({
+    loading: true,
+    variant: "pulse",
+    ...props,
+  });
 
-    return (
-      <Stack gap={gap} width="full" ref={ref}>
-        {Array.from({ length: noOfLines }).map((_, index) => (
-          <ChakraSkeleton
-            height={height}
-            css={{ ...recipe(recipeProps), ...css }}
-            key={index}
-            _last={{ maxW: "80%" }}
-            {...rest}
-          />
-        ))}
-      </Stack>
-    );
-  },
-);
+  const {
+    noOfLines = 3,
+    height = "0.5rem",
+    gap,
+    css,
+    ref,
+    ...rest
+  } = restProps;
 
+  return (
+    <Stack gap={gap} width="full" ref={ref}>
+      {Array.from({ length: noOfLines }).map((_, index) => (
+        <ChakraSkeleton
+          key={index}
+          height={height}
+          css={{ ...recipe(recipeProps), ...css }}
+          _last={{ maxW: "80%" }}
+          {...rest}
+        />
+      ))}
+    </Stack>
+  );
+};
 export type SkeletonProps = ChakraSkeletonProps & SkeletonVariantProps;
 
-export const Skeleton = forwardRef<HTMLDivElement, SkeletonTextProps>(
-  function SkeletonText(props, ref) {
-    const recipe = useRecipe({ key: "skeleton" });
-    const [recipeProps, restProps] = recipe.splitVariantProps({
-      loading: true,
-      variant: "pulse",
-      ...props,
-    });
+export const Skeleton = function Skeleton(
+  props: SkeletonProps & { ref?: React.Ref<HTMLDivElement> },
+) {
+  const recipe = useRecipe({ key: "skeleton" });
+  const [recipeProps, restProps] = recipe.splitVariantProps({
+    loading: true,
+    variant: "pulse",
+    ...props,
+  });
 
-    const { css, ...rest } = restProps;
+  const { css, ref, ...rest } = restProps;
 
-    return (
-      <ChakraSkeleton
-        ref={ref}
-        css={{ ...recipe(recipeProps), ...css }}
-        {...rest}
-      />
-    );
-  },
-);
+  return (
+    <ChakraSkeleton
+      ref={ref}
+      css={{ ...recipe(recipeProps), ...css }}
+      {...rest}
+    />
+  );
+};

package/src/logo/CargonetLogo.tsx

@@ -1,5 +1,4 @@
 import { chakra } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
 export type CargonetLogoProps = {
   /** The color of the logo
@@ -10,90 +9,92 @@ export type CargonetLogoProps = {
   colorPalette: "light" | "dark";
 };
 
-export const CargonetLogo = forwardRef<SVGSVGElement, CargonetLogoProps>(
-  (props, ref) => {
-    const { colorPalette } = props;
-    // These colors should not be tokenized, as they are logo specific.
-    const mainColor = "#DF8200";
-    const accentColor = colorPalette === "light" ? "#383E42" : "#ffffff";
+export const CargonetLogo = ({
+  ref,
+  ...props
+}: CargonetLogoProps & {
+  ref?: React.RefObject<SVGSVGElement>;
+}) => {
+  const { colorPalette } = props;
+  // These colors should not be tokenized, as they are logo specific.
+  const mainColor = "#DF8200";
+  const accentColor = colorPalette === "light" ? "#383E42" : "#ffffff";
 
-    return (
-      <chakra.svg viewBox="0 0 251 52" ref={ref} {...props}>
-        <title>Cargonet logo</title>
-        <path
-          d="M87.9222 14.602L84.3862 18.7417C81.1953 15.9821 79.1685 15.2914 76.5379 15.2914C70.933 15.2914 67.4398 19.5609 67.4398 26.029C67.4398 32.5834 71.0186 36.8523 76.4089 36.8523C79.6855 36.8523 81.6694 35.6447 84.9038 32.9285L88.3969 36.982C84.645 40.5608 81.1524 42.1134 76.4951 42.1134C66.9651 42.1134 61.2733 35.214 61.2733 25.9856C61.2733 16.9732 66.7492 10.0309 76.5379 10.0309C81.2387 10.0309 84.3 11.4533 87.9222 14.602Z"
-          fill={accentColor}
-        />
-        <path
-          d="M106.461 41.3802C106.159 40.5604 105.986 39.5259 105.857 38.4046C104.693 40.6038 102.408 42.1131 98.6988 42.1131C94.4299 42.1131 90.8511 40.216 90.8511 35.774C90.8511 30.9013 95.1628 29.1333 100.812 28.1417L105.598 27.3225V26.7187C105.598 24.3903 103.917 23.1399 101.416 23.1399C98.4829 23.1399 96.5858 24.476 94.4734 26.6759L91.0231 23.5712C93.9124 20.2934 97.1468 18.6117 101.373 18.6117C107.754 18.6117 110.946 21.846 110.946 26.5028V35.9037C110.946 38.448 111.118 40.216 111.506 41.3802H106.461ZM105.598 32.6265V31.1607L101.373 31.9364C98.0093 32.5836 96.2414 33.4022 96.2414 35.3861C96.2414 36.9388 97.5346 37.9299 99.8202 37.9299C102.666 37.9299 105.598 36.4647 105.598 32.6265Z"
-          fill={accentColor}
-        />
-        <path
-          d="M130.65 19.6469L129.572 24.5625C128.537 24.2614 127.373 24.0455 126.295 24.0455C123.233 24.0455 121.422 26.4601 121.422 30.5565V41.3803H115.816V25.8563C115.816 22.8813 115.644 20.8111 115.385 19.3448H120.603C120.818 20.1645 120.991 21.4578 121.034 23.0967C122.112 20.5524 123.88 18.9569 126.812 18.9569C128.192 18.9569 129.529 19.2157 130.65 19.6469Z"
-          fill={accentColor}
-        />
-        <path
-          d="M152.813 19.3447V40.6896C152.813 46.9859 148.156 50.1768 142.075 50.1768C138.669 50.1768 135.219 49.3142 132.028 47.4172L134.745 43.3202C137.289 44.8729 139.532 45.692 141.99 45.692C145.008 45.692 147.336 44.269 147.336 40.3018V37.4993C146.043 39.5255 143.93 40.8199 140.911 40.8199C135.349 40.8199 131.209 36.3779 131.209 29.7373C131.209 23.0966 135.349 18.6118 140.911 18.6118C144.188 18.6118 146.345 20.0782 147.639 22.3631V19.3447H152.813ZM147.509 29.7373C147.509 25.9425 145.267 23.3988 142.162 23.3988C138.971 23.3988 136.858 25.9425 136.858 29.7373C136.858 33.5314 138.971 36.0763 142.162 36.0763C145.267 36.0763 147.509 33.5314 147.509 29.7373Z"
-          fill={accentColor}
-        />
-        <path
-          d="M178.72 30.341C178.72 37.3267 173.976 42.0702 167.292 42.0702C160.609 42.0702 155.866 37.3267 155.866 30.341C155.866 23.3553 160.609 18.6117 167.292 18.6117C173.976 18.6117 178.72 23.3553 178.72 30.341ZM161.557 30.341C161.557 34.6967 163.886 37.4992 167.292 37.4992C170.699 37.4992 173.028 34.6967 173.028 30.341C173.028 26.0721 170.699 23.1828 167.292 23.1828C163.886 23.1828 161.557 26.0721 161.557 30.341Z"
-          fill={accentColor}
-        />
-        <path
-          d="M208.903 10.7638V41.38H202.478L194.673 28.9612C192.516 25.5115 190.403 22.1046 188.635 18.8274C188.851 22.4497 188.937 26.4598 188.937 30.8155V41.38H183.029V10.7638H189.585L197.82 23.9589C199.717 26.9773 201.616 29.9529 203.21 32.8851C203.081 29.6507 203.038 26.0719 203.038 21.8893V10.7638H208.903Z"
-          fill={mainColor}
-        />
-        <path
-          d="M233.663 37.7578C230.386 41.035 227.324 42.0707 223.788 42.0707C216.672 42.0707 212.231 37.499 212.231 30.4705C212.231 23.6573 216.371 18.6116 223.313 18.6116C230.041 18.6116 233.619 22.8376 233.619 29.6079C233.619 30.2546 233.577 31.2897 233.534 31.6781H217.578C218.009 35.0844 220.08 37.499 223.917 37.499C226.505 37.499 228.144 36.5936 230.6 34.4378L233.663 37.7578ZM217.708 27.9262H228.359C228.144 24.8644 226.376 22.881 223.227 22.881C220.123 22.881 218.311 24.8644 217.708 27.9262Z"
-          fill={mainColor}
-        />
-        <path
-          d="M250.41 41.0785C248.556 41.6817 246.789 41.8976 245.538 41.8976C240.88 41.8976 239.198 39.8709 239.198 35.7739V23.4415H235.275V19.3445H239.198V12.6182H244.805V19.3445H250.066V23.4415H244.805V34.8257C244.805 36.5937 245.624 37.0244 247.047 37.0244C247.651 37.0244 248.47 36.9387 249.721 36.6365L250.41 41.0785Z"
-          fill={mainColor}
-        />
-        <path
-          d="M21.4911 10.2565H31.1579V0.589175H21.4911V10.2565Z"
-          fill={mainColor}
-        />
-        <path
-          d="M41.3861 10.8855H31.7757V20.5528H41.3861V10.8855Z"
-          fill={mainColor}
-        />
-        <path
-          d="M42.0022 10.2547H51.6126V0.587402H42.0022V10.2547Z"
-          fill={mainColor}
-        />
-        <path
-          d="M21.477 30.7758H31.1431V21.1654H21.477V30.7758Z"
-          fill={mainColor}
-        />
-        <path
-          d="M11.2124 20.5493H20.8791V10.8826H11.2124V20.5493Z"
-          fill={mainColor}
-        />
-        <path
-          d="M0.910156 30.7911H10.5775V21.1801H0.910156V30.7911Z"
-          fill={mainColor}
-        />
-        <path
-          d="M11.1948 41.0258H20.8615V31.4154H11.1948V41.0258Z"
-          fill={mainColor}
-        />
-        <path
-          d="M31.7669 41.0581H41.4336V31.3908H31.7669V41.0581Z"
-          fill={mainColor}
-        />
-        <path
-          d="M21.4776 51.2277H31.1443V41.656H21.4776V51.2277Z"
-          fill={mainColor}
-        />
-        <path
-          d="M42.0615 51.2283H51.7282V41.6989H42.0615V51.2283Z"
-          fill={mainColor}
-        />
-      </chakra.svg>
-    );
-  },
-);
-CargonetLogo.displayName = "CargonetLogo";
+  return (
+    <chakra.svg viewBox="0 0 251 52" ref={ref} {...props}>
+      <title>Cargonet logo</title>
+      <path
+        d="M87.9222 14.602L84.3862 18.7417C81.1953 15.9821 79.1685 15.2914 76.5379 15.2914C70.933 15.2914 67.4398 19.5609 67.4398 26.029C67.4398 32.5834 71.0186 36.8523 76.4089 36.8523C79.6855 36.8523 81.6694 35.6447 84.9038 32.9285L88.3969 36.982C84.645 40.5608 81.1524 42.1134 76.4951 42.1134C66.9651 42.1134 61.2733 35.214 61.2733 25.9856C61.2733 16.9732 66.7492 10.0309 76.5379 10.0309C81.2387 10.0309 84.3 11.4533 87.9222 14.602Z"
+        fill={accentColor}
+      />
+      <path
+        d="M106.461 41.3802C106.159 40.5604 105.986 39.5259 105.857 38.4046C104.693 40.6038 102.408 42.1131 98.6988 42.1131C94.4299 42.1131 90.8511 40.216 90.8511 35.774C90.8511 30.9013 95.1628 29.1333 100.812 28.1417L105.598 27.3225V26.7187C105.598 24.3903 103.917 23.1399 101.416 23.1399C98.4829 23.1399 96.5858 24.476 94.4734 26.6759L91.0231 23.5712C93.9124 20.2934 97.1468 18.6117 101.373 18.6117C107.754 18.6117 110.946 21.846 110.946 26.5028V35.9037C110.946 38.448 111.118 40.216 111.506 41.3802H106.461ZM105.598 32.6265V31.1607L101.373 31.9364C98.0093 32.5836 96.2414 33.4022 96.2414 35.3861C96.2414 36.9388 97.5346 37.9299 99.8202 37.9299C102.666 37.9299 105.598 36.4647 105.598 32.6265Z"
+        fill={accentColor}
+      />
+      <path
+        d="M130.65 19.6469L129.572 24.5625C128.537 24.2614 127.373 24.0455 126.295 24.0455C123.233 24.0455 121.422 26.4601 121.422 30.5565V41.3803H115.816V25.8563C115.816 22.8813 115.644 20.8111 115.385 19.3448H120.603C120.818 20.1645 120.991 21.4578 121.034 23.0967C122.112 20.5524 123.88 18.9569 126.812 18.9569C128.192 18.9569 129.529 19.2157 130.65 19.6469Z"
+        fill={accentColor}
+      />
+      <path
+        d="M152.813 19.3447V40.6896C152.813 46.9859 148.156 50.1768 142.075 50.1768C138.669 50.1768 135.219 49.3142 132.028 47.4172L134.745 43.3202C137.289 44.8729 139.532 45.692 141.99 45.692C145.008 45.692 147.336 44.269 147.336 40.3018V37.4993C146.043 39.5255 143.93 40.8199 140.911 40.8199C135.349 40.8199 131.209 36.3779 131.209 29.7373C131.209 23.0966 135.349 18.6118 140.911 18.6118C144.188 18.6118 146.345 20.0782 147.639 22.3631V19.3447H152.813ZM147.509 29.7373C147.509 25.9425 145.267 23.3988 142.162 23.3988C138.971 23.3988 136.858 25.9425 136.858 29.7373C136.858 33.5314 138.971 36.0763 142.162 36.0763C145.267 36.0763 147.509 33.5314 147.509 29.7373Z"
+        fill={accentColor}
+      />
+      <path
+        d="M178.72 30.341C178.72 37.3267 173.976 42.0702 167.292 42.0702C160.609 42.0702 155.866 37.3267 155.866 30.341C155.866 23.3553 160.609 18.6117 167.292 18.6117C173.976 18.6117 178.72 23.3553 178.72 30.341ZM161.557 30.341C161.557 34.6967 163.886 37.4992 167.292 37.4992C170.699 37.4992 173.028 34.6967 173.028 30.341C173.028 26.0721 170.699 23.1828 167.292 23.1828C163.886 23.1828 161.557 26.0721 161.557 30.341Z"
+        fill={accentColor}
+      />
+      <path
+        d="M208.903 10.7638V41.38H202.478L194.673 28.9612C192.516 25.5115 190.403 22.1046 188.635 18.8274C188.851 22.4497 188.937 26.4598 188.937 30.8155V41.38H183.029V10.7638H189.585L197.82 23.9589C199.717 26.9773 201.616 29.9529 203.21 32.8851C203.081 29.6507 203.038 26.0719 203.038 21.8893V10.7638H208.903Z"
+        fill={mainColor}
+      />
+      <path
+        d="M233.663 37.7578C230.386 41.035 227.324 42.0707 223.788 42.0707C216.672 42.0707 212.231 37.499 212.231 30.4705C212.231 23.6573 216.371 18.6116 223.313 18.6116C230.041 18.6116 233.619 22.8376 233.619 29.6079C233.619 30.2546 233.577 31.2897 233.534 31.6781H217.578C218.009 35.0844 220.08 37.499 223.917 37.499C226.505 37.499 228.144 36.5936 230.6 34.4378L233.663 37.7578ZM217.708 27.9262H228.359C228.144 24.8644 226.376 22.881 223.227 22.881C220.123 22.881 218.311 24.8644 217.708 27.9262Z"
+        fill={mainColor}
+      />
+      <path
+        d="M250.41 41.0785C248.556 41.6817 246.789 41.8976 245.538 41.8976C240.88 41.8976 239.198 39.8709 239.198 35.7739V23.4415H235.275V19.3445H239.198V12.6182H244.805V19.3445H250.066V23.4415H244.805V34.8257C244.805 36.5937 245.624 37.0244 247.047 37.0244C247.651 37.0244 248.47 36.9387 249.721 36.6365L250.41 41.0785Z"
+        fill={mainColor}
+      />
+      <path
+        d="M21.4911 10.2565H31.1579V0.589175H21.4911V10.2565Z"
+        fill={mainColor}
+      />
+      <path
+        d="M41.3861 10.8855H31.7757V20.5528H41.3861V10.8855Z"
+        fill={mainColor}
+      />
+      <path
+        d="M42.0022 10.2547H51.6126V0.587402H42.0022V10.2547Z"
+        fill={mainColor}
+      />
+      <path
+        d="M21.477 30.7758H31.1431V21.1654H21.477V30.7758Z"
+        fill={mainColor}
+      />
+      <path
+        d="M11.2124 20.5493H20.8791V10.8826H11.2124V20.5493Z"
+        fill={mainColor}
+      />
+      <path
+        d="M0.910156 30.7911H10.5775V21.1801H0.910156V30.7911Z"
+        fill={mainColor}
+      />
+      <path
+        d="M11.1948 41.0258H20.8615V31.4154H11.1948V41.0258Z"
+        fill={mainColor}
+      />
+      <path
+        d="M31.7669 41.0581H41.4336V31.3908H31.7669V41.0581Z"
+        fill={mainColor}
+      />
+      <path
+        d="M21.4776 51.2277H31.1443V41.656H21.4776V51.2277Z"
+        fill={mainColor}
+      />
+      <path
+        d="M42.0615 51.2283H51.7282V41.6989H42.0615V51.2283Z"
+        fill={mainColor}
+      />
+    </chakra.svg>
+  );
+};