dune-react 0.0.8 → 0.0.10

package/dist/components/puck-block/location-sections/props.d.ts

@@ -0,0 +1,45 @@
+type LocationVariant = "location-1" | "location-2" | "location-3";
+type LocationPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type LocationSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type LocationButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type LocationItem = {
+    name: string;
+    address?: string;
+    phone?: string;
+    hours?: string;
+    directionsUrl?: string;
+};
+type LocationSectionProps = {
+    variant?: LocationVariant;
+    heading?: string;
+    description?: string;
+    address?: string;
+    mapEmbedUrl?: string;
+    mapTitle?: string;
+    mapFilter?: string;
+    mapTintMode?: "none" | "theme" | "custom";
+    mapTintColor?: string;
+    mapTintOpacity?: number;
+    buttons?: LocationButton[];
+    locations?: LocationItem[];
+    contentPosition?: "left" | "right";
+    contentAlign?: "left" | "right";
+    columns?: "2" | "3";
+    styles?: {
+        padding?: LocationPadding;
+        sectionStyle?: LocationSectionStyle;
+        backgroundColor?: string;
+        mapHeight?: "sm" | "md" | "lg";
+        cardStyle?: "solid" | "glass";
+        sectionHeight?: "sm" | "md" | "lg";
+    };
+};

package/dist/components/puck-block/metrics-sections/props.d.ts

@@ -0,0 +1,43 @@
+type MetricsVariant = "stats-1" | "stats-2" | "stats-3";
+type MetricsPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type MetricsSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type MetricsButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type MetricsBadge = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+};
+type MetricItem = {
+    value?: string;
+    metric?: string;
+    label?: string;
+    title?: string;
+    description?: string;
+    percentage?: number;
+    direction?: "none" | "increase" | "decrease";
+    polarity?: "none" | "positive" | "negative";
+    tone?: "dark" | "light";
+};
+type MetricsSectionProps = {
+    variant?: MetricsVariant;
+    badge?: MetricsBadge;
+    heading?: string;
+    description?: string;
+    buttons?: MetricsButton[];
+    layout?: "section" | "inline" | "centered";
+    items?: MetricItem[];
+    styles?: {
+        padding?: MetricsPadding;
+        sectionStyle?: MetricsSectionStyle;
+        backgroundColor?: string;
+    };
+};

package/dist/components/puck-block/metrics-sections/stats-1/index.js

