@ugurdemirel/landcraft 0.1.4 → 0.1.9

package/src/components/Pricing/variants/Bento.tsx

@@ -1,72 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { getContrastText } from "../../../utils/contrast";
-import { PriceValue, PlanButton } from "../parts";
-import { Check } from "../../../icons";
-import type { PricingVariantProps } from "../types";
-
-interface BentoProps extends PricingVariantProps {
-  className?: string;
-}
-
-export const PricingBento = ({ className, plans, billing, onSelect, ...props }: BentoProps) => {
-  return (
-    <div className={cn("w-full", className)} {...props}>
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        {plans.map((plan) => {
-          const isHighlighted = plan.highlighted && !plan.customColor;
-          const bg = plan.customColor || (isHighlighted ? "rgb(var(--color-primary))" : undefined);
-          const fg = plan.customColor
-            ? getContrastText(plan.customColor, "#111111", "#ffffff")
-            : isHighlighted
-              ? "rgb(var(--color-on-primary))"
-              : undefined;
-          return (
-            <div
-              key={plan.name}
-              className={cn(
-                "flex h-full flex-col rounded-xl p-8",
-                bg
-                  ? "lg:col-span-2"
-                  : "border border-border bg-surface",
-              )}
-              style={bg ? { backgroundColor: bg, color: fg } : undefined}
-            >
-              <div className="flex flex-wrap items-start justify-between gap-4">
-                <div>
-                  <h3 className={cn("font-display text-xl font-semibold tracking-tight", bg ? "text-current" : "text-foreground")}>
-                    {plan.name}
-                  </h3>
-                  {plan.description ? (
-                    <p className={cn("mt-1.5 text-sm", bg ? undefined : "text-muted-foreground")}>
-                      {plan.description}
-                    </p>
-                  ) : null}
-                </div>
-                <div className={cn("font-display", bg ? "text-current" : "text-foreground")}>
-                  <PriceValue value={billing === "monthly" ? plan.monthly : plan.yearly} billing={billing} dim={!bg} />
-                </div>
-              </div>
-              <ul
-                className={cn(
-                  "mt-7 grid grid-cols-1 gap-x-8 gap-y-2.5 text-sm sm:grid-cols-2",
-                  bg ? "lg:max-w-2xl" : undefined,
-                )}
-              >
-                {plan.features.map((feature) => (
-                  <li key={feature} className={cn("flex items-start gap-2.5", bg ? "text-current" : "text-muted-foreground")}>
-                    <Check className={cn("mt-0.5 h-4 w-4 shrink-0", bg ? "text-current" : "text-primary")} />
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-              <div className="mt-8">
-                <PlanButton plan={plan} billing={billing} onSelect={onSelect} dark={!bg} />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-PricingBento.displayName = "PricingBento";

package/src/components/Pricing/variants/Cards.tsx

@@ -1,79 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { getContrastText } from "../../../utils/contrast";
-import { PriceValue, BillingToggle, PlanButton } from "../parts";
-import { Check } from "../../../icons";
-import type { PricingVariantProps } from "../types";
-
-interface CardsProps extends PricingVariantProps {
-  className?: string;
-  onBillingChange: (billing: "monthly" | "yearly") => void;
-}
-
-export const PricingCards = ({ className, plans, billing, onSelect, onBillingChange, ...props }: CardsProps) => {
-  return (
-    <div className={cn("w-full", className)} {...props}>
-      <BillingToggle billing={billing} onChange={onBillingChange} />
-      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
-        {plans.map((plan) => {
-          const isHighlighted = plan.highlighted && !plan.customColor;
-          const bg = plan.customColor || (isHighlighted ? "rgb(var(--color-primary))" : undefined);
-          const fg = plan.customColor
-            ? getContrastText(plan.customColor, "#111111", "#ffffff")
-            : isHighlighted
-              ? "rgb(var(--color-on-primary))"
-              : undefined;
-          return (
-            <div
-              key={plan.name}
-              className={cn(
-                "relative flex flex-col rounded-xl p-7",
-                bg ? "shadow-raised" : "border border-border bg-surface",
-                !bg && isHighlighted && "border-primary",
-              )}
-              style={bg ? { backgroundColor: bg, color: fg } : undefined}
-            >
-              {isHighlighted ? (
-                <span
-                  className={cn(
-                    "absolute -top-3 left-7 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider",
-                    !bg && "bg-primary text-on-primary",
-                  )}
-                  style={
-                    bg
-                      ? { backgroundColor: "rgb(var(--color-on-primary))", color: "rgb(var(--color-primary))" }
-                      : undefined
-                  }
-                >
-                  Most popular
-                </span>
-              ) : null}
-              <h3 className={cn("font-display text-lg font-semibold tracking-tight", bg ? "text-current" : "text-foreground")}>
-                {plan.name}
-              </h3>
-              {plan.description ? (
-                <p className={cn("mt-1.5 text-sm", bg ? undefined : "text-muted-foreground")}>
-                  {plan.description}
-                </p>
-              ) : null}
-              <div className={cn("mt-6 flex items-baseline font-display", bg ? "text-current" : "text-foreground")}>
-                <PriceValue value={billing === "monthly" ? plan.monthly : plan.yearly} billing={billing} dim={!bg} />
-              </div>
-              <ul className={cn("mt-7 flex-1 space-y-2.5 text-sm", bg ? "text-current" : "text-muted-foreground")}>
-                {plan.features.map((feature) => (
-                  <li key={feature} className="flex items-start gap-2.5">
-                    <Check className={cn("mt-0.5 h-4 w-4 shrink-0", bg ? "text-current" : "text-primary")} />
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-              <div className="mt-8">
-                <PlanButton plan={plan} billing={billing} onSelect={onSelect} dark={!bg} />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-PricingCards.displayName = "PricingCards";

package/src/components/Pricing/variants/Compact.tsx

@@ -1,69 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { PlanButton } from "../parts";
-import { Check } from "../../../icons";
-import type { PricingVariantProps } from "../types";
-
-interface CompactProps extends PricingVariantProps {
-  className?: string;
-}
-
-export const PricingCompact = ({ className, plans, billing, onSelect, ...props }: CompactProps) => {
-  const price = (v: number | null) => (v === null ? "Custom" : `$${v}`);
-
-  return (
-    <div className={cn("w-full", className)} {...props}>
-      <div className="divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface">
-        {plans.map((plan) => {
-          const value = billing === "monthly" ? plan.monthly : plan.yearly;
-          const isHighlighted = plan.highlighted && !plan.customColor;
-          const bg = plan.customColor ? "rgb(var(--color-surface))" : isHighlighted ? "rgb(var(--color-primary-soft))" : undefined;
-          const fg = plan.customColor ? plan.customColor : isHighlighted ? "rgb(var(--color-primary))" : undefined;
-          return (
-            <div
-              key={plan.name}
-              className={cn(
-                "group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between",
-                isHighlighted && "bg-primary-soft/60",
-              )}
-              style={bg ? { backgroundColor: bg } : undefined}
-            >
-              <div className="min-w-0">
-                <div className="flex items-center gap-2.5">
-                  <h3 className="font-display text-lg font-semibold tracking-tight text-foreground">
-                    {plan.name}
-                  </h3>
-                  {isHighlighted ? (
-                    <span className="rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider">
-                      Popular
-                    </span>
-                  ) : null}
-                </div>
-                {plan.description ? (
-                  <p className="mt-1 truncate text-sm text-muted-foreground">{plan.description}</p>
-                ) : null}
-              </div>
-              <div className="flex items-center gap-6">
-                <ul className="hidden items-center gap-4 lg:flex">
-                  {plan.features.slice(0, 3).map((f) => (
-                    <li key={f} className="flex items-center gap-1.5 text-sm text-muted-foreground" style={{ color: fg }}>
-                      <Check className="h-3.5 w-3.5 text-current" />
-                      {f}
-                    </li>
-                  ))}
-                </ul>
-                <div className="font-display text-2xl font-semibold tracking-tight text-foreground">
-                  {price(value)}
-                  {value !== null ? (
-                    <span className="text-sm font-normal text-muted-foreground">/{billing === "monthly" ? "mo" : "yr"}</span>
-                  ) : null}
-                </div>
-                <PlanButton plan={plan} billing={billing} onSelect={onSelect} />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-PricingCompact.displayName = "PricingCompact";

package/src/components/Prose.tsx

@@ -1,55 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../utils/cn";
-
-export type ProseSize = "sm" | "md" | "lg" | "xl" | "2xl";
-
-export interface ProseProps extends HTMLAttributes<HTMLElement> {
-  /** Content scale. `lg` (prose-lg) is the comfortable blog default. */
-  size?: ProseSize;
-  /** Renders raw HTML (CMS / MDX output). Mutually exclusive with children. */
-  html?: string;
-  /** When true, removes the reading-width cap. */
-  wide?: boolean;
-}
-
-const sizes: Record<ProseSize, string> = {
-  sm: "prose-sm",
-  md: "prose",
-  lg: "prose-lg",
-  xl: "prose-xl",
-  "2xl": "prose-2xl",
-};
-
-/**
- * Blog / article / documentation body text.
- *
- * Wraps Tailwind Typography (`@tailwindcss/typography`) and re-skins its
- * colors, type scale and code blocks through the same design tokens as every
- * other component, so dark palettes and font swaps work out of the box.
- */
-export const Prose = forwardRef<HTMLElement, ProseProps>(
-  ({ className, size = "lg", html, wide = false, children, ...props }, ref) => (
-    <article
-      ref={ref}
-      className={cn(
-        "prose prose-neutral",
-        sizes[size],
-        !wide && "max-w-3xl",
-        className,
-      )}
-      {...(html ? { dangerouslySetInnerHTML: { __html: html } } : null)}
-      {...props}
-    >
-      {html ? null : children}
-    </article>
-  ),
-);
-Prose.displayName = "Prose";
-
-/** Intro / stand-first paragraph styled with the `prose` lead class. */
-export const ProseLead = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("lead", className)} {...props} />
-  ),
-);
-ProseLead.displayName = "ProseLead";

package/src/components/Section.tsx

@@ -1,106 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { Container } from "./Container";
-
-export type EyebrowStyle = "caps" | "soft" | "plain";
-
-export interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  eyebrow?: ReactNode;
-  eyebrowStyle?: EyebrowStyle;
-  title?: ReactNode;
-  description?: ReactNode;
-  align?: "left" | "center";
-}
-
-const eyebrowBase = "inline-flex items-center gap-2 text-xs font-semibold tracking-[0.18em] uppercase";
-
-const eyebrowStyles: Record<EyebrowStyle, string> = {
-  caps: cn(eyebrowBase, "text-foreground/50"),
-  soft: cn(
-    eyebrowBase,
-    "rounded-full px-3 py-1 text-primary tracking-widest bg-primary-soft uppercase",
-  ),
-  plain: cn(eyebrowBase, "text-primary"),
-};
-
-export const SectionHeader = forwardRef<HTMLDivElement, SectionHeaderProps>(
-  (
-    { className, eyebrow, eyebrowStyle = "caps", title, description, align = "center", children, ...props },
-    ref,
-  ) => (
-    <div
-      ref={ref}
-      className={cn(
-        "mb-14 max-w-2xl",
-        align === "center" && "mx-auto text-center",
-        className,
-      )}
-      {...props}
-    >
-      {eyebrow ? <p className={eyebrowStyles[eyebrowStyle]}>{eyebrow}</p> : null}
-      {title ? (
-        <h2 className="mt-5 font-display text-balance text-[1.9rem] font-semibold leading-[1.08] tracking-tight text-foreground sm:text-4xl">
-          {title}
-        </h2>
-      ) : null}
-      {description ? (
-        <p className="mt-4 text-pretty text-base leading-7 text-muted-foreground sm:text-lg">
-          {description}
-        </p>
-      ) : null}
-      {children}
-    </div>
-  ),
-);
-SectionHeader.displayName = "SectionHeader";
-
-export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  size?: "sm" | "md" | "lg";
-  eyebrow?: ReactNode;
-  eyebrowStyle?: EyebrowStyle;
-  title?: ReactNode;
-  description?: ReactNode;
-  align?: "left" | "center";
-  containerClassName?: string;
-}
-
-const paddings: Record<NonNullable<SectionProps["size"]>, string> = {
-  sm: "py-14",
-  md: "py-20 sm:py-24",
-  lg: "py-24 sm:py-32",
-};
-
-export const Section = forwardRef<HTMLElement, SectionProps>(
-  (
-    {
-      className,
-      containerClassName,
-      size = "md",
-      eyebrow,
-      eyebrowStyle,
-      title,
-      description,
-      align = "center",
-      children,
-      id,
-      ...props
-    },
-    ref,
-  ) => (
-    <section ref={ref} id={id} className={cn("w-full", paddings[size], className)} {...props}>
-      <Container className={containerClassName}>
-        {eyebrow || title || description ? (
-          <SectionHeader
-            eyebrow={eyebrow}
-            eyebrowStyle={eyebrowStyle}
-            title={title}
-            description={description}
-            align={align}
-          />
-        ) : null}
-        {children}
-      </Container>
-    </section>
-  ),
-);
-Section.displayName = "Section";

package/src/components/Slot.tsx

@@ -1,78 +0,0 @@
-import {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  type HTMLAttributes,
-  type ReactElement,
-  type ReactNode,
-  type Ref,
-} from "react";
-import { cn } from "../utils/cn";
-
-export interface SlotProps extends Omit<HTMLAttributes<HTMLElement>, "ref"> {
-  children?: ReactNode;
-}
-
-type AnyProps = Record<string, any>;
-
-function mergeProps(slotProps: AnyProps, childProps: AnyProps): AnyProps {
-  const overrideProps: AnyProps = { ...childProps };
-
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args: any[]) => {
-          childPropValue(...args);
-          slotPropValue(...args);
-        };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = cn(slotPropValue, childPropValue);
-    }
-  }
-
-  return { ...slotProps, ...overrideProps };
-}
-
-function useComposedRefs(...refs: Array<Ref<unknown> | undefined>) {
-  return (node: unknown) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref != null) {
-        (ref as { current: unknown }).current = node;
-      }
-    }
-  };
-}
-
-/**
- * Merges its props onto a single child element instead of rendering its own
- * DOM node. Used with the `asChild` prop so consumers can render a framework
- * router `<Link>` (Next.js, Remix, React Router…) with a component's styling.
- */
-export const Slot = forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-
-  if (!isValidElement(children)) {
-    return null;
-  }
-
-  const child = Children.only(children) as ReactElement & { ref?: Ref<unknown> };
-  const composedRef = useComposedRefs(forwardedRef, child.ref);
-
-  return cloneElement(child, {
-    ...mergeProps(slotProps as AnyProps, child.props as AnyProps),
-    ref: composedRef,
-  });
-});
-Slot.displayName = "Slot";

package/src/components/Stats/Stats.tsx

@@ -1,16 +0,0 @@
-import { forwardRef } from "react";
-import type { StatsProps } from "./types";
-import { StatsEditorial } from "./variants/Editorial";
-import { StatsHairline } from "./variants/Hairline";
-import { StatsCells } from "./variants/Cells";
-import { StatsTicker } from "./variants/Ticker";
-
-export const Stats = forwardRef<HTMLDListElement, StatsProps>(
-  ({ option = "editorial", ...props }, ref) => {
-    if (option === "ticker") return <StatsTicker ref={ref} {...props} />;
-    if (option === "cells") return <StatsCells ref={ref} {...props} />;
-    if (option === "hairline") return <StatsHairline ref={ref} {...props} />;
-    return <StatsEditorial ref={ref} {...props} />;
-  },
-);
-Stats.displayName = "Stats";

package/src/components/Stats/index.ts

@@ -1,2 +0,0 @@
-export { Stats } from "./Stats";
-export type { StatsProps, StatsOption, Stat } from "./types";

package/src/components/Stats/parts.tsx

@@ -1,29 +0,0 @@
-import { cn } from "../../utils/cn";
-import { ArrowUp, ArrowDown } from "../../icons";
-
-export const valueBase =
-  "font-display font-semibold tabular-nums tracking-[-0.02em] text-foreground";
-
-export const suffixBase = "ml-1 font-sans text-sm font-normal tracking-normal text-muted-foreground";
-
-export const gridCols: Record<2 | 3 | 4, string> = {
-  2: "sm:grid-cols-2",
-  3: "sm:grid-cols-2 lg:grid-cols-3",
-  4: "sm:grid-cols-2 lg:grid-cols-4",
-};
-
-export function DeltaBadge({ delta }: { delta: number }) {
-  const isUp = delta >= 0;
-  const Icon = isUp ? ArrowUp : ArrowDown;
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums",
-        isUp ? "bg-accent/10 text-accent" : "bg-danger-soft text-danger",
-      )}
-    >
-      <Icon className="h-3 w-3" />
-      {Math.abs(delta)}%
-    </span>
-  );
-}

package/src/components/Stats/types.ts

@@ -1,23 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-export type StatsOption = "editorial" | "hairline" | "cells" | "ticker";
-
-export interface Stat {
-  value: string;
-  label: string;
-  /** Small unit rendered inline with the value, e.g. "ms" or "₺". */
-  suffix?: string;
-  /** Trend change in percent — renders an up/down badge. */
-  delta?: number;
-  /** Optional supporting copy. */
-  sub?: string;
-  icon?: ReactNode;
-  /** Highlights the value with the primary token. */
-  accent?: boolean;
-}
-
-export interface StatsProps extends HTMLAttributes<HTMLDListElement> {
-  stats: Stat[];
-  option?: StatsOption;
-  columns?: 2 | 3 | 4;
-}

package/src/components/Stats/variants/Cells.tsx

@@ -1,34 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { valueBase, suffixBase, gridCols } from "../parts";
-import type { Stat } from "../types";
-
-interface CellsProps extends HTMLAttributes<HTMLDListElement> {
-  stats: Stat[];
-  columns?: 2 | 3 | 4;
-}
-
-export const StatsCells = forwardRef<HTMLDListElement, CellsProps>(
-  ({ className, stats, columns = 4, ...props }, ref) => (
-    <dl ref={ref} className={cn("grid grid-cols-1 gap-4", gridCols[columns], className)} {...props}>
-      {stats.map((stat) => (
-        <div
-          key={stat.label}
-          className="flex min-h-[8.5rem] flex-col justify-between rounded-xl border border-border bg-surface p-6"
-        >
-          <dd className={cn(valueBase, "text-3xl", stat.accent ? "text-primary" : undefined)}>
-            {stat.value}
-            {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}
-          </dd>
-          <div className="mt-5 flex items-center justify-between gap-3">
-            <dt className="text-sm text-muted-foreground">{stat.label}</dt>
-            {stat.icon ? (
-              <span className="text-foreground/30">{stat.icon}</span>
-            ) : null}
-          </div>
-        </div>
-      ))}
-    </dl>
-  ),
-);
-StatsCells.displayName = "StatsCells";

package/src/components/Stats/variants/Editorial.tsx

@@ -1,41 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { valueBase, suffixBase, gridCols, DeltaBadge } from "../parts";
-import type { Stat } from "../types";
-
-interface EditorialProps extends HTMLAttributes<HTMLDListElement> {
-  stats: Stat[];
-  columns?: 2 | 3 | 4;
-}
-
-/** editorial — label above, oversized number, hairline rule under. */
-export const StatsEditorial = forwardRef<HTMLDListElement, EditorialProps>(
-  ({ className, stats, columns = 4, ...props }, ref) => (
-    <dl ref={ref} className={cn("grid grid-cols-1 gap-x-10 gap-y-12", gridCols[columns], className)} {...props}>
-      {stats.map((stat) => (
-        <div key={stat.label} className="border-t border-border pt-6">
-          <div className="flex items-center justify-between gap-3">
-            <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-              {stat.label}
-            </dt>
-            {typeof stat.delta === "number" ? <DeltaBadge delta={stat.delta} /> : null}
-          </div>
-          <dd
-            className={cn(
-              valueBase,
-              "mt-4 text-5xl sm:text-6xl",
-              stat.accent ? "text-primary" : undefined,
-            )}
-          >
-            {stat.value}
-            {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}
-          </dd>
-          {stat.sub ? (
-            <p className="mt-3 max-w-xs text-[13px] leading-5 text-muted-foreground">{stat.sub}</p>
-          ) : null}
-        </div>
-      ))}
-    </dl>
-  ),
-);
-StatsEditorial.displayName = "StatsEditorial";

package/src/components/Stats/variants/Hairline.tsx

@@ -1,31 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { valueBase, suffixBase, gridCols } from "../parts";
-import type { Stat } from "../types";
-
-interface HairlineProps extends HTMLAttributes<HTMLDListElement> {
-  stats: Stat[];
-  columns?: 2 | 3 | 4;
-}
-
-export const StatsHairline = forwardRef<HTMLDListElement, HairlineProps>(
-  ({ className, stats, columns = 4, ...props }, ref) => (
-    <dl ref={ref} className={cn("grid grid-cols-1 gap-y-10", gridCols[columns], className)} {...props}>
-      {stats.map((stat, i) => (
-        <div
-          key={stat.label}
-          className={cn("text-center", columns > 1 && i > 0 && "sm:border-l sm:border-border")}
-        >
-          <dd className={cn(valueBase, "text-5xl", stat.accent ? "text-primary" : undefined)}>
-            {stat.value}
-            {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}
-          </dd>
-          <dt className="mt-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-            {stat.label}
-          </dt>
-        </div>
-      ))}
-    </dl>
-  ),
-);
-StatsHairline.displayName = "StatsHairline";