@wealthx/shadcn 1.1.0 → 1.2.0

package/dist/components/ui/cashflow-bar-chart.js

@@ -77,8 +77,40 @@ function useThemeVars() {
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-large",
+            "display-medium",
+            "display-small",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "button",
+            "button-xs",
+            "caption",
+            "overline",
+            "code"
+          ]
+        }
+      ]
+    }
+  }
+});
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/components/ui/card.tsx
@@ -114,7 +146,7 @@ function CardTitle(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     __spreadValues({
-      className: cn("leading-none font-semibold", className),
+      className: cn("text-label-large", className),
       "data-slot": "card-title"
     }, props)
   );
@@ -183,7 +215,7 @@ function EmptyDescription(_a) {
     "div",
     __spreadValues({
       className: cn(
-        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        "text-body-small leading-relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       ),
       "data-slot": "empty-description"
@@ -259,7 +291,7 @@ Slot.displayName = "Slot";
 // src/components/ui/button.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority2.cva)(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-sm font-medium whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-button whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -274,7 +306,7 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        xs: "h-6 gap-1 px-2 text-button-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 px-6 has-[>svg]:px-4",
         icon: "size-9",
@@ -340,6 +372,8 @@ function hexToRgba(hex, alpha) {
   const b = parseInt(full.slice(4, 6), 16);
   return `rgba(${r},${g},${b},${alpha})`;
 }
+var FALLBACK_PRIMARY = "#33FF99";
+var FALLBACK_SECONDARY = "#162029";
 var FALLBACK_TICK = "#9EAAB5";
 function formatTooltipDate(iso, granularity) {
   const d = new Date(iso);
@@ -351,18 +385,32 @@ function formatTooltipDate(iso, granularity) {
 function ChartPeriodButton({
   period,
   active,
-  onClick
+  onClick,
+  unit = "M"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Button, { variant: active ? "default" : "outline", size: "xs", onClick, children: [
-    period,
-    "M"
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Button,
+    {
+      variant: active ? "default" : "outline",
+      size: "xs",
+      onClick,
+      children: [
+        period,
+        unit
+      ]
+    }
+  );
 }
 
 // src/components/ui/cashflow-bar-chart.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 import_chart.Chart.register(import_chart.CategoryScale, import_chart.LinearScale, import_chart.BarElement, import_chart.Tooltip, import_chart.Legend);
-function LegendItem({ label, fillColor, strokeColor, strokeWidth = 1.5 }) {
+function LegendItem({
+  label,
+  fillColor,
+  strokeColor,
+  strokeWidth = 1.5
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
@@ -379,7 +427,10 @@ function LegendItem({ label, fillColor, strokeColor, strokeWidth = 1.5 }) {
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[11px] text-muted-foreground leading-none", children: label })
   ] });
 }
-function ChartLegend({ primary, secondary }) {
+function ChartLegend({
+  primary,
+  secondary
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       LegendItem,
@@ -418,8 +469,6 @@ function ChartLegend({ primary, secondary }) {
   ] });
 }
 var PERIODS = [3, 6, 12];
-var FALLBACK_PRIMARY = "#33FF99";
-var FALLBACK_SECONDARY = "#162029";
 function CashflowBarChart({
   cashflowData,
   title = "Cashflow",
@@ -428,6 +477,7 @@ function CashflowBarChart({
   showYAxis = true,
   legendPosition = "top",
   defaultPeriod = 6,
+  showPeriodSelector = true,
   height = 280,
   width = "100%",
   className,
@@ -437,6 +487,7 @@ function CashflowBarChart({
   const themeVars = useThemeVars();
   const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
   const brandSecondary = themeVars["--theme-secondary"] || FALLBACK_SECONDARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
   const sliced = (0, import_react3.useMemo)(() => {
     var _a;
     if (!((_a = cashflowData == null ? void 0 : cashflowData.data) == null ? void 0 : _a.length)) return null;
@@ -496,73 +547,76 @@ function CashflowBarChart({
       ]
     };
   }, [sliced, brandPrimary, brandSecondary]);
-  const options = (0, import_react3.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.data[idx]) == null ? void 0 : _b.date)) {
-              return formatTooltipDate(sliced.data[idx].date, "monthly");
-            }
-            return (_d = (_c = tooltipItems[0]) == null ? void 0 : _c.label) != null ? _d : "";
-          },
-          label: (ctx) => {
-            const val = ctx.raw;
-            if (val === 0) return null;
-            if (ctx.datasetIndex === 2) {
-              const d = sliced == null ? void 0 : sliced.data[ctx.dataIndex];
-              if (!d) return null;
-              const lbl = d.overspending > 0 ? "Over Spending" : "Surplus Income";
-              return ` ${lbl}: $${val.toLocaleString()}`;
+  const options = (0, import_react3.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.data[idx]) == null ? void 0 : _b.date)) {
+                return formatTooltipDate(sliced.data[idx].date, "monthly");
+              }
+              return (_d = (_c = tooltipItems[0]) == null ? void 0 : _c.label) != null ? _d : "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw;
+              if (val === 0) return;
+              if (ctx.datasetIndex === 2) {
+                const d = sliced == null ? void 0 : sliced.data[ctx.dataIndex];
+                if (!d) return;
+                const lbl = d.overspending > 0 ? "Over Spending" : "Surplus Income";
+                return ` ${lbl}: $${val.toLocaleString()}`;
+              }
+              return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
             }
-            return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
           }
         }
-      }
-    },
-    scales: {
-      x: {
-        display: showXAxis,
-        grid: { display: false },
-        border: { display: false },
-        ticks: { font: { size: 10 }, color: FALLBACK_TICK }
       },
-      y: {
-        display: showYAxis,
-        grid: { display: false },
-        border: { display: false },
-        ticks: {
-          font: { size: 10 },
-          color: FALLBACK_TICK,
-          maxTicksLimit: 5,
-          padding: 8,
-          callback: (v) => `$${Number(v).toLocaleString()}`
+      scales: {
+        x: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { font: { size: 10 }, color: FALLBACK_TICK }
+        },
+        y: {
+          display: showYAxis,
+          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]);
+    }),
+    [showXAxis, showYAxis, sliced]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Card,
     {
       className: cn("w-full py-4 sm:py-6 gap-2", className),
-      style: { maxWidth: width },
+      style: { maxWidth: width, fontFamily },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardHeader, { className: "px-3 sm:px-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-sm sm:text-base", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardAction, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-0.5 sm:gap-1", children: PERIODS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-sm sm:text-base uppercase tracking-wider", children: title }),
+          showPeriodSelector && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardAction, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-0.5 sm:gap-1", children: PERIODS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             ChartPeriodButton,
             {
               period: p,

package/dist/components/ui/cashflow-bar-chart.mjs

@@ -1,15 +1,15 @@
 import {
   CashflowBarChart
-} from "../../chunk-UEL4RD5P.mjs";
-import "../../chunk-3EQP72AW.mjs";
-import "../../chunk-HS7TFG7V.mjs";
-import "../../chunk-YN5SYTOO.mjs";
-import "../../chunk-SLWCCURD.mjs";
-import "../../chunk-4AJ5HWHD.mjs";
+} from "../../chunk-SMQ3DG25.mjs";
+import "../../chunk-D6ID6M4V.mjs";
+import "../../chunk-FZIXGLMV.mjs";
+import "../../chunk-NQPOYKAQ.mjs";
+import "../../chunk-CLIN5525.mjs";
+import "../../chunk-2I5S2AMY.mjs";
 import "../../chunk-DBHJ5KC3.mjs";
-import "../../chunk-OXQQNQZI.mjs";
+import "../../chunk-FEZKMUCF.mjs";
 import "../../chunk-QOJ2DQD6.mjs";
-import "../../chunk-V7CNWJT3.mjs";
+import "../../chunk-VLQZANBF.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {
   CashflowBarChart

package/dist/components/ui/checkbox.js

@@ -1,5 +1,4 @@
 "use strict";
-"use client";
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -61,8 +60,40 @@ var import_checkbox = require("@base-ui/react/checkbox");
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-large",
+            "display-medium",
+            "display-small",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "button",
+            "button-xs",
+            "caption",
+            "overline",
+            "code"
+          ]
+        }
+      ]
+    }
+  }
+});
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/components/ui/checkbox.tsx
@@ -73,7 +104,7 @@ function Checkbox(_a) {
     import_checkbox.Checkbox.Root,
     __spreadProps(__spreadValues({
       className: cn(
-        "peer group inline-flex size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-all outline-none",
+        "peer group inline-flex size-4 shrink-0 border border-input shadow-xs transition-all outline-none",
         "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
@@ -152,8 +183,8 @@ function CheckboxCard(_a) {
           }, props)
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium leading-none", children: label }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-muted-foreground", children: description }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-label-medium leading-none", children: label }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-body-small text-muted-foreground", children: description }) : null
         ] })
       ]
     }

