@aivenio/aquarium 2.3.2 → 2.5.0

package/dist/charts.mjs

@@ -31,12 +31,879 @@ var __objRest = (source, exclude) => {
 };
 
 // src/charts/AreaChart/AreaChart.tsx
-import React4 from "react";
+import React8 from "react";
 import { Area as _Area, AreaChart as _AreaChart } from "recharts";
 
-// src/charts/Axis/Axis.tsx
+// src/charts/Container/Container.tsx
 import React from "react";
-import { XAxis as _XAxis, YAxis as _YAxis } from "recharts";
+import { ResponsiveContainer as _ResponsiveContainer } from "recharts";
+
+// src/utils/tailwind.ts
+import originalClassNames from "classnames";
+function cleanClassNames(classNames2) {
+  const tokens = classNames2.split(/\s+/);
+  return tokens.filter((item) => item).join(" ");
+}
+function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
+  const result = originalClassNames(
+    classesOrModifiers1,
+    classesOrModifiers2,
+    classesOrModifiers3,
+    classesOrModifiers4,
+    classesOrModifiers5,
+    classesOrModifiers6,
+    classesOrModifiers7,
+    classesOrModifiers8,
+    classesOrModifiers9,
+    classesOrModifiers10
+  );
+  return cleanClassNames(result);
+}
+var classNames = (...args) => {
+  const result = originalClassNames(...args);
+  return cleanClassNames(result);
+};
+
+// src/charts/Container/Container.tsx
+var ResponsiveContainer = (_a) => {
+  var _b = _a, {
+    isBusy = false,
+    busyLabel = "Loading...",
+    className,
+    style,
+    width = "100%",
+    height = "100%",
+    minWidth,
+    minHeight,
+    maxHeight
+  } = _b, props = __objRest(_b, [
+    "isBusy",
+    "busyLabel",
+    "className",
+    "style",
+    "width",
+    "height",
+    "minWidth",
+    "minHeight",
+    "maxHeight"
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    "aria-busy": isBusy,
+    className: classNames(className, tw("relative")),
+    style: __spreadProps(__spreadValues({}, style), { width, height, minWidth, minHeight, maxHeight })
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: classNames(
+      tw("absolute inset-0 transition-colors flex items-center justify-center", {
+        "delay-300 z-40": isBusy
+      })
+    ),
+    style: isBusy ? { backgroundColor: "rgba(255, 255, 255, 0.5)" } : {}
+  }, /* @__PURE__ */ React.createElement("span", {
+    "aria-hidden": !isBusy,
+    className: tw("rounded-full text-white bg-black typography-caption py-2 px-4 transition-all", {
+      "opacity-100 delay-300": isBusy,
+      "mb-[-20px] opacity-0": !isBusy
+    })
+  }, isBusy && busyLabel)), /* @__PURE__ */ React.createElement(_ResponsiveContainer, __spreadValues({}, props)));
+};
+
+// src/charts/DefaultPalette/DefaultPalette.tsx
+import React2 from "react";
+
+// src/tokens/tokens.json
+var tokens_default = {
+  borderRadius: {
+    default: "4px",
+    full: "9999px",
+    "3xl": "1.5rem",
+    "2xl": "1rem",
+    xl: "0.75rem",
+    lg: "0.5rem",
+    md: "0.375rem",
+    sm: "0.125rem",
+    none: "0px"
+  },
+  borderWidth: {
+    "0": "0px",
+    "1": "1px",
+    "2": "2px",
+    "4": "4px",
+    "8": "8px",
+    default: "1px"
+  },
+  backgroundColor: {
+    body: "white",
+    "body-intense": "rgba(58,58,68,1)",
+    "popover-content": "white",
+    muted: "rgba(247,247,250,1)",
+    default: "rgba(237,237,240,1)",
+    intense: "rgba(210,210,214,1)",
+    primary: {
+      muted: "rgba(185,197,239,1)",
+      default: "rgba(53,69,190,1)",
+      intense: "rgba(34,47,149,1)",
+      active: "rgba(243,246,255,1)",
+      hover: "rgba(243,246,255,1)"
+    },
+    info: {
+      muted: "rgba(224,245,254,1)",
+      default: "rgba(3,153,227,1)",
+      intense: "rgba(1,116,186,1)"
+    },
+    success: {
+      muted: "rgba(236,247,237,1)",
+      default: "rgba(0,179,0,1)",
+      intense: "rgba(0,142,0,1)"
+    },
+    warning: {
+      muted: "rgba(255,248,234,1)",
+      default: "rgba(255,179,0,1)",
+      intense: "rgba(255,144,3,1)"
+    },
+    danger: {
+      muted: "rgba(255,203,210,1)",
+      default: "rgba(255,173,179,1)",
+      intense: "rgba(230,39,40,1)"
+    },
+    status: {
+      announcement: "rgba(243,246,255,1)",
+      info: "rgba(224,245,254,1)",
+      warning: "rgba(255,248,234,1)",
+      danger: "rgba(254,232,231,1)",
+      success: "rgba(236,247,237,1)"
+    },
+    "icon-button": {
+      hover: "rgba(25,25,29,.05)"
+    }
+  },
+  borderColor: {
+    muted: "rgba(237,237,240,1)",
+    default: "rgba(210,210,214,1)",
+    intense: "rgba(120,120,133,1)",
+    primary: {
+      muted: "rgba(129,142,236,1)",
+      default: "rgba(53,69,190,1)",
+      intense: "rgba(14,22,82,1)"
+    },
+    info: {
+      muted: "rgba(40,180,244,1)",
+      default: "rgba(3,153,227,1)",
+      intense: "rgba(1,116,186,1)"
+    },
+    success: {
+      muted: "rgba(203,255,201,1)",
+      default: "rgba(96,219,87,1)",
+      intense: "rgba(0,179,0,1)"
+    },
+    warning: {
+      muted: "rgba(254,235,178,1)",
+      default: "rgba(255,179,0,1)",
+      intense: "rgba(255,144,3,1)"
+    },
+    danger: {
+      muted: "rgba(255,203,210,1)",
+      default: "rgba(230,39,40,1)",
+      intense: "rgba(197,0,1,1)"
+    }
+  },
+  chartColors: {
+    default: "rgba(180, 180, 187, 1)",
+    primaryCategorical: {
+      "0": "rgba(88, 101, 205, 1)",
+      "1": "rgba(255, 53, 84, 1)",
+      "2": "rgba(40, 180, 244, 1)",
+      "3": "rgba(249, 106, 2, 1)",
+      "4": "rgba(0, 179, 0, 1)",
+      "5": "rgba(255, 193, 7, 1)"
+    },
+    secondaryCategorical: {
+      "0": "rgba(53, 69, 190, 1)",
+      "1": "rgba(253, 159, 0, 1)",
+      "2": "rgba(255, 53, 84, 1)",
+      "3": "rgba(0, 179, 0, 1)",
+      "4": "rgba(243, 88, 13, 1)",
+      "5": "rgba(3, 153, 227, 1)",
+      "6": "rgba(231, 0, 0, 1)",
+      "7": "rgba(34, 47, 149, 1)",
+      "8": "rgba(255, 144, 3, 1)",
+      "9": "rgba(228, 26, 74, 1)",
+      "10": "rgba(0, 159, 0, 1)",
+      "11": "rgba(235, 70, 16, 1)",
+      "12": "rgba(1, 116, 186, 1)",
+      "13": "rgba(197, 0, 1, 1)",
+      "14": "rgba(225, 29, 22, 1)",
+      "15": "rgba(170, 0, 0, 1)",
+      "16": "rgba(2, 86, 154, 1)",
+      "17": "rgba(167, 0, 69, 1)",
+      "18": "rgba(0, 111, 0, 1)",
+      "19": "rgba(254, 109, 0, 1)",
+      "20": "rgba(14, 22, 82, 1)",
+      "21": "rgba(88, 101, 205, 1)",
+      "22": "rgba(255, 179, 0, 1)",
+      "23": "rgba(255, 82, 117, 1)",
+      "24": "rgba(0, 195, 0, 1)",
+      "25": "rgba(249, 106, 2, 1)",
+      "26": "rgba(40, 180, 244, 1)",
+      "27": "rgba(230, 39, 40, 1)",
+      "28": "rgba(129, 142, 236, 1)",
+      "29": "rgba(255, 193, 7, 1)",
+      "30": "rgba(255, 111, 148, 1)",
+      "31": "rgba(96, 219, 87, 1)",
+      "32": "rgba(252, 135, 26, 1)",
+      "33": "rgba(127, 209, 247, 1)",
+      "34": "rgba(224, 80, 79, 1)",
+      "35": "rgba(185, 197, 239, 1)",
+      "36": "rgba(253, 212, 77, 1)",
+      "37": "rgba(255, 169, 201, 1)",
+      "38": "rgba(137, 235, 128, 1)",
+      "39": "rgba(250, 178, 110, 1)",
+      "40": "rgba(180, 229, 251, 1)",
+      "41": "rgba(255, 173, 179, 1)"
+    }
+  },
+  colors: {
+    white: "white",
+    black: "black",
+    transparent: "transparent",
+    current: "currentColor",
+    error: {
+      "0": "rgba(254,242,241,1)",
+      "5": "rgba(254,232,231,1)",
+      "10": "rgba(255,203,210,1)",
+      "20": "rgba(255,173,179,1)",
+      "30": "rgba(237,121,117,1)",
+      "40": "rgba(224,80,79,1)",
+      "50": "rgba(230,39,40,1)",
+      "60": "rgba(231,0,0,1)",
+      "70": "rgba(216,0,5,1)",
+      "80": "rgba(197,0,1,1)",
+      "90": "rgba(185,0,0,1)",
+      "100": "rgba(170,0,0,1)"
+    },
+    warning: {
+      "0": "rgba(255,253,249,1)",
+      "5": "rgba(255,248,234,1)",
+      "10": "rgba(255,242,205,1)",
+      "20": "rgba(254,235,178,1)",
+      "30": "rgba(253,223,129,1)",
+      "40": "rgba(253,212,77,1)",
+      "50": "rgba(253,201,38,1)",
+      "60": "rgba(255,193,7,1)",
+      "70": "rgba(255,179,0,1)",
+      "80": "rgba(253,159,0,1)",
+      "90": "rgba(255,144,3,1)",
+      "100": "rgba(254,109,0,1)"
+    },
+    success: {
+      "0": "rgba(245,250,245,1)",
+      "5": "rgba(236,247,237,1)",
+      "10": "rgba(203,255,201,1)",
+      "20": "rgba(175,255,167,1)",
+      "30": "rgba(137,235,128,1)",
+      "40": "rgba(96,219,87,1)",
+      "50": "rgba(64,206,55,1)",
+      "60": "rgba(0,195,0,1)",
+      "70": "rgba(0,179,0,1)",
+      "80": "rgba(0,159,0,1)",
+      "90": "rgba(0,142,0,1)",
+      "100": "rgba(0,111,0,1)"
+    },
+    info: {
+      "0": "rgba(249,253,255,1)",
+      "5": "rgba(239,250,255,1)",
+      "10": "rgba(224,245,254,1)",
+      "20": "rgba(180,229,251,1)",
+      "30": "rgba(127,209,247,1)",
+      "40": "rgba(76,194,247,1)",
+      "50": "rgba(40,180,244,1)",
+      "60": "rgba(2,168,243,1)",
+      "70": "rgba(3,153,227,1)",
+      "80": "rgba(7,136,209,1)",
+      "90": "rgba(1,116,186,1)",
+      "100": "rgba(2,86,154,1)"
+    },
+    grey: {
+      "0": "rgba(247,247,250,1)",
+      "5": "rgba(237,237,240,1)",
+      "10": "rgba(225,225,227,1)",
+      "20": "rgba(210,210,214,1)",
+      "30": "rgba(180,180,187,1)",
+      "40": "rgba(150,150,160,1)",
+      "50": "rgba(120,120,133,1)",
+      "60": "rgba(90,91,106,1)",
+      "70": "rgba(74,75,87,1)",
+      "80": "rgba(58,58,68,1)",
+      "90": "rgba(41,42,49,1)",
+      "100": "rgba(25,25,29,1)"
+    },
+    secondary: {
+      "0": "rgba(255,251,248,1)",
+      "5": "rgba(255,243,232,1)",
+      "10": "rgba(254,232,208,1)",
+      "20": "rgba(248,201,156,1)",
+      "30": "rgba(250,178,110,1)",
+      "40": "rgba(251,154,62,1)",
+      "50": "rgba(252,135,26,1)",
+      "60": "rgba(255,119,0,1)",
+      "70": "rgba(249,106,2,1)",
+      "80": "rgba(243,88,13,1)",
+      "90": "rgba(235,70,16,1)",
+      "100": "rgba(225,29,22,1)"
+    },
+    primary: {
+      "0": "rgba(255,255,255,1)",
+      "5": "rgba(243,246,255,1)",
+      "10": "rgba(227,233,255,1)",
+      "20": "rgba(213,221,250,1)",
+      "30": "rgba(199,209,244,1)",
+      "40": "rgba(185,197,239,1)",
+      "50": "rgba(157,170,238,1)",
+      "60": "rgba(129,142,236,1)",
+      "70": "rgba(88,101,205,1)",
+      "80": "rgba(53,69,190,1)",
+      "90": "rgba(34,47,149,1)",
+      "100": "rgba(14,22,82,1)"
+    }
+  },
+  textColor: {
+    inactive: "rgba(150,150,160,1)",
+    muted: "rgba(120,120,133,1)",
+    default: "rgba(74,75,87,1)",
+    intense: "rgba(41,42,49,1)",
+    opposite: {
+      default: "white"
+    },
+    primary: {
+      inactive: "rgba(185,197,239,1)",
+      active: "rgba(34,47,149,1)",
+      muted: "rgba(129,142,236,1)",
+      default: "rgba(88,101,205,1)",
+      intense: "rgba(53,69,190,1)"
+    },
+    info: {
+      inactive: "rgba(180,229,251,1)",
+      muted: "rgba(76,194,247,1)",
+      default: "rgba(3,153,227,1)",
+      intense: "rgba(1,116,186,1)"
+    },
+    success: {
+      inactive: "rgba(203,255,201,1)",
+      muted: "rgba(137,235,128,1)",
+      default: "rgba(0,179,0,1)",
+      intense: "rgba(0,142,0,1)"
+    },
+    warning: {
+      inactive: "rgba(254,235,178,1)",
+      muted: "rgba(253,212,77,1)",
+      default: "rgba(253,159,0,1)",
+      intense: "rgba(254,109,0,1)"
+    },
+    danger: {
+      inactive: "rgba(255,203,210,1)",
+      muted: "rgba(255,173,179,1)",
+      default: "rgba(230,39,40,1)",
+      intense: "rgba(197,0,1,1)"
+    }
+  },
+  boxShadow: {
+    "24dp": "0px 24px 48px rgba(90, 91, 106, 0.08), 0px 12px 24px rgba(58, 58, 68, 0.08)",
+    "16dp": "0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12)",
+    "8dp": "0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16)",
+    "4dp": "0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20)",
+    "2dp": "0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24)",
+    bodyInset: "inset 0 0 0 3px var(--aquarium-background-color-body)"
+  },
+  elevations: {
+    "24dp": "0px 24px 48px rgba(90, 91, 106, 0.08), 0px 12px 24px rgba(58, 58, 68, 0.08)",
+    "16dp": "0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12)",
+    "8dp": "0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16)",
+    "4dp": "0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20)",
+    "2dp": "0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24)"
+  },
+  screens: {
+    default: "0px",
+    xs: "320px",
+    sm: "672px",
+    md: "1056px",
+    lg: "1312px",
+    xl: "1536px"
+  },
+  margin: {
+    "0": "0px",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    l1: "16px",
+    l2: "24px",
+    l3: "32px",
+    l4: "48px",
+    l5: "64px",
+    l6: "96px",
+    l7: "160px"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "2px",
+    "2": "4px",
+    "3": "8px",
+    "4": "12px",
+    "5": "16px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "1px": "1px",
+    l1: "16px",
+    l2: "24px",
+    l3: "32px",
+    l4: "48px",
+    l5: "64px",
+    l6: "96px",
+    l7: "160px"
+  },
+  fontSize: {
+    base: "1rem",
+    "base-line-height": "1.5rem",
+    xs: "0.75rem",
+    "xs-line-height": "1rem",
+    sm: "0.875rem",
+    "sm-line-height": "1.25rem",
+    "lg-line-height": "1.75rem",
+    lg: "1.125rem",
+    "xl-line-height": "1.75rem",
+    xl: "1.25rem",
+    "2xl-line-height": "2rem",
+    "2xl": "1.5rem",
+    "3xl-line-height": "2.25rem",
+    "3xl": "1.875rem",
+    "4xl-line-height": "2.5rem",
+    "4xl": "2.25rem",
+    "5xl-line-height": "1",
+    "5xl": "3rem",
+    "6xl-line-height": "1",
+    "6xl": "3.75rem",
+    "7xl-line-height": "1",
+    "7xl": "4.5rem",
+    "8xl-line-height": "1",
+    "8xl": "6rem",
+    "9xl-line-height": "1",
+    "9xl": "8rem"
+  },
+  fontFamily: {
+    heading: [
+      "Poppins"
+    ],
+    body: [
+      "Inter"
+    ],
+    monospace: [
+      "Source Code Pro"
+    ]
+  },
+  typography: {
+    "large-heading": {
+      fontFamily: [
+        "Poppins"
+      ],
+      fontSize: "32px",
+      fontWeight: 700,
+      fontStyle: "normal",
+      lineHeight: 1.375,
+      textTransform: "none"
+    },
+    heading: {
+      fontFamily: [
+        "Poppins"
+      ],
+      fontSize: "24px",
+      fontWeight: 700,
+      fontStyle: "normal",
+      lineHeight: 1.375,
+      textTransform: "none"
+    },
+    subheading: {
+      fontFamily: [
+        "Poppins"
+      ],
+      fontSize: "20px",
+      fontWeight: 600,
+      fontStyle: "normal",
+      lineHeight: 1.375,
+      textTransform: "none"
+    },
+    "large-strong": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "20px",
+      fontWeight: 600,
+      fontStyle: "normal",
+      lineHeight: 1.58,
+      textTransform: "none"
+    },
+    large: {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "20px",
+      fontWeight: 500,
+      fontStyle: "normal",
+      lineHeight: 1.58,
+      textTransform: "none"
+    },
+    "default-strong": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "16px",
+      fontWeight: 500,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      textTransform: "none"
+    },
+    default: {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "16px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      textTransform: "none"
+    },
+    "small-strong": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "14px",
+      fontWeight: 500,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
+    small: {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "14px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
+    caption: {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "12px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.26,
+      textTransform: "none"
+    },
+    code: {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "16px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      textTransform: "none"
+    },
+    "code-strong": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "16px",
+      fontWeight: 600,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      textTransform: "none"
+    },
+    "code-small": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "14px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
+    "code-small-strong": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "14px",
+      fontWeight: 600,
+      fontStyle: "normal",
+      lineHeight: 1.42,
+      textTransform: "none"
+    },
+    "caption-small": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "10px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.2,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "caption-default": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "12px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.26,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "overline-small": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "10px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1,
+      letterSpacing: 0,
+      textTransform: "uppercase"
+    },
+    "overline-default": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "12px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1,
+      letterSpacing: 0,
+      textTransform: "uppercase"
+    },
+    "button-small": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "12px",
+      fontWeight: 500,
+      fontStyle: "normal",
+      lineHeight: 1,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "button-medium": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "14px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "button-large": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "16px",
+      fontWeight: 500,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "body-small": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "14px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.43,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "body-small-medium": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "14px",
+      fontWeight: 500,
+      fontStyle: "normal",
+      lineHeight: 1.43,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "body-default": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "16px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "body-default-medium": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "16px",
+      fontWeight: 500,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "body-large": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "20px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.58,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "body-large-medium": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "20px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.2,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "heading-large": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "20px",
+      fontWeight: 700,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      letterSpacing: 0.15,
+      textTransform: "none"
+    },
+    "heading-xl": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "24px",
+      fontWeight: 700,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "heading-2xl": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "34px",
+      fontWeight: 700,
+      fontStyle: "normal",
+      lineHeight: 1.28,
+      letterSpacing: 0,
+      textTransform: "none"
+    },
+    "heading-3xl": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "48px",
+      fontWeight: 700,
+      fontStyle: "normal",
+      lineHeight: 1.24,
+      letterSpacing: -0.48,
+      textTransform: "none"
+    },
+    "heading-4xl": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "60px",
+      fontWeight: 700,
+      fontStyle: "normal",
+      lineHeight: 1.2,
+      letterSpacing: -1.5,
+      textTransform: "none"
+    },
+    "heading-5xl": {
+      fontFamily: [
+        "Inter"
+      ],
+      fontSize: "76px",
+      fontWeight: 700,
+      fontStyle: "normal",
+      lineHeight: 1.2,
+      letterSpacing: -1.98,
+      textTransform: "none"
+    }
+  }
+};
+
+// src/charts/DefaultPalette/DefaultPalette.tsx
+var DefaultPaletteContext = React2.createContext({ getDefaultColor: () => void 0 });
+var PRIMARY_CATEGORIAL = Object.values(tokens_default.chartColors.primaryCategorical);
+var SECONDARY_CATEGORIAL = Object.values(tokens_default.chartColors.secondaryCategorical);
+var DefaultPalette = ({ palette = "primary", children }) => {
+  const registeredKeys = React2.useRef([]);
+  const colors = palette === "primary" ? PRIMARY_CATEGORIAL : SECONDARY_CATEGORIAL;
+  const getDefaultColor = React2.useCallback(
+    (key) => {
+      const keys = registeredKeys.current;
+      let index = keys.indexOf(key);
+      if (index === -1) {
+        index = registeredKeys.current.push(key) - 1;
+      }
+      return colors[index % colors.length];
+    },
+    [colors]
+  );
+  return /* @__PURE__ */ React2.createElement(DefaultPaletteContext.Provider, {
+    value: { getDefaultColor }
+  }, children);
+};
+
+// src/charts/Grid/Grid.tsx
+import React3 from "react";
+import { CartesianGrid as _CartesianGrid } from "recharts";
+var CartesianGrid = Object.assign(
+  (props) => /* @__PURE__ */ React3.createElement(_CartesianGrid, __spreadProps(__spreadValues({
+    strokeDasharray: "3 3"
+  }, props), {
+    vertical: false
+  })),
+  _CartesianGrid
+);
+
+// src/charts/hooks/useDefaultColor.tsx
+import React4 from "react";
+var useDefaultColor = (key, color2) => {
+  const ctx = React4.useContext(DefaultPaletteContext);
+  return color2 != null ? color2 : ctx.getDefaultColor(key);
+};
+
+// src/charts/lib/utils.tsx
+import React7 from "react";
 
 // node_modules/d3-array/src/ascending.js
 function ascending(a, b) {
@@ -1856,70 +2723,13 @@ function utcTime() {
   return initRange.apply(calendar(utcTicks, utcTickInterval, utcYear, utcMonth, utcSunday, utcDay, utcHour, utcMinute, second, utcFormat).domain([Date.UTC(2e3, 0, 1), Date.UTC(2e3, 0, 2)]), arguments);
 }
 
-// src/charts/lib/utils.ts
+// src/charts/lib/utils.tsx
 import castArray from "lodash/castArray";
 import isDate from "lodash/isDate";
-var CHART_MARGIN_BOTTOM = 15;
-var CHART_YLABEL_DEFAULT_OFFSET = 10;
-var CHART_XLABEL_DEFAULT_OFFSET = CHART_YLABEL_DEFAULT_OFFSET * -1;
-var DEFAULT_MARGINS = {
-  top: 20,
-  right: 30,
-  left: 20,
-  bottom: CHART_MARGIN_BOTTOM
-};
-var getDisplayName = (Comp) => {
-  if (typeof Comp === "string") {
-    return Comp;
-  }
-  if (!Comp) {
-    return "";
-  }
-  return Comp.displayName || Comp.name || "Component";
-};
-var isDateArray = (arr) => Array.isArray(arr) && arr.every(isDate);
-var isNumberOrDate = (value) => Number.isFinite(value) || isDate(value);
-var getXAxisTicks = ({ dataKey, ticks: ticks2, domain }, chartProps) => {
-  var _a;
-  if (!ticks2 || Array.isArray(ticks2)) {
-    return ticks2 != null ? ticks2 : void 0;
-  }
-  const normalizedDomain = normalizeAxisDomain(domain);
-  const [domainMin, domainMax] = (_a = domainExtent(normalizedDomain)) != null ? _a : [];
-  const [dataMin, dataMax] = getXAxisExtent(chartProps.data, dataKey);
-  const min = isNumberOrDate(domainMin) ? Number(domainMin) : dataMin;
-  const max = isNumberOrDate(domainMax) ? Number(domainMax) : dataMax;
-  if (min === void 0 || max === void 0) {
-    return void 0;
-  }
-  return utcTime().domain([min, max]).ticks(ticks2).map((v) => v.valueOf());
-};
-var extractChildByDisplayName = (_children, name) => {
-  const children = castArray(_children);
-  const childIndex = children.findIndex((child) => getDisplayName(child.type) === name);
-  if (childIndex === -1) {
-    return [void 0, children];
-  }
-  const foundChild = children.at(childIndex);
-  const remainingChildren = children.slice(0, childIndex).concat(children.slice(childIndex + 1));
-  return [foundChild, remainingChildren];
-};
-var normalizeAxisDomain = (domain) => {
-  return isDateArray(domain) ? domain.map((d) => d.valueOf()) : domain;
-};
-var getXAxisValues = (data = [], dataKey) => {
-  return data.map((datum) => typeof dataKey === "function" ? dataKey(datum) : dataKey ? datum[dataKey] : void 0);
-};
-var getXAxisExtent = (data = [], dataKey) => extent(getXAxisValues(data, dataKey));
-var domainExtent = (domain) => {
-  if (!Array.isArray(domain)) {
-    return void 0;
-  }
-  const [min, max] = domain;
-  return Number.isFinite(min) && Number.isFinite(max) ? [min, max] : void 0;
-};
 
 // src/charts/Axis/Axis.tsx
+import React5 from "react";
+import { XAxis as _XAxis, YAxis as _YAxis } from "recharts";
 var XTimeAxis = () => null;
 XTimeAxis.displayName = "Axis.XAxis.Time";
 var XAxis = () => null;
@@ -1930,7 +2740,7 @@ YAxis.displayName = "Axis.YAxis";
 var renderXAxis = (child, chartProps) => {
   const _a = child.props, { tickLine = false, ticks: ticks2, domain } = _a, props = __objRest(_a, ["tickLine", "ticks", "domain"]);
   const xticks = getXAxisTicks(__spreadValues({ domain }, child.props), chartProps);
-  return /* @__PURE__ */ React.createElement(_XAxis, __spreadValues({
+  return /* @__PURE__ */ React5.createElement(_XAxis, __spreadValues({
     tickLine,
     ticks: xticks,
     domain
@@ -1942,7 +2752,7 @@ var renderXTimeAxis = (child, chartProps) => {
   const normalizedDomain = normalizeAxisDomain(domain);
   const [min, max] = getXAxisExtent(chartProps.data, child.props.dataKey);
   const effectiveDomain = normalizedDomain != null ? normalizedDomain : min !== void 0 && max !== void 0 ? [Number(min), Number(max)] : ["auto", "auto"];
-  return /* @__PURE__ */ React.createElement(_XAxis, __spreadValues({
+  return /* @__PURE__ */ React5.createElement(_XAxis, __spreadValues({
     scale: utc ? "utc" : "time",
     type: "number",
     allowDataOverflow: true,
@@ -1953,7 +2763,7 @@ var renderXTimeAxis = (child, chartProps) => {
 };
 var renderYAxis = (child, _props) => {
   const _a = child.props, { axisLine = false, tickLine = false } = _a, props = __objRest(_a, ["axisLine", "tickLine"]);
-  return /* @__PURE__ */ React.createElement(_YAxis, __spreadValues({
+  return /* @__PURE__ */ React5.createElement(_YAxis, __spreadValues({
     axisLine,
     tickLine
   }, props));
@@ -1963,96 +2773,11 @@ var Axis = {
   YAxis
 };
 
-// src/charts/Container/Container.tsx
-import React2 from "react";
-import { ResponsiveContainer as _ResponsiveContainer } from "recharts";
-
-// src/utils/tailwind.ts
-import originalClassNames from "classnames";
-function cleanClassNames(classNames2) {
-  const tokens = classNames2.split(/\s+/);
-  return tokens.filter((item) => item).join(" ");
-}
-function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
-  const result = originalClassNames(
-    classesOrModifiers1,
-    classesOrModifiers2,
-    classesOrModifiers3,
-    classesOrModifiers4,
-    classesOrModifiers5,
-    classesOrModifiers6,
-    classesOrModifiers7,
-    classesOrModifiers8,
-    classesOrModifiers9,
-    classesOrModifiers10
-  );
-  return cleanClassNames(result);
-}
-var classNames = (...args) => {
-  const result = originalClassNames(...args);
-  return cleanClassNames(result);
-};
-
-// src/charts/Container/Container.tsx
-var ResponsiveContainer = (_a) => {
-  var _b = _a, {
-    isBusy = false,
-    busyLabel = "Loading...",
-    className,
-    style,
-    width = "100%",
-    height = "100%",
-    minWidth,
-    minHeight,
-    maxHeight
-  } = _b, props = __objRest(_b, [
-    "isBusy",
-    "busyLabel",
-    "className",
-    "style",
-    "width",
-    "height",
-    "minWidth",
-    "minHeight",
-    "maxHeight"
-  ]);
-  return /* @__PURE__ */ React2.createElement("div", {
-    "aria-busy": isBusy,
-    className: classNames(className, tw("relative")),
-    style: __spreadProps(__spreadValues({}, style), { width, height, minWidth, minHeight, maxHeight })
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: classNames(
-      tw("absolute inset-0 transition-colors flex items-center justify-center", {
-        "delay-300 z-40": isBusy
-      })
-    ),
-    style: isBusy ? { backgroundColor: "rgba(255, 255, 255, 0.5)" } : {}
-  }, /* @__PURE__ */ React2.createElement("span", {
-    "aria-hidden": !isBusy,
-    className: tw("rounded-full text-white bg-black typography-caption py-2 px-4 transition-all", {
-      "opacity-100 delay-300": isBusy,
-      "mb-[-20px] opacity-0": !isBusy
-    })
-  }, isBusy && busyLabel)), /* @__PURE__ */ React2.createElement(_ResponsiveContainer, __spreadValues({}, props)));
-};
-
-// src/charts/Grid/Grid.tsx
-import React3 from "react";
-import { CartesianGrid as _CartesianGrid } from "recharts";
-var CartesianGrid = Object.assign(
-  (props) => /* @__PURE__ */ React3.createElement(_CartesianGrid, __spreadProps(__spreadValues({
-    strokeDasharray: "3 3"
-  }, props), {
-    vertical: false
-  })),
-  _CartesianGrid
-);
-
 // src/charts/Tooltip/Tooltip.tsx
 import { DefaultTooltipContent, Tooltip as _Tooltip } from "recharts";
 var contentStyle = {
   boxShadow: "var(--aquarium-box-shadow-8dp)",
-  background: "#fff"
+  background: "var(--aquarium-background-color-body)"
 };
 var itemStyle = {
   display: "flex",
@@ -2070,137 +2795,243 @@ Tooltip.defaultProps = Object.assign({}, _Tooltip.defaultProps, {
   cursor: { stroke: "var(--aquarium-border-color-intense)", strokeDasharray: "5" }
 });
 
-// src/charts/AreaChart/AreaChart.tsx
-var renderChildren = (props) => {
-  return React4.Children.map(props.children, (child) => {
-    if (!child) {
-      return child;
+// src/charts/Tooltip/TooltipContentWrapper.tsx
+import React6 from "react";
+import isFunction from "lodash/isFunction";
+var TooltipContentWrapper = (_a) => {
+  var _b = _a, {
+    content,
+    tooltipColor = "stroke"
+  } = _b, props = __objRest(_b, [
+    "content",
+    "tooltipColor"
+  ]);
+  var _a2;
+  const { getDefaultColor } = React6.useContext(DefaultPaletteContext);
+  const payload = (_a2 = props.payload) == null ? void 0 : _a2.map((entry) => {
+    var _a3, _b2, _c, _d, _e, _f;
+    const stroke = (_b2 = (_a3 = entry.payload) == null ? void 0 : _a3.stroke) != null ? _b2 : entry.stroke;
+    const fill = (_d = (_c = entry.payload) == null ? void 0 : _c.fill) != null ? _d : entry.fill;
+    const color2 = tooltipColor === "stroke" ? stroke : fill;
+    return __spreadProps(__spreadValues({}, entry), {
+      color: color2 != null ? color2 : getDefaultColor((_f = (_e = entry.dataKey) == null ? void 0 : _e.toString()) != null ? _f : "unknown")
+    });
+  });
+  const propsWithPayload = __spreadProps(__spreadValues({}, props), { payload });
+  if (React6.isValidElement(content)) {
+    return React6.cloneElement(content, propsWithPayload);
+  }
+  if (isFunction(content)) {
+    return React6.createElement(content, propsWithPayload);
+  }
+  return /* @__PURE__ */ React6.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
+    payload
+  }));
+};
+
+// src/charts/lib/utils.tsx
+var CHART_MARGIN_BOTTOM = 15;
+var CHART_YLABEL_DEFAULT_OFFSET = 10;
+var CHART_XLABEL_DEFAULT_OFFSET = CHART_YLABEL_DEFAULT_OFFSET * -1;
+var DEFAULT_MARGINS = {
+  top: 20,
+  right: 30,
+  left: 20,
+  bottom: CHART_MARGIN_BOTTOM
+};
+var getDisplayName = (Comp) => {
+  if (typeof Comp === "string") {
+    return Comp;
+  }
+  if (!Comp) {
+    return "";
+  }
+  return Comp.displayName || Comp.name || "Component";
+};
+var isDateArray = (arr) => Array.isArray(arr) && arr.every(isDate);
+var isNumberOrDate = (value) => Number.isFinite(value) || isDate(value);
+var renderChartChildren = (child, chartProps) => {
+  if (!child) {
+    return child;
+  }
+  switch (getDisplayName(child.type)) {
+    case Axis.XAxis.displayName: {
+      return renderXAxis(child, chartProps);
     }
-    switch (getDisplayName(child.type)) {
-      case Axis.XAxis.displayName: {
-        return renderXAxis(child, props);
-      }
-      case Axis.XAxis.Time.displayName: {
-        return renderXTimeAxis(child, props);
-      }
-      case Axis.YAxis.displayName: {
-        return renderYAxis(child, props);
-      }
-      default: {
-        return child;
-      }
+    case Axis.XAxis.Time.displayName: {
+      return renderXTimeAxis(child, chartProps);
     }
-  });
+    case Axis.YAxis.displayName: {
+      return renderYAxis(child, chartProps);
+    }
+    case Tooltip.displayName: {
+      return React7.cloneElement(child, { content: /* @__PURE__ */ React7.createElement(TooltipContentWrapper, {
+        content: child.props.content
+      }) });
+    }
+    default: {
+      return child;
+    }
+  }
 };
+var getXAxisTicks = ({ dataKey, ticks: ticks2, domain }, chartProps) => {
+  var _a;
+  if (!ticks2 || Array.isArray(ticks2)) {
+    return ticks2 != null ? ticks2 : void 0;
+  }
+  const normalizedDomain = normalizeAxisDomain(domain);
+  const [domainMin, domainMax] = (_a = domainExtent(normalizedDomain)) != null ? _a : [];
+  const [dataMin, dataMax] = getXAxisExtent(chartProps.data, dataKey);
+  const min = isNumberOrDate(domainMin) ? Number(domainMin) : dataMin;
+  const max = isNumberOrDate(domainMax) ? Number(domainMax) : dataMax;
+  if (min === void 0 || max === void 0) {
+    return void 0;
+  }
+  return utcTime().domain([min, max]).ticks(ticks2).map((v) => v.valueOf());
+};
+var extractChildByDisplayName = (_children, name) => {
+  const children = castArray(_children);
+  const childIndex = children.findIndex((child) => getDisplayName(child.type) === name);
+  if (childIndex === -1) {
+    return [void 0, children];
+  }
+  const foundChild = children.at(childIndex);
+  const remainingChildren = children.slice(0, childIndex).concat(children.slice(childIndex + 1));
+  return [foundChild, remainingChildren];
+};
+var normalizeAxisDomain = (domain) => {
+  return isDateArray(domain) ? domain.map((d) => d.valueOf()) : domain;
+};
+var getXAxisValues = (data = [], dataKey) => {
+  return data.map((datum) => typeof dataKey === "function" ? dataKey(datum) : dataKey ? datum[dataKey] : void 0);
+};
+var getXAxisExtent = (data = [], dataKey) => extent(getXAxisValues(data, dataKey));
+var domainExtent = (domain) => {
+  if (!Array.isArray(domain)) {
+    return void 0;
+  }
+  const [min, max] = domain;
+  return Number.isFinite(min) && Number.isFinite(max) ? [min, max] : void 0;
+};
+
+// src/charts/AreaChart/AreaChart.tsx
 var AreaChart = (_a) => {
   var _b = _a, {
     isBusy,
     busyLabel,
-    margin = DEFAULT_MARGINS
+    margin = DEFAULT_MARGINS,
+    palette
   } = _b, props = __objRest(_b, [
     "isBusy",
     "busyLabel",
-    "margin"
+    "margin",
+    "palette"
   ]);
   const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
-  return /* @__PURE__ */ React4.createElement(ResponsiveContainer, {
+  return /* @__PURE__ */ React8.createElement(DefaultPalette, {
+    palette
+  }, /* @__PURE__ */ React8.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height,
     isBusy,
     busyLabel
-  }, /* @__PURE__ */ React4.createElement(_AreaChart, {
+  }, /* @__PURE__ */ React8.createElement(_AreaChart, {
     accessibilityLayer: tooltip !== void 0,
     data: props.data,
     style: { stroke: "#fff", strokeWidth: 1 },
     margin
-  }, /* @__PURE__ */ React4.createElement(CartesianGrid, null), renderChildren(props)));
+  }, /* @__PURE__ */ React8.createElement(CartesianGrid, null), React8.Children.map(props.children, (child) => renderChartChildren(child, props)))));
 };
-var Area = Object.assign(
-  (props) => {
-    var _a;
-    return /* @__PURE__ */ React4.createElement(_Area, __spreadProps(__spreadValues({
-      type: "linear",
-      strokeWidth: 2,
-      dot: false
-    }, props), {
-      fill: (_a = props.fill) != null ? _a : props.stroke,
-      fillOpacity: 0.1,
-      isAnimationActive: false
-    }));
-  },
-  _Area
-);
+var Area = Object.assign((props) => {
+  var _a;
+  const stroke = useDefaultColor(props.dataKey.toString(), props.stroke);
+  const fill = useDefaultColor(props.dataKey.toString(), (_a = props.fill) != null ? _a : stroke);
+  return /* @__PURE__ */ React8.createElement(_Area, __spreadProps(__spreadValues({
+    type: "linear",
+    strokeWidth: 2,
+    dot: false
+  }, props), {
+    stroke,
+    fill,
+    fillOpacity: 0.1,
+    isAnimationActive: false
+  }));
+}, _Area);
 Area.defaultProps = Object.assign({}, _Area.defaultProps, {
   fillOpacity: 0.1,
-  fill: void 0
+  fill: void 0,
+  stroke: void 0
 });
 AreaChart.Area = Area;
 
 // src/charts/BarChart/BarChart.tsx
-import React5 from "react";
+import React9 from "react";
 import { Bar as _Bar, BarChart as _BarChart, Rectangle } from "recharts";
 var BarChart = (_a) => {
   var _b = _a, {
     isBusy,
     busyLabel,
-    margin = DEFAULT_MARGINS
+    margin = DEFAULT_MARGINS,
+    palette
   } = _b, props = __objRest(_b, [
     "isBusy",
     "busyLabel",
-    "margin"
+    "margin",
+    "palette"
   ]);
-  const [activeIndex, setActiveIndex] = React5.useState(void 0);
+  const [activeIndex, setActiveIndex] = React9.useState(void 0);
   const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
-  const renderChildren3 = (props2) => {
-    return React5.Children.map(props2.children, (child) => {
+  const renderChildren = (props2) => {
+    return React9.Children.map(props2.children, (child) => {
       if (!child) {
         return child;
       }
       switch (getDisplayName(child.type)) {
-        case Axis.XAxis.displayName: {
-          return renderXAxis(child, props2);
-        }
-        case Axis.XAxis.Time.displayName: {
-          return renderXTimeAxis(child, props2);
-        }
-        case Axis.YAxis.displayName: {
-          return renderYAxis(child, props2);
-        }
         case _Bar.displayName: {
-          return React5.cloneElement(child, {
-            shape: (props3) => /* @__PURE__ */ React5.createElement(Rectangle, __spreadProps(__spreadValues({}, props3), {
+          return React9.cloneElement(child, {
+            shape: (props3) => /* @__PURE__ */ React9.createElement(Rectangle, __spreadProps(__spreadValues({}, props3), {
               className: activeIndex !== void 0 ? "inactive" : void 0
             }))
           });
         }
         case Tooltip.displayName: {
-          return /* @__PURE__ */ React5.createElement(Tooltip, __spreadProps(__spreadValues({}, child.props), {
+          return /* @__PURE__ */ React9.createElement(Tooltip, __spreadProps(__spreadValues({}, child.props), {
+            content: /* @__PURE__ */ React9.createElement(TooltipContentWrapper, {
+              content: child.props.content,
+              tooltipColor: "fill"
+            }),
             cursor: false
           }));
         }
         default: {
-          return child;
+          return renderChartChildren(child, props2);
         }
       }
     });
   };
-  return /* @__PURE__ */ React5.createElement(ResponsiveContainer, {
+  return /* @__PURE__ */ React9.createElement(DefaultPalette, {
+    palette
+  }, /* @__PURE__ */ React9.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height,
     isBusy,
     busyLabel
-  }, /* @__PURE__ */ React5.createElement(_BarChart, __spreadProps(__spreadValues({}, props), {
+  }, /* @__PURE__ */ React9.createElement(_BarChart, __spreadProps(__spreadValues({}, props), {
     accessibilityLayer: tooltip !== void 0,
     barCategoryGap: "5%",
     style: { stroke: "#fff", strokeWidth: 1 },
     onMouseMove: (state) => setActiveIndex(state.isTooltipActive ? state.activeTooltipIndex : void 0),
     onMouseLeave: () => setActiveIndex(void 0),
     margin
-  }), /* @__PURE__ */ React5.createElement(CartesianGrid, null), renderChildren3(props)));
+  }), /* @__PURE__ */ React9.createElement(CartesianGrid, null), renderChildren(props))));
 };
-var Bar = Object.assign((props) => /* @__PURE__ */ React5.createElement(_Bar, __spreadProps(__spreadValues({}, props), {
-  isAnimationActive: false
-})), _Bar);
+var Bar = Object.assign((props) => {
+  const fill = useDefaultColor(props.dataKey.toString(), props.fill);
+  return /* @__PURE__ */ React9.createElement(_Bar, __spreadProps(__spreadValues({}, props), {
+    fill,
+    isAnimationActive: false
+  }));
+}, _Bar);
 BarChart.Bar = Bar;
 BarChart.Tooltip = Tooltip;
 
@@ -2209,17 +3040,17 @@ import { Cell } from "recharts";
 import {} from "recharts";
 
 // src/charts/Label/Label.tsx
-import React6 from "react";
+import React10 from "react";
 import { Label as _Label, LabelList as _LabelList } from "recharts";
 var XLabel = Object.assign(
-  (props) => /* @__PURE__ */ React6.createElement(_Label, __spreadValues({
+  (props) => /* @__PURE__ */ React10.createElement(_Label, __spreadValues({
     position: "insideBottom",
     offset: CHART_XLABEL_DEFAULT_OFFSET
   }, props)),
   _Label
 );
 var YLabel = Object.assign(
-  (props) => /* @__PURE__ */ React6.createElement(_Label, __spreadValues({
+  (props) => /* @__PURE__ */ React10.createElement(_Label, __spreadValues({
     position: "insideLeft",
     angle: -90,
     offset: CHART_YLABEL_DEFAULT_OFFSET
@@ -2233,11 +3064,17 @@ var Label = {
 var LabelList = _LabelList;
 
 // src/charts/Legend/Legend.tsx
-import React7 from "react";
-import { Legend as _Legend } from "recharts";
-var Legend = React7.forwardRef((props, _ref) => {
-  return /* @__PURE__ */ React7.createElement(_Legend, __spreadProps(__spreadValues({}, props), {
-    margin: __spreadProps(__spreadValues({}, props.margin), { top: 0 })
+import React11 from "react";
+import {
+  DefaultLegendContent,
+  Legend as _Legend
+} from "recharts";
+var Legend = React11.forwardRef((props, _ref) => {
+  return /* @__PURE__ */ React11.createElement(_Legend, __spreadProps(__spreadValues({}, props), {
+    margin: __spreadProps(__spreadValues({}, props.margin), { top: 0 }),
+    content: /* @__PURE__ */ React11.createElement(LegendContentWrapper, {
+      content: props.content
+    })
   }));
 });
 Legend.displayName = "Legend";
@@ -2249,130 +3086,110 @@ Legend.defaultProps = {
   verticalAlign: "top",
   margin: { top: 0 }
 };
-
-// src/charts/LineChart/LineChart.tsx
-import React8 from "react";
-import { Line as _Line, LineChart as _LineChart } from "recharts";
-var renderChildren2 = (props) => {
-  return React8.Children.map(props.children, (child) => {
-    if (!child) {
-      return child;
-    }
-    switch (getDisplayName(child.type)) {
-      case Axis.XAxis.displayName: {
-        return renderXAxis(child, props);
-      }
-      case Axis.XAxis.Time.displayName: {
-        return renderXTimeAxis(child, props);
-      }
-      case Axis.YAxis.displayName: {
-        return renderYAxis(child, props);
-      }
-      default: {
-        return child;
-      }
-    }
+var LegendContentWrapper = (_a) => {
+  var _b = _a, {
+    ref,
+    content
+  } = _b, props = __objRest(_b, [
+    "ref",
+    "content"
+  ]);
+  var _a2;
+  const { getDefaultColor } = React11.useContext(DefaultPaletteContext);
+  const payload = (_a2 = props.payload) == null ? void 0 : _a2.map((entry) => {
+    var _a3;
+    return __spreadProps(__spreadValues({}, entry), {
+      color: (_a3 = entry.color) != null ? _a3 : getDefaultColor("dataKey" in entry && typeof entry.dataKey === "string" ? entry.dataKey : "unknown")
+    });
   });
+  return /* @__PURE__ */ React11.createElement(DefaultLegendContent, __spreadProps(__spreadValues({}, props), {
+    payload
+  }));
 };
+
+// src/charts/LineChart/LineChart.tsx
+import React12 from "react";
+import { Line as _Line, LineChart as _LineChart, Tooltip as Tooltip2 } from "recharts";
 var LineChart = (_a) => {
   var _b = _a, {
     isBusy,
     busyLabel,
-    margin = DEFAULT_MARGINS
+    margin = DEFAULT_MARGINS,
+    palette
   } = _b, props = __objRest(_b, [
     "isBusy",
     "busyLabel",
-    "margin"
+    "margin",
+    "palette"
   ]);
-  const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
-  return /* @__PURE__ */ React8.createElement(ResponsiveContainer, {
+  const [tooltip] = extractChildByDisplayName(props.children, Tooltip2.displayName);
+  return /* @__PURE__ */ React12.createElement(DefaultPalette, {
+    palette
+  }, /* @__PURE__ */ React12.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height,
     isBusy,
     busyLabel
-  }, /* @__PURE__ */ React8.createElement(_LineChart, {
+  }, /* @__PURE__ */ React12.createElement(_LineChart, {
     data: props.data,
     style: { stroke: "#fff", strokeWidth: 1 },
     margin,
     accessibilityLayer: tooltip !== void 0
-  }, /* @__PURE__ */ React8.createElement(CartesianGrid, null), renderChildren2(props)));
+  }, /* @__PURE__ */ React12.createElement(CartesianGrid, null), React12.Children.map(props.children, (child) => renderChartChildren(child, props)))));
 };
-var Line = Object.assign(
-  (props) => /* @__PURE__ */ React8.createElement(_Line, __spreadProps(__spreadValues({
+var Line = Object.assign((props) => {
+  var _a, _b;
+  const stroke = useDefaultColor((_b = (_a = props.dataKey) == null ? void 0 : _a.toString()) != null ? _b : "unknown", props.stroke);
+  return /* @__PURE__ */ React12.createElement(_Line, __spreadProps(__spreadValues({
     type: "linear"
   }, props), {
+    stroke,
     strokeWidth: 2,
     isAnimationActive: false,
     dot: false
-  })),
-  _Line
-);
+  }));
+}, _Line);
+Line.defaultProps = Object.assign({}, _Line.defaultProps, { stroke: void 0, fill: void 0 });
 LineChart.Line = Line;
 
 // src/charts/PieChart/DoughnutChart.tsx
-import React12 from "react";
+import React15 from "react";
 import isNil from "lodash/isNil";
 import { Cell as Cell2, Customized, Pie as _Pie, PieChart as _PieChart } from "recharts";
 
 // src/charts/PieChart/ChartValue.tsx
-import React9 from "react";
+import React13 from "react";
 var ChartValue = (props) => {
   const { value, unit: unit2, caption } = props;
-  return /* @__PURE__ */ React9.createElement("p", {
+  return /* @__PURE__ */ React13.createElement("p", {
     className: tw(
       "typography-large-heading text-intense text-center leading-tight absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
     )
-  }, value, unit2, caption && /* @__PURE__ */ React9.createElement("span", {
+  }, value, unit2, caption && /* @__PURE__ */ React13.createElement("span", {
     className: tw("block", "typography-small text-default")
   }, caption));
 };
 
 // src/charts/PieChart/renderPieChildren.tsx
-import React11 from "react";
+import React14 from "react";
 import { Legend as Legend2 } from "recharts";
-
-// src/charts/PieChart/TooltipContentWrapper.tsx
-import React10 from "react";
-import isFunction from "lodash/isFunction";
-var TooltipContentWrapper = (_a) => {
-  var _b = _a, {
-    content
-  } = _b, props = __objRest(_b, [
-    "content"
-  ]);
-  var _a2;
-  const payload = (_a2 = props.payload) == null ? void 0 : _a2.map((entry) => {
-    var _a3;
-    return __spreadProps(__spreadValues({}, entry), {
-      color: (_a3 = entry.payload) == null ? void 0 : _a3.fill
-    });
-  });
-  const propsWithPayload = __spreadProps(__spreadValues({}, props), { payload });
-  if (React10.isValidElement(content)) {
-    return React10.cloneElement(content, propsWithPayload);
-  }
-  if (isFunction(content)) {
-    return React10.createElement(content, propsWithPayload);
-  }
-  return /* @__PURE__ */ React10.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
-    payload
-  }));
-};
-
-// src/charts/PieChart/renderPieChildren.tsx
-var renderPieChildren = (children) => {
-  return React11.Children.map(children, (child) => {
+var renderPieChildren = (children, opts = {}) => {
+  return React14.Children.map(children, (child) => {
     if (!child) {
       return child;
     }
     switch (getDisplayName(child.type)) {
       case Tooltip.displayName: {
-        return React11.cloneElement(child, { content: /* @__PURE__ */ React11.createElement(TooltipContentWrapper, {
-          content: child.props.content
-        }) });
+        return React14.cloneElement(child, {
+          content: /* @__PURE__ */ React14.createElement(TooltipContentWrapper, {
+            content: child.props.content,
+            tooltipColor: opts.tooltipColor
+          }),
+          labelStyle: { paddingBottom: 0 }
+        });
       }
       case Legend2.displayName: {
-        return React11.cloneElement(child, { verticalAlign: "top", align: "center" });
+        return React14.cloneElement(child, { verticalAlign: "top", align: "center" });
       }
       default: {
         return child;
@@ -2384,27 +3201,29 @@ var renderPieChildren = (children) => {
 // src/charts/PieChart/DoughnutChart.tsx
 var refSize = 300;
 var DoughnutChart = (_a) => {
-  var _b = _a, {
-    isBusy,
-    busyLabel
-  } = _b, props = __objRest(_b, [
-    "isBusy",
-    "busyLabel"
-  ]);
-  const [containerWidth, setContainerWidth] = React12.useState(0);
-  const [containerHeight, setContainerHeight] = React12.useState(0);
-  const [activeIndex, setActiveIndex] = React12.useState(null);
+  var _b = _a, { palette } = _b, props = __objRest(_b, ["palette"]);
+  return /* @__PURE__ */ React15.createElement(DefaultPalette, {
+    palette
+  }, /* @__PURE__ */ React15.createElement(DoughnutChartWrapper, __spreadValues({}, props)));
+};
+var DoughnutChartWrapper = (_a) => {
+  var _b = _a, { isBusy, busyLabel } = _b, props = __objRest(_b, ["isBusy", "busyLabel"]);
+  var _a2;
+  const [containerWidth, setContainerWidth] = React15.useState(0);
+  const [containerHeight, setContainerHeight] = React15.useState(0);
+  const [activeIndex, setActiveIndex] = React15.useState(null);
+  const { getDefaultColor } = React15.useContext(DefaultPaletteContext);
   const [chartValue, _children] = extractChildByDisplayName(props.children, ChartValue.displayName);
-  const [pie, children] = extractChildByDisplayName(_children, DoughnutChart.Doughnut.displayName);
+  const [doughnut, children] = extractChildByDisplayName(_children, DoughnutChart.Doughnut.displayName);
   const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
   const onResize = (w, h) => {
     setContainerWidth(w);
     setContainerHeight(h);
   };
   const renderChartValue = ({ formattedGraphicalItems }) => {
-    var _a2, _b2, _c;
-    const pie2 = formattedGraphicalItems == null ? void 0 : formattedGraphicalItems[0];
-    const props2 = (_a2 = pie2 == null ? void 0 : pie2.props) != null ? _a2 : {};
+    var _a3, _b2, _c;
+    const pie = formattedGraphicalItems == null ? void 0 : formattedGraphicalItems[0];
+    const props2 = (_a3 = pie == null ? void 0 : pie.props) != null ? _a3 : {};
     const cx = (_b2 = props2.cx) != null ? _b2 : containerWidth / 2;
     const cy = (_c = props2.cy) != null ? _c : containerHeight / 2;
     if (!containerWidth || !containerHeight || isNil(chartValue)) {
@@ -2416,7 +3235,7 @@ var DoughnutChart = (_a) => {
     const yMargin = (containerHeight - refSize * scale) / 2;
     const x = cx - refSize / 2 * scale;
     const y = (yOffset + yMargin) / scale;
-    return /* @__PURE__ */ React12.createElement("foreignObject", {
+    return /* @__PURE__ */ React15.createElement("foreignObject", {
       width: refSize,
       height: refSize,
       x,
@@ -2425,24 +3244,27 @@ var DoughnutChart = (_a) => {
     }, chartValue);
   };
   const highlightActive = activeIndex !== null && tooltip;
-  return /* @__PURE__ */ React12.createElement(ResponsiveContainer, {
+  return /* @__PURE__ */ React15.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height,
     isBusy,
     busyLabel,
     onResize
-  }, /* @__PURE__ */ React12.createElement(_PieChart, null, chartValue && /* @__PURE__ */ React12.createElement(Customized, {
+  }, /* @__PURE__ */ React15.createElement(_PieChart, null, chartValue && /* @__PURE__ */ React15.createElement(Customized, {
     component: renderChartValue
-  }), pie && /* @__PURE__ */ React12.createElement(_Pie, __spreadProps(__spreadValues({}, pie.props), {
+  }), doughnut && /* @__PURE__ */ React15.createElement(_Pie, __spreadProps(__spreadValues({}, doughnut.props), {
+    fill: (_a2 = doughnut.props.fill) != null ? _a2 : getDefaultColor(doughnut.props.dataKey),
     onMouseEnter: (_, index) => setActiveIndex(index),
     onMouseLeave: () => setActiveIndex(null),
     activeIndex,
     inactiveShape: { className: highlightActive ? "inactive" : void 0 },
     activeShape: { className: highlightActive ? "active" : void 0 }
-  })), renderPieChildren(children)));
+  })), renderPieChildren(children, { tooltipColor: "fill" })));
 };
-var Doughnut = Object.assign((props) => /* @__PURE__ */ React12.createElement(_Pie, __spreadValues({}, props)), _Pie);
+var Doughnut = Object.assign((props) => /* @__PURE__ */ React15.createElement(_Pie, __spreadValues({}, props)), _Pie);
 Doughnut.defaultProps = Object.assign({}, _Pie.defaultProps, {
+  fill: void 0,
+  stroke: void 0,
   isAnimationActive: false,
   innerRadius: "60%",
   outerRadius: "80%"
@@ -2452,22 +3274,34 @@ DoughnutChart.ChartValue = ChartValue;
 DoughnutChart.Cell = Cell2;
 
 // src/charts/PieChart/PieChart.tsx
-import React13 from "react";
+import React16 from "react";
 import { Cell as Cell3, Pie as _Pie2, PieChart as _PieChart2 } from "recharts";
 var PieChart = (_a) => {
+  var _b = _a, { palette } = _b, props = __objRest(_b, ["palette"]);
+  return /* @__PURE__ */ React16.createElement(DefaultPalette, {
+    palette
+  }, /* @__PURE__ */ React16.createElement(PieChartWrapper, __spreadValues({}, props)));
+};
+var PieChartWrapper = (_a) => {
   var _b = _a, { isBusy, busyLabel } = _b, props = __objRest(_b, ["isBusy", "busyLabel"]);
-  return /* @__PURE__ */ React13.createElement(ResponsiveContainer, {
+  var _a2;
+  const [pie, children] = extractChildByDisplayName(props.children, PieChart.Pie.displayName);
+  const { getDefaultColor } = React16.useContext(DefaultPaletteContext);
+  return /* @__PURE__ */ React16.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height,
     isBusy,
     busyLabel
-  }, /* @__PURE__ */ React13.createElement(_PieChart2, {
+  }, /* @__PURE__ */ React16.createElement(_PieChart2, {
     width: 500,
     height: 500
-  }, renderPieChildren(props.children)));
+  }, renderPieChildren(children, { tooltipColor: "fill" }), pie && /* @__PURE__ */ React16.createElement(_Pie2, __spreadProps(__spreadValues({}, pie.props), {
+    fill: (_a2 = pie.props.fill) != null ? _a2 : getDefaultColor(pie.props.dataKey)
+  }))));
 };
-var Pie = Object.assign((props) => /* @__PURE__ */ React13.createElement(_Pie2, __spreadValues({}, props)), _Pie2);
+var Pie = Object.assign((props) => /* @__PURE__ */ React16.createElement(_Pie2, __spreadValues({}, props)), _Pie2);
 Pie.defaultProps = Object.assign({}, _Pie2.defaultProps, {
+  fill: void 0,
   isAnimationActive: false,
   innerRadius: 0,
   outerRadius: "80%"
@@ -2476,20 +3310,20 @@ PieChart.Pie = Pie;
 PieChart.Cell = Cell3;
 
 // src/charts/Reference/Reference.tsx
-import React14 from "react";
+import React17 from "react";
 import {
   ReferenceArea as _ReferenceArea,
   ReferenceLine as _ReferenceLine
 } from "recharts";
 var ReferenceLine = Object.assign(
-  (props) => /* @__PURE__ */ React14.createElement(_ReferenceLine, __spreadProps(__spreadValues({}, props), {
+  (props) => /* @__PURE__ */ React17.createElement(_ReferenceLine, __spreadProps(__spreadValues({}, props), {
     strokeDasharray: "9 3",
     strokeWidth: 2
   })),
   _ReferenceLine
 );
 var ReferenceArea = Object.assign(
-  (props) => /* @__PURE__ */ React14.createElement(_ReferenceArea, __spreadProps(__spreadValues({}, props), {
+  (props) => /* @__PURE__ */ React17.createElement(_ReferenceArea, __spreadProps(__spreadValues({}, props), {
     strokeWidth: 0,
     fillOpacity: 0.1
   })),
@@ -2511,11 +3345,14 @@ export {
   CartesianGrid,
   Cell,
   DEFAULT_MARGINS,
+  DefaultPalette,
+  DefaultPaletteContext,
   Doughnut,
   DoughnutChart,
   Label,
   LabelList,
   Legend,
+  LegendContentWrapper,
   Line,
   LineChart,
   Pie,
@@ -2529,6 +3366,7 @@ export {
   getXAxisTicks,
   getXAxisValues,
   normalizeAxisDomain,
+  renderChartChildren,
   renderXAxis,
   renderXTimeAxis,
   renderYAxis,
@@ -2567,6 +3405,7 @@ export {
   timeYears,
   unixDay,
   unixDays,
+  useDefaultColor,
   utcDay,
   utcDays,
   utcFriday,