@wealthx/shadcn 1.0.2 → 1.2.0

package/dist/chunk-5QQVZTVZ.mjs

@@ -0,0 +1,233 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
+import {
+  CHART_PERIODS,
+  CHART_SLICE_COUNT,
+  ChartLegendItem,
+  ChartPeriodButton,
+  DATASET_ALPHAS,
+  FALLBACK_PRIMARY,
+  FALLBACK_TICK,
+  formatTooltipDate,
+  hexToRgba
+} from "./chunk-FZIXGLMV.mjs";
+import {
+  Empty,
+  EmptyDescription
+} from "./chunk-NQPOYKAQ.mjs";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "./chunk-CLIN5525.mjs";
+import {
+  useThemeVars
+} from "./chunk-FEZKMUCF.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/components/ui/income-bar-chart.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  Legend
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+function IncomeBarChart({
+  incomeData,
+  title = "Income",
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = true,
+  legendPosition = "top",
+  defaultPeriod = 6,
+  granularity = "monthly",
+  height = 280,
+  width = "100%",
+  className,
+  isLoading = false
+}) {
+  const periods = CHART_PERIODS[granularity];
+  const [period, setPeriod] = useState(defaultPeriod);
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    setPeriod(CHART_PERIODS[granularity][0]);
+  }, [granularity]);
+  const themeVars = useThemeVars();
+  const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
+  const sliced = useMemo(() => {
+    var _a, _b;
+    if (!((_a = incomeData == null ? void 0 : incomeData.months) == null ? void 0 : _a.length) || !incomeData.datasets.length) return null;
+    const count = Math.min(
+      CHART_SLICE_COUNT[granularity][period],
+      incomeData.months.length
+    );
+    const start = incomeData.months.length - count;
+    return {
+      months: incomeData.months.slice(start),
+      dates: (_b = incomeData.dates) == null ? void 0 : _b.slice(start),
+      datasets: incomeData.datasets.map((ds) => __spreadProps(__spreadValues({}, ds), {
+        data: ds.data.slice(start)
+      }))
+    };
+  }, [incomeData, period, granularity]);
+  const datasetColors = useMemo(
+    () => {
+      var _a;
+      return (_a = sliced == null ? void 0 : sliced.datasets.map(
+        (_, i) => hexToRgba(brandPrimary, DATASET_ALPHAS[i % DATASET_ALPHAS.length])
+      )) != null ? _a : [];
+    },
+    [sliced, brandPrimary]
+  );
+  const chartData = useMemo(() => {
+    if (!sliced) return { labels: [], datasets: [] };
+    return {
+      labels: sliced.months,
+      datasets: sliced.datasets.map((ds, i) => ({
+        label: ds.label,
+        data: ds.data,
+        backgroundColor: datasetColors[i],
+        hoverBackgroundColor: hexToRgba(
+          brandPrimary,
+          Math.min(DATASET_ALPHAS[i % DATASET_ALPHAS.length] + 0.15, 1)
+        ),
+        borderWidth: 0,
+        borderRadius: 0,
+        borderSkipped: false,
+        barPercentage: 0.75,
+        categoryPercentage: 0.7,
+        stack: "income"
+      }))
+    };
+  }, [sliced, datasetColors, brandPrimary]);
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 800, easing: "easeOutQuart" },
+      layout: { padding: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            title: (tooltipItems) => {
+              var _a, _b, _c, _d;
+              const idx = (_a = tooltipItems[0]) == null ? void 0 : _a.dataIndex;
+              if (idx != null && ((_b = sliced == null ? void 0 : sliced.dates) == null ? void 0 : _b[idx])) {
+                return formatTooltipDate(sliced.dates[idx], granularity);
+              }
+              return (_d = (_c = tooltipItems[0]) == null ? void 0 : _c.label) != null ? _d : "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw;
+              if (val === 0) return;
+              return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          stacked: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { font: { size: 10 }, color: FALLBACK_TICK }
+        },
+        y: {
+          display: showYAxis,
+          stacked: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            font: { size: 10 },
+            color: FALLBACK_TICK,
+            maxTicksLimit: 5,
+            padding: 8,
+            callback: (v) => `$${Number(v).toLocaleString()}`
+          }
+        }
+      }
+    }),
+    [showXAxis, showYAxis, sliced, granularity]
+  );
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn("w-full py-4 sm:py-6 gap-2", className),
+      style: { maxWidth: width, fontFamily },
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "px-3 sm:px-6", children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-sm sm:text-base", children: title }),
+          /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx("div", { className: "flex gap-0.5 sm:gap-1", children: periods.map((p) => /* @__PURE__ */ jsx(
+            ChartPeriodButton,
+            {
+              period: p,
+              active: period === p,
+              onClick: () => setPeriod(p)
+            },
+            p
+          )) }) })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { className: "px-3 sm:px-6", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { style: { height, width: "100%" } }) : !sliced ? /* @__PURE__ */ jsx(Empty, { className: "flex-none p-4", style: { height }, children: /* @__PURE__ */ jsx(EmptyDescription, { children: "No data available" }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          showLegend && legendPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: sliced.datasets.map((ds, i) => /* @__PURE__ */ jsx(
+            ChartLegendItem,
+            {
+              label: ds.label,
+              color: datasetColors[i]
+            },
+            ds.label
+          )) }),
+          /* @__PURE__ */ jsx("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            Chart,
+            {
+              type: "bar",
+              data: chartData,
+              options,
+              "aria-label": title
+            },
+            brandPrimary
+          ) }),
+          showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pt-2", children: sliced.datasets.map((ds, i) => /* @__PURE__ */ jsx(
+            ChartLegendItem,
+            {
+              label: ds.label,
+              color: datasetColors[i]
+            },
+            ds.label
+          )) })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  IncomeBarChart
+};

