@xenide-io/the-old-ui-theme 0.3.0 → 0.3.2

package/dist/index.mjs

@@ -1,27 +1,42 @@
+"use client";
 import {
   Accordion,
   Alert,
+  AlertDialog,
+  AppLayout,
   AuthCard,
   AuthDivider,
   AuthLayout,
+  Autocomplete,
   Avatar,
   AvatarGroup,
   Badge,
+  Banner,
   Breadcrumbs,
   Button,
   ButtonChrome,
+  ButtonGroup,
   CANONICAL_ICONS,
   Calendar,
   Caption,
   Card,
   ChatBubble,
   Checkbox,
+  Chip,
   CodeBlock,
+  Collapsible,
   CollapsibleSection,
+  Combobox,
   CommandPalette,
   ComponentDocs,
+  ContextMenu,
   DEFAULT_THEME_ID,
+  DataTable,
+  DatePicker,
+  Dialog,
   Display,
+  Divider,
+  Dot,
   Drawer,
   DropdownButton,
   DropdownItem,
@@ -41,93 +56,232 @@ import {
   H4,
   H5,
   HoverCard,
+  Icon123,
+  IconAI,
+  IconAction,
   IconActivity,
+  IconAdsClick,
+  IconAndroidOS,
+  IconAppleIOS,
+  IconArchive,
   IconAreaChart,
   IconArrowDown,
   IconArrowUp,
+  IconAtSign,
+  IconBadge,
   IconBase,
   IconBell,
   IconBellOff,
+  IconBinary,
+  IconBlank,
+  IconBold,
   IconBolt,
+  IconBook,
+  IconBookmarkBorder,
   IconBox,
+  IconBranch,
+  IconBug,
   IconByName,
+  IconCalculate,
+  IconCalendar,
+  IconCalendarDay,
   IconCancel,
+  IconCart,
+  IconChat,
   IconCheck,
   IconCheckCircle,
+  IconCheckboxChecked,
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
+  IconChrome,
   IconClipboardEdit,
+  IconClock,
   IconClose,
+  IconCloud,
   IconCodePreview,
+  IconCoffee,
   IconCohort,
   IconCommandCursor,
+  IconConfetti,
   IconCopy,
+  IconCrown,
   IconCumulativeChart,
   IconDataReel,
   IconDatabase,
+  IconDevices,
+  IconDocument,
   IconDownload,
+  IconDownloadCloud,
+  IconDragHandle,
   IconEdit,
   IconErrorOutline,
+  IconEvent,
   IconEventStream,
   IconExclamation,
   IconExperimentSplit,
+  IconExternalLink,
+  IconEye,
+  IconEyeHidden,
+  IconFacebook,
   IconFeatureGate,
+  IconFeedback,
+  IconFile,
+  IconFilter,
+  IconFingerprint,
+  IconFirefox,
   IconFlag,
   IconFlare,
   IconFlask,
+  IconFolder,
+  IconForward,
+  IconFullScreen,
+  IconFunnelHorizontal,
+  IconFunnelVertical,
+  IconGear,
+  IconGhost,
   IconGift,
+  IconGitlab,
+  IconGlobe,
+  IconGoogle,
   IconGridView,
+  IconGroupedEvents,
+  IconGroups,
   IconHandClick,
+  IconHash,
+  IconHeadphones,
+  IconHeart,
+  IconHeatmap,
   IconHome,
+  IconHomeFilled,
+  IconHourglass,
+  IconImage,
+  IconInbox,
   IconInfo,
+  IconInfoFilled,
   IconInsightBoard,
+  IconItalic,
+  IconKey,
+  IconKeyFilled,
+  IconLaptop,
   IconLayers,
+  IconLayout,
+  IconLifeBuoy,
+  IconLightBulb,
+  IconLink,
+  IconLinkBreak,
+  IconLinux,
   IconListView,
+  IconLocation,
+  IconLock,
   IconLogout,
+  IconMacOS,
   IconMail,
+  IconMap,
+  IconMapPin,
+  IconMaximize,
+  IconMegaphone,
+  IconMenu,
+  IconMic,
+  IconMicrosoftTeams,
+  IconMinimize,
+  IconMinus,
+  IconMonitor,
   IconMoon,
+  IconMoonFilled,
+  IconMoreHorizontal,
+  IconMoreVertical,
+  IconMusic,
+  IconNavigation,
+  IconNodeJS,
+  IconOffline,
   IconOldWindow,
+  IconOpenInApp,
+  IconOpenInNew,
+  IconPalette,
   IconPanelRight,
+  IconPaperclip,
+  IconPauseCircle,
+  IconPeople,
+  IconPercent,
   IconPerson,
+  IconPhone,
+  IconPin,
   IconPlayCircle,
   IconPlus,
   IconPremium,
+  IconPreview,
+  IconPrinter,
   IconQueryEditor,
   IconQueryStack,
+  IconQuestionAnswer,
   IconRadar,
+  IconRadioButtonUnchecked,
   IconRecording,
+  IconRedo,
+  IconRefresh,
+  IconReplay,
   IconReplayFrame,
+  IconReply,
+  IconReport,
   IconRobot,
   IconRocket,
+  IconSafari,
   IconSave,
   IconSearch,
+  IconSelectAll,
   IconSelectEvents,
   IconShoppingCart,
+  IconSkipBackward,
+  IconSkipEnd,
+  IconSkipStart,
+  IconSlack,
+  IconSlackExternal,
   IconSpinner,
+  IconStamphog,
   IconStar,
+  IconStore,
   IconSubArrowRight,
+  IconSubtitles,
+  IconSubtitlesOff,
   IconSun,
   IconSurveyCard,
   IconSurveys,
+  IconSwapHoriz,
   IconSync,
   IconTableChart,
   IconTerminal,
+  IconTextSize,
   IconToggle,
   IconTrash,
+  IconTrendingDown,
+  IconTrendingFlat,
+  IconTrendingFlatDown,
   IconTuning,
+  IconUnverifiedEvent,
   IconUpload,
+  IconVerifiedEvent,
+  IconVerticalAlignCenter,
   IconVolume,
   IconVolumeOff,
+  IconWeb,
+  IconWindows,
   Indicator,
   Input,
+  InputGroup,
   Kbd,
   Label,
   Lead,
+  Lettermark,
+  Link,
   Loader,
+  LoadingBar,
   LoadingState,
+  Menubar,
+  Metric,
   Modal,
   Mono,
+  NumberField,
   OLD_UI_ICONS,
   Overline,
   P,
@@ -135,10 +289,15 @@ import {
   PH_ICON_ALIASES,
   Pagination,
   Panel,
+  Popover,
   Progress,
+  ProgressCircle,
   Radio,
   Range,
   Rating,
+  Resizable,
+  Row,
+  ScrollArea,
   SearchGroup,
   SearchInput,
   SegmentedControl,
@@ -146,9 +305,13 @@ import {
   SettingsLayout,
   SettingsNav,
   ShowcaseWrapper,
+  Sidebar,
   Skeleton,
   Small,
+  Snack,
   SortMenu,
+  Spinner,
+  Splotch,
   Stat,
   Stepper,
   THEMES,
@@ -156,6 +319,7 @@ import {
   THEME_INIT_SCRIPT,
   Table,
   Tabs,
+  Tag,
   Terminal,
   Textarea,
   ThemeDomSync,
@@ -165,6 +329,11 @@ import {
   Toast,
   ToastStack,
   Toggle,
+  ToggleButton,
+  ToggleGroup,
+  Tooltip,
+  TooltipProvider,
+  Widget,
   cn,
   createIconBase,
   createIconBasePath,
@@ -172,467 +341,18 @@ import {
   isThemeId,
   persistTheme,
   readStoredTheme
-} from "./chunk-FDMD3IIN.mjs";
+} from "./chunk-5HSOBJ4F.mjs";
 import {
-  __objRest,
   __spreadProps,
   __spreadValues
 } from "./chunk-FWCSY2DS.mjs";
 
-// src/components/charts/ph-insight-charts.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
-
-// src/lib/chart/register-chartjs.ts
-import {
-  ArcElement,
-  BarController,
-  BarElement,
-  CategoryScale,
-  Chart as ChartJS,
-  DoughnutController,
-  Legend,
-  LinearScale,
-  PolarAreaController,
-  RadialLinearScale,
-  Title,
-  Tooltip
-} from "chart.js";
-function synchroniseChartJsFontFamily() {
-  if (typeof document === "undefined") {
-    return;
-  }
-  const family = window.getComputedStyle(document.body).fontFamily;
-  const trimmed = family == null ? void 0 : family.trim();
-  if (trimmed) {
-    ChartJS.defaults.font.family = trimmed;
-  }
-}
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  RadialLinearScale,
-  BarController,
-  BarElement,
-  DoughnutController,
-  PolarAreaController,
-  ArcElement,
-  Title,
-  Tooltip,
-  Legend
-);
-synchroniseChartJsFontFamily();
-
-// src/components/charts/ph-insight-charts.tsx
-import { Bar, Doughnut, PolarArea } from "react-chartjs-2";
-
-// src/lib/chart/with-alpha.ts
-function withAlpha(color, alpha) {
-  const trimmed = color.trim();
-  const hex8 = trimmed.match(/^#([\da-f]{8})$/i);
-  if (hex8 == null ? void 0 : hex8[1]) {
-    const n = hex8[1];
-    const r = parseInt(n.slice(0, 2), 16);
-    const g = parseInt(n.slice(2, 4), 16);
-    const b = parseInt(n.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-  }
-  const hexLong = trimmed.match(/^#([\da-f]{6})$/i);
-  if (hexLong == null ? void 0 : hexLong[1]) {
-    const n = hexLong[1];
-    const r = parseInt(n.slice(0, 2), 16);
-    const g = parseInt(n.slice(2, 4), 16);
-    const b = parseInt(n.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-  }
-  const hexShort = trimmed.match(/^#([\da-f]{3})$/i);
-  if (hexShort == null ? void 0 : hexShort[1]) {
-    const [, h] = hexShort;
-    const r = parseInt(h[0] + h[0], 16);
-    const g = parseInt(h[1] + h[1], 16);
-    const b = parseInt(h[2] + h[2], 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-  }
-  return trimmed;
-}
-
-// src/lib/chart/ph-chart-options.ts
-function readAppRadiusPx() {
-  if (typeof document === "undefined") {
-    return 6;
-  }
-  const raw = getComputedStyle(document.documentElement).getPropertyValue("--ph-radius-app").trim();
-  const n = Number.parseFloat(raw);
-  if (!Number.isFinite(n)) {
-    return 6;
-  }
-  return raw.endsWith("rem") ? n * 16 : n;
-}
-function buildInsightLegend(tokens) {
-  return {
-    display: true,
-    position: "bottom",
-    labels: {
-      color: tokens.text,
-      boxWidth: 10,
-      boxHeight: 10,
-      padding: 14,
-      usePointStyle: true,
-      font: { size: 12 }
-    }
-  };
-}
-function buildInsightTooltipLine(tokens) {
-  return {
-    backgroundColor: tokens.surface,
-    titleColor: tokens.text,
-    bodyColor: tokens.textMuted,
-    borderColor: tokens.borderStrong,
-    borderWidth: 1,
-    padding: 12,
-    cornerRadius: readAppRadiusPx(),
-    displayColors: true,
-    caretPadding: 8,
-    titleSpacing: 6,
-    bodySpacing: 6,
-    multiKeyBackground: tokens.surface
-  };
-}
-function buildInsightTooltipBar(tokens) {
-  return buildInsightTooltipLine(tokens);
-}
-function radialLegend(tokens) {
-  return {
-    display: true,
-    position: "bottom",
-    labels: {
-      color: tokens.text,
-      boxWidth: 10,
-      boxHeight: 10,
-      padding: 14,
-      usePointStyle: true,
-      font: { size: 12 }
-    }
-  };
-}
-function radialInsightTooltip(tokens) {
-  return {
-    backgroundColor: tokens.surface,
-    titleColor: tokens.text,
-    bodyColor: tokens.textMuted,
-    borderColor: tokens.borderStrong,
-    borderWidth: 1,
-    padding: 12,
-    cornerRadius: readAppRadiusPx(),
-    displayColors: true,
-    caretPadding: 8,
-    titleSpacing: 6,
-    bodySpacing: 6,
-    multiKeyBackground: tokens.surface
-  };
-}
-function buildVerticalBarDemo(tokens) {
-  return {
-    type: "bar",
-    data: {
-      labels: ["Chrome", "Safari", "Firefox", "Edge", "Other"],
-      datasets: [
-        {
-          label: "Unique users",
-          data: [18400, 12100, 4200, 3100, 900],
-          backgroundColor: withAlpha(tokens.series[0], 0.85),
-          borderColor: tokens.borderStrong,
-          borderWidth: 1,
-          borderRadius: 4
-        }
-      ]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: { display: false },
-        tooltip: buildInsightTooltipBar(tokens)
-      },
-      scales: {
-        x: {
-          border: { display: false },
-          ticks: { color: tokens.textMuted, font: { size: 11 } },
-          grid: { display: false }
-        },
-        y: {
-          beginAtZero: true,
-          border: { display: false },
-          ticks: { color: tokens.textMuted, font: { size: 11 } },
-          grid: { color: tokens.grid }
-        }
-      }
-    }
-  };
-}
-function buildHorizontalBarDemo(tokens) {
-  return {
-    type: "bar",
-    data: {
-      labels: [
-        "/project/settings",
-        "/insights/new",
-        "/feature-flags",
-        "/dashboard",
-        "/session-replay"
-      ],
-      datasets: [
-        {
-          label: "Pageviews",
-          data: [12800, 9400, 7200, 6100, 4300],
-          backgroundColor: [
-            withAlpha(tokens.series[0], 0.85),
-            withAlpha(tokens.series[1], 0.85),
-            withAlpha(tokens.series[2], 0.85),
-            withAlpha(tokens.series[3], 0.85),
-            withAlpha(tokens.series[4], 0.85)
-          ],
-          borderWidth: 0,
-          borderRadius: 4
-        }
-      ]
-    },
-    options: {
-      indexAxis: "y",
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: { display: false },
-        tooltip: buildInsightTooltipBar(tokens)
-      },
-      scales: {
-        x: {
-          beginAtZero: true,
-          border: { display: false },
-          grid: { color: tokens.grid },
-          ticks: { color: tokens.textMuted, font: { size: 11 } }
-        },
-        y: {
-          border: { display: false },
-          grid: { display: false },
-          ticks: { color: tokens.textMuted, font: { size: 11 } }
-        }
-      }
-    }
-  };
-}
-function buildStackedBarDemo(tokens) {
-  return {
-    type: "bar",
-    data: {
-      labels: ["US", "GB", "DE", "AU", "IN"],
-      datasets: [
-        {
-          label: "Direct",
-          data: [120, 98, 45, 40, 210],
-          backgroundColor: withAlpha(tokens.series[0], 0.92),
-          borderRadius: 4
-        },
-        {
-          label: "Organic search",
-          data: [80, 72, 38, 30, 160],
-          backgroundColor: withAlpha(tokens.series[1], 0.92),
-          borderRadius: 4
-        },
-        {
-          label: "Referral",
-          data: [44, 22, 18, 12, 90],
-          backgroundColor: withAlpha(tokens.series[2], 0.92),
-          borderRadius: 4
-        }
-      ]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: buildInsightLegend(tokens),
-        tooltip: buildInsightTooltipBar(tokens)
-      },
-      scales: {
-        x: {
-          stacked: true,
-          border: { display: false },
-          grid: { display: false },
-          ticks: { color: tokens.textMuted, font: { size: 11 } }
-        },
-        y: {
-          stacked: true,
-          beginAtZero: true,
-          border: { display: false },
-          grid: { color: tokens.grid },
-          ticks: { color: tokens.textMuted, font: { size: 11 } }
-        }
-      }
-    }
-  };
-}
-function buildDoughnutDemo(tokens) {
-  return {
-    type: "doughnut",
-    data: {
-      labels: ["Direct", "Organic search", "Referral", "Paid", "Other"],
-      datasets: [
-        {
-          label: "Channel mix",
-          data: [42, 28, 14, 10, 6],
-          backgroundColor: [
-            withAlpha(tokens.series[0], 0.88),
-            withAlpha(tokens.series[1], 0.88),
-            withAlpha(tokens.series[2], 0.88),
-            withAlpha(tokens.series[3], 0.88),
-            withAlpha(tokens.series[4], 0.88)
-          ],
-          borderColor: tokens.surface,
-          borderWidth: 2,
-          hoverOffset: 6
-        }
-      ]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      cutout: "62%",
-      plugins: {
-        legend: radialLegend(tokens),
-        tooltip: radialInsightTooltip(tokens)
-      }
-    }
-  };
-}
-function buildPolarAreaDemo(tokens) {
-  return {
-    type: "polarArea",
-    data: {
-      labels: ["Chrome", "Safari", "Firefox", "Edge", "Other"],
-      datasets: [
-        {
-          label: "Browser share",
-          data: [52, 24, 12, 8, 4],
-          backgroundColor: [
-            withAlpha(tokens.series[0], 0.72),
-            withAlpha(tokens.series[1], 0.72),
-            withAlpha(tokens.series[2], 0.72),
-            withAlpha(tokens.series[3], 0.72),
-            withAlpha(tokens.series[4], 0.72)
-          ],
-          borderWidth: 1,
-          borderColor: tokens.surface
-        }
-      ]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      scales: {
-        r: {
-          ticks: {
-            color: tokens.textMuted,
-            backdropColor: tokens.surface,
-            font: { size: 10 }
-          },
-          grid: {
-            color: tokens.grid
-          },
-          angleLines: {
-            color: tokens.grid
-          },
-          pointLabels: {
-            color: tokens.textMuted,
-            font: { size: 11 }
-          }
-        }
-      },
-      plugins: {
-        legend: {
-          display: false
-        },
-        tooltip: radialInsightTooltip(tokens)
-      }
-    }
-  };
-}
-
-// src/lib/chart/use-ph-chart-tokens.ts
-import { useEffect, useRef, useState } from "react";
-
-// src/lib/chart/ph-chart-tokens.ts
-var FALLBACK_CHART_TOKENS = {
-  series: ["#1d4aff", "#621da6", "#42827e", "#ce0e74", "#f14f58", "#529a0a", "#fe729e"],
-  grid: "hsl(78 13% 85%)",
-  text: "hsl(0 0% 25%)",
-  textMuted: "hsl(0 0% 42%)",
-  surface: "#ffffff",
-  borderStrong: "hsl(69 8% 65%)",
-  accent: "hsl(19deg 100% 48%)"
-};
-function readCssVar(el, key) {
-  return getComputedStyle(el).getPropertyValue(key).trim();
-}
-function readChartTokens(root) {
-  if (typeof document === "undefined") {
-    return FALLBACK_CHART_TOKENS;
-  }
-  const el = root != null ? root : document.documentElement;
-  const series = [1, 2, 3, 4, 5, 6, 7].map((index) => {
-    const raw = readCssVar(el, `--ph-data-${index}`);
-    return raw !== "" ? raw : FALLBACK_CHART_TOKENS.series[index - 1];
-  });
-  const grid = readCssVar(el, "--ph-border") || FALLBACK_CHART_TOKENS.grid;
-  const text = readCssVar(el, "--ph-text-secondary") || FALLBACK_CHART_TOKENS.text;
-  const textMuted = readCssVar(el, "--ph-text-tertiary") || FALLBACK_CHART_TOKENS.textMuted;
-  const surface = readCssVar(el, "--ph-surface") || FALLBACK_CHART_TOKENS.surface;
-  const borderStrong = readCssVar(el, "--ph-border-strong") || FALLBACK_CHART_TOKENS.borderStrong;
-  const accent = readCssVar(el, "--ph-accent") || FALLBACK_CHART_TOKENS.accent;
-  return { series, grid, text, textMuted, surface, borderStrong, accent };
-}
-
-// src/lib/chart/use-ph-chart-tokens.ts
-function tokensEqual(a, b) {
-  if (a.series.length !== b.series.length) return false;
-  for (let i = 0; i < a.series.length; i++) {
-    if (a.series[i] !== b.series[i]) return false;
-  }
-  return a.grid === b.grid && a.text === b.text && a.textMuted === b.textMuted && a.surface === b.surface && a.borderStrong === b.borderStrong && a.accent === b.accent;
-}
-function useChartTokens() {
-  const [tokens, setTokens] = useState(FALLBACK_CHART_TOKENS);
-  const tokensRef = useRef(FALLBACK_CHART_TOKENS);
-  useEffect(() => {
-    const root = document.documentElement;
-    const refresh = () => {
-      const next = readChartTokens(root);
-      if (!tokensEqual(tokensRef.current, next)) {
-        tokensRef.current = next;
-        setTokens(next);
-      }
-    };
-    refresh();
-    const observer = new MutationObserver(refresh);
-    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
-    return () => observer.disconnect();
-  }, []);
-  return tokens;
-}
-
-// src/lib/hog-charts-lite/build-theme.ts
-function buildHogChartTheme(tokens) {
-  return {
-    colors: tokens.series.slice(),
-    backgroundColor: tokens.surface,
-    axisColor: tokens.textMuted,
-    gridColor: tokens.grid,
-    crosshairColor: tokens.borderStrong
-  };
-}
+// src/components/charts/quill/TimeSeriesLineChart.tsx
+import { useMemo as useMemo2 } from "react";
 
 // src/lib/hog-charts-lite/CanvasTrendLineChart.tsx
 import { scaleLinear, scalePoint } from "d3-scale";
-import { useCallback, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var HOG_LITE_DEFAULT_MARGINS = { top: 16, right: 16, bottom: 32, left: 48 };
 function resolveDisplayedSeries(series, palette) {
@@ -687,11 +407,11 @@ function CanvasTrendLineChart({
   showCrosshair = true,
   className = ""
 }) {
-  const containerRef = useRef2(null);
-  const canvasRef = useRef2(null);
-  const [size, setSize] = useState2({ width: 0, height: 0 });
-  const [hoverIndex, setHoverIndex] = useState2(null);
-  useEffect2(() => {
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [hoverIndex, setHoverIndex] = useState(null);
+  useEffect(() => {
     const el = containerRef.current;
     if (!el) {
       return;
@@ -878,7 +598,7 @@ function CanvasTrendLineChart({
       }
     }
   }, [hoverIndex, labels, resolved, showCrosshair, showGrid, size.height, size.width, theme]);
-  useEffect2(() => {
+  useEffect(() => {
     draw();
   }, [draw]);
   const onMouseMove = (event) => {
@@ -962,322 +682,347 @@ function CanvasTrendLineChart({
   ] });
 }
 
-// src/components/charts/ph-insight-charts.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var DEMO_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-function useClientMounted() {
-  const [mounted, setMounted] = useState3(false);
-  useEffect3(() => setMounted(true), []);
-  return mounted;
+// src/lib/chart/use-ph-chart-tokens.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var DEFAULT_TOKENS = {
+  series: ["#1d4aff", "#621da6", "#42827e", "#ce0e74", "#f14f58", "#529a0a", "#fe729e"],
+  muted: "hsl(220 9% 90%)",
+  surface: "#ffffff"
+};
+function readTokens() {
+  if (typeof document === "undefined") return DEFAULT_TOKENS;
+  const style = getComputedStyle(document.documentElement);
+  const read = (key, fallback) => style.getPropertyValue(key).trim() || fallback;
+  return {
+    series: [
+      read("--ph-data-1", DEFAULT_TOKENS.series[0]),
+      read("--ph-data-2", DEFAULT_TOKENS.series[1]),
+      read("--ph-data-3", DEFAULT_TOKENS.series[2]),
+      read("--ph-data-4", DEFAULT_TOKENS.series[3]),
+      read("--ph-data-5", DEFAULT_TOKENS.series[4]),
+      read("--ph-data-6", DEFAULT_TOKENS.series[5]),
+      read("--ph-data-7", DEFAULT_TOKENS.series[6])
+    ],
+    muted: read("--ph-muted", DEFAULT_TOKENS.muted),
+    surface: read("--ph-surface", DEFAULT_TOKENS.surface)
+  };
+}
+function useChartTokens() {
+  const [tokens, setTokens] = useState2(DEFAULT_TOKENS);
+  useEffect2(() => {
+    setTokens(readTokens());
+  }, []);
+  return tokens;
+}
+
+// src/lib/hog-charts-lite/build-theme.ts
+function buildHogChartTheme(tokens) {
+  return {
+    colors: tokens.series.slice(),
+    backgroundColor: tokens.surface,
+    axisColor: tokens.textMuted,
+    gridColor: tokens.grid,
+    crosshairColor: tokens.borderStrong
+  };
 }
-function ChartSkeleton({ className = "h-[280px]" }) {
+
+// src/components/charts/quill/TimeSeriesLineChart.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function TimeSeriesLineChart({
+  series,
+  labels,
+  className,
+  showGrid = true,
+  showCrosshair = true,
+  height = 280
+}) {
+  const tokens = useChartTokens();
+  const theme = useMemo2(() => buildHogChartTheme(tokens), [tokens]);
+  const resolved = useMemo2(
+    () => series.map((s, i) => {
+      var _a;
+      return {
+        key: s.key,
+        label: s.label,
+        data: s.data,
+        color: (_a = s.color) != null ? _a : tokens.series[i % tokens.series.length]
+      };
+    }),
+    [series, tokens.series]
+  );
   return /* @__PURE__ */ jsx2(
     "div",
     {
-      className: `w-full animate-pulse rounded-lemon bg-ph-muted ${className}`,
-      "aria-hidden": true
+      className: cn("relative w-full", className),
+      style: { height, minHeight: 220 },
+      children: /* @__PURE__ */ jsx2(
+        CanvasTrendLineChart,
+        {
+          labels,
+          series: resolved,
+          theme,
+          showGrid,
+          showCrosshair,
+          className: "h-full min-h-[220px]"
+        }
+      )
     }
   );
 }
-function HogTrendLineChart() {
-  const mounted = useClientMounted();
+
+// src/components/charts/quill/BarChart.tsx
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function BarChart({ series, labels, className, height = 280 }) {
   const tokens = useChartTokens();
-  const theme = useMemo2(() => buildHogChartTheme(tokens), [tokens]);
-  const series = useMemo2(
-    () => [
+  const groupCount = labels.length;
+  const barCount = series.length;
+  const { maxVal, chartData } = useMemo3(() => {
+    let mx = 0;
+    const flat = series.flatMap((s) => s.data);
+    for (const v of flat) if (v > mx) mx = v;
+    return {
+      maxVal: mx || 1,
+      chartData: series.map((s, i) => {
+        var _a;
+        return {
+          label: s.label,
+          color: (_a = s.color) != null ? _a : tokens.series[i % tokens.series.length],
+          values: s.data
+        };
+      })
+    };
+  }, [series, tokens.series]);
+  const padding = { top: 16, right: 8, bottom: 24, left: 8 };
+  const innerW = 400 - padding.left - padding.right;
+  const innerH = height - padding.top - padding.bottom;
+  const groupW = innerW / groupCount;
+  const barW = Math.max(4, groupW * 0.7 / barCount);
+  const gap = groupW * 0.15;
+  return /* @__PURE__ */ jsx3("div", { className: cn("relative w-full", className), style: { height }, children: /* @__PURE__ */ jsxs2("svg", { viewBox: `0 0 400 ${height}`, className: "h-full w-full", preserveAspectRatio: "xMidYMid meet", suppressHydrationWarning: true, children: [
+    chartData.map(
+      (bar, bi) => bar.values.map((v, li) => {
+        const x = padding.left + li * groupW + gap / 2 + bi * barW;
+        const barH = v / maxVal * (innerH - 4);
+        const y = padding.top + innerH - barH;
+        return /* @__PURE__ */ jsx3(
+          "rect",
+          {
+            x,
+            y,
+            width: barW,
+            height: barH,
+            fill: bar.color,
+            rx: 2,
+            children: /* @__PURE__ */ jsx3("title", { children: `${bar.label}: ${v}` })
+          },
+          `${bi}-${li}`
+        );
+      })
+    ),
+    labels.map((l, i) => /* @__PURE__ */ jsx3(
+      "text",
       {
-        key: "pageview",
-        label: "$pageview",
-        data: [4200, 5100, 4800, 6200, 5900, 3100, 2800],
-        color: tokens.series[0],
-        fill: { opacity: 0.35 }
+        x: padding.left + i * groupW + groupW / 2,
+        y: height - 4,
+        textAnchor: "middle",
+        className: "fill-ph-mutedtext",
+        fontSize: "10",
+        children: l
       },
-      {
-        key: "signup",
-        label: "signup_completed",
-        data: [920, 990, 940, 1040, 1012, 540, 510],
-        color: tokens.series[1],
-        stroke: { pattern: [5, 5] }
-      }
-    ],
-    [tokens.series]
-  );
-  if (!mounted) {
-    return /* @__PURE__ */ jsx2(ChartSkeleton, {});
-  }
-  return /* @__PURE__ */ jsx2("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx2(
-    CanvasTrendLineChart,
-    {
-      labels: DEMO_LABELS,
-      series,
-      theme,
-      showGrid: true,
-      showCrosshair: true,
-      className: "h-full min-h-[220px]"
-    }
-  ) });
-}
-function InsightVerticalBarChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const config = useMemo2(() => buildVerticalBarDemo(tokens), [tokens]);
-  if (!mounted) {
-    return /* @__PURE__ */ jsx2(ChartSkeleton, {});
-  }
-  return /* @__PURE__ */ jsx2("div", { className: "relative h-[280px] w-full min-h-[220px]", children: /* @__PURE__ */ jsx2(Bar, { data: config.data, options: config.options, redraw: false }) });
-}
-function InsightHorizontalBarChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const config = useMemo2(() => buildHorizontalBarDemo(tokens), [tokens]);
-  if (!mounted) {
-    return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[320px]" });
-  }
-  return /* @__PURE__ */ jsx2("div", { className: "relative h-[320px] w-full min-h-[260px]", children: /* @__PURE__ */ jsx2(Bar, { data: config.data, options: config.options, redraw: false }) });
-}
-function InsightStackedBarChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const config = useMemo2(() => buildStackedBarDemo(tokens), [tokens]);
-  if (!mounted) {
-    return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[300px]" });
-  }
-  return /* @__PURE__ */ jsx2("div", { className: "relative h-[300px] w-full min-h-[240px]", children: /* @__PURE__ */ jsx2(Bar, { data: config.data, options: config.options, redraw: false }) });
-}
-function InsightDoughnutChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const config = useMemo2(() => buildDoughnutDemo(tokens), [tokens]);
-  if (!mounted) {
-    return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[260px]" });
-  }
-  return /* @__PURE__ */ jsx2("div", { className: "relative mx-auto h-[260px] w-full max-w-[280px] min-h-[220px]", children: /* @__PURE__ */ jsx2(Doughnut, { data: config.data, options: config.options, redraw: false }) });
-}
-function InsightPolarAreaChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const config = useMemo2(() => buildPolarAreaDemo(tokens), [tokens]);
-  if (!mounted) {
-    return /* @__PURE__ */ jsx2(ChartSkeleton, { className: "h-[280px]" });
-  }
-  return /* @__PURE__ */ jsx2("div", { className: "relative mx-auto h-[280px] w-full max-w-[320px] min-h-[240px]", children: /* @__PURE__ */ jsx2(PolarArea, { data: config.data, options: config.options, redraw: false }) });
+      l
+    ))
+  ] }) });
 }
 
-// src/components/dashboard/DashboardWell.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function DashboardWell(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx3("div", __spreadValues({ className: cn("ph-dashboard-well", className) }, props));
-}
-
-// src/components/dashboard/DashboardToolbar.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function DashboardToolbar({ title, description, actions, className }) {
-  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-wrap items-baseline justify-between gap-4", className), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx4("h3", { className: "text-lg font-bold text-ph-ink", children: title }),
-      description ? /* @__PURE__ */ jsx4("p", { className: "mt-0.5 text-sm text-ph-mutedtext", children: description }) : null
+// src/components/charts/quill/PieChart.tsx
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function PieChart({ slices, className, size = 200 }) {
+  const tokens = useChartTokens();
+  const { total, segments } = useMemo4(() => {
+    const t = slices.reduce((s, sl) => s + Math.max(0, sl.value), 0);
+    let cum = 0;
+    const segs = slices.map((sl, i) => {
+      var _a;
+      const start = cum;
+      const val = Math.max(0, sl.value);
+      cum += val;
+      return __spreadProps(__spreadValues({}, sl), {
+        color: (_a = sl.color) != null ? _a : tokens.series[i % tokens.series.length],
+        startAngle: start / t * 360,
+        endAngle: cum / t * 360,
+        pct: t > 0 ? val / t * 100 : 0
+      });
+    });
+    return { total: t, segments: segs };
+  }, [slices, tokens.series]);
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size * 0.38;
+  const ir = r * 0.6;
+  const polarToCart = (angleDeg, radius) => {
+    const rad = (angleDeg - 90) * Math.PI / 180;
+    return { x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) };
+  };
+  const describeArc = (start, end) => {
+    if (end - start >= 359.9) {
+      const p1 = polarToCart(start, r);
+      const p2 = polarToCart(start + 179.9, r);
+      const p3 = polarToCart(start + 359.9, r);
+      return `M${p1.x},${p1.y} A${r},${r} 0 0,1 ${p2.x},${p2.y} A${r},${r} 0 0,1 ${p3.x},${p3.y} Z`;
+    }
+    const s = polarToCart(start, r);
+    const e = polarToCart(end, r);
+    const si = polarToCart(start, ir);
+    const ei = polarToCart(end, ir);
+    const large = end - start > 180 ? 1 : 0;
+    return `M${s.x},${s.y} A${r},${r} 0 ${large},1 ${e.x},${e.y} L${ei.x},${ei.y} A${ir},${ir} 0 ${large},0 ${si.x},${si.y} Z`;
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: cn("relative", className), style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsxs3("svg", { viewBox: `0 0 ${size} ${size}`, className: "h-full w-full", suppressHydrationWarning: true, children: [
+      segments.map((s) => /* @__PURE__ */ jsx4("path", { d: describeArc(s.startAngle, s.endAngle), fill: s.color, children: /* @__PURE__ */ jsx4("title", { children: `${s.label}: ${s.pct.toFixed(1)}%` }) }, s.key)),
+      /* @__PURE__ */ jsx4("circle", { cx, cy, r: ir, fill: "var(--ph-surface)" })
     ] }),
-    actions != null ? /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+    /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx4("span", { className: "text-lg font-bold text-ph-ink tabular-nums", children: slices.length }) })
   ] });
 }
 
