@elevasis/ui 1.4.0 → 1.6.0

package/dist/{CoreAuthKitInner-3J4RVQO6.js → CoreAuthKitInner-Y6LQYIPX.js}

@@ -1,4 +1,5 @@
 import { AuthProvider } from './chunk-7PLEQFHO.js';
+import './chunk-MLKGABMK.js';
 import { AuthKitProvider, useAuth } from '@workos-inc/authkit-react';
 import { useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/api/index.js

@@ -3,3 +3,4 @@ export { ApiClientProvider, useApiClient, useApiClientContext } from '../chunk-L
 import '../chunk-LFYO3MDC.js';
 import '../chunk-4VGWQ5AN.js';
 import '../chunk-DD3CCMCZ.js';
+import '../chunk-MLKGABMK.js';

package/dist/auth/context.js

@@ -1 +1,2 @@
 export { AuthProvider, useAuthContext } from '../chunk-7PLEQFHO.js';
+import '../chunk-MLKGABMK.js';

package/dist/auth/index.js

@@ -5,3 +5,4 @@ import '../chunk-L2CM2CUA.js';
 import '../chunk-KA7LO7U5.js';
 import '../chunk-DD3CCMCZ.js';
 export { AuthProvider, useAuthContext } from '../chunk-7PLEQFHO.js';
+import '../chunk-MLKGABMK.js';

package/dist/charts/index.d.ts

@@ -0,0 +1,96 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * CyberAreaChart — Reusable area chart with cyber/high-tech aesthetic.
+ *
+ * Features:
+ * - SVG gradient fills with neon color palette (light/dark aware)
+ * - Gaussian blur glow filters on lines
+ * - Glassmorphism tooltip with backdrop blur
+ * - Animated pulsing active dots
+ * - Dotted grid lines at low opacity
+ * - Baseline glow line when all values are zero
+ * - Consistent slide-in animation on every mount
+ */
+interface CyberSeries {
+    /** The key in each data record that holds this series' value. */
+    dataKey: string;
+    /** Display name shown in tooltip. Defaults to dataKey. */
+    name?: string;
+    /** Which cyber color to use. Defaults to 'cyan'. */
+    color?: 'cyan' | 'blue' | 'green' | 'red' | 'yellow';
+    /** Animation duration in ms. Defaults to 1200. */
+    animationDuration?: number;
+}
+interface CyberAreaChartProps {
+    data: Record<string, unknown>[];
+    series: CyberSeries[];
+    /** Key in each data record used for the X axis. Defaults to 'time'. */
+    xDataKey?: string;
+    /** Chart height in px. Defaults to 300. */
+    height?: number;
+    /** Y-axis label text. */
+    yAxisLabel?: string;
+    /** Y-axis domain. Defaults to [0, 'auto']. */
+    yDomain?: [number | string | ((v: number) => number), number | string | ((v: number) => number)];
+    /** Custom Y-axis tick formatter. */
+    yTickFormatter?: (value: number) => string;
+    /** Custom X-axis tick formatter. When provided, raw data values are used as keys and this formats the display. */
+    xTickFormatter?: (value: string) => string;
+    /** Whether to show the dotted grid. Defaults to true. */
+    showGrid?: boolean;
+    /** Whether to show a glowing baseline when all values are 0. Defaults to true. */
+    showZeroBaseline?: boolean;
+    /** Which cyber color to use for the zero baseline. Defaults to the first series' color. */
+    baselineColor?: 'cyan' | 'blue' | 'green' | 'red' | 'yellow';
+    /** Render as line only (no gradient fill). Defaults to false. */
+    lineOnly?: boolean;
+    /** Custom tooltip value formatter. Defaults to String(value). */
+    tooltipFormatter?: (value: number) => string;
+    /** Chart margin overrides. */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+}
+declare function CyberLegendItem({ color, label }: {
+    color: string;
+    label: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CyberAreaChart({ data, series, xDataKey, height, yAxisLabel, yDomain, yTickFormatter, showGrid, showZeroBaseline, baselineColor, lineOnly, margin, xTickFormatter, tooltipFormatter }: CyberAreaChartProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Cyber chart theme — color palette and shared config for light/dark modes.
+ *
+ * Theme-derived values (grid, tick text, tooltip) use CSS custom properties
+ * so they automatically match whatever color theme the app uses.
+ * Only the neon accent colors (cyan, blue, green, red) differ between light/dark.
+ */
+interface CyberColors {
+    cyan: string;
+    cyanDim: string;
+    blue: string;
+    green: string;
+    greenDim: string;
+    red: string;
+    redDim: string;
+    yellow: string;
+    magenta: string;
+    grid: string;
+    gridLine: string;
+    tickText: string;
+    tooltipBg: string;
+    tooltipBorder: string;
+    tooltipText: string;
+    cardGlow: string;
+    dotStroke: string;
+}
+/** Returns the resolved cyber color palette for the current color scheme. */
+declare function useCyberColors(): CyberColors;
+/** Map a series dataKey to its color from the palette. */
+declare function getSeriesColor(key: string, colors: CyberColors): string;
+
+export { CyberAreaChart, CyberLegendItem, getSeriesColor, useCyberColors };
+export type { CyberAreaChartProps, CyberColors, CyberSeries };

package/dist/charts/index.js

@@ -0,0 +1,384 @@
+import '../chunk-MLKGABMK.js';
+import { useMemo, useState, useEffect } from 'react';
+import { useComputedColorScheme, Group, Text, Box } from '@mantine/core';
+import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Area } from 'recharts';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var THEME_DERIVED = {
+  grid: "var(--color-border)",
+  gridLine: "var(--color-border)",
+  tickText: "var(--mantine-color-dimmed)",
+  tooltipBg: "var(--glass-background)",
+  tooltipBorder: "var(--color-border)",
+  tooltipText: "var(--mantine-color-dimmed)",
+  dotStroke: "var(--mantine-color-body)"
+};
+var DARK = {
+  cyan: "#00e5ff",
+  cyanDim: "#00b8d4",
+  blue: "#448aff",
+  green: "#00ff88",
+  greenDim: "#00c853",
+  red: "#ff1744",
+  redDim: "#d50000",
+  yellow: "#ffab00",
+  magenta: "#ff4081",
+  ...THEME_DERIVED,
+  cardGlow: "0 0 30px rgba(0, 229, 255, 0.06)"
+};
+var LIGHT = {
+  cyan: "#0091ea",
+  cyanDim: "#0277bd",
+  blue: "#4d8af0",
+  green: "#00a854",
+  greenDim: "#00873e",
+  red: "#d32f2f",
+  redDim: "#b71c1c",
+  yellow: "#f9a825",
+  magenta: "#c51162",
+  ...THEME_DERIVED,
+  cardGlow: "0 0 20px rgba(0, 145, 234, 0.06)"
+};
+function useCyberColors() {
+  const scheme = useComputedColorScheme("dark");
+  return useMemo(() => scheme === "dark" ? DARK : LIGHT, [scheme]);
+}
+function getSeriesColor(key, colors) {
+  switch (key) {
+    case "Success Rate":
+      return colors.cyan;
+    case "Executions":
+      return colors.blue;
+    case "Success Count":
+      return colors.green;
+    case "Error Count":
+      return colors.red;
+    default:
+      return colors.cyan;
+  }
+}
+function CyberDefs({ colors }) {
+  const gradients = [
+    { id: "gradCyan", color: colors.cyan, opacity: 0.35 },
+    { id: "gradBlue", color: colors.blue, opacity: 0.3 },
+    { id: "gradGreen", color: colors.green, opacity: 0.3 },
+    { id: "gradRed", color: colors.red, opacity: 0.3 },
+    { id: "gradYellow", color: colors.yellow, opacity: 0.3 }
+  ];
+  const filters = [
+    { id: "glowCyan", std: 3 },
+    { id: "glowBlue", std: 3 },
+    { id: "glowGreen", std: 2.5 },
+    { id: "glowRed", std: 2.5 },
+    { id: "glowYellow", std: 2.5 }
+  ];
+  return /* @__PURE__ */ jsxs("defs", { children: [
+    gradients.map((g) => /* @__PURE__ */ jsxs("linearGradient", { id: g.id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: g.color, stopOpacity: g.opacity }),
+      /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: g.color, stopOpacity: g.opacity * 0.2 }),
+      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: g.color, stopOpacity: 0 })
+    ] }, g.id)),
+    filters.map((f) => /* @__PURE__ */ jsxs("filter", { id: f.id, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: f.std, result: "blur" }),
+      /* @__PURE__ */ jsxs("feMerge", { children: [
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+      ] })
+    ] }, f.id)),
+    /* @__PURE__ */ jsxs("filter", { id: "dotGlow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+      /* @__PURE__ */ jsxs("feMerge", { children: [
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("filter", { id: "pulseGlow", x: "-30%", y: "-30%", width: "160%", height: "160%", children: [
+      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "5", result: "blur" }),
+      /* @__PURE__ */ jsxs("feMerge", { children: [
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+      ] })
+    ] })
+  ] });
+}
+function PulseDefs({ series, colors, isLight }) {
+  return /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => {
+    const color = colors[s.color ?? "cyan"];
+    const dur = "6s";
+    const delay = "0s";
+    const keyTimes = "0;0.3;1";
+    const keySplines = "0.33 0 0.67 1;0 0 1 1";
+    const animateProps = {
+      dur,
+      keyTimes,
+      keySplines,
+      repeatCount: "indefinite",
+      calcMode: "spline",
+      begin: delay
+    };
+    return /* @__PURE__ */ jsxs("linearGradient", { id: `pulse-${i}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: color, stopOpacity: 0, children: /* @__PURE__ */ jsx("animate", { attributeName: "offset", values: "-0.15;1.0;1.0", ...animateProps }) }),
+      /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: isLight ? "white" : color, stopOpacity: isLight ? 0.6 : 0.9, children: /* @__PURE__ */ jsx("animate", { attributeName: "offset", values: "-0.075;1.075;1.075", ...animateProps }) }),
+      /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: color, stopOpacity: 0, children: /* @__PURE__ */ jsx("animate", { attributeName: "offset", values: "0;1.15;1.15", ...animateProps }) })
+    ] }, i);
+  }) });
+}
+function CyberActiveDot({
+  cx,
+  cy,
+  color,
+  dotStroke
+}) {
+  if (cx == null || cy == null) return null;
+  return /* @__PURE__ */ jsxs("g", { filter: "url(#dotGlow)", children: [
+    /* @__PURE__ */ jsxs("circle", { cx, cy, r: 6, fill: "none", stroke: color, strokeWidth: 2, opacity: 0.5, children: [
+      /* @__PURE__ */ jsx("animate", { attributeName: "r", from: "4", to: "10", dur: "1.2s", repeatCount: "indefinite" }),
+      /* @__PURE__ */ jsx("animate", { attributeName: "opacity", from: "0.6", to: "0", dur: "1.2s", repeatCount: "indefinite" })
+    ] }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: 4, fill: color, stroke: dotStroke, strokeWidth: 2 })
+  ] });
+}
+function CyberTooltipContent({
+  active,
+  payload,
+  label,
+  colors,
+  labelFormatter,
+  valueFormatter
+}) {
+  if (!active || !payload?.length) return null;
+  const filtered = payload.filter((entry) => !entry.name?.startsWith("_pulse_"));
+  if (!filtered.length) return null;
+  const displayLabel = label && labelFormatter ? labelFormatter(label) : label;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: colors.tooltipBg,
+        border: `1px solid ${colors.tooltipBorder}`,
+        borderRadius: 8,
+        padding: "10px 14px",
+        backdropFilter: "var(--glass-blur)",
+        WebkitBackdropFilter: "var(--glass-blur)",
+        boxShadow: "var(--standard-box-shadow)",
+        fontFamily: "var(--mantine-font-family-monospace, monospace)",
+        minWidth: 160
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              color: colors.tickText,
+              marginBottom: 8,
+              letterSpacing: "0.05em",
+              textTransform: "uppercase",
+              borderBottom: `1px solid ${colors.tooltipBorder}`,
+              paddingBottom: 6
+            },
+            children: displayLabel
+          }
+        ),
+        filtered.map((entry) => {
+          const color = entry.color || getSeriesColor(entry.dataKey, colors);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: 16,
+                padding: "3px 0",
+                fontSize: 12
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: 8,
+                        height: 8,
+                        borderRadius: "50%",
+                        backgroundColor: color,
+                        boxShadow: `0 0 6px ${color}`
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { color: colors.tooltipText }, children: entry.name ?? entry.dataKey })
+                ] }),
+                /* @__PURE__ */ jsx("span", { style: { color, fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: entry.value != null && valueFormatter ? valueFormatter(entry.value) : String(entry.value) })
+              ]
+            },
+            entry.dataKey
+          );
+        })
+      ]
+    }
+  );
+}
+function CyberLegendItem({ color, label }) {
+  return /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: 10,
+          height: 10,
+          borderRadius: "50%",
+          backgroundColor: color,
+          boxShadow: `0 0 8px ${color}, 0 0 16px ${color}40`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { letterSpacing: "0.03em" }, children: label })
+  ] });
+}
+var COLOR_MAP = {
+  cyan: { gradient: "url(#gradCyan)", filter: "url(#glowCyan)", key: "cyan" },
+  blue: { gradient: "url(#gradBlue)", filter: "url(#glowBlue)", key: "blue" },
+  green: { gradient: "url(#gradGreen)", filter: "url(#glowGreen)", key: "green" },
+  red: { gradient: "url(#gradRed)", filter: "url(#glowRed)", key: "red" },
+  yellow: { gradient: "url(#gradYellow)", filter: "url(#glowYellow)", key: "yellow" }
+};
+function CyberAreaChart({
+  data,
+  series,
+  xDataKey = "time",
+  height = 300,
+  yAxisLabel,
+  yDomain,
+  yTickFormatter,
+  showGrid = true,
+  showZeroBaseline = true,
+  baselineColor,
+  lineOnly = false,
+  margin = { top: 8, right: 20, left: 0, bottom: 0 },
+  xTickFormatter,
+  tooltipFormatter
+}) {
+  const isLight = useComputedColorScheme("dark") === "light";
+  const colors = useCyberColors();
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setReady(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  const allZero = useMemo(() => {
+    if (!showZeroBaseline || !data.length) return false;
+    return data.every((row) => series.every((s) => row[s.dataKey] === 0));
+  }, [data, series, showZeroBaseline]);
+  if (!ready || !data.length) return /* @__PURE__ */ jsx(Box, { style: { height } });
+  const gridProps = {
+    stroke: colors.gridLine,
+    strokeDasharray: "3 6",
+    strokeOpacity: 1
+  };
+  const xAxisConfig = {
+    stroke: "none",
+    tick: {
+      fill: colors.tickText,
+      fontSize: 11,
+      fontFamily: "var(--mantine-font-family-monospace, monospace)"
+    },
+    tickLine: false,
+    axisLine: { stroke: colors.grid, strokeWidth: 1 }
+  };
+  const yTickStyle = {
+    fill: colors.tickText,
+    fontSize: 11,
+    fontFamily: "var(--mantine-font-family-monospace, monospace)"
+  };
+  return /* @__PURE__ */ jsx(Box, { style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data, margin, children: [
+    /* @__PURE__ */ jsx(CyberDefs, { colors }),
+    /* @__PURE__ */ jsx(PulseDefs, { series, colors, isLight }),
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { ...gridProps }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xDataKey, ...xAxisConfig, tickFormatter: xTickFormatter }),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        domain: yDomain ?? [0, (max) => Math.max(max, 1)],
+        allowDecimals: false,
+        stroke: "none",
+        tick: yTickStyle,
+        tickFormatter: yTickFormatter,
+        tickLine: false,
+        axisLine: { stroke: colors.grid, strokeWidth: 1 },
+        label: yAxisLabel ? {
+          value: yAxisLabel,
+          angle: -90,
+          position: "insideLeft",
+          offset: 0,
+          style: { fill: colors.tickText, fontSize: 11 }
+        } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: /* @__PURE__ */ jsx(CyberTooltipContent, { colors, labelFormatter: xTickFormatter, valueFormatter: tooltipFormatter }),
+        cursor: { stroke: colors.cyan, strokeOpacity: 0.2 }
+      }
+    ),
+    allZero && (() => {
+      const bColor = colors[baselineColor ?? series[0]?.color ?? "cyan"];
+      return /* @__PURE__ */ jsx(
+        ReferenceLine,
+        {
+          y: 0,
+          stroke: bColor,
+          strokeWidth: 2,
+          style: {
+            filter: `drop-shadow(0 0 4px ${bColor}) drop-shadow(0 0 8px ${bColor})`
+          }
+        }
+      );
+    })(),
+    series.map((s) => {
+      const cm = COLOR_MAP[s.color ?? "cyan"];
+      const strokeColor = colors[cm.key];
+      return /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: "monotone",
+          dataKey: s.dataKey,
+          name: s.name ?? s.dataKey,
+          stroke: strokeColor,
+          strokeWidth: lineOnly ? 3 : 2,
+          fill: lineOnly ? "transparent" : cm.gradient,
+          filter: cm.filter,
+          dot: false,
+          activeDot: /* @__PURE__ */ jsx(CyberActiveDot, { color: strokeColor, dotStroke: colors.dotStroke }),
+          animationBegin: 100,
+          animationDuration: s.animationDuration ?? 1200,
+          animationEasing: "ease-out"
+        },
+        s.dataKey
+      );
+    }),
+    series.map((s, i) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: "monotone",
+        dataKey: s.dataKey,
+        name: `_pulse_${s.dataKey}`,
+        stroke: `url(#pulse-${i})`,
+        strokeWidth: 3,
+        fill: "none",
+        filter: "url(#pulseGlow)",
+        dot: false,
+        activeDot: false,
+        tooltipType: "none",
+        isAnimationActive: false,
+        style: { pointerEvents: "none" }
+      },
+      `pulse-${s.dataKey}`
+    ))
+  ] }) }) });
+}
+
+export { CyberAreaChart, CyberLegendItem, getSeriesColor, useCyberColors };