package/dist/{chunk-BGP2N52Z.mjs → chunk-66MI7Q4B.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadValues
@@ -18,7 +18,7 @@ function Table(_a) {
       children: /* @__PURE__ */ jsx(
         "table",
         __spreadValues({
-          className: cn("w-full caption-bottom text-sm", className),
+          className: cn("w-full caption-bottom text-body-small", className),
           "data-slot": "table"
         }, props)
       )
@@ -51,7 +51,7 @@ function TableFooter(_a) {
     "tfoot",
     __spreadValues({
       className: cn(
-        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        "border-t bg-muted/50 text-label-medium [&>tr]:last:border-b-0",
         className
       ),
       "data-slot": "table-footer"
@@ -77,7 +77,7 @@ function TableHead(_a) {
     "th",
     __spreadValues({
       className: cn(
-        "h-10 px-4 text-left align-middle font-medium whitespace-nowrap text-muted-foreground",
+        "h-10 px-4 text-left align-middle text-label-medium whitespace-nowrap text-muted-foreground",
         "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className
       ),
@@ -108,7 +108,7 @@ function TableCaption(_a) {
   return /* @__PURE__ */ jsx(
     "caption",
     __spreadValues({
-      className: cn("mt-4 text-sm text-muted-foreground", className),
+      className: cn("mt-4 text-body-small text-muted-foreground", className),
       "data-slot": "table-caption"
     }, props)
   );

package/dist/chunk-6FCGKSZX.mjs

@@ -0,0 +1,268 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
+import {
+  ChartLegendItem,
+  FALLBACK_BG,
+  FALLBACK_FOREGROUND,
+  FALLBACK_PRIMARY,
+  FALLBACK_TICK,
+  formatAbbrev
+} from "./chunk-FZIXGLMV.mjs";
+import {
+  Empty,
+  EmptyDescription
+} from "./chunk-NQPOYKAQ.mjs";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "./chunk-CLIN5525.mjs";
+import {
+  useThemeVars
+} from "./chunk-FEZKMUCF.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/borrowing-capacity-line-chart.tsx
+import { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip
+);
+var SERIES_LABELS = {
+  "current-expenses": "Based on Current Expenses",
+  "optimised-estimate": "Optimised Estimate",
+  "desired-loan-amount": "Desired Loan Amount"
+};
+var SERIES_LINE_STYLE = {
+  "current-expenses": "solid",
+  "optimised-estimate": "dashed",
+  "desired-loan-amount": "dashed"
+};
+var SERIES_BORDER_WIDTH = {
+  "current-expenses": 2,
+  "optimised-estimate": 1.5,
+  "desired-loan-amount": 2
+};
+var SERIES_RENDER_ORDER = [
+  "desired-loan-amount",
+  "optimised-estimate",
+  "current-expenses"
+];
+var SERIES_LEGEND_ORDER = [
+  "current-expenses",
+  "optimised-estimate",
+  "desired-loan-amount"
+];
+var DASH_PATTERN = [6, 4];
+function formatCurrencyFull(dollars) {
+  return new Intl.NumberFormat("en-AU", {
+    style: "currency",
+    currency: "AUD",
+    maximumFractionDigits: 0
+  }).format(dollars);
+}
+function formatDateLabel(iso) {
+  const d = /* @__PURE__ */ new Date(`${iso.slice(0, 7)}-01T00:00:00`);
+  return d.toLocaleDateString("en-US", { month: "short", year: "2-digit" });
+}
+function formatDateTooltip(iso) {
+  const d = /* @__PURE__ */ new Date(`${iso.slice(0, 7)}-01T00:00:00`);
+  return d.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+}
+function BorrowingCapacityLineChart({
+  series,
+  title = "Borrowing Capacity",
+  kpiValue,
+  height = 280,
+  width = "100%",
+  className,
+  isLoading = false,
+  showXAxis = true,
+  showYAxis = true,
+  showLegend = true,
+  legendPosition = "bottom"
+}) {
+  const themeVars = useThemeVars();
+  const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
+  const seriesColor = useMemo(
+    () => ({
+      "current-expenses": FALLBACK_FOREGROUND,
+      "optimised-estimate": FALLBACK_TICK,
+      // desired-loan-amount tracks tenant brand; no alpha conversion needed at 1.0
+      "desired-loan-amount": brandPrimary
+    }),
+    [brandPrimary]
+  );
+  const orderedSeries = useMemo(() => {
+    if (!(series == null ? void 0 : series.length)) return [];
+    return SERIES_RENDER_ORDER.map(
+      (t) => series.find((s) => s.type === t)
+    ).filter((s) => !!s && s.data.length > 0);
+  }, [series]);
+  const hasData = orderedSeries.length > 0;
+  const labels = useMemo(() => {
+    var _a;
+    if (!orderedSeries.length) return [];
+    const primary = (_a = orderedSeries.find((s) => s.type === "current-expenses")) != null ? _a : orderedSeries[0];
+    return primary.data.map((p) => p.date);
+  }, [orderedSeries]);
+  const chartData = useMemo(() => {
+    if (!orderedSeries.length) return { labels: [], datasets: [] };
+    return {
+      labels,
+      datasets: orderedSeries.map((s) => {
+        const color = seriesColor[s.type];
+        const isDashed = SERIES_LINE_STYLE[s.type] === "dashed";
+        return {
+          label: SERIES_LABELS[s.type],
+          data: s.data.map((p) => p.amountCents / 100),
+          borderColor: color,
+          backgroundColor: "transparent",
+          borderWidth: SERIES_BORDER_WIDTH[s.type],
+          borderDash: isDashed ? DASH_PATTERN : [],
+          tension: s.type === "current-expenses" ? 0.4 : 0,
+          pointRadius: 0,
+          pointHoverRadius: s.type === "desired-loan-amount" ? 0 : 5,
+          pointHoverBackgroundColor: FALLBACK_BG,
+          pointHoverBorderColor: color,
+          pointHoverBorderWidth: 2,
+          pointHitRadius: 12
+        };
+      })
+    };
+  }, [labels, orderedSeries, seriesColor]);
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 800, easing: "easeOutQuart" },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          enabled: true,
+          mode: "index",
+          intersect: false,
+          filter: (item) => item.dataset.label !== SERIES_LABELS["desired-loan-amount"],
+          displayColors: true,
+          boxWidth: 10,
+          boxHeight: 2,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600, family: fontFamily },
+          bodyFont: { size: 12, weight: 500, family: fontFamily },
+          callbacks: {
+            title: (items) => {
+              var _a;
+              const iso = (_a = items[0]) == null ? void 0 : _a.label;
+              return iso ? formatDateTooltip(iso) : "";
+            },
+            label: (ctx) => {
+              var _a;
+              const dollars = (_a = ctx.parsed.y) != null ? _a : 0;
+              return ` ${ctx.dataset.label}: ${formatCurrencyFull(dollars)}`;
+            }
+          }
+        }
+      },
+      interaction: { mode: "index", intersect: false },
+      scales: {
+        x: {
+          type: "category",
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            autoSkip: true,
+            maxTicksLimit: 7,
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10, family: fontFamily },
+            callback: function(_, index) {
+              const iso = labels[index];
+              return iso ? formatDateLabel(iso) : "";
+            }
+          }
+        },
+        y: {
+          display: showYAxis,
+          position: "left",
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxTicksLimit: 6,
+            padding: 8,
+            color: FALLBACK_TICK,
+            font: { size: 10, family: fontFamily },
+            callback: (v) => formatAbbrev(Number(v))
+          }
+        }
+      }
+    }),
+    [showXAxis, showYAxis, labels, fontFamily]
+  );
+  const legendEl = useMemo(() => {
+    if (!showLegend || !hasData) return null;
+    const items = SERIES_LEGEND_ORDER.map(
+      (t) => orderedSeries.find((s) => s.type === t)
+    ).filter((s) => !!s);
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1.5", children: items.map((s) => /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: SERIES_LABELS[s.type],
+        color: seriesColor[s.type],
+        lineStyle: SERIES_LINE_STYLE[s.type]
+      },
+      s.type
+    )) });
+  }, [showLegend, hasData, orderedSeries, seriesColor]);
+  const legendWrapper = legendEl ? /* @__PURE__ */ jsx("div", { className: legendPosition === "top" ? "mb-3" : "mt-3", children: legendEl }) : null;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn("w-full py-4 sm:py-6 gap-2", className),
+      style: { maxWidth: width, fontFamily },
+      children: [
+        /* @__PURE__ */ jsx(CardHeader, { className: "px-3 sm:px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-sm sm:text-base uppercase tracking-wider", children: title }),
+          kpiValue != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xl font-bold tabular-nums", children: formatCurrencyFull(kpiValue / 100) })
+        ] }) }),
+        /* @__PURE__ */ jsx(CardContent, { className: "px-3 sm:px-6", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { style: { height, width: "100%" } }) : !hasData ? /* @__PURE__ */ jsx(Empty, { className: "flex-none p-4", style: { height }, children: /* @__PURE__ */ jsx(EmptyDescription, { children: "No borrowing capacity data available" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          legendPosition === "top" && legendWrapper,
+          /* @__PURE__ */ jsx("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            Chart,
+            {
+              type: "line",
+              data: chartData,
+              options,
+              "aria-label": title
+            }
+          ) }),
+          legendPosition === "bottom" && legendWrapper
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  BorrowingCapacityLineChart
+};

package/dist/{chunk-CGOKTPXU.mjs → chunk-6JQFUE5I.mjs}

@@ -1,9 +1,9 @@
 import {
   useThemeVars
-} from "./chunk-OXQQNQZI.mjs";
+} from "./chunk-FEZKMUCF.mjs";
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -39,36 +39,33 @@ function TooltipContent(_a) {
   var _b = _a, {
     className,
     sideOffset = 8,
+    side,
     children,
     style
   } = _b, props = __objRest(_b, [
     "className",
     "sideOffset",
+    "side",
     "children",
     "style"
   ]);
   const themeVars = useThemeVars();
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Positioner, { sideOffset, children: [
-    /* @__PURE__ */ jsx(
-      TooltipPrimitive.Popup,
-      __spreadProps(__spreadValues({
-        className: cn(
-          "z-50 w-fit animate-in bg-brand-secondary px-3 py-1.5 text-xs text-balance text-brand-secondary-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards",
-          className
-        ),
-        "data-slot": "tooltip-content",
-        style: __spreadValues(__spreadValues({}, themeVars), style)
-      }, props), {
-        children
-      })
-    ),
-    /* @__PURE__ */ jsx(
-      TooltipPrimitive.Arrow,
-      {
-        className: "z-50 size-2.5 rotate-45 bg-brand-secondary"
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, { sideOffset, side, children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Popup,
+    __spreadProps(__spreadValues({
+      className: cn(
+        "relative z-50 w-fit animate-in overflow-visible bg-brand-secondary px-3 py-1.5 text-caption text-balance text-brand-secondary-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards",
+        className
+      ),
+      "data-slot": "tooltip-content",
+      style: __spreadValues(__spreadValues({}, themeVars), style)
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 rotate-45 bg-brand-secondary data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1 data-[side=top]:-bottom-1" })
+      ]
+    })
+  ) }) });
 }
 
 export {

package/dist/{chunk-Z3MK2KKZ.mjs → chunk-7DHU4VGG.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -33,7 +33,11 @@ function InputOTP(_a) {
   );
 }
 function InputOTPGroup(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
@@ -57,7 +61,7 @@ function InputOTPSlot(_a) {
     "div",
     __spreadProps(__spreadValues({
       className: cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:border-l aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-body-small shadow-xs transition-all outline-none first:border-l aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       ),
       "data-active": isActive,