@opensite/ui 0.3.4 → 0.4.0

package/dist/comparison-metrics-rows.cjs

@@ -4,8 +4,8 @@
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -31,111 +31,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React__namespace.useState(null);
-  const [isLoading, setIsLoading] = React__namespace.useState(true);
-  const [error, setError] = React__namespace.useState(null);
-  const { url, iconName } = React__namespace.useMemo(() => {
-    const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName2] = name.split(separator);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React__namespace.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -554,51 +449,15 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var defaultMetrics = [
-  {
-    title: "Initial Setup",
-    optionA: { value: "6", unit: "mo", desc: "Enterprise implementation timeline" },
-    optionB: { value: "2", unit: "wk", desc: "Rapid deployment process" }
-  },
-  {
-    title: "Monthly Cost",
-    optionA: { value: "$50k", unit: "+", desc: "Enterprise licensing fees" },
-    optionB: { value: "$5k", unit: "", desc: "Predictable monthly pricing" }
-  },
-  {
-    title: "Team Training",
-    optionA: { value: "3", unit: "mo", desc: "Extensive onboarding required" },
-    optionB: { value: "1", unit: "wk", desc: "Intuitive interface design" }
-  },
-  {
-    title: "ROI Timeline",
-    optionA: { value: "4", unit: "y", desc: "Standard enterprise timeline" },
-    optionB: { value: "8", unit: "m", desc: "Accelerated market entry" }
-  }
-];
-var defaultActions = [
-  {
-    label: "Get Started",
-    href: "#",
-    variant: "default",
-    size: "lg",
-    iconAfter: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-  }
-];
-var defaultFootnotes = [
-  "* Varies based on specific requirements and complexity",
-  "^ Deployment time may vary depending on integration requirements",
-  "# Additional costs may apply for premium features"
-];
 function ComparisonMetricsRows({
-  heading = "Compare Cloud vs On-site Infrastructure",
+  heading,
   description,
   optionALabel = "Traditional",
   optionBLabel = "Cloud-Native",
-  metrics = defaultMetrics,
+  metrics,
   metricsSlot,
-  footnotes = defaultFootnotes,
-  actions = defaultActions,
+  footnotes,
+  actions,
   actionsSlot,
   className,
   containerClassName,
@@ -611,6 +470,7 @@ function ComparisonMetricsRows({
 }) {
   const renderMetrics = () => {
     if (metricsSlot) return metricsSlot;
+    if (!metrics || metrics.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("col-span-4 rounded-xl bg-background shadow-sm md:col-span-8 lg:col-span-10 lg:col-start-2", metricsClassName), children: metrics.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -669,7 +529,7 @@ function ComparisonMetricsRows({
     ] }) }),
     renderMetrics(),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 md:col-span-8 lg:col-span-10 lg:col-start-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", footnotesClassName), children: footnotes.map((note, idx) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground md:text-sm", children: note }, idx)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", footnotesClassName), children: footnotes?.map((note, idx) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground md:text-sm", children: note }, idx)) }),
       renderActions()
     ] }) })
   ] }) });

package/dist/comparison-metrics-rows.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { A as ActionConfig } from './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/comparison-metrics-rows.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { A as ActionConfig } from './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/comparison-metrics-rows.js

@@ -2,118 +2,13 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // lib/utils.ts
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
-    const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName2] = name.split(separator);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -532,51 +427,15 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var defaultMetrics = [
-  {
-    title: "Initial Setup",
-    optionA: { value: "6", unit: "mo", desc: "Enterprise implementation timeline" },
-    optionB: { value: "2", unit: "wk", desc: "Rapid deployment process" }
-  },
-  {
-    title: "Monthly Cost",
-    optionA: { value: "$50k", unit: "+", desc: "Enterprise licensing fees" },
-    optionB: { value: "$5k", unit: "", desc: "Predictable monthly pricing" }
-  },
-  {
-    title: "Team Training",
-    optionA: { value: "3", unit: "mo", desc: "Extensive onboarding required" },
-    optionB: { value: "1", unit: "wk", desc: "Intuitive interface design" }
-  },
-  {
-    title: "ROI Timeline",
-    optionA: { value: "4", unit: "y", desc: "Standard enterprise timeline" },
-    optionB: { value: "8", unit: "m", desc: "Accelerated market entry" }
-  }
-];
-var defaultActions = [
-  {
-    label: "Get Started",
-    href: "#",
-    variant: "default",
-    size: "lg",
-    iconAfter: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-  }
-];
-var defaultFootnotes = [
-  "* Varies based on specific requirements and complexity",
-  "^ Deployment time may vary depending on integration requirements",
-  "# Additional costs may apply for premium features"
-];
 function ComparisonMetricsRows({
-  heading = "Compare Cloud vs On-site Infrastructure",
+  heading,
   description,
   optionALabel = "Traditional",
   optionBLabel = "Cloud-Native",
-  metrics = defaultMetrics,
+  metrics,
   metricsSlot,
-  footnotes = defaultFootnotes,
-  actions = defaultActions,
+  footnotes,
+  actions,
   actionsSlot,
   className,
   containerClassName,
@@ -589,6 +448,7 @@ function ComparisonMetricsRows({
 }) {
   const renderMetrics = () => {
     if (metricsSlot) return metricsSlot;
+    if (!metrics || metrics.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("col-span-4 rounded-xl bg-background shadow-sm md:col-span-8 lg:col-span-10 lg:col-start-2", metricsClassName), children: metrics.map((row, index) => /* @__PURE__ */ jsx(
       "div",
       {
@@ -647,7 +507,7 @@ function ComparisonMetricsRows({
     ] }) }),
     renderMetrics(),
     /* @__PURE__ */ jsx("div", { className: "col-span-4 md:col-span-8 lg:col-span-10 lg:col-start-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("space-y-2", footnotesClassName), children: footnotes.map((note, idx) => /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground md:text-sm", children: note }, idx)) }),
+      /* @__PURE__ */ jsx("div", { className: cn("space-y-2", footnotesClassName), children: footnotes?.map((note, idx) => /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground md:text-sm", children: note }, idx)) }),
       renderActions()
     ] }) })
   ] }) });