package/dist/components/ui/checkbox.mjs

@@ -1,9 +1,8 @@
-"use client";
 import {
   Checkbox,
   CheckboxCard
-} from "../../chunk-JF4PHPD5.mjs";
-import "../../chunk-V7CNWJT3.mjs";
+} from "../../chunk-RGVKLTLH.mjs";
+import "../../chunk-VLQZANBF.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {
   Checkbox,

package/dist/components/ui/chip.js

@@ -67,8 +67,40 @@ var import_lucide_react = require("lucide-react");
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-large",
+            "display-medium",
+            "display-small",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "button",
+            "button-xs",
+            "caption",
+            "overline",
+            "code"
+          ]
+        }
+      ]
+    }
+  }
+});
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/components/ui/badge.tsx
@@ -124,13 +156,16 @@ Slot.displayName = "Slot";
 // src/components/ui/badge.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium font-sans whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium font-sans whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary: "bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
         destructive: "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        success: "bg-success text-success-foreground [a&]:hover:bg-success/90",
+        warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90",
+        info: "bg-info text-info-foreground [a&]:hover:bg-info/90",
         outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         link: "text-primary underline-offset-4 [a&]:hover:underline"

package/dist/components/ui/chip.mjs

@@ -1,9 +1,9 @@
 import {
   Chip
-} from "../../chunk-VG6UF6UT.mjs";
-import "../../chunk-E3K6O4FZ.mjs";
+} from "../../chunk-RP3SQYA3.mjs";
+import "../../chunk-WAZD7NFU.mjs";
 import "../../chunk-DBHJ5KC3.mjs";