@@ -1,9 +1,10 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, contentFields } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { Stats } from "./stats.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
-    statistics: {
+    items: {
       type: "array",
       max: 8,
       getItemSummary: (item, index = 0) => item.label || `Statistic ${index + 1}`,
@@ -63,9 +64,7 @@ const conf = {
         { label: "centered", value: "centered" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "The numbers speak for themselves",
@@ -83,7 +82,7 @@ const conf = {
         size: "default"
       }
     ],
-    statistics: [
+    items: [
       {
         label: "Monthly active users",
         value: "500",
@@ -114,7 +113,7 @@ const conf = {
       }
     ],
     layout: "section",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   resolveFields: (data, params) => {
     if (data.props.layout === "inline") {

package/dist/components/puck-block/metrics-sections/stats-1/stats.d.ts

@@ -1,16 +1,18 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 export interface StatsProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     layout?: "section" | "inline" | "centered";
-    statistics: {
+    items: {
         value: string;
         label: string;
         percentage?: number;
         direction?: "none" | "increase" | "decrease";
         polarity?: "none" | "positive" | "negative";
     }[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Stats: ({ padding, sectionStyle, backgroundColor, layout, badge, heading, description, buttons, statistics, }: StatsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Stats: ({ layout, badge, heading, description, buttons, items, styles, }: StatsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/metrics-sections/stats-1/stats.js

@@ -4,67 +4,73 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 const Stats = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   layout = "section",
   badge,
   heading,
   description,
   buttons,
-  statistics
+  items,
+  styles
 }) => {
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-    layout === "inline" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 text-start sm:grid-cols-2 lg:grid-cols-4 lg:gap-8", children: (statistics ?? []).map((stat, index) => /* @__PURE__ */ jsx(
-      Stat,
-      {
-        value: stat.value,
-        label: stat.label,
-        direction: stat.direction,
-        polarity: stat.polarity,
-        percentage: stat.percentage
-      },
-      index
-    )) }) : null,
-    layout === "section" ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsx(
-        CompoundContent,
-        {
-          badge,
-          heading,
-          description,
-          buttons
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-2 text-start sm:grid-cols-2 lg:grid-cols-2", children: (statistics ?? []).map((stat, index) => /* @__PURE__ */ jsx(
-        Stat,
-        {
-          value: stat.value,
-          label: stat.label,
-          direction: stat.direction,
-          polarity: stat.polarity,
-          percentage: stat.percentage
-        },
-        index
-      )) }) })
-    ] }) : null,
-    layout === "centered" ? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx(
-        CompoundContent,
-        {
-          badge,
-          heading,
-          description,
-          buttons,
-          alignContent: "center"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-12 mt-16", children: (statistics ?? []).map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
-        /* @__PURE__ */ jsx("h2", { className: "font-serif text-5xl md:text-6xl font-medium text-foreground", children: stat.value }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: stat.label })
-      ] }, index)) })
-    ] }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    CompoundContainer,
+    {
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      children: [
+        layout === "inline" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 text-start sm:grid-cols-2 lg:grid-cols-4 lg:gap-8", children: (items ?? []).map((stat, index) => /* @__PURE__ */ jsx(
+          Stat,
+          {
+            value: stat.value,
+            label: stat.label,
+            direction: stat.direction,
+            polarity: stat.polarity,
+            percentage: stat.percentage
+          },
+          index
+        )) }) : null,
+        layout === "section" ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            CompoundContent,
+            {
+              badge,
+              heading,
+              description,
+              buttons
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-2 text-start sm:grid-cols-2 lg:grid-cols-2", children: (items ?? []).map((stat, index) => /* @__PURE__ */ jsx(
+            Stat,
+            {
+              value: stat.value,
+              label: stat.label,
+              direction: stat.direction,
+              polarity: stat.polarity,
+              percentage: stat.percentage
+            },
+            index
+          )) }) })
+        ] }) : null,
+        layout === "centered" ? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(
+            CompoundContent,
+            {
+              badge,
+              heading,
+              description,
+              buttons,
+              alignContent: "center"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-12 mt-16", children: (items ?? []).map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+            /* @__PURE__ */ jsx("h2", { className: "font-serif text-5xl md:text-6xl font-medium text-foreground", children: stat.value }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: stat.label })
+          ] }, index)) })
+        ] }) : null
+      ]
+    }
+  );
 };
 const Stat = ({
   value,

package/dist/components/puck-block/metrics-sections/stats-2/index.d.ts

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { Stats2Props } from "./stats-2";
+export type { Stats2Props };
+export declare const conf: ComponentConfig<Stats2Props>;
+export default conf;

package/dist/components/puck-block/metrics-sections/stats-2/index.js

@@ -0,0 +1,76 @@
+import { buttons } from "../../../puck-base/core/fields.js";
+import { Stats2 } from "./stats-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const conf = {
+  fields: {
+    heading: {
+      type: "text",
+      contentEditable: true
+    },
+    description: {
+      type: "textarea",
+      contentEditable: true
+    },
+    buttons,
+    items: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, index = 0) => item.metric || `Stat ${index + 1}`,
+      arrayFields: {
+        metric: {
+          type: "text",
+          contentEditable: true,
+          ai: { instructions: "The metric value, e.g. '100%', '1:1', 'LA'" }
+        },
+        title: {
+          type: "text",
+          contentEditable: true,
+          ai: { instructions: "Short label describing this metric" }
+        },
+        variant: {
+          type: "radio",
+          options: [
+            { label: "Light", value: "light" },
+            { label: "Dark", value: "dark" }
+          ]
+        }
+      },
+      defaultItemProps: {
+        metric: "100%",
+        title: "Custom program design",
+        variant: "light"
+      }
+    },
+    styles: createStylesField()
+  },
+  defaultProps: {
+    heading: "Real results from dedicated training",
+    description: "We focus on measurable progress and sustainable fitness habits. Every client gets customized programs built around their goals and current fitness level.",
+    buttons: [
+      {
+        label: "Explore our programs",
+        url: "/services",
+        variant: "outline",
+        size: "default",
+        icon: "none"
+      },
+      {
+        label: "Schedule your first session",
+        url: "#",
+        variant: "default",
+        size: "default",
+        icon: "none"
+      }
+    ],
+    items: [
+      { metric: "100%", title: "Custom program design", variant: "dark" },
+      { metric: "1:1", title: "Personalized attention", variant: "light" },
+      { metric: "LA", title: "Local Los Angeles training", variant: "light" }
+    ],
+    styles: createStylesDefaults()
+  },
+  render: Stats2
+};
+export {
+  conf
+};