package/dist/comparison-table-tabs.cjs

@@ -258,54 +258,11 @@ function TabsTrigger({
     }
   );
 }
-var defaultFeatures = [
-  "Initial cost",
-  "Scalability",
-  "Performance",
-  "Maintenance",
-  "Data recovery",
-  "Lifespan"
-];
-var defaultModels = [
-  {
-    name: "SSD",
-    attributes: [
-      { value: "Medium to high", status: "negative" },
-      { value: "Limited by size", status: "neutral" },
-      { value: "Very fast", status: "positive" },
-      { value: "Low maintenance", status: "positive" },
-      { value: "Challenging", status: "negative" },
-      { value: "5-7 years", status: "neutral" }
-    ]
-  },
-  {
-    name: "Cloud Storage",
-    attributes: [
-      { value: "Pay-as-you-go", status: "positive" },
-      { value: "Unlimited scaling", status: "positive" },
-      { value: "Depends on connection", status: "neutral" },
-      { value: "Managed service", status: "positive" },
-      { value: "Provider dependent", status: "neutral" },
-      { value: "Indefinite", status: "positive" }
-    ]
-  },
-  {
-    name: "NAS",
-    attributes: [
-      { value: "High upfront", status: "negative" },
-      { value: "Expandable", status: "positive" },
-      { value: "Network limited", status: "neutral" },
-      { value: "Regular upkeep", status: "negative" },
-      { value: "Built-in redundancy", status: "positive" },
-      { value: "7-10 years", status: "positive" }
-    ]
-  }
-];
 function ComparisonTableTabs({
   heading,
   description,
-  features = defaultFeatures,
-  models = defaultModels,
+  features,
+  models,
   tableSlot,
   className,
   containerClassName,
@@ -316,7 +273,7 @@ function ComparisonTableTabs({
   tableHeaderClassName,
   tableCellClassName
 }) {
-  const [selectedTab, setSelectedTab] = React.useState(models[0]?.name || "");
+  const [selectedTab, setSelectedTab] = React.useState(models?.[0]?.name || "");
   const renderStatusIcon = (status) => {
     if (status === "positive") {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full border border-green-200 bg-green-100", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-green-700" }) });
@@ -328,6 +285,7 @@ function ComparisonTableTabs({
   };
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!models || models.length === 0 || !features || features.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Tabs,

package/dist/comparison-table-tabs.js

@@ -236,54 +236,11 @@ function TabsTrigger({
     }
   );
 }
-var defaultFeatures = [
-  "Initial cost",
-  "Scalability",
-  "Performance",
-  "Maintenance",
-  "Data recovery",
-  "Lifespan"
-];
-var defaultModels = [
-  {
-    name: "SSD",
-    attributes: [
-      { value: "Medium to high", status: "negative" },
-      { value: "Limited by size", status: "neutral" },
-      { value: "Very fast", status: "positive" },
-      { value: "Low maintenance", status: "positive" },
-      { value: "Challenging", status: "negative" },
-      { value: "5-7 years", status: "neutral" }
-    ]
-  },
-  {
-    name: "Cloud Storage",
-    attributes: [
-      { value: "Pay-as-you-go", status: "positive" },
-      { value: "Unlimited scaling", status: "positive" },
-      { value: "Depends on connection", status: "neutral" },
-      { value: "Managed service", status: "positive" },
-      { value: "Provider dependent", status: "neutral" },
-      { value: "Indefinite", status: "positive" }
-    ]
-  },
-  {
-    name: "NAS",
-    attributes: [
-      { value: "High upfront", status: "negative" },
-      { value: "Expandable", status: "positive" },
-      { value: "Network limited", status: "neutral" },
-      { value: "Regular upkeep", status: "negative" },
-      { value: "Built-in redundancy", status: "positive" },
-      { value: "7-10 years", status: "positive" }
-    ]
-  }
-];
 function ComparisonTableTabs({
   heading,
   description,
-  features = defaultFeatures,
-  models = defaultModels,
+  features,
+  models,
   tableSlot,
   className,
   containerClassName,
@@ -294,7 +251,7 @@ function ComparisonTableTabs({
   tableHeaderClassName,
   tableCellClassName
 }) {
-  const [selectedTab, setSelectedTab] = useState(models[0]?.name || "");
+  const [selectedTab, setSelectedTab] = useState(models?.[0]?.name || "");
   const renderStatusIcon = (status) => {
     if (status === "positive") {
       return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border border-green-200 bg-green-100", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-green-700" }) });
@@ -306,6 +263,7 @@ function ComparisonTableTabs({
   };
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!models || models.length === 0 || !features || features.length === 0) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Tabs,

package/dist/comparison-table-tooltips.cjs

@@ -152,43 +152,12 @@ function TooltipContent({
     }
   ) });
 }