-// src/components/dashboard/DashboardGrid.tsx
+// src/components/charts/quill/Sparkline.tsx
+import { useMemo as useMemo5 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var presetClass = {
-  insights: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
-  dense: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-};
-function DashboardGrid(_a) {
-  var _b = _a, {
-    preset = "insights",
-    className
-  } = _b, props = __objRest(_b, [
-    "preset",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx5("div", __spreadValues({ className: cn(presetClass[preset], className) }, props));
-}
-
-// src/components/dashboard/DashboardFiltersBar.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function DashboardFiltersBar(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx6(
-    "div",
-    __spreadValues({
-      className: cn(
-        "flex flex-wrap items-center gap-2 rounded-[var(--ph-radius-app)] border border-solid bg-ph-surface px-3 py-2 text-sm text-ph-subtle [border-color:var(--ph-border-control)]",
-        "[box-shadow:var(--ph-chrome-inset-face-top),var(--ph-chrome-inset-face-bottom),var(--ph-shadow-elevation-3000)]",
-        className
-      )
-    }, props)
-  );
-}
-
-// src/components/dashboard/DashboardKpiCard.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function DashboardKpiCard(_a) {
-  var _b = _a, { label, value, footer, icon, className, children } = _b, props = __objRest(_b, ["label", "value", "footer", "icon", "className", "children"]);
-  return /* @__PURE__ */ jsxs3("article", __spreadProps(__spreadValues({ className: cn("ph-stat", className) }, props), { children: [
-    icon != null ? /* @__PURE__ */ jsx7("div", { className: "mb-2 [&>svg]:h-7 [&>svg]:w-7", children: icon }) : null,
-    /* @__PURE__ */ jsx7("div", { className: "ph-stat-label", children: label }),
-    /* @__PURE__ */ jsx7("div", { className: "ph-stat-val", children: value }),
-    footer != null ? /* @__PURE__ */ jsx7("p", { className: "mt-1 text-xs text-ph-subtle", children: footer }) : null,
-    children
-  ] }));
-}
-
-// src/components/dashboard/DashboardInsightPlaceholder.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function DashboardInsightPlaceholder(_a) {
-  var _b = _a, {
-    label = "Add insight",
-    className,
-    children,
-    type = "button"
-  } = _b, props = __objRest(_b, [
-    "label",
-    "className",
-    "children",
-    "type"
-  ]);
-  return /* @__PURE__ */ jsx8(
-    "button",
-    __spreadProps(__spreadValues({
-      type,
-      "aria-label": label,
-      className: cn(
-        "ph-dashboard-placeholder group text-left outline-none transition",
-        "focus-visible:ring-2 focus-visible:ring-ph-brand focus-visible:ring-offset-2",
-        className
-      )
-    }, props), {
-      children: children != null ? children : /* @__PURE__ */ jsx8("span", { className: "font-medium text-ph-subtle group-hover:text-ph-ink", children: label })
-    })
+function Sparkline({
+  data,
+  color,
+  className,
+  width = 80,
+  height = 32,
+  strokeWidth = 2
+}) {
+  const tokens = useChartTokens();
+  const resolvedColor = color != null ? color : tokens.series[0];
+  const path = useMemo5(() => {
+    if (data.length < 2) return "";
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const xStep = width / (data.length - 1);
+    return data.map((v, i) => {
+      const x = i * xStep;
+      const y = height - (v - min) / range * (height - 4) - 2;
+      return `${i === 0 ? "M" : "L"}${x},${y}`;
+    }).join(" ");
+  }, [data, width, height]);
+  if (data.length < 2) return null;
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      className: cn("shrink-0", className),
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      "aria-hidden": true,
+      suppressHydrationWarning: true,
+      children: /* @__PURE__ */ jsx5("path", { d: path, fill: "none", stroke: resolvedColor, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })
+    }
   );
 }
 