-import "../../chunk-V7CNWJT3.mjs";
+import "../../chunk-VLQZANBF.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {
   Chip

package/dist/components/ui/combobox.js

@@ -68,8 +68,40 @@ var import_combobox = require("@base-ui/react/combobox");
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-large",
+            "display-medium",
+            "display-small",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "button",
+            "button-xs",
+            "caption",
+            "overline",
+            "code"
+          ]
+        }
+      ]
+    }
+  }
+});
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/components/ui/combobox.tsx
@@ -94,7 +126,7 @@ function ComboboxTrigger(_a) {
       "data-slot": "combobox-trigger",
       "data-size": size,
       className: cn(
-        "flex w-fit items-center justify-between gap-2 border border-input bg-transparent px-3 py-2 text-body-small whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 data-[popup-open]:border-primary data-[popup-open]:ring-[3px] data-[popup-open]:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex w-fit items-center justify-between gap-2 border border-input bg-transparent px-3 py-2 text-body-small whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 data-[popup-open]:border-primary data-[popup-open]:ring-[3px] data-[popup-open]:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:font-normal data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       )
     }, props), {
@@ -110,24 +142,27 @@ function ComboboxValue(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_combobox.Combobox.Value, __spreadValues({ "data-slot": "combobox-value" }, props));
 }
 function ComboboxInput(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-slot": "combobox-input-wrapper", className: "flex items-center gap-2 border-b border-border px-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.SearchIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_combobox.Combobox.Input,
-      __spreadValues({
-        "data-slot": "combobox-input",
-        className: cn(
-          "h-9 w-full min-w-0 bg-transparent py-1 text-body-small outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-          className
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-slot": "combobox-input-wrapper",
+      className: "flex items-center gap-2 border-b border-border px-3",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.SearchIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_combobox.Combobox.Input,
+          __spreadValues({
+            "data-slot": "combobox-input",
+            className: cn(
+              "h-9 w-full min-w-0 bg-transparent py-1 text-body-small outline-none placeholder:font-normal placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            )
+          }, props)
         )
-      }, props)
-    )
-  ] });
+      ]
+    }
+  );
 }
 function ComboboxContent(_a) {
   var _b = _a, {
@@ -151,11 +186,7 @@ function ComboboxContent(_a) {
   ) }) });
 }
 function ComboboxList(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_combobox.Combobox.List,
     __spreadValues({
@@ -168,19 +199,13 @@ function ComboboxList(_a) {
   );
 }
 function ComboboxItem(_a) {
-  var _b = _a, {
-    className,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children"
-  ]);
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_combobox.Combobox.Item,
     __spreadProps(__spreadValues({
       "data-slot": "combobox-item",
       className: cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-body-small outline-hidden select-none data-[highlighted]:bg-primary/5 data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-body-small outline-hidden select-none data-highlighted:bg-primary/5 data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       )
     }, props), {
@@ -199,16 +224,15 @@ function ComboboxItem(_a) {
   );
 }
 function ComboboxEmpty(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_combobox.Combobox.Empty,
     __spreadValues({
       "data-slot": "combobox-empty",
-      className: `text-body-small ${cn("py-6 text-center text-muted-foreground empty:hidden", className)}`
+      className: cn(
+        "text-body-small py-6 text-center text-muted-foreground empty:hidden",
+        className
+      )
     }, props)
   );
 }
@@ -217,25 +241,20 @@ function ComboboxGroup(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_combobox.Combobox.Group, __spreadValues({ "data-slot": "combobox-group" }, props));
 }
 function ComboboxGroupLabel(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_combobox.Combobox.GroupLabel,
     __spreadValues({
       "data-slot": "combobox-group-label",
-      className: `text-label-small ${cn("px-2 py-1.5 uppercase text-muted-foreground", className)}`
+      className: cn(
+        "text-label-small px-2 py-1.5 uppercase text-muted-foreground",
+        className
+      )
     }, props)
   );
 }
 function ComboboxSeparator(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     __spreadValues({