package/dist/chunk-54S7KNJV.js

@@ -0,0 +1,112 @@
+import { getPreset, generateShades, mantineThemeOverride, createCssVariablesResolver } from './chunk-KB5NKPTN.js';
+import { ElevasisCoreProvider } from './chunk-K3YVC5RW.js';
+import { getErrorInfo, formatErrorMessage, getErrorTitle } from './chunk-4VGWQ5AN.js';
+import { useMemo, useEffect } from 'react';
+import { mergeThemeOverrides, MantineProvider } from '@mantine/core';
+import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
+import { notifications } from '@mantine/notifications';
+import { jsx } from 'react/jsx-runtime';
+
+var mantineNotificationAdapter = {
+  success(title, message) {
+    notifications.show({
+      title,
+      message,
+      autoClose: 5e3,
+      color: "green",
+      position: "top-right"
+    });
+  },
+  error(title, message) {
+    notifications.show({
+      title,
+      message,
+      autoClose: 5e3,
+      color: "red",
+      position: "top-right"
+    });
+  },
+  info(title, message) {
+    notifications.show({
+      title,
+      message,
+      autoClose: 5e3,
+      color: "blue",
+      position: "top-right"
+    });
+  },
+  warning(title, message) {
+    notifications.show({
+      title,
+      message,
+      autoClose: 5e3,
+      color: "orange",
+      position: "top-right"
+    });
+  },
+  apiError(error) {
+    const { message, code, requestId, fields, retryAfter } = getErrorInfo(error);
+    const hasFields = fields && Object.keys(fields).length > 0;
+    notifications.show({
+      title: getErrorTitle(code),
+      message: formatErrorMessage(message, requestId, fields, retryAfter),
+      autoClose: retryAfter ? retryAfter * 1e3 : hasFields ? 8e3 : 5e3,
+      color: "red",
+      position: "top-right"
+    });
+  }
+};
+function ElevasisUIProvider({ theme, children, ...coreProps }) {
+  const resolvedColorScheme = theme?.colorScheme ?? "dark";
+  const preset = useMemo(() => getPreset(theme?.preset ?? "default"), [theme?.preset]);
+  useEffect(() => {
+    if (!preset.fontImports?.length) return;
+    const links = [];
+    for (const href of preset.fontImports) {
+      if (document.querySelector(`link[href="${href}"]`)) continue;
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = href;
+      document.head.appendChild(link);
+      links.push(link);
+    }
+    const subtitleFont = preset.subtitleFontFamily ?? preset.framework?.headings?.fontFamily ?? preset.framework?.fontFamily ?? "";
+    document.documentElement.style.setProperty("--elevasis-font-family-subtitle", subtitleFont);
+    return () => {
+      links.forEach((l) => l.remove());
+      document.documentElement.style.removeProperty("--elevasis-font-family-subtitle");
+    };
+  }, [
+    preset.fontImports,
+    preset.subtitleFontFamily,
+    preset.framework?.headings?.fontFamily,
+    preset.framework?.fontFamily
+  ]);
+  const resolvedTheme = useMemo(() => {
+    const primaryHex = theme?.tokens?.primary ?? preset.dark.primary;
+    const primaryOverride = {
+      primaryColor: "primary",
+      colors: { primary: generateShades(primaryHex) }
+    };
+    let base = mergeThemeOverrides(mantineThemeOverride, primaryOverride);
+    if (preset.framework) base = mergeThemeOverrides(base, preset.framework);
+    return theme?.mantine ? mergeThemeOverrides(base, theme.mantine) : base;
+  }, [theme?.mantine, preset, theme?.tokens?.primary]);
+  const cssVariablesResolver = useMemo(
+    () => createCssVariablesResolver(theme?.tokens, theme?.preset),
+    [theme?.tokens, theme?.preset]
+  );
+  return /* @__PURE__ */ jsx(
+    MantineProvider,
+    {
+      theme: resolvedTheme,
+      defaultColorScheme: resolvedColorScheme,
+      cssVariablesResolver,
+      children: /* @__PURE__ */ jsx(ElevasisCoreProvider, { notifications: mantineNotificationAdapter, ...coreProps, children })
+    }
+  );
+}
+var ElevasisProvider = ElevasisUIProvider;
+
+export { ElevasisProvider, ElevasisUIProvider, mantineNotificationAdapter };