package/dist/components/puck-block/metrics-sections/stats-2/stats-2.d.ts

@@ -0,0 +1,18 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+import { CompoundButtonProps } from "@/components/puck-base/button";
+export interface Stats2Props {
+    heading?: string;
+    description?: string;
+    buttons?: CompoundButtonProps[];
+    items?: {
+        metric: string;
+        title: string;
+        variant: "dark" | "light";
+    }[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
+}
+export declare const Stats2: ({ heading, description, buttons, items, styles, }: Stats2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/metrics-sections/stats-2/stats-2.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { cn } from "../../../../utils/css-utils.js";
+const Stats2 = ({
+  heading,
+  description,
+  buttons,
+  items = [],
+  styles
+}) => {
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-full md:w-1/2", children: heading && /* @__PURE__ */ jsx("h2", { className: "max-w-xl text-4xl font-semibold tracking-tight text-foreground", children: heading }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-6 md:w-1/2", children: [
+            description && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-muted-foreground", children: description }),
+            buttons && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: buttons.map((btn, i) => /* @__PURE__ */ jsx(
+              CompoundButton,
+              {
+                label: btn.label,
+                url: btn.url,
+                action: btn.action,
+                variant: btn.variant,
+                size: btn.size,
+                icon: btn.icon
+              },
+              i
+            )) })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4", children: items.map((item, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-h-[180px] flex-col justify-between rounded-3xl border p-6",
+              item.variant === "dark" ? "border-foreground/20 bg-foreground text-background" : "border-border bg-transparent text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-3xl font-semibold", children: item.metric }),
+              /* @__PURE__ */ jsx("p", { className: "text-base", children: item.title })
+            ]
+          },
+          i
+        )) })
+      ] })
+    }
+  );
+};
+export {
+  Stats2
+};

package/dist/components/puck-block/metrics-sections/stats-3/index.d.ts

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { Stats3Props } from "./stats-3";
+export type { Stats3Props };
+export declare const conf: ComponentConfig<Stats3Props>;
+export default conf;

package/dist/components/puck-block/metrics-sections/stats-3/index.js