-// src/components/dashboard/InsightShell.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-function InsightShell(_a) {
-  var _b = _a, {
-    ribbonColour,
-    bodyClassName,
-    className,
-    children
-  } = _b, props = __objRest(_b, [
-    "ribbonColour",
-    "bodyClassName",
-    "className",
-    "children"
-  ]);
-  const ribbon = ribbonColour != null && String(ribbonColour).trim() !== "" ? String(ribbonColour).trim() : null;
-  return /* @__PURE__ */ jsxs4("article", __spreadProps(__spreadValues({ className: cn("ph-insight-shell flex-row", className) }, props), { children: [
-    ribbon != null ? /* @__PURE__ */ jsx9(
-      "div",
-      {
-        className: "ph-insight-shell__ribbon min-h-[7rem] shrink-0 self-stretch",
-        style: { background: ribbon },
-        "aria-hidden": true
-      }
-    ) : null,
-    /* @__PURE__ */ jsx9("div", { className: cn("flex min-w-0 flex-1 flex-col gap-3 p-4", bodyClassName), children })
-  ] }));
-}
-
-// src/components/dashboard/InsightShellHeader.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-function InsightShellHeader({ title, subtitle, actions, className }) {
-  return /* @__PURE__ */ jsxs5("header", { className: cn("flex gap-3", actions != null ? "items-start justify-between" : "", className), children: [
-    /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx10("h4", { className: "font-semibold leading-snug text-ph-ink", children: title }),
-      subtitle != null ? /* @__PURE__ */ jsx10("p", { className: "mt-0.5 text-xs text-ph-mutedtext", children: subtitle }) : null
+// src/components/charts/quill/MetricCard.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function MetricCard({
+  value,
+  label,
+  change,
+  sparklineData,
+  icon,
+  className
+}) {
+  var _a;
+  return /* @__PURE__ */ jsxs4("div", { className: cn("ph-metric", className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "ph-metric__header", children: [
+      icon && /* @__PURE__ */ jsx6("span", { className: "ph-metric__icon", children: icon }),
+      /* @__PURE__ */ jsx6("span", { className: "ph-metric__label", children: label }),
+      change && /* @__PURE__ */ jsxs4(Badge, { variant: ((_a = change.positive) != null ? _a : change.value >= 0) ? "success" : "danger", children: [
+        change.value >= 0 ? "+" : "",
+        change.value,
+        "%"
+      ] })
     ] }),
-    actions != null ? /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
+    /* @__PURE__ */ jsx6("div", { className: "ph-metric__value", children: value }),
+    sparklineData && sparklineData.length > 0 && /* @__PURE__ */ jsx6("div", { className: "mt-2", children: /* @__PURE__ */ jsx6(Sparkline, { data: sparklineData }) })
   ] });
 }
 