-var defaultRows = [
-  { feature: "Design System", optionA: "Modern, Utility-first", optionB: "Classic, Component-based" },
-  { feature: "Customization", optionA: "Highly customizable", optionB: "Limited by default" },
-  { feature: "Dark Mode", optionA: "Built-in", optionB: "Requires extra setup" },
-  { feature: "TypeScript Support", optionA: "First-class", optionB: "Partial" },
-  { feature: "Accessibility", optionA: "Focus on a11y", optionB: "Basic" },
-  { feature: "Component Count", optionA: "30+", optionB: "25+" },
-  { feature: "License", optionA: "MIT", optionB: "MIT" },
-  {
-    feature: "Premium Components",
-    optionA: "Available",
-    optionB: {
-      value: "Not included",
-      tooltip: {
-        title: "Premium Only",
-        content: "Some advanced components are only available in paid versions or require third-party libraries."
-      }
-    }
-  },
-  {
-    feature: "Figma Kit",
-    optionA: "Yes",
-    optionB: {
-      value: "No",
-      tooltip: {
-        title: "Figma Kit Unavailable",
-        content: "Does not provide an official Figma kit, but community kits may exist."
-      }
-    }
-  }
-];
 function ComparisonTableTooltips({
-  heading = "Compare Us",
-  description = "A modern framework for building websites that is better than the competition.",
+  heading,
+  description,
   optionALabel = "Our Solution",
   optionBLabel = "Alternative",
-  rows = defaultRows,
+  rows,
   tableSlot,
   className,
   containerClassName,
@@ -225,6 +194,7 @@ function ComparisonTableTooltips({
   };
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!rows || rows.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: cn("rounded border text-left shadow-lg", tableClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: tableHeaderClassName }),

package/dist/comparison-table-tooltips.js

@@ -130,43 +130,12 @@ function TooltipContent({
     }
   ) });
 }
-var defaultRows = [
-  { feature: "Design System", optionA: "Modern, Utility-first", optionB: "Classic, Component-based" },
-  { feature: "Customization", optionA: "Highly customizable", optionB: "Limited by default" },
-  { feature: "Dark Mode", optionA: "Built-in", optionB: "Requires extra setup" },
-  { feature: "TypeScript Support", optionA: "First-class", optionB: "Partial" },
-  { feature: "Accessibility", optionA: "Focus on a11y", optionB: "Basic" },
-  { feature: "Component Count", optionA: "30+", optionB: "25+" },
-  { feature: "License", optionA: "MIT", optionB: "MIT" },
-  {
-    feature: "Premium Components",
-    optionA: "Available",
-    optionB: {
-      value: "Not included",
-      tooltip: {
-        title: "Premium Only",
-        content: "Some advanced components are only available in paid versions or require third-party libraries."
-      }
-    }
-  },
-  {
-    feature: "Figma Kit",
-    optionA: "Yes",
-    optionB: {
-      value: "No",
-      tooltip: {
-        title: "Figma Kit Unavailable",
-        content: "Does not provide an official Figma kit, but community kits may exist."
-      }
-    }
-  }
-];
 function ComparisonTableTooltips({
-  heading = "Compare Us",
-  description = "A modern framework for building websites that is better than the competition.",
+  heading,
+  description,
   optionALabel = "Our Solution",
   optionBLabel = "Alternative",
-  rows = defaultRows,
+  rows,
   tableSlot,
   className,
   containerClassName,
@@ -203,6 +172,7 @@ function ComparisonTableTooltips({
   };
   const renderTable = () => {
     if (tableSlot) return tableSlot;
+    if (!rows || rows.length === 0) return null;
     return /* @__PURE__ */ jsxs(Table, { className: cn("rounded border text-left shadow-lg", tableClassName), children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableHead, { className: tableHeaderClassName }),