@@ -0,0 +1,86 @@
+import { buttons } from "../../../puck-base/core/fields.js";
+import { Stats3 } from "./stats-3.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const conf = {
+  fields: {
+    heading: {
+      type: "text",
+      contentEditable: true
+    },
+    description: {
+      type: "textarea",
+      contentEditable: true
+    },
+    buttons,
+    items: {
+      type: "array",
+      max: 6,
+      getItemSummary: (item, index = 0) => item.metric || `Stat ${index + 1}`,
+      arrayFields: {
+        metric: {
+          type: "text",
+          contentEditable: true,
+          ai: { instructions: "The key value, e.g. '100%', '1-on-1', '4 weeks'" }
+        },
+        title: {
+          type: "text",
+          contentEditable: true,
+          ai: { instructions: "A short bold label for this statistic" }
+        },
+        description: {
+          type: "textarea",
+          contentEditable: true,
+          ai: { instructions: "A brief supporting description for this statistic" }
+        }
+      },
+      defaultItemProps: {
+        metric: "100%",
+        title: "Stat title",
+        description: "A brief description of what this statistic means."
+      }
+    },
+    styles: createStylesField()
+  },
+  defaultProps: {
+    heading: "Real progress from personalized training",
+    description: "We focus on measurable improvements and sustainable habits that fit your life.",
+    buttons: [
+      {
+        label: "Get started",
+        url: "#",
+        variant: "default",
+        size: "default",
+        icon: "none"
+      },
+      {
+        label: "Learn more",
+        url: "#",
+        variant: "outline",
+        size: "default",
+        icon: "none"
+      }
+    ],
+    items: [
+      {
+        metric: "100%",
+        title: "Customized programs",
+        description: "Every plan is tailored to your goals, fitness level, and schedule."
+      },
+      {
+        metric: "1-on-1",
+        title: "Direct coaching",
+        description: "You work directly with your coach for focused attention and real-time feedback."
+      },
+      {
+        metric: "4 weeks",
+        title: "Visible results",
+        description: "Most clients see measurable strength and endurance improvements within the first month."
+      }
+    ],
+    styles: createStylesDefaults()
+  },
+  render: Stats3
+};
+export {
+  conf
+};

package/dist/components/puck-block/metrics-sections/stats-3/stats-3.d.ts

@@ -0,0 +1,18 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+import { CompoundButtonProps } from "@/components/puck-base/button";
+export interface Stats3Props {
+    heading?: string;
+    description?: string;
+    buttons?: CompoundButtonProps[];
+    items: {
+        metric: string;
+        title: string;
+        description: string;
+    }[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
+}
+export declare const Stats3: ({ heading, description, buttons, items, styles, }: Stats3Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/metrics-sections/stats-3/stats-3.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { cn } from "../../../../utils/css-utils.js";
+const ITEM_STAGGER = {
+  0: "lg:pt-24",
+  1: "lg:pt-16",
+  2: "lg:pt-8"
+};
+const Stats3 = ({
+  heading,
+  description,
+  buttons = [],
+  items = [],
+  styles
+}) => {
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-8 lg:flex-row lg:justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-full lg:basis-1/2", children: heading && /* @__PURE__ */ jsx("h2", { className: "max-w-xl text-4xl font-semibold tracking-tight text-foreground", children: heading }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-8 lg:basis-1/2", children: [
+            description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }),
+            buttons.some((button) => button == null ? void 0 : button.label) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 sm:flex-row", children: buttons.map(
+              (button, index) => (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx(CompoundButton, { ...button }, index) : null
+            ) })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-y-6 sm:grid-cols-2 lg:grid-cols-3", children: items.map((item, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("flex h-full flex-col", ITEM_STAGGER[index]),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-row", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-px self-stretch bg-border" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 px-6", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-4xl font-bold tracking-tight text-foreground", children: item.metric }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-semibold text-foreground", children: item.title }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: item.description })
+                ] })
+              ] })
+            ] })
+          },
+          index
+        )) })
+      ] })
+    }
+  );
+};
+export {
+  Stats3
+};

package/dist/components/puck-block/pricing-sections/comparison-1/comparison.d.ts

@@ -1,14 +1,16 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface ComparisonProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
-    columns?: Array<{
+    plans?: Array<{
         name: string;
         highlighted?: boolean;
         features: string[];
     }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Comparison: ({ padding, sectionStyle, backgroundColor, heading, description, columns, }: ComparisonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Comparison: ({ heading, description, plans, styles, }: ComparisonProps) => import("react/jsx-runtime").JSX.Element;