@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/logo/VyLogoPride.tsx

@@ -1,164 +1,162 @@
-import { Box, BoxProps } from "@chakra-ui/react";
-import React, { useId } from "react";
+import { BoxProps } from "@chakra-ui/react";
+import React, { forwardRef, useId } from "react";
+import { SvgBox } from "./VyLogo";
 
-export type VyLogoPrideProps = {
-  /** 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 VyLogoPride = ({ colorScheme, ...boxProps }: VyLogoPrideProps) => {
-  // These colors should not be tokenized, as they are logo specific.
-  const pinkColor = colorScheme === "light" ? "#ED6F99" : "#ffffff";
-  const purpleColor = colorScheme === "light" ? "#C06CF7" : "#ffffff";
-  const darkPurpleColor = colorScheme === "light" ? "#821889" : "#ffffff";
-  const greenColor = colorScheme === "light" ? "#56BDBF" : "#ffffff";
-  const darkGreenColor = colorScheme === "light" ? "#3E8C26" : "#ffffff";
-  const blueColor = colorScheme === "light" ? "#3A0692" : "#ffffff";
-  const redColor = colorScheme === "light" ? "#EA3323" : "#ffffff";
-  const orangeColor = colorScheme === "light" ? "#F09436" : "#ffffff";
-  const yellowColor = colorScheme === "light" ? "#FFFF54" : "#ffffff";
+export type VyLogoPrideProps = BoxProps;
 
-  const id = useId();
-  return (
-    <Box as="svg" viewBox="0 0 107 54" {...boxProps}>
-      <title>Vy logo pride</title>
-      <svg
-        width="108"
-        height="55"
-        viewBox="0 0 108 55"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M81.4496 34.0577C81.4727 34.0577 81.4914 34.0389 81.4914 34.0158C81.4914 33.9951 81.4762 33.9779 81.4564 33.9747C80.5875 33.8486 79.8027 33.5738 79.0873 33.115C77.4968 32.0951 76.2499 30.1645 75.189 26.9334C75.0494 26.5085 69.7485 8.46796 69.4024 7.29056C68.1947 3.18059 65.9216 1.33839 63.8188 0.561417C62.7398 0.162674 61.7055 0.0441895 60.8829 0.0441895C60.4167 0.0441895 59.4168 0.0441895 59.4168 0.0441895C59.3937 0.0441895 59.375 0.0629034 59.375 0.0859014C59.375 0.106645 59.3902 0.123893 59.4101 0.127162C59.9962 0.211263 60.6246 0.368077 61.262 0.635935C63.2087 1.45371 65.24 3.30719 66.4107 7.29056C66.6722 8.18038 72.0104 26.3533 72.125 26.7112C73.2046 30.0866 74.4763 32.0839 76.1099 33.1244C77.1418 33.7817 78.318 34.0577 79.6817 34.0577H81.4496"
-          fill={pinkColor}
-        />
-        <mask
-          id={`${id}-a-pride`}
-          style={{ maskType: "luminance" }}
-          maskUnits="userSpaceOnUse"
-          x="0"
-          y="0"
-          width="95"
+export const VyLogoPride = forwardRef<SVGSVGElement, VyLogoPrideProps>(
+  (props, ref) => {
+    // These colors should not be tokenized, as they are logo specific.
+
+    const pinkColor = "#ED6F99";
+    const purpleColor = "#C06CF7";
+    const darkPurpleColor = "#821889";
+    const greenColor = "#56BDBF";
+    const darkGreenColor = "#3E8C26";
+    const blueColor = "#3A0692";
+    const redColor = "#EA3323";
+    const orangeColor = "#F09436";
+    const yellowColor = "#FFFF54";
+
+    const id = useId();
+    return (
+      <SvgBox ref={ref} viewBox="0 0 107 54" {...(props as any)}>
+        <title>Vy logo pride</title>
+        <svg
+          width="108"
           height="55"
+          viewBox="0 0 108 55"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M0.00585938 0.0339355H94.9827V54.6696H0.00585938V0.0339355Z"
-            fill="white"
+            d="M81.4496 34.0577C81.4727 34.0577 81.4914 34.0389 81.4914 34.0158C81.4914 33.9951 81.4762 33.9779 81.4564 33.9747C80.5875 33.8486 79.8027 33.5738 79.0873 33.115C77.4968 32.0951 76.2499 30.1645 75.189 26.9334C75.0494 26.5085 69.7485 8.46796 69.4024 7.29056C68.1947 3.18059 65.9216 1.33839 63.8188 0.561417C62.7398 0.162674 61.7055 0.0441895 60.8829 0.0441895C60.4167 0.0441895 59.4168 0.0441895 59.4168 0.0441895C59.3937 0.0441895 59.375 0.0629034 59.375 0.0859014C59.375 0.106645 59.3902 0.123893 59.4101 0.127162C59.9962 0.211263 60.6246 0.368077 61.262 0.635935C63.2087 1.45371 65.24 3.30719 66.4107 7.29056C66.6722 8.18038 72.0104 26.3533 72.125 26.7112C73.2046 30.0866 74.4763 32.0839 76.1099 33.1244C77.1418 33.7817 78.318 34.0577 79.6817 34.0577H81.4496"
+            fill={pinkColor}
           />
-        </mask>
-        <g mask={`url(#${id}-a-pride)`}>
+          <mask
+            id={`${id}-a-pride`}
+            style={{ maskType: "luminance" }}
+            maskUnits="userSpaceOnUse"
+            x="0"
+            y="0"
+            width="95"
+            height="55"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M0.00585938 0.0339355H94.9827V54.6696H0.00585938V0.0339355Z"
+              fill="white"
+            />
+          </mask>
+          <g mask={`url(#${id}-a-pride)`}>
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M86.1392 34.0577C86.1622 34.0577 86.1809 34.0389 86.1809 34.0158C86.1809 33.9951 86.1658 33.9779 86.146 33.9747V33.9745C83.7657 33.6665 82.2265 30.3247 81.3764 27.4799C80.4843 24.4948 77.2629 13.5951 75.3455 7.29056C73.4194 0.957342 67.4267 0.0485861 64.7129 0.0441895H64.7137C64.6906 0.0441895 64.6719 0.0629034 64.6719 0.0859014C64.6719 0.106645 64.6869 0.123893 64.7068 0.127162L64.7067 0.127388C67.2413 0.468862 70.8417 2.00375 72.3953 7.29056C73.7591 11.9308 78.0927 26.6723 78.2592 27.1656C79.2998 30.2466 80.5197 32.1068 82.0639 33.1046C83.1032 33.776 84.2891 34.0577 85.6664 34.0577H86.1392"
+              fill={purpleColor}
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M23.7089 54.6763C23.4058 54.6763 23.1352 54.6763 22.9803 54.6763C20.8144 54.6763 18.2099 53.5754 16.7766 48.5188L3.8641 4.45414C3.09965 1.80939 1.96226 0.481143 0.0347223 0.151506C0.014881 0.148237 0 0.131101 0 0.110245C0 0.0871344 0.018714 0.0684204 0.0418246 0.0684204H1.98402C4.56565 0.0684204 5.96987 1.36104 6.86386 4.45414C6.86386 4.45414 18.8019 44.9686 19.8869 48.7964C20.6896 51.628 21.628 53.5542 23.0795 54.3328C23.3142 54.4587 23.5119 54.5409 23.7154 54.5932C23.7352 54.5965 23.7506 54.6138 23.7506 54.6345C23.7506 54.6576 23.7319 54.6763 23.7089 54.6763Z"
+              fill={darkPurpleColor}
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M19.3365 6.09794C18.1013 1.82472 16.1613 0.0390015 12.5947 0.0390015H10.8543C10.8312 0.0390015 10.8125 0.0577155 10.8125 0.0808261C10.8125 0.101569 10.8277 0.118818 10.8476 0.122087V0.121974C13.6341 0.517899 15.2582 2.35232 16.341 6.09794C16.341 6.09794 27.027 42.4871 28.4146 47.2512C28.7189 46.2219 29.2327 44.4828 29.8791 42.2935C28.6038 37.9117 19.3365 6.09794 19.3365 6.09794"
+              fill={greenColor}
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M24.7059 54.6763H25.9753C27.5661 54.6763 28.7056 54.2553 29.5596 53.5597C30.9494 52.4272 31.5822 50.5663 32.1676 48.6028C32.2552 48.309 43.5646 9.95201 43.9629 8.45455C45.3098 3.39196 48.3208 1.18687 51.5334 0.404941C52.0668 0.275183 52.6055 0.184995 53.1431 0.127162H53.1439C53.1638 0.123893 53.1789 0.106645 53.1789 0.0859014C53.1789 0.0629034 53.1602 0.0441895 53.1371 0.0441895H51.7232C47.4872 0.0441895 42.7565 1.72507 40.9662 8.45455C40.3206 10.8814 29.2585 48.309 29.1709 48.6028C28.5854 50.5663 27.9202 52.6362 26.5303 53.7687C25.9647 54.2295 25.4469 54.4781 24.6995 54.5933H24.699C24.6792 54.5966 24.6641 54.614 24.6641 54.6346C24.6641 54.6577 24.6828 54.6764 24.7059 54.6764V54.6763"
+              fill={darkGreenColor}
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M82.7992 28.2698L89.4539 6.09287C90.5365 2.34748 92.1604 0.513059 94.9467 0.117021H94.9471C94.9669 0.113752 94.9821 0.0965034 94.9821 0.0757602C94.9821 0.0526495 94.9635 0.0339355 94.9403 0.0339355H93.2001C89.6335 0.0339355 87.6935 1.81966 86.4583 6.09287L81.3125 23.3801C81.3125 23.3801 82.6735 27.9173 82.7992 28.2698"
+              fill={darkPurpleColor}
+            />
+          </g>
           <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M86.1392 34.0577C86.1622 34.0577 86.1809 34.0389 86.1809 34.0158C86.1809 33.9951 86.1658 33.9779 86.146 33.9747V33.9745C83.7657 33.6665 82.2265 30.3247 81.3764 27.4799C80.4843 24.4948 77.2629 13.5951 75.3455 7.29056C73.4194 0.957342 67.4267 0.0485861 64.7129 0.0441895H64.7137C64.6906 0.0441895 64.6719 0.0629034 64.6719 0.0859014C64.6719 0.106645 64.6869 0.123893 64.7068 0.127162L64.7067 0.127388C67.2413 0.468862 70.8417 2.00375 72.3953 7.29056C73.7591 11.9308 78.0927 26.6723 78.2592 27.1656C79.2998 30.2466 80.5197 32.1068 82.0639 33.1046C83.1032 33.776 84.2891 34.0577 85.6664 34.0577H86.1392"
-            fill={purpleColor}
+            d="M100.313 0.0684204H98.4597C95.4268 0.0684204 93.7771 1.58696 92.7268 5.22074C92.7268 5.22074 86.1431 27.2276 86.0874 27.4145C85.6036 28.9698 84.9952 30.48 84.3828 31.4546C84.9626 32.2484 85.5745 32.7345 86.1805 32.8562C87.3236 31.8751 88.2719 30.0574 89.1204 27.2954C89.1653 27.1488 95.731 5.22074 95.731 5.22074C96.6408 2.0733 98.0002 0.512821 100.319 0.151506H100.32C100.34 0.148237 100.355 0.131101 100.355 0.110245C100.355 0.0871344 100.336 0.0684204 100.313 0.0684204"
+            fill={blueColor}
           />
           <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M23.7089 54.6763C23.4058 54.6763 23.1352 54.6763 22.9803 54.6763C20.8144 54.6763 18.2099 53.5754 16.7766 48.5188L3.8641 4.45414C3.09965 1.80939 1.96226 0.481143 0.0347223 0.151506C0.014881 0.148237 0 0.131101 0 0.110245C0 0.0871344 0.018714 0.0684204 0.0418246 0.0684204H1.98402C4.56565 0.0684204 5.96987 1.36104 6.86386 4.45414C6.86386 4.45414 18.8019 44.9686 19.8869 48.7964C20.6896 51.628 21.628 53.5542 23.0795 54.3328C23.3142 54.4587 23.5119 54.5409 23.7154 54.5932C23.7352 54.5965 23.7506 54.6138 23.7506 54.6345C23.7506 54.6576 23.7319 54.6763 23.7089 54.6763Z"
-            fill={darkPurpleColor}
+            d="M86.829 35.1664H83.8473C82.4939 39.632 80.7038 45.5437 80.0385 47.7716C78.1846 53.98 81.1091 54.6188 82.2256 54.6188C82.3769 54.6188 83.722 54.6188 84.5809 54.6188C84.604 54.6187 84.6227 54.6001 84.6227 54.577C84.6227 54.5571 84.6088 54.5403 84.5902 54.5361H84.5899C83.3122 54.232 81.5755 52.9078 83.1092 47.7716C83.1092 47.7716 85.8127 38.6188 86.829 35.1664"
+            fill={blueColor}
           />
           <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M19.3365 6.09794C18.1013 1.82472 16.1613 0.0390015 12.5947 0.0390015H10.8543C10.8312 0.0390015 10.8125 0.0577155 10.8125 0.0808261C10.8125 0.101569 10.8277 0.118818 10.8476 0.122087V0.121974C13.6341 0.517899 15.2582 2.35232 16.341 6.09794C16.341 6.09794 27.027 42.4871 28.4146 47.2512C28.7189 46.2219 29.2327 44.4828 29.8791 42.2935C28.6038 37.9117 19.3365 6.09794 19.3365 6.09794"
+            d="M104.248 0.115556C104.265 0.110144 104.277 0.0943614 104.277 0.0757602C104.277 0.0526495 104.258 0.0339355 104.235 0.0339355H103.82C101.239 0.0339355 99.8344 1.32655 98.9403 4.41955C98.9403 4.41955 93.8509 21.5423 92.2501 26.8474C90.6493 32.1524 89.5515 33.5736 87.3782 33.9486L87.2635 33.9747C87.2436 33.978 87.2285 33.9951 87.2285 34.0158C87.2285 34.0389 87.2472 34.0577 87.2703 34.0577H88.7449C92.5299 34.0577 93.9393 31.5339 95.2711 27.0896C96.387 23.3664 102.914 1.55428 102.914 1.55428C103.1 0.938746 103.632 0.300666 104.248 0.11533V0.115556"
             fill={greenColor}
           />
+          <mask
+            id={`${id}-b-pride`}
+            style={{ maskType: "luminance" }}
+            maskUnits="userSpaceOnUse"
+            x="30"
+            y="0"
+            width="78"
+            height="55"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M30.0938 0.0441895H107.967V54.6696H30.0938V0.0441895Z"
+              fill="white"
+            />
+          </mask>
+          <g mask={`url(#${id}-b-pride)`}>
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M89.8289 35.0891C88.7828 38.6493 85.8015 48.8015 85.8015 48.8015C84.2266 54.076 86.7112 54.6188 87.6599 54.6188H89.9623C89.9855 54.6188 90.0042 54.6001 90.0042 54.577C90.0042 54.5571 89.9903 54.5403 89.9717 54.5362V54.5363C88.8916 54.2553 87.4798 53.0991 88.7632 48.8015C88.7632 48.8015 92.0286 37.7282 93.2719 33.5031C92.561 34.2226 91.3615 34.8917 89.8289 35.0891"
+              fill={greenColor}
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M95.4467 54.6188C95.4698 54.6188 95.4885 54.6001 95.4885 54.577C95.4885 54.557 95.4747 54.5403 95.4561 54.5362H95.4558C94.5434 54.2765 93.3986 53.2655 94.4728 49.6684C94.4728 49.6684 107.101 6.68958 107.804 4.25563C108.507 1.82169 106.809 0.298979 105.28 0.0692254C105.269 0.0676471 105.219 0.0537807 105.209 0.0862483C105.199 0.118716 105.241 0.138557 105.249 0.143179C105.553 0.303376 105.894 0.672244 105.708 1.30469C105.522 1.93713 91.499 49.6684 91.499 49.6684C90.1586 54.1569 92.273 54.6188 93.0802 54.6188H95.4467"
+              fill={darkGreenColor}
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M75.4659 34.0577C75.4889 34.0577 75.5076 34.0389 75.5076 34.0158C75.5076 33.9951 75.4925 33.9778 75.4726 33.9746H75.4723C74.6146 33.8501 73.8387 33.5807 73.1306 33.1321C71.4607 32.0744 70.1687 30.0201 69.0737 26.521C68.9798 26.2215 63.6049 7.92165 63.4194 7.29056C62.2821 3.42105 60.4546 1.5616 58.6517 0.708874C57.557 0.191083 56.4715 0.0441895 55.5553 0.0441895C54.9539 0.0441895 54.4151 0.0441895 53.9784 0.0441895H53.9715C53.9484 0.0441895 53.9297 0.0629034 53.9297 0.0859014C53.9297 0.106645 53.9448 0.123893 53.9646 0.127162V0.127275C54.26 0.171918 58.362 0.298745 60.4275 7.29056C62.493 14.2825 64.9683 22.6405 65.8045 25.5908C67.6133 31.9722 69.9469 34.0577 73.6985 34.0577H75.4659"
+              fill={redColor}
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M56.4576 2.44421C56.4559 2.44568 56.4541 2.44703 56.4524 2.4485C54.944 3.74292 53.6961 5.66449 52.9539 8.45445C52.8754 8.74959 41.6662 46.889 41.4206 47.7167C40.4784 50.8926 39.6893 54.0469 36.1209 54.5932C36.101 54.5965 36.0859 54.6138 36.0859 54.6345C36.0859 54.6576 36.1047 54.6763 36.1278 54.6763H36.8373C36.8373 54.6763 37.3489 54.6683 37.4515 54.6642C41.0756 54.5179 42.8818 52.978 44.4271 47.7167C45.5556 43.8746 55.8691 8.75883 55.9604 8.45445C56.4006 6.98517 56.9293 5.3123 57.6882 3.84641C57.53 3.59208 56.9713 2.87385 56.4576 2.44421"
+              fill={orangeColor}
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M54.7756 1.4669C53.6292 1.14087 52.0012 1.22801 50.5238 2.41218C49.0463 3.59635 47.7228 5.60664 47.0466 8.14847C46.968 8.4435 35.2535 48.309 35.1658 48.6028C34.5804 50.5662 33.9476 52.4272 32.5578 53.5597C31.9265 54.0741 31.139 54.4382 30.1287 54.5931V54.5932C30.1089 54.5965 30.0938 54.6138 30.0938 54.6345C30.0938 54.6576 30.1125 54.6763 30.1355 54.6763H31.9702C33.561 54.6763 34.7005 54.2555 35.5545 53.5597C36.9444 52.4272 37.5771 50.5663 38.1625 48.6028C38.2502 48.309 49.8795 8.74957 49.958 8.45443C50.7002 5.66447 51.9481 3.7429 53.4565 2.44848C53.8916 2.07499 54.3488 1.75505 54.8217 1.48077C54.8141 1.47817 54.7985 1.47344 54.7756 1.4669"
+              fill={yellowColor}
+            />
+          </g>
           <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M24.7059 54.6763H25.9753C27.5661 54.6763 28.7056 54.2553 29.5596 53.5597C30.9494 52.4272 31.5822 50.5663 32.1676 48.6028C32.2552 48.309 43.5646 9.95201 43.9629 8.45455C45.3098 3.39196 48.3208 1.18687 51.5334 0.404941C52.0668 0.275183 52.6055 0.184995 53.1431 0.127162H53.1439C53.1638 0.123893 53.1789 0.106645 53.1789 0.0859014C53.1789 0.0629034 53.1602 0.0441895 53.1371 0.0441895H51.7232C47.4872 0.0441895 42.7565 1.72507 40.9662 8.45455C40.3206 10.8814 29.2585 48.309 29.1709 48.6028C28.5854 50.5663 27.9202 52.6362 26.5303 53.7687C25.9647 54.2295 25.4469 54.4781 24.6995 54.5933H24.699C24.6792 54.5966 24.6641 54.614 24.6641 54.6346C24.6641 54.6577 24.6828 54.6764 24.7059 54.6764V54.6763"
-            fill={darkGreenColor}
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M82.7992 28.2698L89.4539 6.09287C90.5365 2.34748 92.1604 0.513059 94.9467 0.117021H94.9471C94.9669 0.113752 94.9821 0.0965034 94.9821 0.0757602C94.9821 0.0526495 94.9635 0.0339355 94.9403 0.0339355H93.2001C89.6335 0.0339355 87.6935 1.81966 86.4583 6.09287L81.3125 23.3801C81.3125 23.3801 82.6735 27.9173 82.7992 28.2698"
-            fill={darkPurpleColor}
-          />
-        </g>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M100.313 0.0684204H98.4597C95.4268 0.0684204 93.7771 1.58696 92.7268 5.22074C92.7268 5.22074 86.1431 27.2276 86.0874 27.4145C85.6036 28.9698 84.9952 30.48 84.3828 31.4546C84.9626 32.2484 85.5745 32.7345 86.1805 32.8562C87.3236 31.8751 88.2719 30.0574 89.1204 27.2954C89.1653 27.1488 95.731 5.22074 95.731 5.22074C96.6408 2.0733 98.0002 0.512821 100.319 0.151506H100.32C100.34 0.148237 100.355 0.131101 100.355 0.110245C100.355 0.0871344 100.336 0.0684204 100.313 0.0684204"
-          fill={blueColor}
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M86.829 35.1664H83.8473C82.4939 39.632 80.7038 45.5437 80.0385 47.7716C78.1846 53.98 81.1091 54.6188 82.2256 54.6188C82.3769 54.6188 83.722 54.6188 84.5809 54.6188C84.604 54.6187 84.6227 54.6001 84.6227 54.577C84.6227 54.5571 84.6088 54.5403 84.5902 54.5361H84.5899C83.3122 54.232 81.5755 52.9078 83.1092 47.7716C83.1092 47.7716 85.8127 38.6188 86.829 35.1664"
-          fill={blueColor}
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M104.248 0.115556C104.265 0.110144 104.277 0.0943614 104.277 0.0757602C104.277 0.0526495 104.258 0.0339355 104.235 0.0339355H103.82C101.239 0.0339355 99.8344 1.32655 98.9403 4.41955C98.9403 4.41955 93.8509 21.5423 92.2501 26.8474C90.6493 32.1524 89.5515 33.5736 87.3782 33.9486L87.2635 33.9747C87.2436 33.978 87.2285 33.9951 87.2285 34.0158C87.2285 34.0389 87.2472 34.0577 87.2703 34.0577H88.7449C92.5299 34.0577 93.9393 31.5339 95.2711 27.0896C96.387 23.3664 102.914 1.55428 102.914 1.55428C103.1 0.938746 103.632 0.300666 104.248 0.11533V0.115556"
-          fill={greenColor}
-        />
-        <mask
-          id={`${id}-b-pride`}
-          style={{ maskType: "luminance" }}
-          maskUnits="userSpaceOnUse"
-          x="30"
-          y="0"
-          width="78"
-          height="55"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M30.0938 0.0441895H107.967V54.6696H30.0938V0.0441895Z"
-            fill="white"
-          />
-        </mask>
-        <g mask={`url(#${id}-b-pride)`}>
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M89.8289 35.0891C88.7828 38.6493 85.8015 48.8015 85.8015 48.8015C84.2266 54.076 86.7112 54.6188 87.6599 54.6188H89.9623C89.9855 54.6188 90.0042 54.6001 90.0042 54.577C90.0042 54.5571 89.9903 54.5403 89.9717 54.5362V54.5363C88.8916 54.2553 87.4798 53.0991 88.7632 48.8015C88.7632 48.8015 92.0286 37.7282 93.2719 33.5031C92.561 34.2226 91.3615 34.8917 89.8289 35.0891"
-            fill={greenColor}
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M95.4467 54.6188C95.4698 54.6188 95.4885 54.6001 95.4885 54.577C95.4885 54.557 95.4747 54.5403 95.4561 54.5362H95.4558C94.5434 54.2765 93.3986 53.2655 94.4728 49.6684C94.4728 49.6684 107.101 6.68958 107.804 4.25563C108.507 1.82169 106.809 0.298979 105.28 0.0692254C105.269 0.0676471 105.219 0.0537807 105.209 0.0862483C105.199 0.118716 105.241 0.138557 105.249 0.143179C105.553 0.303376 105.894 0.672244 105.708 1.30469C105.522 1.93713 91.499 49.6684 91.499 49.6684C90.1586 54.1569 92.273 54.6188 93.0802 54.6188H95.4467"
-            fill={darkGreenColor}
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M75.4659 34.0577C75.4889 34.0577 75.5076 34.0389 75.5076 34.0158C75.5076 33.9951 75.4925 33.9778 75.4726 33.9746H75.4723C74.6146 33.8501 73.8387 33.5807 73.1306 33.1321C71.4607 32.0744 70.1687 30.0201 69.0737 26.521C68.9798 26.2215 63.6049 7.92165 63.4194 7.29056C62.2821 3.42105 60.4546 1.5616 58.6517 0.708874C57.557 0.191083 56.4715 0.0441895 55.5553 0.0441895C54.9539 0.0441895 54.4151 0.0441895 53.9784 0.0441895H53.9715C53.9484 0.0441895 53.9297 0.0629034 53.9297 0.0859014C53.9297 0.106645 53.9448 0.123893 53.9646 0.127162V0.127275C54.26 0.171918 58.362 0.298745 60.4275 7.29056C62.493 14.2825 64.9683 22.6405 65.8045 25.5908C67.6133 31.9722 69.9469 34.0577 73.6985 34.0577H75.4659"
-            fill={redColor}
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M56.4576 2.44421C56.4559 2.44568 56.4541 2.44703 56.4524 2.4485C54.944 3.74292 53.6961 5.66449 52.9539 8.45445C52.8754 8.74959 41.6662 46.889 41.4206 47.7167C40.4784 50.8926 39.6893 54.0469 36.1209 54.5932C36.101 54.5965 36.0859 54.6138 36.0859 54.6345C36.0859 54.6576 36.1047 54.6763 36.1278 54.6763H36.8373C36.8373 54.6763 37.3489 54.6683 37.4515 54.6642C41.0756 54.5179 42.8818 52.978 44.4271 47.7167C45.5556 43.8746 55.8691 8.75883 55.9604 8.45445C56.4006 6.98517 56.9293 5.3123 57.6882 3.84641C57.53 3.59208 56.9713 2.87385 56.4576 2.44421"
-            fill={orangeColor}
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M54.7756 1.4669C53.6292 1.14087 52.0012 1.22801 50.5238 2.41218C49.0463 3.59635 47.7228 5.60664 47.0466 8.14847C46.968 8.4435 35.2535 48.309 35.1658 48.6028C34.5804 50.5662 33.9476 52.4272 32.5578 53.5597C31.9265 54.0741 31.139 54.4382 30.1287 54.5931V54.5932C30.1089 54.5965 30.0938 54.6138 30.0938 54.6345C30.0938 54.6576 30.1125 54.6763 30.1355 54.6763H31.9702C33.561 54.6763 34.7005 54.2555 35.5545 53.5597C36.9444 52.4272 37.5771 50.5663 38.1625 48.6028C38.2502 48.309 49.8795 8.74957 49.958 8.45443C50.7002 5.66447 51.9481 3.7429 53.4565 2.44848C53.8916 2.07499 54.3488 1.75505 54.8217 1.48077C54.8141 1.47817 54.7985 1.47344 54.7756 1.4669"
-            fill={yellowColor}
+            d="M27.0349 51.2629C26.519 50.5125 26.0823 49.6082 25.7735 48.5189C25.328 46.9472 13.0878 5.22074 13.0878 5.22074C12.0376 1.58696 10.3878 0.0684204 7.355 0.0684204H5.50276C5.47965 0.0684204 5.46094 0.0872471 5.46094 0.110245C5.46094 0.131101 5.47616 0.148237 5.49589 0.151506C7.81439 0.512821 9.17375 2.0733 10.0835 5.22074L22.7739 48.5189C23.4303 50.835 24.3325 52.3205 25.3258 53.2511C26.0299 52.8441 26.6295 52.1809 27.0349 51.2629"
+            fill={blueColor}
           />
-        </g>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M27.0349 51.2629C26.519 50.5125 26.0823 49.6082 25.7735 48.5189C25.328 46.9472 13.0878 5.22074 13.0878 5.22074C12.0376 1.58696 10.3878 0.0684204 7.355 0.0684204H5.50276C5.47965 0.0684204 5.46094 0.0872471 5.46094 0.110245C5.46094 0.131101 5.47616 0.148237 5.49589 0.151506C7.81439 0.512821 9.17375 2.0733 10.0835 5.22074L22.7739 48.5189C23.4303 50.835 24.3325 52.3205 25.3258 53.2511C26.0299 52.8441 26.6295 52.1809 27.0349 51.2629"
-          fill={blueColor}
-        />
-      </svg>
-    </Box>
-  );
-};
+        </svg>
+      </SvgBox>
+    );
+  },
+);

package/src/media-controller/JumpButton.tsx

@@ -1,18 +1,30 @@
-import { BoxProps, Center, useMultiStyleConfig } from "@chakra-ui/react";
-import React from "react";
+"use client";
+import {
+  BoxProps,
+  Center,
+  RecipeVariantProps,
+  useSlotRecipe,
+} from "@chakra-ui/react";
+import React, { forwardRef, PropsWithChildren } from "react";
 import { createTexts, useTranslation } from "..";
 import {
   Backward15MediaControllerFill30Icon,
   Forward15MediaControllerFill30Icon,
 } from "@vygruppen/spor-icon-react";
+import { mediaControllerSlotRecipe } from "../theme/slot-recipes/media-controller-button";
+
+export type MediaControllerVariantProps = RecipeVariantProps<
+  typeof mediaControllerSlotRecipe
+>;
 
-type JumpButtonProps = BoxProps & {
-  onClick: () => void;
-  "aria-label"?: string;
-  isDisabled?: boolean;
-  direction: "backward" | "forward";
-  size: "sm" | "lg";
-};
+type JumpButtonProps = BoxProps &
+  PropsWithChildren<MediaControllerVariantProps> & {
+    onClick: () => void;
+    "aria-label"?: string;
+    disabled?: boolean;
+    direction: "backward" | "forward";
+    size: "sm" | "lg";
+  };
 
 /**
  * A jump button.
@@ -25,36 +37,34 @@ type JumpButtonProps = BoxProps & {
  * <JumpButton direction="forward" onClick={onGoForward} />
  * ```
  */
-export const JumpButton = ({
-  direction,
-  isDisabled,
-  size = "sm",
-  ...props
-}: JumpButtonProps) => {
-  const { t } = useTranslation();
-  const styles = useMultiStyleConfig("MediaControllerButton", {
-    variant: "jumpSkip",
-    size,
-  });
+export const JumpButton = forwardRef<HTMLButtonElement, JumpButtonProps>(
+  (props, ref) => {
+    const { direction, disabled, size = "sm" } = props;
+    const { t } = useTranslation();
 
-  return (
-    <Center
-      as="button"
-      sx={styles.container}
-      aria-label={
-        direction === "forward" ? t(texts.forward) : t(texts.backward)
-      }
-      disabled={isDisabled}
-      {...props}
-    >
-      {direction === "forward" ? (
-        <Forward15MediaControllerFill30Icon sx={styles.icon} />
-      ) : (
-        <Backward15MediaControllerFill30Icon sx={styles.icon} />
-      )}
-    </Center>
-  );
-};
+    const recipe = useSlotRecipe({ key: "mediaControllerButton" });
+    const styles = recipe({ variant: "jumpSkip", size });
+
+    return (
+      <Center
+        as="button"
+        ref={ref}
+        css={styles.root}
+        aria-label={
+          direction === "forward" ? t(texts.forward) : t(texts.backward)
+        }
+        disabled={disabled}
+        {...props}
+      >
+        {direction === "forward" ? (
+          <Forward15MediaControllerFill30Icon css={styles.icon} />
+        ) : (
+          <Backward15MediaControllerFill30Icon css={styles.icon} />
+        )}
+      </Center>
+    );
+  },
+);
 
 const texts = createTexts({
   forward: {

package/src/media-controller/PlayPauseButton.tsx

@@ -1,58 +1,60 @@
-import { BoxProps, Center, useMultiStyleConfig } from "@chakra-ui/react";
-import React from "react";
-import { createTexts, useTranslation } from "..";
+"use client";
+import { BoxProps, Center, useSlotRecipe } from "@chakra-ui/react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { createTexts, MediaControllerVariantProps, useTranslation } from "..";
 import {
   PauseMediaControllerFill24Icon,
   PlayMediaControllerFill24Icon,
 } from "@vygruppen/spor-icon-react";
 
-type PlayPauseButtonProps = BoxProps & {
-  onClick: () => void;
-  "aria-label"?: string;
-  isDisabled?: boolean;
-  isPlaying: boolean;
-  size: "sm" | "lg";
-};
+type PlayPauseButtonProps = BoxProps &
+  PropsWithChildren<MediaControllerVariantProps> & {
+    onClick: () => void;
+    "aria-label"?: string;
+    disabled?: boolean;
+    playing: boolean;
+    size: "sm" | "lg";
+  };
 
 /**
  * A playback button.
  *
  * Intended to start or pause playback of a video, podcast, audiobook or similar.
  *
- * Specify the current playing state with `isPlaying`.
+ * Specify the current playing state with `playing`.
  *
  * ```tsx
- * <PlayPauseButton isPlaying={isPlaying} onClick={onPlaybackClick} />
+ * <PlayPauseButton playing={playing} onClick={onPlaybackClick} />
  * ```
  */
-export const PlayPauseButton = ({
-  size = "lg",
-  isPlaying,
-  isDisabled,
-  ...props
-}: PlayPauseButtonProps) => {
+export const PlayPauseButton = forwardRef<
+  HTMLButtonElement,
+  PlayPauseButtonProps
+>((props, ref) => {
+  const { playing, disabled, size = "sm" } = props;
+
   const { t } = useTranslation();
-  const styles = useMultiStyleConfig("MediaControllerButton", {
-    variant: "play",
-    size,
-  });
+
+  const recipe = useSlotRecipe({ key: "mediaControllerButton" });
+  const styles = recipe({ variant: "play", size });
 
   return (
     <Center
+      ref={ref}
       as="button"
-      sx={styles.container}
-      aria-label={isPlaying ? t(texts.pause) : t(texts.play)}
-      disabled={isDisabled}
+      css={styles.root}
+      aria-label={playing ? t(texts.pause) : t(texts.play)}
+      disabled={disabled}
       {...props}
     >
-      {isPlaying ? (
-        <PauseMediaControllerFill24Icon sx={styles.icon} />
+      {playing ? (
+        <PauseMediaControllerFill24Icon css={styles.icon} />
       ) : (
-        <PlayMediaControllerFill24Icon sx={styles.icon} />
+        <PlayMediaControllerFill24Icon css={styles.icon} />
       )}
     </Center>
   );
-};
+});
 
 const texts = createTexts({
   pause: {

package/src/media-controller/SkipButton.tsx

@@ -1,18 +1,20 @@
-import { BoxProps, Center, useMultiStyleConfig } from "@chakra-ui/react";
-import React from "react";
-import { createTexts, useTranslation } from "..";
+"use client";
+import { BoxProps, Center, useSlotRecipe } from "@chakra-ui/react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { createTexts, MediaControllerVariantProps, useTranslation } from "..";
 import {
   NextMediaControllerFill30Icon,
   PreviousMediaControllerFill30Icon,
 } from "@vygruppen/spor-icon-react";
 
-type SkipButtonProps = BoxProps & {
-  onClick: () => void;
-  "aria-label"?: string;
-  isDisabled?: boolean;
-  direction: "backward" | "forward";
-  size: "sm" | "lg";
-};
+type SkipButtonProps = BoxProps &
+  PropsWithChildren<MediaControllerVariantProps> & {
+    onClick: () => void;
+    "aria-label"?: string;
+    disabled?: boolean;
+    direction: "backward" | "forward";
+    size: "sm" | "lg";
+  };
 /**
  * A skip button.
  *
@@ -24,34 +26,33 @@ type SkipButtonProps = BoxProps & {
  * <SkipButton direction="forward" onClick={onNextChapter} />
  * ```
  */
-export const SkipButton = ({
-  direction,
-  isDisabled,
-  size = "sm",
-  ...props
-}: SkipButtonProps) => {
-  const { t } = useTranslation();
-  const styles = useMultiStyleConfig("MediaControllerButton", {
-    variant: "jumpSkip",
-    size,
-  });
+export const SkipButton = forwardRef<HTMLButtonElement, SkipButtonProps>(
+  (props, ref) => {
+    const { direction, disabled, size = "sm" } = props;
 
-  return (
-    <Center
-      as="button"
-      sx={styles.container}
-      aria-label={direction === "forward" ? t(texts.next) : t(texts.previous)}
-      disabled={isDisabled}
-      {...props}
-    >
-      {direction === "forward" ? (
-        <NextMediaControllerFill30Icon sx={styles.icon} />
-      ) : (
-        <PreviousMediaControllerFill30Icon sx={styles.icon} />
-      )}
-    </Center>
-  );
-};
+    const { t } = useTranslation();
+
+    const recipe = useSlotRecipe({ key: "mediaControllerButton" });
+    const styles = recipe({ variant: "jumpSkip", size });
+
+    return (
+      <Center
+        ref={ref}
+        as="button"
+        css={styles.root}
+        aria-label={direction === "forward" ? t(texts.next) : t(texts.previous)}
+        disabled={disabled}
+        {...props}
+      >
+        {direction === "forward" ? (
+          <NextMediaControllerFill30Icon css={styles.icon} />
+        ) : (
+          <PreviousMediaControllerFill30Icon css={styles.icon} />
+        )}
+      </Center>
+    );
+  },
+);
 
 const texts = createTexts({
   next: {