@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/logo/CargonetLogo.tsx

@@ -1,5 +1,5 @@
-import { Box, BoxProps } from "@chakra-ui/react";
-import React from "react";
+import { chakra } from "@chakra-ui/react";
+import React, { forwardRef } from "react";
 
 export type CargonetLogoProps = {
   /** The color of the logo
@@ -7,92 +7,92 @@ export type CargonetLogoProps = {
    * Use `"light"` when the logo is used on a light background.
    * Use `"dark"` when the logo is used on a dark background.
    */
-  colorScheme: "light" | "dark";
-} & BoxProps;
+  colorPalette: "light" | "dark";
+};
 
-export const CargonetLogo = ({
-  colorScheme,
-  ...boxProps
-}: CargonetLogoProps) => {
-  // These colors should not be tokenized, as they are logo specific.
-  const mainColor = "#DF8200";
-  const accentColor = colorScheme === "light" ? "#383E42" : "#ffffff";
+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";
 
-  return (
-    <Box as="svg" viewBox="0 0 251 52" {...boxProps}>
-      <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}
-      />
-    </Box>
-  );
-};
+    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>
+    );
+  },
+);

package/src/logo/VyLogo.tsx

@@ -1,27 +1,46 @@
-import { Box, BoxProps } from "@chakra-ui/react";
-import React, { useId } from "react";
+import { Box, BoxProps, chakra, Icon } from "@chakra-ui/react";
+import React, { forwardRef, SVGProps, useId } from "react";
+import { useColorMode } from "..";
 
