@manta-eu/react 0.1.8 → 0.1.10

package/src/components/channel-icon/manta-icon.tsx

@@ -0,0 +1,11 @@
+export function MantaIcon(props: { className?: string }) {
+  const { className } = props;
+  return (
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg" fill="none" className={className}>
+      <path
+        d="M14.2008 0C15.3838 5.42638 19.6005 9.66487 25 10.8552C24.976 10.8609 24.9532 10.8655 24.9292 10.8712C24.9285 10.8714 24.9275 10.8714 24.9268 10.8715L24.9283 10.8722C24.934 10.8722 24.9387 10.8744 24.9444 10.8756L24.9583 10.8783L24.9444 10.8811C24.5178 10.9754 24.0978 11.0853 23.6854 11.2124C23.6759 11.2155 23.6664 11.2186 23.6569 11.2217C23.6547 11.2217 23.6524 11.2216 23.6501 11.2238C19.2302 12.5853 15.6239 15.7597 13.6785 19.8981L13.6779 19.8972V19.8978C13.1578 21.002 12.7565 22.1751 12.489 23.4011L12.4856 23.4171L12.4822 23.4011C12.2182 22.1878 11.8215 21.0264 11.3094 19.9315H11.3088L11.3085 19.9312C10.3651 17.9132 9.02717 16.1234 7.39273 14.6597C7.18279 14.4717 6.96792 14.2891 6.7484 14.1121C6.63883 14.0237 6.52806 13.9368 6.41618 13.8513C6.1362 13.6372 5.8491 13.4319 5.55521 13.236C5.50528 13.2027 5.45503 13.1698 5.40471 13.1371C5.33643 13.0926 5.26788 13.0486 5.19889 13.0051C5.10181 12.944 5.00408 12.8838 4.90562 12.8246C4.60277 12.6427 4.29352 12.4703 3.97821 12.3079C3.91623 12.276 3.85399 12.2445 3.79155 12.2134C3.14481 11.8907 2.47336 11.6093 1.78066 11.3731C1.76814 11.3685 1.75444 11.3641 1.74079 11.3595C1.7378 11.3584 1.73483 11.3572 1.73183 11.3561C1.17678 11.1689 0.607955 11.0104 0.026886 10.8824L0.00988912 10.879L0.026886 10.8756C0.0358509 10.8733 0.0460003 10.8707 0.0550082 10.8684C0.0370231 10.864 0.0179437 10.8606 0 10.8561C2.69974 10.2609 5.10338 8.90409 6.98017 7.01756C8.85697 5.12988 10.208 2.7126 10.7989 0C10.9338 0.616942 11.1076 1.21897 11.319 1.8026C11.5941 2.56763 11.9322 3.30106 12.3271 3.99737L12.4998 4.29342C12.9636 3.52052 13.3567 2.69818 13.6686 1.8369L13.6689 1.83752L13.6695 1.83598C13.8856 1.24086 14.0636 0.628436 14.2008 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/channel-icon/meta-icon.tsx

@@ -0,0 +1,104 @@
+import { useId } from "react";
+
+export function MetaIcon(props: { className?: string; rounded?: boolean }) {
+  const { className, rounded } = props;
+  const clip0Id = useId();
+  const clip1Id = useId();
+  const paint0Id = useId();
+  const paint1Id = useId();
+
+  if (rounded) {
+    return (
+      <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <g clipPath={`url(#${clip0Id})`}>
+          <g clipPath={`url(#${clip1Id})`}>
+            <path
+              d="M0 5C0 3.67392 0.526784 2.40215 1.46447 1.46447C2.40215 0.526784 3.67392 0 5 0L15 0C16.3261 0 17.5979 0.526784 18.5355 1.46447C19.4732 2.40215 20 3.67392 20 5V15C20 16.3261 19.4732 17.5979 18.5355 18.5355C17.5979 19.4732 16.3261 20 15 20H5C3.67392 20 2.40215 19.4732 1.46447 18.5355C0.526784 17.5979 0 16.3261 0 15L0 5Z"
+              fill="#1877F2"
+            />
+            <path
+              d="M15.4767 11.2767L14.9542 11.6725L14.4333 11.31C14.4333 11.2711 14.4325 11.2314 14.4308 11.1908C14.4308 11.1519 14.43 11.1122 14.4283 11.0717C14.395 10.1333 14.1575 9.12915 13.6808 8.39332C13.3142 7.82915 12.845 7.55999 12.3217 7.55999C11.7717 7.55999 11.3242 7.88832 10.8283 8.60249C10.8133 8.6236 10.7983 8.64582 10.7833 8.66915C10.775 8.68026 10.7664 8.69304 10.7575 8.70749L10.6858 8.81665C10.4717 9.14999 10.2475 9.53832 10.005 9.96665L9.93834 10.0883L9.91917 10.1192L9.86917 10.2075L9.57417 10.7292C8.88084 11.955 8.705 12.2358 8.36 12.6958C7.7525 13.5025 7.23334 13.81 6.55 13.81C5.74084 13.81 5.22667 13.46 4.91 12.9308C4.65 12.5025 4.52417 11.9383 4.52417 11.2958L5.7075 11.3358C5.7075 11.755 5.7975 12.0742 5.91917 12.2692C5.98312 12.3783 6.07511 12.4683 6.18561 12.5298C6.2961 12.5914 6.42106 12.6222 6.5475 12.6192C6.855 12.6192 7.14084 12.555 7.68334 11.8025C8.11917 11.2 8.63334 10.3575 8.97834 9.82665L9.305 9.32915L9.37417 9.21915L9.445 9.11249L9.56417 8.92915C9.745 8.65249 9.94084 8.35999 10.15 8.07915C10.1733 8.04582 10.1981 8.01249 10.2242 7.97915C10.2475 7.94582 10.2742 7.91249 10.2975 7.88082C10.5117 7.60749 10.7383 7.35249 10.9808 7.14332C11.4217 6.75999 11.895 6.54749 12.3742 6.54749C13.1767 6.54749 13.9408 7.01249 14.5267 7.88332C15.1242 8.77415 15.4358 9.88332 15.4717 11.0383C15.4739 11.0772 15.4747 11.1169 15.4742 11.1575C15.4764 11.1964 15.4772 11.2361 15.4767 11.2767Z"
+              fill="white"
+            />
+            <path
+              d="M5.45667 7.96665C5.99833 7.13165 6.78167 6.54749 7.67917 6.54749C8.19917 6.54749 8.71583 6.70165 9.25583 7.14165C9.84583 7.62249 10.475 8.41415 11.26 9.71915L11.5417 10.1875C12.2208 11.3175 12.6075 11.8992 12.8333 12.1733C13.125 12.5258 13.3067 12.6192 13.5717 12.6192C14.2425 12.6192 14.4325 12.0142 14.4325 11.3092L15.4758 11.2767C15.4758 12.0142 15.3308 12.555 15.0833 12.9825C14.8442 13.3967 14.3775 13.81 13.5933 13.81C13.1058 13.81 12.6742 13.7042 12.1967 13.2542C11.8292 12.9092 11.4 12.2958 11.07 11.7442L10.0867 10.1067C9.595 9.28499 9.1425 8.67165 8.88083 8.39415C8.59916 8.09582 8.25167 7.73832 7.67417 7.73832C7.2075 7.73832 6.79583 8.06332 6.46333 8.56332L5.45667 7.96665Z"
+              fill="white"
+            />
+            <path
+              d="M7.67834 7.73832C7.21167 7.73832 6.80167 8.06332 6.47 8.56332C6.00167 9.27165 5.71417 10.325 5.71417 11.3367C5.71417 11.7542 5.71417 12.0683 5.83334 12.2617L4.91917 12.9317C4.66084 12.5017 4.52417 11.9525 4.52417 11.31C4.52417 10.1408 4.84667 8.90749 5.4575 7.96582C5.99834 7.13165 6.7875 6.54749 7.68334 6.54749L7.67834 7.73832Z"
+              fill="white"
+            />
+            <path
+              opacity="0.05"
+              d="M9.445 9.11249L9.37334 9.21915L9.30417 9.32915C9.47334 9.57415 9.66584 9.86915 9.86834 10.2075L9.91834 10.1192L9.9375 10.0883L10.0042 9.96665C9.82701 9.67599 9.64052 9.39112 9.445 9.11249ZM10.2233 7.97915C10.1972 8.01249 10.1725 8.04582 10.1492 8.07915C10.3233 8.29582 10.4992 8.54082 10.685 8.81665L10.7567 8.70749L10.7825 8.66915C10.7975 8.64582 10.8128 8.6236 10.8283 8.60249C10.6478 8.33582 10.4708 8.09554 10.2975 7.88165C10.2725 7.91276 10.2483 7.94526 10.2233 7.97915Z"
+              fill="white"
+            />
+            <path
+              opacity="0.07"
+              d="M9.44499 9.11249L9.37332 9.21916C9.54249 9.46249 9.73332 9.75249 9.93749 10.0883L10.0042 9.96666C9.827 9.676 9.64051 9.39113 9.44499 9.11249ZM10.15 8.07916C10.3222 8.29582 10.5005 8.54166 10.685 8.81666L10.7567 8.70749C10.5733 8.43582 10.3955 8.19305 10.2233 7.97916C10.1978 8.01249 10.1733 8.04582 10.15 8.07916Z"
+              fill="white"
+            />
+          </g>
+        </g>
+        <defs>
+          <clipPath id={clip0Id}>
+            <rect width="20" height="20" rx="10" fill="white" />
+          </clipPath>
+          <clipPath id={clip1Id}>
+            <rect width="20" height="20" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M19.5834 12.2333L18.6696 12.9263L17.7584 12.2917C17.7584 12.225 17.7584 12.1542 17.7542 12.0833C17.7542 12.0167 17.7542 11.9458 17.75 11.875C17.6917 10.2333 17.275 8.47501 16.4417 7.18751C15.8 6.20001 14.9792 5.72918 14.0625 5.72918C13.1 5.72918 12.3167 6.30418 11.45 7.55418C11.425 7.59168 11.3959 7.62918 11.3709 7.67084C11.3542 7.69168 11.3417 7.71251 11.325 7.73751C11.2834 7.80001 11.2417 7.86251 11.2 7.92918C10.825 8.51251 10.4334 9.19168 10.0084 9.94168C9.97085 10.0125 9.92919 10.0833 9.89169 10.1542C9.87919 10.1708 9.86669 10.1917 9.85835 10.2083L9.77085 10.3625L9.25419 11.275C8.04169 13.4208 7.73335 13.9125 7.12919 14.7167C6.06669 16.1292 5.15835 16.6667 3.96252 16.6667C2.54585 16.6667 1.64585 16.0542 1.09169 15.1292C0.63752 14.3792 0.416687 13.3917 0.416687 12.2667L2.48752 12.3375C2.48752 13.0708 2.64585 13.6292 2.85835 13.9708C3.13335 14.4125 3.53752 14.5833 3.95835 14.5833C4.49585 14.5833 4.99585 14.4708 5.94585 13.1542C6.70835 12.1 7.60835 10.625 8.21252 9.69584L8.78335 8.82501L8.90419 8.63334L9.02919 8.44584L9.23752 8.12501C9.55419 7.64168 9.89585 7.12918 10.2625 6.63751C10.3042 6.57918 10.3459 6.52084 10.3917 6.46251C10.4334 6.40418 10.4792 6.34584 10.5209 6.29168C10.8959 5.81251 11.2917 5.36668 11.7167 5.00001C12.4875 4.32918 13.3167 3.95834 14.1542 3.95834C15.5584 3.95834 16.8959 4.77084 17.9209 6.29584C18.9667 7.85418 19.5125 9.79584 19.575 11.8167C19.5792 11.8833 19.5792 11.9542 19.5792 12.025C19.5834 12.0958 19.5834 12.1625 19.5834 12.2333Z"
+        fill="#0081FB"
+      />
+      <path
+        d="M2.04919 6.44001C2.99794 4.97959 4.36794 3.95834 5.93878 3.95834C6.84878 3.95834 7.75294 4.22709 8.69753 4.99709C9.73044 5.83876 10.8317 7.22459 12.2054 9.50876L12.6979 10.3283C13.8871 12.3058 14.5634 13.3229 14.9596 13.8029C15.4688 14.4192 15.7867 14.5833 16.25 14.5833C17.425 14.5833 17.7571 13.525 17.7571 12.2913L19.5834 12.2342C19.5834 13.5238 19.3288 14.4713 18.8954 15.2196C18.4771 15.9433 17.6613 16.6667 16.2888 16.6667C15.4354 16.6667 14.6796 16.4817 13.8438 15.6946C13.2013 15.0904 12.45 14.0171 11.8721 13.0525L10.1529 10.1863C9.29044 8.74793 8.49919 7.67501 8.04128 7.18959C7.54878 6.66709 6.94044 6.04209 5.93003 6.04209C5.11211 6.04209 4.39294 6.60959 3.81169 7.48584L2.04919 6.44001Z"
+        fill={`url(#${paint0Id})`}
+      />
+      <path
+        d="M5.93752 6.04168C5.12127 6.04168 4.40294 6.60918 3.82294 7.48543C3.00252 8.72376 2.50002 10.5679 2.50002 12.3392C2.50002 13.0696 2.49877 13.6192 2.70835 13.9583L1.10835 15.1304C0.655854 14.3779 0.416687 13.4167 0.416687 12.2917C0.416687 10.2458 0.98127 8.08709 2.04919 6.44001C2.99669 4.97959 4.37794 3.95834 5.94585 3.95834L5.93752 6.04168Z"
+        fill={`url(#${paint1Id})`}
+      />
+      <path
+        opacity="0.05"
+        d="M9.02837 8.44649L8.90337 8.63399L8.78253 8.82566C9.07837 9.25483 9.41587 9.77149 9.77003 10.3632L9.85753 10.209C9.86586 10.1923 9.87837 10.1715 9.89086 10.1548C9.92836 10.084 9.97003 10.0132 10.0075 9.94233C9.6617 9.37566 9.32837 8.87149 9.02837 8.44649ZM10.3909 6.46316C10.345 6.52149 10.3034 6.57983 10.2617 6.63816C10.5659 7.01733 10.8742 7.44649 11.1992 7.92983C11.2409 7.86316 11.2825 7.80066 11.3242 7.73816C11.3409 7.71316 11.3534 7.69233 11.37 7.67149C11.395 7.62983 11.4242 7.59233 11.4492 7.55483C11.1325 7.08816 10.8242 6.66733 10.52 6.29233C10.4784 6.34649 10.4325 6.40483 10.3909 6.46316Z"
+        fill="#171717"
+      />
+      <path
+        opacity="0.07"
+        d="M9.0296 8.44656L8.9046 8.63406C9.20044 9.05906 9.53377 9.56739 9.8921 10.1549C9.9296 10.0841 9.97127 10.0132 10.0088 9.94239C9.66294 9.37573 9.3296 8.87156 9.0296 8.44656ZM10.2629 6.63823C10.5671 7.01739 10.8754 7.44656 11.2004 7.92989C11.2421 7.86323 11.2838 7.80073 11.3254 7.73823C11.0046 7.26323 10.6921 6.83823 10.3921 6.46323C10.3463 6.52156 10.3046 6.57989 10.2629 6.63823Z"
+        fill="#171717"
+      />
+      <defs>
+        <linearGradient
+          id={paint0Id}
+          x1="17.6267"
+          y1="10.3125"
+          x2="5.63878"
+          y2="10.3125"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#0081FB" />
+          <stop offset="0.995" stopColor="#0064E1" />
+        </linearGradient>
+        <linearGradient
+          id={paint1Id}
+          x1="3.18127"
+          y1="13.6958"
+          x2="3.18127"
+          y2="5.42168"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#0081FB" />
+          <stop offset="0.995" stopColor="#0064E1" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

package/src/components/channel-icon/shopify-icon.tsx

@@ -0,0 +1,50 @@
+import { useId } from "react";
+
+export function ShopifyIcon(props: { className?: string; rounded?: boolean }) {
+  const { className, rounded } = props;
+  const clip0Id = useId();
+  const clip1Id = useId();
+
+  if (rounded) {
+    return (
+      <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <g clipPath={`url(#${clip0Id})`}>
+          <g clipPath={`url(#${clip1Id})`}>
+            <path
+              d="M15 0H5C2.23858 0 0 2.23858 0 5V15C0 17.7614 2.23858 20 5 20H15C17.7614 20 20 17.7614 20 15V5C20 2.23858 17.7614 0 15 0Z"
+              fill="#95BF46"
+            />
+            <path
+              d="M9.63792 4.31641C9.82935 4.31641 10.0515 4.41926 10.2308 4.65605C10.2486 4.65486 10.2663 4.65426 10.2836 4.65426C10.9129 4.65426 11.2708 5.19069 11.4736 5.77391L11.8129 5.66891C11.8451 5.65962 11.9076 5.64855 11.9665 5.65748C11.977 5.6594 11.9873 5.66178 11.9976 5.66462L12.0054 5.66712C12.0127 5.6701 12.0198 5.67332 12.0269 5.67676L12.0354 5.68105C12.0445 5.68665 12.0528 5.69323 12.0604 5.70069L12.734 6.36962C12.734 6.36962 13.6065 6.43426 13.6494 6.43783C13.667 6.43957 13.684 6.44537 13.699 6.45479C13.714 6.46422 13.7266 6.47699 13.7358 6.49212C13.7424 6.50393 13.7468 6.5169 13.7486 6.53034C13.7583 6.60034 14.984 14.8853 14.9897 14.9261L11.4765 15.6864L4.99185 14.4714C4.99578 14.4403 5.82399 8.03712 5.85542 7.80891C5.89721 7.50926 5.90721 7.49926 6.22507 7.39962L7.2515 7.08105C7.47114 6.14962 8.17185 4.31676 9.63792 4.31641ZM9.39792 8.20962C7.85971 8.20962 7.09757 9.23712 7.09757 10.2989C7.09757 11.5603 8.35614 11.595 8.35614 12.3625C8.35614 12.5482 8.22507 12.8018 7.90257 12.8018C7.40935 12.8018 6.82471 12.3007 6.82328 12.2996L6.52542 13.2843C6.52899 13.2886 7.09828 13.9771 8.20757 13.9771C9.13507 13.9771 9.82328 13.2789 9.82328 12.1943C9.82328 10.8157 8.28899 10.59 8.28899 10.0014C8.28899 9.89355 8.32364 9.46534 9.00578 9.46534C9.46971 9.46534 9.84864 9.66676 9.85042 9.66784L10.2836 8.37926C10.2786 8.37641 9.98578 8.20962 9.39792 8.20962ZM9.59792 4.70962C8.54435 4.70962 7.95292 6.09248 7.70364 6.94105L8.59935 6.66355C8.81221 5.55141 9.31578 4.99426 9.78578 4.77319C9.7311 4.73337 9.66556 4.71119 9.59792 4.70962ZM10.0336 5.12212C9.67578 5.27569 9.26685 5.68248 9.04864 6.52462L10.1822 6.17355V6.10998C10.1822 5.67248 10.124 5.34819 10.0336 5.12212ZM10.4358 5.05034C10.5165 5.28176 10.5665 5.57391 10.5665 5.93641L10.5661 6.05462L11.1147 5.88498C10.9754 5.45998 10.7597 5.09105 10.4358 5.05034Z"
+              fill="white"
+            />
+          </g>
+        </g>
+        <defs>
+          <clipPath id={clip0Id}>
+            <rect width="20" height="20" rx="10" fill="white" />
+          </clipPath>
+          <clipPath id={clip1Id}>
+            <rect width="20" height="20" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+      <path
+        d="M16.5597 3.92775C16.546 3.82775 16.4584 3.77241 16.386 3.76631C16.3137 3.76029 14.7844 3.64693 14.7844 3.64693C14.7844 3.64693 13.7223 2.59248 13.6057 2.47577C13.4891 2.35912 13.2612 2.3946 13.1728 2.42063C13.1598 2.42446 12.9408 2.49207 12.5784 2.60419C12.2236 1.58323 11.5975 0.645012 10.4959 0.645012C10.4655 0.645012 10.4342 0.646245 10.4029 0.648026C10.0896 0.233711 9.70152 0.0537109 9.36631 0.0537109C6.80021 0.0537109 5.57426 3.26159 5.18987 4.89172C4.19275 5.2007 3.48439 5.42035 3.39391 5.44878C2.83734 5.62337 2.81974 5.6409 2.74665 6.16535C2.69165 6.56241 1.23535 17.8247 1.23535 17.8247L12.5832 19.9508L18.7318 18.6207C18.7318 18.6207 16.5733 4.02775 16.5597 3.92775ZM11.9512 2.79816L10.991 3.09535C10.9914 3.02768 10.9917 2.96111 10.9917 2.8883C10.9917 2.25378 10.9036 1.74289 10.7623 1.33789C11.3299 1.40912 11.708 2.05494 11.9512 2.79816ZM10.0582 1.46371C10.216 1.85912 10.3186 2.42659 10.3186 3.19234C10.3186 3.23152 10.3183 3.26734 10.318 3.30357C9.6935 3.497 9.01494 3.707 8.33487 3.91768C8.71672 2.44398 9.43248 1.7322 10.0582 1.46371ZM9.29583 0.741999C9.40658 0.741999 9.51816 0.779601 9.62494 0.853094C8.80254 1.24008 7.92104 2.21474 7.54878 4.16111L5.98124 4.64659C6.41727 3.162 7.45268 0.741999 9.29583 0.741999Z"
+        fill="#95BF46"
+      />
+      <path
+        d="M16.3869 3.76655C16.3146 3.76052 14.7853 3.64716 14.7853 3.64716C14.7853 3.64716 13.7232 2.59271 13.6066 2.476C13.563 2.43258 13.5041 2.41032 13.4426 2.40073L12.5846 19.9509L18.7327 18.6209C18.7327 18.6209 16.5742 4.02799 16.5607 3.92799C16.5469 3.82799 16.4593 3.77264 16.3869 3.76655Z"
+        fill="#5E8E3E"
+      />
+      <path
+        d="M10.4961 7.16397L9.73791 9.41918C9.73791 9.41918 9.07366 9.06466 8.25942 9.06466C7.06572 9.06466 7.00565 9.81377 7.00565 10.0025C7.00565 11.0325 9.69058 11.4272 9.69058 13.8398C9.69058 15.7379 8.48668 16.9602 6.86339 16.9602C4.91545 16.9602 3.91928 15.7479 3.91928 15.7479L4.44086 14.0246C4.44086 14.0246 5.46483 14.9037 6.32887 14.9037C6.89346 14.9037 7.12312 14.4592 7.12312 14.1344C7.12312 12.7908 4.92038 12.7309 4.92038 10.5232C4.92038 8.665 6.25408 6.86685 8.94627 6.86685C9.9836 6.86685 10.4961 7.16397 10.4961 7.16397Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/src/components/channel-icon/snapchat-icon.tsx

@@ -0,0 +1,42 @@
+import { useId } from "react";
+import { cn } from "#style";
+
+export function SnapChatIcon(props: { className?: string; rounded?: boolean }) {
+  const { className, rounded } = props;
+  const clip0Id = useId();
+
+  if (rounded) {
+    return (
+      <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={cn(className)}>
+        <g clipPath={`url(#${clip0Id})`}>
+          <rect width="20" height="20" rx="10" fill="#FFFC00" />
+          <path
+            d="M15.0379 12.721C13.2196 11.8408 12.9298 10.4818 12.9169 10.381C12.9013 10.2589 12.8836 10.1629 13.0183 10.0387C13.1482 9.91867 13.7245 9.56197 13.8844 9.45037C14.1487 9.26557 14.2651 9.08107 14.1793 8.85427C14.1193 8.69737 13.9732 8.63827 13.8193 8.63827C13.7708 8.63842 13.7224 8.64385 13.675 8.65447C13.3846 8.71747 13.1026 8.86297 12.9394 8.90227C12.9198 8.90733 12.8996 8.91005 12.8794 8.91037C12.7924 8.91037 12.7594 8.87167 12.7678 8.76697C12.7882 8.44957 12.8314 7.83007 12.7813 7.25137C12.7126 6.45517 12.4558 6.06067 12.1513 5.71177C12.004 5.54257 11.32 4.81567 10 4.81567C8.68 4.81567 7.9969 5.54257 7.8505 5.70967C7.5451 6.05857 7.2886 6.45307 7.2205 7.24927C7.1704 7.82797 7.2154 8.44717 7.234 8.76487C7.24 8.86447 7.2094 8.90827 7.1224 8.90827C7.10215 8.90793 7.08202 8.90521 7.0624 8.90017C6.8995 8.86087 6.6175 8.71537 6.3271 8.65237C6.27973 8.64175 6.23135 8.63632 6.1828 8.63617C6.0283 8.63617 5.8828 8.69617 5.8228 8.85217C5.737 9.07897 5.8528 9.26347 6.118 9.44827C6.2779 9.55987 6.8542 9.91627 6.9841 10.0366C7.1185 10.1608 7.1011 10.2568 7.0855 10.3789C7.0726 10.4812 6.7825 11.8402 4.9645 12.7189C4.858 12.7705 4.6768 12.8797 4.9963 13.0561C5.4979 13.3333 5.8318 13.3036 6.0913 13.4707C6.3115 13.6126 6.1813 13.9186 6.3415 14.029C6.5383 14.1649 7.12 14.0194 7.8715 14.2675C8.5015 14.4751 8.8843 15.0616 10.0015 15.0616C11.1187 15.0616 11.5126 14.4724 12.1315 14.2675C12.8815 14.0194 13.4644 14.1649 13.6615 14.029C13.8214 13.9186 13.6915 13.6126 13.9117 13.4707C14.1712 13.3036 14.5048 13.3333 15.0067 13.0561C15.3256 12.8818 15.1444 12.7726 15.0379 12.721Z"
+            fill="white"
+          />
+          <path
+            d="M15.8299 12.6184C15.7483 12.3964 15.5929 12.2776 15.4159 12.1792C15.3826 12.1597 15.352 12.1441 15.3259 12.1321C15.2731 12.1048 15.2191 12.0784 15.1654 12.0505C14.6137 11.758 14.1829 11.389 13.8841 10.9516C13.7992 10.8284 13.7256 10.6979 13.6642 10.5616C13.6387 10.4887 13.6399 10.4473 13.6582 10.4095C13.6763 10.3803 13.7004 10.3553 13.7287 10.336C13.8235 10.2733 13.9213 10.2097 13.9876 10.1668C14.1058 10.0903 14.1994 10.0297 14.2597 9.98676C14.4862 9.82836 14.6446 9.66006 14.7436 9.47196C14.8127 9.342 14.8529 9.19869 14.8617 9.05178C14.8704 8.90487 14.8475 8.75779 14.7943 8.62056C14.6443 8.22576 14.2714 7.98066 13.8196 7.98066C13.7243 7.98057 13.6293 7.99062 13.5361 8.01066C13.5112 8.01606 13.4863 8.02176 13.462 8.02806C13.4662 7.75806 13.4602 7.47306 13.4362 7.19256C13.351 6.20646 13.0057 5.68956 12.6457 5.27736C12.4152 5.01905 12.1436 4.80052 11.842 4.63056C11.2957 4.31856 10.6762 4.16016 10.0009 4.16016C9.32559 4.16016 8.7091 4.31856 8.1622 4.63056C7.85983 4.80058 7.58774 5.01954 7.357 5.27856C6.99699 5.69076 6.6517 6.20856 6.5665 7.19376C6.5425 7.47426 6.53649 7.76076 6.5404 8.02926C6.5161 8.02296 6.4915 8.01726 6.4666 8.01186C6.37343 7.99182 6.27839 7.98177 6.1831 7.98186C5.731 7.98186 5.3575 8.22696 5.2081 8.62176C5.15469 8.75905 5.13147 8.90623 5.14002 9.0533C5.14856 9.20036 5.18866 9.34387 5.2576 9.47406C5.3569 9.66216 5.5153 9.83046 5.7418 9.98886C5.8018 10.0309 5.8957 10.0915 6.0139 10.1689C6.0778 10.2103 6.1711 10.2709 6.2626 10.3315C6.29461 10.3522 6.32182 10.3795 6.3424 10.4116C6.3616 10.4509 6.3622 10.4932 6.3337 10.5712C6.27308 10.7046 6.20069 10.8324 6.1174 10.9531C5.8252 11.3806 5.407 11.743 4.873 12.0331C4.5901 12.1831 4.2961 12.2833 4.1719 12.6208C4.0783 12.8755 4.1395 13.1653 4.3774 13.4095C4.46471 13.5006 4.56597 13.5773 4.6774 13.6366C4.90923 13.764 5.15576 13.8626 5.4115 13.9303C5.46427 13.9439 5.51437 13.9663 5.5597 13.9966C5.6464 14.0725 5.6341 14.1868 5.7496 14.3542C5.80757 14.4407 5.88124 14.5156 5.9668 14.575C6.2092 14.7424 6.4816 14.7529 6.7702 14.764C7.0309 14.7739 7.3264 14.7853 7.6639 14.8966C7.8037 14.9428 7.9489 15.0322 8.1172 15.1366C8.5213 15.385 9.07449 15.7249 10.0003 15.7249C10.9261 15.7249 11.4832 15.3832 11.8903 15.1339C12.0574 15.0313 12.2017 14.9428 12.3376 14.8978C12.6751 14.7862 12.9706 14.7751 13.2313 14.7652C13.5199 14.7541 13.7923 14.7436 14.0347 14.5762C14.136 14.5055 14.2204 14.4133 14.2819 14.3062C14.365 14.1649 14.3629 14.0662 14.4409 13.9972C14.4834 13.9683 14.5305 13.9468 14.5801 13.9336C14.8393 13.8657 15.0892 13.7661 15.3241 13.6372C15.4425 13.5737 15.549 13.4902 15.6391 13.3906L15.6421 13.387C15.8653 13.1482 15.9214 12.8668 15.8299 12.6184ZM15.007 13.0606C14.5051 13.3378 14.1715 13.3081 13.912 13.4752C13.6915 13.6171 13.822 13.9231 13.6618 14.0335C13.465 14.1694 12.8833 14.0239 12.1318 14.272C11.512 14.4769 11.1166 15.0661 10.0018 15.0661C8.88699 15.0661 8.5009 14.4781 7.8709 14.2705C7.1209 14.0224 6.538 14.1679 6.3409 14.032C6.181 13.9216 6.3109 13.6156 6.0907 13.4737C5.8309 13.3066 5.4973 13.3363 4.9957 13.0606C4.6762 12.8842 4.8574 12.775 4.9639 12.7234C6.78189 11.8432 7.072 10.4842 7.0849 10.3834C7.1005 10.2613 7.1179 10.1653 6.9835 10.0411C6.8536 9.92106 6.2773 9.56436 6.1174 9.45276C5.8528 9.26796 5.7364 9.08346 5.8222 8.85666C5.8822 8.69976 6.0286 8.64066 6.1822 8.64066C6.23074 8.64081 6.27913 8.64624 6.3265 8.65686C6.6169 8.71986 6.8989 8.86536 7.0618 8.90466C7.08141 8.90969 7.10155 8.91241 7.1218 8.91276C7.2088 8.91276 7.2394 8.86896 7.2334 8.76936C7.2148 8.45166 7.1698 7.83246 7.2199 7.25376C7.2886 6.45756 7.5451 6.06306 7.8499 5.71416C7.9963 5.54646 8.6842 4.81956 9.99969 4.81956C11.3152 4.81956 12.0049 5.54346 12.1513 5.71056C12.4564 6.05946 12.7132 6.45396 12.7813 7.25016C12.8314 7.82886 12.7882 8.44836 12.7678 8.76576C12.7609 8.87046 12.7924 8.90916 12.8794 8.90916C12.8996 8.90883 12.9198 8.90611 12.9394 8.90106C13.1026 8.86176 13.3846 8.71626 13.675 8.65326C13.7224 8.64264 13.7707 8.63721 13.8193 8.63706C13.9738 8.63706 14.1193 8.69706 14.1793 8.85306C14.2651 9.07986 14.1493 9.26436 13.8844 9.44916C13.7245 9.56076 13.1482 9.91716 13.0183 10.0375C12.8836 10.1617 12.9013 10.2577 12.9169 10.3798C12.9298 10.4821 13.2196 11.8411 15.0379 12.7198C15.1453 12.7735 15.3265 12.8827 15.007 13.0606Z"
+            fill="black"
+          />
+        </g>
+        <defs>
+          <clipPath id={clip0Id}>
+            <rect width="20" height="20" rx="10" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+      <path
+        d="M17.3879 13.9887C14.721 12.6977 14.296 10.7045 14.2771 10.5567C14.2542 10.3776 14.2282 10.2368 14.4258 10.0546C14.6163 9.87863 15.4615 9.35547 15.6961 9.19179C16.0837 8.92075 16.2544 8.65015 16.1286 8.31751C16.0406 8.08739 15.8263 8.00071 15.6006 8.00071C15.5294 8.00092 15.4584 8.00889 15.3889 8.02447C14.963 8.11687 14.5494 8.33027 14.3101 8.38791C14.2813 8.39532 14.2518 8.39931 14.2221 8.39979C14.0945 8.39979 14.0461 8.34303 14.0584 8.18947C14.0883 7.72395 14.1517 6.81535 14.0782 5.96659C13.9774 4.79883 13.6008 4.22023 13.1542 3.70851C12.9381 3.46035 11.9349 2.39423 9.99894 2.39423C8.06294 2.39423 7.06106 3.46035 6.84634 3.70543C6.39842 4.21715 6.02222 4.79575 5.92234 5.96351C5.84886 6.81227 5.91486 7.72043 5.94214 8.18639C5.95094 8.33247 5.90606 8.39671 5.77846 8.39671C5.74876 8.3962 5.71923 8.39221 5.69046 8.38483C5.45154 8.32719 5.03794 8.11379 4.61202 8.02139C4.54255 8.00581 4.47158 7.99784 4.40038 7.99763C4.17378 7.99763 3.96038 8.08563 3.87238 8.31443C3.74654 8.64707 3.91638 8.91767 4.30534 9.18871C4.53986 9.35239 5.3851 9.87511 5.57562 10.0515C5.77274 10.2337 5.74722 10.3745 5.72434 10.5536C5.70542 10.7036 5.27994 12.6968 2.61354 13.9856C2.45734 14.0613 2.19158 14.2214 2.66018 14.4801C3.39586 14.8867 3.88558 14.8431 4.26618 15.0882C4.58914 15.2963 4.39818 15.7451 4.63314 15.9071C4.92178 16.1064 5.77494 15.893 6.87714 16.2569C7.80114 16.5613 8.36258 17.4215 10.0011 17.4215C11.6397 17.4215 12.2174 16.5574 13.1251 16.2569C14.2251 15.893 15.0801 16.1064 15.3691 15.9071C15.6037 15.7451 15.4131 15.2963 15.7361 15.0882C16.1167 14.8431 16.606 14.8867 17.3421 14.4801C17.8098 14.2245 17.5441 14.0643 17.3879 13.9887Z"
+        fill="white"
+      />
+      <path
+        d="M18.5498 13.8393C18.4301 13.5137 18.2022 13.3394 17.9426 13.1951C17.8937 13.1665 17.8489 13.1436 17.8106 13.126C17.7331 13.086 17.6539 13.0473 17.5752 13.0064C16.766 12.5774 16.1342 12.0362 15.6959 11.3946C15.5715 11.214 15.4635 11.0226 15.3734 10.8226C15.336 10.7157 15.3378 10.655 15.3646 10.5996C15.3912 10.5569 15.4265 10.5201 15.468 10.4918C15.6071 10.3998 15.7505 10.3065 15.8477 10.2436C16.0211 10.1314 16.1584 10.0425 16.2468 9.97961C16.579 9.74729 16.8113 9.50045 16.9565 9.22457C17.0578 9.03397 17.1169 8.82378 17.1298 8.60831C17.1426 8.39284 17.1089 8.17713 17.0309 7.97585C16.8109 7.39681 16.264 7.03733 15.6013 7.03733C15.4616 7.0372 15.3222 7.05195 15.1855 7.08133C15.149 7.08925 15.1125 7.09761 15.0769 7.10685C15.083 6.71085 15.0742 6.29285 15.039 5.88145C14.9141 4.43517 14.4076 3.67705 13.8796 3.07249C13.5415 2.69365 13.1432 2.37314 12.7009 2.12385C11.8996 1.66625 10.991 1.43393 10.0006 1.43393C9.01014 1.43393 8.10594 1.66625 7.30382 2.12385C6.86035 2.37321 6.46129 2.69436 6.12286 3.07425C5.59486 3.67881 5.08842 4.43825 4.96346 5.88321C4.92826 6.29461 4.91946 6.71481 4.92518 7.10861C4.88954 7.09937 4.85346 7.09101 4.81694 7.08309C4.68029 7.05371 4.54091 7.03896 4.40114 7.03909C3.73806 7.03909 3.19026 7.39857 2.97114 7.97761C2.89282 8.17897 2.85876 8.39484 2.87129 8.61054C2.88382 8.82623 2.94263 9.03671 3.04374 9.22765C3.18938 9.50353 3.4217 9.75037 3.7539 9.98269C3.8419 10.0443 3.97962 10.1332 4.15298 10.2467C4.2467 10.3074 4.38354 10.3963 4.51774 10.4852C4.56469 10.5155 4.6046 10.5556 4.63478 10.6026C4.66294 10.6603 4.66382 10.7223 4.62202 10.8367C4.53311 11.0325 4.42695 11.2199 4.30478 11.3968C3.87622 12.0238 3.26286 12.5554 2.47966 12.9808C2.06474 13.2008 1.63354 13.3478 1.45138 13.8428C1.3141 14.2164 1.40386 14.6414 1.75278 14.9996C1.88084 15.1332 2.02936 15.2457 2.19278 15.3326C2.53281 15.5195 2.89437 15.6642 3.26946 15.7634C3.34686 15.7834 3.42035 15.8162 3.48682 15.8606C3.61398 15.972 3.59594 16.1396 3.76534 16.3851C3.85037 16.512 3.95842 16.6219 4.0839 16.709C4.43942 16.9545 4.83894 16.9699 5.26222 16.9862C5.64458 17.0007 6.07798 17.0174 6.57298 17.1806C6.77802 17.2484 6.99098 17.3795 7.23782 17.5326C7.8305 17.897 8.64186 18.3955 9.9997 18.3955C11.3575 18.3955 12.1746 17.8943 12.7717 17.5287C13.0168 17.3782 13.2284 17.2484 13.4277 17.1824C13.9227 17.0187 14.3561 17.0024 14.7385 16.9879C15.1618 16.9716 15.5613 16.9562 15.9168 16.7107C16.0654 16.6071 16.1892 16.4719 16.2794 16.3147C16.4013 16.1075 16.3982 15.9627 16.5126 15.8615C16.5749 15.8192 16.644 15.7877 16.7167 15.7682C17.0969 15.6687 17.4634 15.5227 17.8079 15.3335C17.9816 15.2404 18.1378 15.118 18.2699 14.9718L18.2743 14.9666C18.6017 14.6163 18.684 14.2036 18.5498 13.8393ZM17.3429 14.4878C16.6067 14.8944 16.1175 14.8508 15.7369 15.0959C15.4135 15.304 15.6049 15.7528 15.3699 15.9148C15.0813 16.1141 14.2281 15.9007 13.1259 16.2646C12.2169 16.5651 11.6369 17.4292 10.0019 17.4292C8.36686 17.4292 7.80058 16.5668 6.87658 16.2624C5.77658 15.8985 4.92166 16.1119 4.63258 15.9126C4.39806 15.7506 4.58858 15.3018 4.26562 15.0937C3.88458 14.8486 3.3953 14.8922 2.65962 14.4878C2.19102 14.2291 2.45678 14.069 2.61298 13.9933C5.27938 12.7023 5.70486 10.7091 5.72378 10.5613C5.74666 10.3822 5.77218 10.2414 5.57506 10.0592C5.38454 9.88325 4.5393 9.36009 4.30478 9.19641C3.9167 8.92537 3.74598 8.65477 3.87182 8.32213C3.95982 8.09201 4.17454 8.00533 4.39982 8.00533C4.47102 8.00555 4.54198 8.01351 4.61146 8.02909C5.03738 8.12149 5.45098 8.33489 5.6899 8.39253C5.71867 8.39991 5.7482 8.4039 5.7779 8.40441C5.9055 8.40441 5.95038 8.34017 5.94158 8.19409C5.9143 7.72813 5.8483 6.81997 5.92178 5.97121C6.02254 4.80345 6.39874 4.22485 6.84578 3.71313C7.0605 3.46717 8.06942 2.40105 9.99882 2.40105C11.9282 2.40105 12.9398 3.46277 13.1545 3.70785C13.602 4.21957 13.9786 4.79817 14.0785 5.96593C14.152 6.81469 14.0886 7.72329 14.0587 8.18881C14.0486 8.34237 14.0948 8.39913 14.2224 8.39913C14.2521 8.39865 14.2816 8.39467 14.3104 8.38725C14.5497 8.32961 14.9633 8.11621 15.3893 8.02381C15.4587 8.00823 15.5297 8.00027 15.6009 8.00005C15.8275 8.00005 16.0409 8.08805 16.1289 8.31685C16.2547 8.64949 16.0849 8.92009 15.6964 9.19113C15.4619 9.35481 14.6166 9.87753 14.4261 10.054C14.2285 10.2361 14.2545 10.3769 14.2774 10.556C14.2963 10.706 14.7213 12.6992 17.3882 13.988C17.5457 14.0668 17.8115 14.2269 17.3429 14.4878Z"
+        fill="black"
+      />
+    </svg>
+  );
+}

package/src/components/chart/AreaChart.tsx

@@ -0,0 +1,77 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { useId } from "react";
+import { Area, AreaChart as RechartsAreaChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
+import { renderAnnotations, valueLabelProps } from "./annotations";
+import { ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart";
+import type { AreaChartData, ChartSeries } from "./chart-schemas";
+import { ChartFrame } from "./ChartFrame";
+import { hasRightAxis, rightAxisProps, seriesAxisProps, seriesColor, seriesConfig, seriesStats } from "./series";
+
+export type AreaChartProps = {
+  data: AreaChartData;
+};
+
+export function AreaChart(props: AreaChartProps) {
+  const { data } = props;
+  const gradientId = useId();
+
+  const series: ChartSeries[] = data.series ?? [{ key: "y", label: data.yAxisLabel ?? "Value" }];
+
+  return (
+    <ChartFrame config={seriesConfig(series)} title={data.title} height={data.height}>
+      <RechartsAreaChart
+        accessibilityLayer
+        data={data.data}
+        margin={{ top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }}
+      >
+        <defs>
+          {series.map((item) => (
+            <linearGradient key={item.key} id={`${gradientId}-${item.key}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={seriesColor(series, item)} stopOpacity={0.3} />
+              <stop offset="100%" stopColor={seriesColor(series, item)} stopOpacity={0} />
+            </linearGradient>
+          ))}
+        </defs>
+        <CartesianGrid vertical={false} strokeDasharray="2 3" />
+        <XAxis
+          dataKey="x"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          minTickGap={24}
+          label={
+            isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined
+          }
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          width={isPresent(data.yAxisLabel) ? 56 : 44}
+          label={
+            isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined
+          }
+        />
+        {hasRightAxis(series) ? <YAxis {...rightAxisProps(data.rightAxisLabel)} /> : null}
+        <ChartTooltip content={<ChartTooltipContent />} />
+        {series.length > 1 ? <ChartLegend content={<ChartLegendContent />} /> : null}
+        {series.map((item) => (
+          <Area
+            key={item.key}
+            dataKey={item.key}
+            {...seriesAxisProps(item)}
+            stackId={data.stacked ? (item.axis ?? "left") : undefined}
+            type="monotone"
+            stroke={seriesColor(series, item)}
+            fill={`url(#${gradientId}-${item.key})`}
+            strokeWidth={2}
+            dot={data.data.length === 1 ? { r: 3, fill: "var(--color-card)" } : false}
+            isAnimationActive={false}
+          >
+            {data.showValueLabels ? <LabelList {...valueLabelProps} dataKey={item.key} /> : null}
+          </Area>
+        ))}
+        {renderAnnotations(data.annotations, seriesStats(data.data, series, data.stacked))}
+      </RechartsAreaChart>
+    </ChartFrame>
+  );
+}

package/src/components/chart/BarChart.tsx

@@ -0,0 +1,74 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { Bar, BarChart as RechartsBarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
+import { renderAnnotations, valueLabelProps } from "./annotations";
+import { ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart";
+import type { BarChartData, ChartSeries } from "./chart-schemas";
+import { ChartFrame } from "./ChartFrame";
+import {
+  barRadius,
+  hasRightAxis,
+  rightAxisProps,
+  seriesAxisProps,
+  seriesColor,
+  seriesConfig,
+  seriesStats,
+} from "./series";
+
+export type BarChartProps = {
+  data: BarChartData;
+};
+
+export function BarChart(props: BarChartProps) {
+  const { data } = props;
+
+  const series: ChartSeries[] = data.series ?? [{ key: "value", label: data.yAxisLabel ?? "Value" }];
+  const stacked = data.stacked ?? false;
+
+  return (
+    <ChartFrame config={seriesConfig(series)} title={data.title} height={data.height}>
+      <RechartsBarChart
+        accessibilityLayer
+        data={data.data}
+        margin={{ top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }}
+      >
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="name"
+          tickLine={false}
+          axisLine={true}
+          tickMargin={8}
+          minTickGap={24}
+          label={
+            isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined
+          }
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          width={isPresent(data.yAxisLabel) ? 56 : 44}
+          label={
+            isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined
+          }
+        />
+        {hasRightAxis(series) ? <YAxis {...rightAxisProps(data.rightAxisLabel)} /> : null}
+        <ChartTooltip content={<ChartTooltipContent />} />
+        {series.length > 1 ? <ChartLegend content={<ChartLegendContent />} /> : null}
+        {series.map((item) => (
+          <Bar
+            key={item.key}
+            dataKey={item.key}
+            {...seriesAxisProps(item)}
+            stackId={stacked ? (item.axis ?? "left") : undefined}
+            fill={seriesColor(series, item)}
+            radius={barRadius(series, item, stacked)}
+            maxBarSize={40}
+            isAnimationActive={false}
+          >
+            {data.showValueLabels ? <LabelList {...valueLabelProps} dataKey={item.key} /> : null}
+          </Bar>
+        ))}
+        {renderAnnotations(data.annotations, seriesStats(data.data, series, stacked))}
+      </RechartsBarChart>
+    </ChartFrame>
+  );
+}

package/src/components/chart/ChartFrame.tsx

@@ -0,0 +1,28 @@
+import { isPresent } from "@manta-eu/lib/present";
+import type { ReactElement } from "react";
+import type { ChartConfig } from "./chart";
+import { ChartContainer } from "./chart";
+import { cn } from "#style";
+
+export type ChartFrameProps = {
+  config: ChartConfig;
+  title?: string;
+  height?: number;
+  className?: string;
+  children: ReactElement;
+};
+
+export function ChartFrame(props: ChartFrameProps) {
+  const { config, title, height = 300, className, children } = props;
+
+  return (
+    <div className="w-full">
+      {isPresent(title) ? (
+        <p className="typography-small-medium mb-2 text-center text-default-foreground">{title}</p>
+      ) : null}
+      <ChartContainer config={config} className={cn("aspect-auto w-full", className)} style={{ height }}>
+        {children}
+      </ChartContainer>
+    </div>
+  );
+}

package/src/components/chart/ComposedChart.tsx

@@ -0,0 +1,101 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { Bar, CartesianGrid, LabelList, ComposedChart as RechartsComposedChart, Line, XAxis, YAxis } from "recharts";
+import { renderAnnotations, valueLabelProps } from "./annotations";
+import { ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart";
+import type { ComposedChartData, ComposedChartSeries } from "./chart-schemas";
+import { ChartFrame } from "./ChartFrame";
+import {
+  barRadius,
+  hasRightAxis,
+  rightAxisProps,
+  seriesAxisProps,
+  seriesColor,
+  seriesConfig,
+  seriesStats,
+  seriesValues,
+} from "./series";
+
+export type ComposedChartProps = {
+  data: ComposedChartData;
+};
+
+export function ComposedChart(props: ComposedChartProps) {
+  const { data } = props;
+
+  const series: ComposedChartSeries[] = data.series ?? [
+    { key: "barValue", kind: "bar", label: data.barLabel ?? "Bar" },
+    { key: "lineValue", kind: "line", label: data.lineLabel ?? "Line" },
+  ];
+  const bars = series.filter((item) => item.kind === "bar");
+  const lines = series.filter((item) => item.kind === "line");
+  const stacked = data.stacked ?? false;
+
+  const [firstBar] = bars;
+  const [firstLine] = lines;
+  const stats = {
+    ...seriesStats(data.data, series, stacked),
+    bar: firstBar === undefined ? undefined : seriesValues(data.data, firstBar.key),
+    line: firstLine === undefined ? undefined : seriesValues(data.data, firstLine.key),
+  };
+
+  return (
+    <ChartFrame config={seriesConfig(series)} title={data.title} height={data.height}>
+      <RechartsComposedChart
+        accessibilityLayer
+        data={data.data}
+        margin={{ top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }}
+      >
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="name"
+          tickLine={false}
+          axisLine={true}
+          tickMargin={8}
+          minTickGap={24}
+          label={
+            isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined
+          }
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          width={isPresent(data.yAxisLabel) ? 56 : 44}
+          label={
+            isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined
+          }
+        />
+        {hasRightAxis(series) ? <YAxis {...rightAxisProps(data.rightAxisLabel)} /> : null}
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        {bars.map((item) => (
+          <Bar
+            key={item.key}
+            dataKey={item.key}
+            {...seriesAxisProps(item)}
+            stackId={stacked ? (item.axis ?? "left") : undefined}
+            fill={seriesColor(series, item)}
+            radius={barRadius(bars, item, stacked)}
+            maxBarSize={40}
+            isAnimationActive={false}
+          >
+            {data.showValueLabels ? <LabelList {...valueLabelProps} dataKey={item.key} /> : null}
+          </Bar>
+        ))}
+        {lines.map((item) => (
+          <Line
+            key={item.key}
+            dataKey={item.key}
+            {...seriesAxisProps(item)}
+            type="linear"
+            stroke={seriesColor(series, item)}
+            strokeWidth={2}
+            dot={{ r: 3, fill: "var(--color-card)" }}
+            activeDot={{ r: 5 }}
+            isAnimationActive={false}
+          />
+        ))}
+        {renderAnnotations(data.annotations, stats)}
+      </RechartsComposedChart>
+    </ChartFrame>
+  );
+}

package/src/components/chart/LineChart.tsx

@@ -0,0 +1,66 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { CartesianGrid, LabelList, Line, LineChart as RechartsLineChart, XAxis, YAxis } from "recharts";
+import { renderAnnotations, valueLabelProps } from "./annotations";
+import { ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart";
+import type { ChartSeries, LineChartData } from "./chart-schemas";
+import { ChartFrame } from "./ChartFrame";
+import { hasRightAxis, rightAxisProps, seriesAxisProps, seriesColor, seriesConfig, seriesStats } from "./series";
+
+export type LineChartProps = {
+  data: LineChartData;
+};
+
+export function LineChart(props: LineChartProps) {
+  const { data } = props;
+
+  const series: ChartSeries[] = data.series ?? [{ key: "y", label: data.yAxisLabel ?? "Value" }];
+
+  return (
+    <ChartFrame config={seriesConfig(series)} title={data.title} height={data.height}>
+      <RechartsLineChart
+        accessibilityLayer
+        data={data.data}
+        margin={{ top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }}
+      >
+        <CartesianGrid vertical={false} strokeDasharray="2 3" />
+        <XAxis
+          dataKey="x"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          minTickGap={24}
+          label={
+            isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined
+          }
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          width={isPresent(data.yAxisLabel) ? 56 : 44}
+          label={
+            isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined
+          }
+        />
+        {hasRightAxis(series) ? <YAxis {...rightAxisProps(data.rightAxisLabel)} /> : null}
+        <ChartTooltip content={<ChartTooltipContent />} />
+        {series.length > 1 ? <ChartLegend content={<ChartLegendContent />} /> : null}
+        {series.map((item) => (
+          <Line
+            key={item.key}
+            dataKey={item.key}
+            {...seriesAxisProps(item)}
+            type="linear"
+            stroke={seriesColor(series, item)}
+            strokeWidth={2}
+            dot={{ r: 3, fill: "var(--color-card)" }}
+            activeDot={{ r: 5 }}
+            isAnimationActive={false}
+          >
+            {data.showValueLabels ? <LabelList {...valueLabelProps} dataKey={item.key} /> : null}
+          </Line>
+        ))}
+        {renderAnnotations(data.annotations, seriesStats(data.data, series))}
+      </RechartsLineChart>
+    </ChartFrame>
+  );
+}

package/src/components/chart/PieChart.tsx

@@ -0,0 +1,37 @@
+import { Pie, PieChart as RechartsPieChart } from "recharts";
+import type { ChartConfig } from "./chart";
+import { ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart";
+import { chartColorAt } from "./chart-colors";
+import type { PieChartData } from "./chart-schemas";
+import { ChartFrame } from "./ChartFrame";
+
+export type PieChartProps = {
+  data: PieChartData;
+};
+
+export function PieChart(props: PieChartProps) {
+  const { data } = props;
+
+  const chartData = data.data.map((point, index) => ({ ...point, fill: chartColorAt(index) }));
+
+  const config: ChartConfig = Object.fromEntries(
+    data.data.map((point) => [point.name, { label: point.name }] as [string, ChartConfig[string]]),
+  );
+
+  return (
+    <ChartFrame config={config} title={data.title} height={data.height}>
+      <RechartsPieChart>
+        <ChartTooltip content={<ChartTooltipContent nameKey="name" hideLabel />} />
+        <Pie
+          data={chartData}
+          dataKey="value"
+          nameKey="name"
+          innerRadius={60}
+          strokeWidth={1}
+          isAnimationActive={false}
+        />
+        <ChartLegend content={<ChartLegendContent nameKey="name" />} />
+      </RechartsPieChart>
+    </ChartFrame>
+  );
+}