-// src/components/dashboard/MiniTrendBars.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var DEFAULT_SERIES_CYCLE = [1, 2, 3, 4, 5, 6, 7];
-function clampPct(n) {
-  if (!Number.isFinite(n)) {
-    return 0;
-  }
-  return Math.max(0, Math.min(100, n));
-}
-function MiniTrendBars({
-  heights,
-  rowClassName = "h-28",
-  seriesResolver,
-  className
-}) {
-  const resolveSeries = seriesResolver != null ? seriesResolver : ((i) => {
-    var _a;
-    return (_a = DEFAULT_SERIES_CYCLE[i % DEFAULT_SERIES_CYCLE.length]) != null ? _a : 1;
-  });
-  return /* @__PURE__ */ jsx11("div", { className: cn("flex items-end gap-0.5", rowClassName, className), children: heights.map((raw, i) => {
-    const pct = clampPct(raw);
-    const series = resolveSeries(i, pct);
-    const style = {
-      height: `${pct}%`,
-      background: `var(--ph-data-${String(series)})`,
-      minHeight: pct > 0 ? 4 : 0
-    };
-    return /* @__PURE__ */ jsx11("div", { className: "min-h-0 flex-1 rounded-t-[3px]", style }, `bar-${String(i)}`);
+// src/components/charts/quill/FunnelChart.tsx
+import { useMemo as useMemo6 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function FunnelChart({ steps, className }) {
+  const tokens = useChartTokens();
+  const maxCount = useMemo6(() => Math.max(...steps.map((s) => s.count)), [steps]);
+  return /* @__PURE__ */ jsx7("div", { className: cn("space-y-2", className), suppressHydrationWarning: true, children: steps.map((step, i) => {
+    const pct = step.count / maxCount * 100;
+    const prev = i > 0 ? steps[i - 1].count : step.count;
+    const dropoff = prev > 0 ? (prev - step.count) / prev * 100 : 0;
+    return /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsx7("span", { className: "font-medium text-ph-ink", children: step.label }),
+        /* @__PURE__ */ jsx7("span", { className: "tabular-nums text-ph-subtle", children: step.count.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsx7("div", { className: "relative h-8 overflow-hidden rounded-md", style: { background: tokens.muted }, children: /* @__PURE__ */ jsx7(
+        "div",
+        {
+          className: "h-full rounded-md transition-all duration-500",
+          style: { width: `${pct}%`, background: i === 0 ? tokens.series[0] : tokens.series[i % tokens.series.length] }
+        }
+      ) }),
+      i > 0 && dropoff > 0 && /* @__PURE__ */ jsxs5("p", { className: "text-xs text-ph-danger", children: [
+        "-",
+        dropoff.toFixed(1),
+        "% dropoff"
+      ] })
+    ] }, step.label);
   }) });
 }
-
-// src/components/dashboard/InsightMiniCard.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-function InsightMiniCard(_a) {
-  var _b = _a, {
-    title,
-    subtitle,
-    heights,
-    ribbonColour
-  } = _b, shellProps = __objRest(_b, [
-    "title",
-    "subtitle",
-    "heights",
-    "ribbonColour"
-  ]);
-  return /* @__PURE__ */ jsxs6(InsightShell, __spreadProps(__spreadValues({ ribbonColour }, shellProps), { children: [
-    /* @__PURE__ */ jsx12(InsightShellHeader, { title, subtitle }),
-    /* @__PURE__ */ jsx12(MiniTrendBars, { heights })
-  ] }));
-}
 export {
   Accordion,
   Alert,
+  AlertDialog,
+  AppLayout,
   AuthCard,
   AuthDivider,
   AuthLayout,
+  Autocomplete,
   Avatar,
   AvatarGroup,
   Badge,
+  Banner,
+  BarChart,
   Breadcrumbs,
   Button,
   ButtonChrome,
+  ButtonGroup,
   CANONICAL_ICONS,
   Calendar,
   Caption,
   Card,
   ChatBubble,
   Checkbox,
+  Chip,
   CodeBlock,
+  Collapsible,
   CollapsibleSection,
+  Combobox,
   CommandPalette,
   ComponentDocs,
+  ContextMenu,
   DEFAULT_THEME_ID,
-  DashboardFiltersBar,
-  DashboardGrid,
-  DashboardInsightPlaceholder,
-  DashboardKpiCard,
-  DashboardToolbar,
-  DashboardWell,
+  DataTable,
+  DatePicker,
+  Dialog,
   Display,
+  Divider,
+  Dot,
   Drawer,
   DropdownButton,
   DropdownItem,
@@ -1291,110 +1036,241 @@ export {
   FilterControls,
   FilterMenu,
   FormField,
+  FunnelChart,
   H1,
   H2,
   H3,
   H4,
   H5,
-  HogTrendLineChart,
   HoverCard,
   IconBase as Icon,
+  Icon123,
+  IconAI,
+  IconAction,
   IconActivity,
+  IconAdsClick,
+  IconAndroidOS,
+  IconAppleIOS,
+  IconArchive,
   IconAreaChart,
   IconArrowDown,
   IconArrowUp,
+  IconAtSign,
+  IconBadge,
   IconBase,
   IconBell,
   IconBellOff,
+  IconBinary,
+  IconBlank,
+  IconBold,
   IconBolt,
+  IconBook,
+  IconBookmarkBorder,
   IconBox,
+  IconBranch,
+  IconBug,
   IconByName,
+  IconCalculate,
+  IconCalendar,
+  IconCalendarDay,
   IconCancel,
+  IconCart,
+  IconChat,
   IconCheck,
   IconCheckCircle,
+  IconCheckboxChecked,
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
+  IconChrome,
   IconClipboardEdit,
+  IconClock,
   IconClose,
+  IconCloud,
   IconCodePreview,
+  IconCoffee,
   IconCohort,
   IconCommandCursor,
+  IconConfetti,
   IconCopy,
+  IconCrown,
   IconCumulativeChart,
   IconDataReel,
   IconDatabase,
+  IconDevices,
+  IconDocument,
   IconDownload,
+  IconDownloadCloud,
+  IconDragHandle,
   IconEdit,
   IconErrorOutline,
+  IconEvent,
   IconEventStream,
   IconExclamation,
   IconExperimentSplit,
+  IconExternalLink,
+  IconEye,
+  IconEyeHidden,
+  IconFacebook,
   IconFeatureGate,
+  IconFeedback,
+  IconFile,
+  IconFilter,
+  IconFingerprint,
+  IconFirefox,
   IconFlag,
   IconFlare,
   IconFlask,
+  IconFolder,
+  IconForward,
+  IconFullScreen,
+  IconFunnelHorizontal,
+  IconFunnelVertical,
+  IconGear,
+  IconGhost,
   IconGift,
+  IconGitlab,
+  IconGlobe,
+  IconGoogle,
   IconGridView,
+  IconGroupedEvents,
+  IconGroups,
   IconHandClick,
+  IconHash,
+  IconHeadphones,
+  IconHeart,
+  IconHeatmap,
   IconHome,
+  IconHomeFilled,
+  IconHourglass,
+  IconImage,
+  IconInbox,
   IconInfo,
+  IconInfoFilled,
   IconInsightBoard,
+  IconItalic,
+  IconKey,
+  IconKeyFilled,
+  IconLaptop,
   IconLayers,
+  IconLayout,
+  IconLifeBuoy,
+  IconLightBulb,
+  IconLink,
+  IconLinkBreak,
+  IconLinux,
   IconListView,
+  IconLocation,
+  IconLock,
   IconLogout,
+  IconMacOS,
   IconMail,
+  IconMap,
+  IconMapPin,
+  IconMaximize,
+  IconMegaphone,
+  IconMenu,
+  IconMic,
+  IconMicrosoftTeams,
+  IconMinimize,
+  IconMinus,
+  IconMonitor,
   IconMoon,
+  IconMoonFilled,
+  IconMoreHorizontal,
+  IconMoreVertical,
+  IconMusic,
+  IconNavigation,
+  IconNodeJS,
+  IconOffline,
   IconOldWindow,
+  IconOpenInApp,
+  IconOpenInNew,
+  IconPalette,
   IconPanelRight,
+  IconPaperclip,
+  IconPauseCircle,
+  IconPeople,
+  IconPercent,
   IconPerson,
+  IconPhone,
+  IconPin,
   IconPlayCircle,
   IconPlus,
   IconPremium,
+  IconPreview,
+  IconPrinter,
   IconQueryEditor,
   IconQueryStack,
+  IconQuestionAnswer,
   IconRadar,
+  IconRadioButtonUnchecked,
   IconRecording,
+  IconRedo,
+  IconRefresh,
+  IconReplay,
   IconReplayFrame,
+  IconReply,
+  IconReport,
   IconRobot,
   IconRocket,
+  IconSafari,
   IconSave,
   IconSearch,
+  IconSelectAll,
   IconSelectEvents,
   IconShoppingCart,
+  IconSkipBackward,
+  IconSkipEnd,
+  IconSkipStart,
+  IconSlack,
+  IconSlackExternal,
   IconSpinner,
+  IconStamphog,
   IconStar,
+  IconStore,
   IconSubArrowRight,
+  IconSubtitles,
+  IconSubtitlesOff,
   IconSun,
   IconSurveyCard,
   IconSurveys,
+  IconSwapHoriz,
   IconSync,
   IconTableChart,
   IconTerminal,
+  IconTextSize,
   IconToggle,
   IconTrash,
+  IconTrendingDown,
+  IconTrendingFlat,
+  IconTrendingFlatDown,
   IconTuning,
+  IconUnverifiedEvent,
   IconUpload,
+  IconVerifiedEvent,
+  IconVerticalAlignCenter,
   IconVolume,
   IconVolumeOff,
+  IconWeb,
+  IconWindows,
   Indicator,
   Input,
-  InsightDoughnutChart,
-  InsightHorizontalBarChart,
-  InsightMiniCard,
-  InsightPolarAreaChart,
-  InsightShell,
-  InsightShellHeader,
-  InsightStackedBarChart,
-  InsightVerticalBarChart,
+  InputGroup,
   Kbd,
   Label,
   Lead,
+  Lettermark,
+  Link,
   Loader,
+  LoadingBar,
   LoadingState,
-  MiniTrendBars,
+  Menubar,
+  Metric,
+  MetricCard,
   Modal,
   Mono,
+  NumberField,
   OLD_UI_ICONS,
   Overline,
   P,
@@ -1402,10 +1278,16 @@ export {
   PH_ICON_ALIASES,
   Pagination,
   Panel,
+  PieChart,
+  Popover,
   Progress,
+  ProgressCircle,
   Radio,
   Range,
   Rating,
+  Resizable,
+  Row,
+  ScrollArea,
   SearchGroup,
   SearchInput,
   SegmentedControl,
@@ -1413,9 +1295,14 @@ export {
   SettingsLayout,
   SettingsNav,
   ShowcaseWrapper,
+  Sidebar,
   Skeleton,
   Small,
+  Snack,
   SortMenu,
+  Sparkline,
+  Spinner,
+  Splotch,
   Stat,
   Stepper,
   THEMES,
@@ -1423,15 +1310,22 @@ export {
   THEME_INIT_SCRIPT,
   Table,
   Tabs,
+  Tag,
   Terminal,
   Textarea,
   ThemeDomSync,
   ThemeManager,
   ThemeSwitcher,
+  TimeSeriesLineChart,
   Timeline,
   Toast,
   ToastStack,
   Toggle,
+  ToggleButton,
+  ToggleGroup,
+  Tooltip,
+  TooltipProvider,
+  Widget,
   createIconBase,
   createIconBasePath,
   getTheme,