-export type VyLogoProps = {
-  /** The color of the logo
-   *
-   * Use `"light"` when the logo is used on a light background.
-   * Use `"dark"` when the logo is used on a dark background.
-   */
-  colorScheme: "light" | "dark";
-} & BoxProps;
-export const VyLogo = ({ colorScheme, ...boxProps }: VyLogoProps) => {
-  // These colors should not be tokenized, as they are logo specific.
-  const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
-  const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
+export const SvgBox = chakra("svg");
+
+const fillRecipe = {
+  base: {},
+  variants: {
+    fill: {
+      main: {
+        fill: {
+          _light: "#1d211c",
+          _dark: "#ffffff",
+        },
+      },
+      accent: {
+        fill: {
+          _light: "#138c6e",
+          _dark: "#ffffff",
+        },
+      },
+    },
+  },
+};
+
+const Path = chakra("path", fillRecipe);
+
+const SVGGroup = chakra("g", fillRecipe);
+
+type VyLogoProps = BoxProps & React.SVGProps<SVGSVGElement>;
+
+export const VyLogo = forwardRef<SVGSVGElement, VyLogoProps>((props, ref) => {
   const id = useId();
+
   return (
-    <Box as="svg" viewBox="0 0 107 54" {...boxProps}>
+    <SvgBox ref={ref} viewBox="0 0 107 54" {...props}>
       <title>Vy logo</title>
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M79.97 33.44a.04.04 0 0 0 0-.08 5.76 5.76 0 0 1-2.32-.85c-1.56-1-2.79-2.9-3.83-6.07L68.14 7.16c-1.18-4.04-3.42-5.85-5.48-6.6a8.36 8.36 0 0 0-2.88-.52h-1.44a.04.04 0 0 0 0 .08c.57.09 1.18.24 1.8.5 1.92.8 3.92 2.63 5.06 6.54l5.61 19.07c1.06 3.3 2.31 5.27 3.92 6.3 1.01.64 2.17.9 3.5.9h1.74Z"
-        fill={mainColor}
+        fill="main"
       />
       <mask
         id={`${id}-a`}
@@ -32,33 +51,33 @@ export const VyLogo = ({ colorScheme, ...boxProps }: VyLogoProps) => {
         width="94"
         height="54"
       >
-        <path
+        <Path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M0 .03h93.26v53.65H0V.03Z"
-          fill={mainColor}
+          fill="main"
         />
       </mask>
-      <g
+      <SVGGroup
         mask={`url(#${id}-a)`}
         fillRule="evenodd"
         clipRule="evenodd"
-        fill={mainColor}
+        fill="main"
       >
-        <path d="M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" />
-        <path d="M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" />
-      </g>
-      <path
+        <Path d="M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" />
+        <Path d="M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" />
+      </SVGGroup>
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z"
-        fill={accentColor}
+        fill="accent"
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M85.25 34.53h-2.93L78.58 46.9c-1.82 6.1 1.05 6.73 2.15 6.73h2.31a.04.04 0 0 0 .01-.09c-1.25-.3-2.96-1.6-1.45-6.64l3.65-12.37ZM102.35.11c.02 0 .03-.02.03-.04a.04.04 0 0 0-.04-.04h-.4c-2.54 0-3.92 1.27-4.8 4.3 0 0-5 16.82-6.57 22.03-1.57 5.2-2.65 6.6-4.78 6.97l-.11.03a.04.04 0 0 0 0 .08h1.45c3.72 0 5.1-2.48 6.41-6.84l7.5-25.07c.19-.6.7-1.23 1.31-1.42Z"
-        fill={mainColor}
+        fill="main"
       />
       <mask
         id={`${id}-b`}
@@ -69,33 +88,33 @@ export const VyLogo = ({ colorScheme, ...boxProps }: VyLogoProps) => {
         width="78"
         height="54"
       >
-        <path
+        <Path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M29.55.04H106v53.64H29.55V.04Z"
-          fill={mainColor}
+          fill="main"
         />
       </mask>
-      <g mask={`url(#${id}-b)`} fillRule="evenodd" clipRule="evenodd">
-        <path
+      <SVGGroup mask={`url(#${id}-b)`} fillRule="evenodd" clipRule="evenodd">
+        <Path
           d="m88.2 34.45-3.96 13.46c-1.54 5.18.9 5.72 1.83 5.72h2.26a.04.04 0 0 0 0-.09c-1.05-.27-2.44-1.4-1.18-5.63l4.43-15.02c-.7.71-1.88 1.37-3.38 1.56ZM93.71 53.63c.02 0 .04-.02.04-.05a.04.04 0 0 0-.03-.04c-.9-.25-2.02-1.24-.96-4.77 0 0 12.4-42.2 13.08-44.6a3.1 3.1 0 0 0-2.47-4.1c-.02 0-.06-.02-.07.01-.01.04.03.06.04.06.3.16.63.52.45 1.14L89.84 48.77c-1.32 4.4.76 4.86 1.55 4.86h2.32ZM74.1 33.44a.04.04 0 0 0 0-.08 5.77 5.77 0 0 1-2.3-.83c-1.64-1.04-2.9-3.06-3.98-6.5-.1-.29-5.37-18.25-5.55-18.87-1.12-3.8-2.91-5.63-4.68-6.46a7.06 7.06 0 0 0-3.04-.66H53a.04.04 0 0 0-.02.08c.3.05 4.32.17 6.35 7.04 2.03 6.86 4.46 15.07 5.28 17.97 1.77 6.26 4.07 8.3 7.75 8.3h1.73Z"
-          fill={mainColor}
+          fill="main"
         />
-        <path
+        <Path
           d="M55.43 2.4c-1.48 1.27-2.7 3.16-3.44 5.9-.07.29-11.08 37.74-11.32 38.55-.93 3.12-1.7 6.21-5.2 6.75a.04.04 0 0 0 0 .08h.7l.6-.01c3.56-.14 5.33-1.66 6.85-6.82L54.94 8.3c.44-1.44.96-3.08 1.7-4.52-.15-.25-.7-.96-1.2-1.38Z"
-          fill={mainColor}
+          fill="main"
         />
-        <path
+        <Path
           d="M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z"
-          fill={accentColor}
+          fill="accent"
         />
-      </g>
-      <path
+      </SVGGroup>
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M26.55 50.33a9.09 9.09 0 0 1-1.24-2.7c-.44-1.54-12.46-42.5-12.46-42.5C11.82 1.56 10.2.07 7.22.07H5.4a.04.04 0 0 0 0 .08C7.67.5 9 2.04 9.9 5.13l12.46 42.5c.65 2.28 1.53 3.74 2.5 4.65.7-.4 1.29-1.05 1.69-1.95Z"
-        fill={mainColor}
+        fill="main"
       />
-    </Box>
+    </SvgBox>
   );
-};
+});