@mikenotthepope/substrateui 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -400,18 +400,41 @@ var DrawerComponent = Object.assign(Drawer, {
 // components/ui/Avatar.tsx
 import * as React5 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var avatarVariants = cva4(
+  "relative flex h-10 w-10 border-2 overflow-hidden",
+  {
+    variants: {
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-none",
+        rounded: "rounded-lg",
+        hexagon: "rounded-none border-0 [clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]",
+        diamond: "rounded-none rotate-45 border-2",
+        squircle: "rounded-none border-0 [clip-path:url(#squircle)]",
+        shield: "rounded-none border-0 [clip-path:polygon(50%_0%,100%_0%,100%_70%,50%_100%,0%_70%,0%_0%)]"
+      }
+    },
+    defaultVariants: {
+      shape: "circle"
+    }
+  }
+);
 var Avatar = React5.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx6(
+  var _b = _a, { className, shape = "circle", children } = _b, props = __objRest(_b, ["className", "shape", "children"]);
+  return /* @__PURE__ */ jsxs2(
     AvatarPrimitive.Root,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       ref,
-      className: cn(
-        "relative flex h-10 w-10 border-2 rounded-full overflow-hidden",
-        className
-      )
-    }, props)
+      "data-shape": shape,
+      className: cn(avatarVariants({ shape }), className)
+    }, props), {
+      children: [
+        shape === "squircle" && /* @__PURE__ */ jsx6("svg", { width: "0", height: "0", className: "absolute", children: /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsx6("clipPath", { id: "squircle", clipPathUnits: "objectBoundingBox", children: /* @__PURE__ */ jsx6("path", { d: "M 0.5 0 C 0.9 0, 1 0.1, 1 0.5 C 1 0.9, 0.9 1, 0.5 1 C 0.1 1, 0 0.9, 0 0.5 C 0 0.1, 0.1 0, 0.5 0" }) }) }) }),
+        children
+      ]
+    })
   );
 });
 Avatar.displayName = "Avatar";
@@ -421,7 +444,10 @@ var AvatarImage = React5.forwardRef((_a, ref) => {
     AvatarPrimitive.Image,
     __spreadValues({
       ref,
-      className: cn("aspect-square h-full w-full", className)
+      className: cn(
+        "aspect-square h-full w-full [[data-shape=diamond]>&]:-rotate-45",
+        className
+      )
     }, props)
   );
 });
@@ -433,7 +459,10 @@ var AvatarFallback = React5.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "flex h-full w-full items-center justify-center rounded-full bg-primary text-primary-foreground font-head text-sm",
+        "flex h-full w-full items-center justify-center bg-primary text-primary-foreground font-head text-sm",
+        "[[data-shape=circle]>&]:rounded-full",
+        "[[data-shape=rounded]>&]:rounded-lg",
+        "[[data-shape=diamond]>&]:-rotate-45",
         className
       )
     }, props)
@@ -454,7 +483,7 @@ import React6, {
   useContext,
   useState
 } from "react";
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var TabsValueContext = createContext({ setValue: () => {
 } });
 function TabsRoot(_a) {
@@ -530,8 +559,8 @@ var TabsContent = React6.forwardRef((_a, ref) => {
 });
 TabsContent.displayName = "TabsContent";
 function TabsMore({ children, className, label = "More" }) {
-  return /* @__PURE__ */ jsxs2(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ jsxs3(
       DropdownMenu2.Trigger,
       {
         className: cn(
@@ -653,10 +682,10 @@ Textarea.displayName = "Textarea";
 // components/ui/Checkbox.tsx
 import * as React10 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { cva as cva4 } from "class-variance-authority";
+import { cva as cva5 } from "class-variance-authority";
 import { Check } from "lucide-react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var checkboxVariants = cva4("border-2 shrink-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", {
+var checkboxVariants = cva5("border-2 shrink-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", {
   variants: {
     variant: {
       default: "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
@@ -691,9 +720,9 @@ Checkbox.displayName = "Checkbox";
 // components/ui/RadioGroup.tsx
 import * as React11 from "react";
 import * as RadioPrimitive from "@radix-ui/react-radio-group";
-import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
-var radioVariants = cva5("border-2 border-border shrink-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", {
+import { cva as cva6 } from "class-variance-authority";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var radioVariants = cva6("border-2 border-border shrink-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", {
   variants: {
     variant: {
       default: "",
@@ -704,14 +733,19 @@ var radioVariants = cva5("border-2 border-border shrink-0 cursor-pointer disable
       sm: "h-4 w-4",
       md: "h-5 w-5",
       lg: "h-6 w-6"
+    },
+    shape: {
+      circle: "rounded-full",
+      diamond: "rotate-45"
     }
   },
   defaultVariants: {
     variant: "default",
-    size: "md"
+    size: "md",
+    shape: "circle"
   }
 });
-var radioIndicatorVariants = cva5("flex", {
+var radioIndicatorVariants = cva6("flex", {
   variants: {
     variant: {
       default: "bg-primary border-2 border-border",
@@ -719,14 +753,19 @@ var radioIndicatorVariants = cva5("flex", {
       solid: "bg-border"
     },
     size: {
-      sm: "h-2 w-2",
-      md: "h-2.5 w-2.5",
-      lg: "h-3.5 w-3.5"
+      sm: "h-2.5 w-2.5",
+      md: "h-3 w-3",
+      lg: "h-4 w-4"
+    },
+    shape: {
+      circle: "rounded-full",
+      diamond: ""
     }
   },
   defaultVariants: {
     variant: "default",
-    size: "md"
+    size: "md",
+    shape: "circle"
   }
 });
 var RadioGroupRoot = React11.forwardRef((_a, ref) => {
@@ -741,15 +780,15 @@ var RadioGroupRoot = React11.forwardRef((_a, ref) => {
 });
 RadioGroupRoot.displayName = "RadioGroup";
 var RadioGroupItem = React11.forwardRef((_a, ref) => {
-  var _b = _a, { className, size, variant, children } = _b, props = __objRest(_b, ["className", "size", "variant", "children"]);
-  return /* @__PURE__ */ jsxs3(
+  var _b = _a, { className, size, variant, shape, children } = _b, props = __objRest(_b, ["className", "size", "variant", "shape", "children"]);
+  return /* @__PURE__ */ jsxs4(
     RadioPrimitive.Item,
     __spreadProps(__spreadValues({
       ref,
-      className: cn(radioVariants({ size, variant }), className)
+      className: cn(radioVariants({ size, variant, shape }), className)
     }, props), {
       children: [
-        /* @__PURE__ */ jsx12(RadioPrimitive.Indicator, { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx12("span", { className: radioIndicatorVariants({ size, variant }) }) }),
+        /* @__PURE__ */ jsx12(RadioPrimitive.Indicator, { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx12("span", { className: radioIndicatorVariants({ size, variant, shape }) }) }),
         children
       ]
     })
@@ -764,11 +803,11 @@ var RadioGroup = Object.assign(RadioGroupRoot, {
 import * as React12 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check as Check2, ChevronDown, ChevronUp } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var SelectRoot = SelectPrimitive.Root;
 var SelectTrigger = React12.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     SelectPrimitive.Trigger,
     __spreadProps(__spreadValues({
       ref,
@@ -788,7 +827,7 @@ SelectTrigger.displayName = "Select.Trigger";
 var SelectValue = SelectPrimitive.Value;
 var SelectContent = React12.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
-  return /* @__PURE__ */ jsx13(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx13(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
     SelectPrimitive.Content,
     __spreadProps(__spreadValues({
       ref,
@@ -819,7 +858,7 @@ SelectContent.displayName = "Select.Content";
 var SelectGroup = SelectPrimitive.Group;
 var SelectItem = React12.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     SelectPrimitive.Item,
     __spreadProps(__spreadValues({
       ref,
@@ -879,10 +918,10 @@ Switch.displayName = "Switch";
 // components/ui/Slider.tsx
 import * as React14 from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var Slider = React14.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     SliderPrimitive.Root,
     __spreadProps(__spreadValues({
       ref,
@@ -940,7 +979,7 @@ function Text(_a) {
 
 // components/ui/FormLayout.tsx
 import * as React15 from "react";
-import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var FormLayoutRoot = React15.forwardRef(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -951,14 +990,14 @@ FormLayoutRoot.displayName = "FormLayout";
 var FormSection = React15.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, title, description, children } = _b, props = __objRest(_b, ["className", "title", "description", "children"]);
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "fieldset",
       __spreadProps(__spreadValues({
         ref,
         className: cn("space-y-6 border-0 p-0 m-0", className)
       }, props), {
         children: [
-          (title || description) && /* @__PURE__ */ jsxs6("div", { className: "space-y-1 border-b-2 border-border pb-4", children: [
+          (title || description) && /* @__PURE__ */ jsxs7("div", { className: "space-y-1 border-b-2 border-border pb-4", children: [
             title && /* @__PURE__ */ jsx17("legend", { className: "font-head text-lg font-normal", children: title }),
             description && /* @__PURE__ */ jsx17("p", { className: "font-sans text-sm text-muted-foreground", children: description })
           ] }),
@@ -972,8 +1011,8 @@ FormSection.displayName = "FormLayout.Section";
 var FormField = React15.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, label, htmlFor, description, error, required, children } = _b, props = __objRest(_b, ["className", "label", "htmlFor", "description", "error", "required", "children"]);
-    return /* @__PURE__ */ jsxs6("div", __spreadProps(__spreadValues({ ref, className: cn("space-y-2", className) }, props), { children: [
-      label && /* @__PURE__ */ jsxs6(Label, { htmlFor, children: [
+    return /* @__PURE__ */ jsxs7("div", __spreadProps(__spreadValues({ ref, className: cn("space-y-2", className) }, props), { children: [
+      label && /* @__PURE__ */ jsxs7(Label, { htmlFor, children: [
         label,
         required && /* @__PURE__ */ jsx17("span", { className: "ml-0.5 text-destructive", "aria-hidden": "true", children: "*" })
       ] }),
@@ -1011,7 +1050,7 @@ var FormActions = React15.forwardRef(
       __spreadValues({
         ref,
         className: cn(
-          "flex items-center gap-3 border-t-2 border-border pt-6",
+          "flex items-center gap-3 border-t-2 border-border mt-6 pt-6",
           alignMap[align],
           className
         )
@@ -1028,11 +1067,11 @@ var FormLayout = Object.assign(FormLayoutRoot, {
 });
 
 // components/ui/Link.tsx
-import { cva as cva6 } from "class-variance-authority";
+import { cva as cva7 } from "class-variance-authority";
 import React16 from "react";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import { jsx as jsx18 } from "react/jsx-runtime";
-var linkVariants = cva6(
+var linkVariants = cva7(
   "font-head inline-flex items-center gap-1 cursor-pointer transition-colors duration-200 underline-offset-4",
   {
     variants: {
@@ -1085,9 +1124,9 @@ Link.displayName = "Link";
 
 // components/ui/Alert.tsx
 import * as React17 from "react";
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva8 } from "class-variance-authority";
 import { jsx as jsx19 } from "react/jsx-runtime";
-var alertVariants = cva7(
+var alertVariants = cva8(
   "relative w-full border-2 border-border p-4",
   {
     variants: {
@@ -1151,11 +1190,11 @@ var AlertComponent = Object.assign(AlertRoot, {
 });
 
 // components/ui/IconButton.tsx
-import { cva as cva8 } from "class-variance-authority";
+import { cva as cva9 } from "class-variance-authority";
 import React18 from "react";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { jsx as jsx20 } from "react/jsx-runtime";
-var iconButtonVariants = cva8(
+var iconButtonVariants = cva9(
   "font-head transition-all outline-hidden cursor-pointer duration-200 inline-flex justify-center items-center disabled:opacity-60 disabled:cursor-not-allowed border-2 border-border",
   {
     variants: {
@@ -1208,9 +1247,9 @@ IconButton.displayName = "IconButton";
 
 // components/ui/Loader.tsx
 import * as React19 from "react";
-import { cva as cva9 } from "class-variance-authority";
+import { cva as cva10 } from "class-variance-authority";
 import { jsx as jsx21 } from "react/jsx-runtime";
-var loaderVariants = cva9("flex gap-1", {
+var loaderVariants = cva10("flex gap-1", {
   variants: {
     variant: {
       default: "[&>div]:bg-primary [&>div]:border-border",
@@ -1275,12 +1314,12 @@ Loader.displayName = "Loader";
 import * as React20 from "react";
 import * as ReactDialog from "@radix-ui/react-dialog";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { cva as cva10 } from "class-variance-authority";
+import { cva as cva11 } from "class-variance-authority";
 import { X } from "lucide-react";
-import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 var Dialog = ReactDialog.Root;
 var DialogTrigger = ReactDialog.Trigger;
-var overlayVariants = cva10(
+var overlayVariants = cva11(
   "fixed inset-0 z-50 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
   {
     variants: {
@@ -1307,7 +1346,7 @@ var DialogOverlay = React20.forwardRef(
   }
 );
 DialogOverlay.displayName = "Dialog.Overlay";
-var dialogContentVariants = cva10(
+var dialogContentVariants = cva11(
   "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] border-2 border-border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
   {
     variants: {
@@ -1327,9 +1366,9 @@ var dialogContentVariants = cva10(
 var DialogContent = React20.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, size = "md", className, overlay } = _b, props = __objRest(_b, ["children", "size", "className", "overlay"]);
-    return /* @__PURE__ */ jsxs7(ReactDialog.Portal, { children: [
+    return /* @__PURE__ */ jsxs8(ReactDialog.Portal, { children: [
       /* @__PURE__ */ jsx22(DialogOverlay, __spreadValues({}, overlay)),
-      /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsxs8(
         ReactDialog.Content,
         __spreadProps(__spreadValues({
           ref,
@@ -1347,7 +1386,7 @@ var DialogContent = React20.forwardRef(
 DialogContent.displayName = "Dialog.Content";
 var DialogHeader = React20.forwardRef((_a, ref) => {
   var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     __spreadProps(__spreadValues({
       ref,
@@ -1405,9 +1444,9 @@ var DialogComponent = Object.assign(Dialog, {
 
 // components/ui/Divider.tsx
 import * as React21 from "react";
-import { cva as cva11 } from "class-variance-authority";
-import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
-var dividerVariants = cva11("border-border", {
+import { cva as cva12 } from "class-variance-authority";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+var dividerVariants = cva12("border-border", {
   variants: {
     orientation: {
       horizontal: "w-full border-t-2",
@@ -1422,7 +1461,7 @@ var Divider = React21.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, orientation = "horizontal", label } = _b, props = __objRest(_b, ["className", "orientation", "label"]);
     if (label && orientation === "horizontal") {
-      return /* @__PURE__ */ jsxs8(
+      return /* @__PURE__ */ jsxs9(
         "div",
         __spreadProps(__spreadValues({
           ref,
@@ -1451,9 +1490,9 @@ Divider.displayName = "Divider";
 
 // components/ui/Stack.tsx
 import * as React22 from "react";
-import { cva as cva12 } from "class-variance-authority";
+import { cva as cva13 } from "class-variance-authority";
 import { jsx as jsx24 } from "react/jsx-runtime";
-var stackVariants = cva12("flex", {
+var stackVariants = cva13("flex", {
   variants: {
     direction: {
       vertical: "flex-col",
@@ -1523,9 +1562,9 @@ Stack.displayName = "Stack";
 
 // components/ui/Flex.tsx
 import * as React23 from "react";
-import { cva as cva13 } from "class-variance-authority";
+import { cva as cva14 } from "class-variance-authority";
 import { jsx as jsx25 } from "react/jsx-runtime";
-var flexVariants = cva13("flex", {
+var flexVariants = cva14("flex", {
   variants: {
     direction: {
       row: "flex-row",
@@ -1607,9 +1646,9 @@ Flex.displayName = "Flex";
 
 // components/ui/Grid.tsx
 import * as React24 from "react";
-import { cva as cva14 } from "class-variance-authority";
+import { cva as cva15 } from "class-variance-authority";
 import { jsx as jsx26 } from "react/jsx-runtime";
-var gridVariants = cva14("grid", {
+var gridVariants = cva15("grid", {
   variants: {
     columns: {
       1: "grid-cols-1",
@@ -1700,9 +1739,9 @@ Grid.displayName = "Grid";
 
 // components/ui/Container.tsx
 import * as React25 from "react";
-import { cva as cva15 } from "class-variance-authority";
+import { cva as cva16 } from "class-variance-authority";
 import { jsx as jsx27 } from "react/jsx-runtime";
-var containerVariants = cva15("mx-auto px-4 sm:px-6 lg:px-8", {
+var containerVariants = cva16("mx-auto px-4 sm:px-6 lg:px-8", {
   variants: {
     size: {
       sm: "max-w-2xl",
@@ -1746,7 +1785,7 @@ Container.displayName = "Container";
 import * as React26 from "react";
 import * as AccordionPrimitives from "@radix-ui/react-accordion";
 import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
 var AccordionRoot = React26.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx28(
@@ -1774,7 +1813,7 @@ var AccordionItem = React26.forwardRef((_a, ref) => {
 AccordionItem.displayName = "Accordion.Item";
 var AccordionTrigger = React26.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx28(AccordionPrimitives.Header, { className: "flex", children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx28(AccordionPrimitives.Header, { className: "flex", children: /* @__PURE__ */ jsxs10(
     AccordionPrimitives.Trigger,
     __spreadProps(__spreadValues({
       ref,
@@ -1817,7 +1856,7 @@ var AccordionComponent = Object.assign(AccordionRoot, {
 // components/ui/ScrollArea.tsx
 import * as React27 from "react";
 import * as ScrollAreaPrimitives from "@radix-ui/react-scroll-area";
-import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
 var ScrollBar = React27.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsx29(
@@ -1839,7 +1878,7 @@ var ScrollBar = React27.forwardRef((_a, ref) => {
 ScrollBar.displayName = "ScrollArea.ScrollBar";
 var ScrollAreaRoot = React27.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     ScrollAreaPrimitives.Root,
     __spreadProps(__spreadValues({
       ref,
@@ -2095,7 +2134,7 @@ var PopoverComponent = Object.assign(PopoverRoot, {
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check as Check3, ChevronRight, Circle } from "lucide-react";
 import * as React34 from "react";
-import { jsx as jsx36, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs12 } from "react/jsx-runtime";
 var ContextMenuRoot = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive.Group;
@@ -2104,7 +2143,7 @@ var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 var ContextMenuSubTrigger = React34.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     ContextMenuPrimitive.SubTrigger,
     __spreadProps(__spreadValues({
       ref,
@@ -2167,7 +2206,7 @@ var ContextMenuItem = React34.forwardRef((_a, ref) => {
 ContextMenuItem.displayName = "ContextMenu.Item";
 var ContextMenuCheckboxItem = React34.forwardRef((_a, ref) => {
   var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     ContextMenuPrimitive.CheckboxItem,
     __spreadProps(__spreadValues({
       ref,
@@ -2187,7 +2226,7 @@ var ContextMenuCheckboxItem = React34.forwardRef((_a, ref) => {
 ContextMenuCheckboxItem.displayName = "ContextMenu.CheckboxItem";
 var ContextMenuRadioItem = React34.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     ContextMenuPrimitive.RadioItem,
     __spreadProps(__spreadValues({
       ref,
@@ -2268,7 +2307,7 @@ var ContextMenuComponent = Object.assign(ContextMenuRoot, {
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check as Check4, ChevronRight as ChevronRight2, Circle as Circle2 } from "lucide-react";
 import * as React35 from "react";
-import { jsx as jsx37, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs13 } from "react/jsx-runtime";
 var DropdownMenuRoot = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
@@ -2277,7 +2316,7 @@ var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var DropdownMenuSubTrigger = React35.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     DropdownMenuPrimitive.SubTrigger,
     __spreadProps(__spreadValues({
       ref,
@@ -2341,7 +2380,7 @@ var DropdownMenuItem = React35.forwardRef((_a, ref) => {
 DropdownMenuItem.displayName = "DropdownMenu.Item";
 var DropdownMenuCheckboxItem = React35.forwardRef((_a, ref) => {
   var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     DropdownMenuPrimitive.CheckboxItem,
     __spreadProps(__spreadValues({
       ref,
@@ -2361,7 +2400,7 @@ var DropdownMenuCheckboxItem = React35.forwardRef((_a, ref) => {
 DropdownMenuCheckboxItem.displayName = "DropdownMenu.CheckboxItem";
 var DropdownMenuRadioItem = React35.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     DropdownMenuPrimitive.RadioItem,
     __spreadProps(__spreadValues({
       ref,
@@ -2558,7 +2597,7 @@ var TableComponent = Object.assign(TableRoot, {
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check as Check5, ChevronRight as ChevronRight3, Circle as Circle3 } from "lucide-react";
 import * as React37 from "react";
-import { jsx as jsx39, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs14 } from "react/jsx-runtime";
 var MenubarRoot = React37.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx39(
@@ -2626,7 +2665,7 @@ var MenubarItem = React37.forwardRef((_a, ref) => {
 MenubarItem.displayName = "Menubar.Item";
 var MenubarCheckboxItem = React37.forwardRef((_a, ref) => {
   var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     MenubarPrimitive.CheckboxItem,
     __spreadProps(__spreadValues({
       ref,
@@ -2646,7 +2685,7 @@ var MenubarCheckboxItem = React37.forwardRef((_a, ref) => {
 MenubarCheckboxItem.displayName = "Menubar.CheckboxItem";
 var MenubarRadioItem = React37.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     MenubarPrimitive.RadioItem,
     __spreadProps(__spreadValues({
       ref,
@@ -2708,7 +2747,7 @@ var MenubarShortcut = (_a) => {
 MenubarShortcut.displayName = "Menubar.Shortcut";
 var MenubarSubTrigger = React37.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     MenubarPrimitive.SubTrigger,
     __spreadProps(__spreadValues({
       ref,
@@ -2761,12 +2800,12 @@ var MenubarComponent = Object.assign(MenubarRoot, {
 // components/ui/NavigationMenu.tsx
 import * as React38 from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva as cva16 } from "class-variance-authority";
+import { cva as cva17 } from "class-variance-authority";
 import { ChevronDown as ChevronDown3 } from "lucide-react";
-import { jsx as jsx40, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs15 } from "react/jsx-runtime";
 var NavigationMenuRoot = React38.forwardRef((_a, ref) => {
   var _b = _a, { className, children, viewport = true } = _b, props = __objRest(_b, ["className", "children", "viewport"]);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     NavigationMenuPrimitive.Root,
     __spreadProps(__spreadValues({
       ref,
@@ -2809,12 +2848,12 @@ var NavigationMenuItem = React38.forwardRef((_a, ref) => {
   );
 });
 NavigationMenuItem.displayName = "NavigationMenu.Item";
-var navigationMenuTriggerStyle = cva16(
+var navigationMenuTriggerStyle = cva17(
   "group inline-flex h-10 w-max items-center justify-center bg-background text-foreground px-4 py-2 text-sm font-head transition-colors hover:bg-muted focus:outline-none disabled:pointer-events-none disabled:opacity-50"
 );
 var NavigationMenuTrigger = React38.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     NavigationMenuPrimitive.Trigger,
     __spreadProps(__spreadValues({
       ref,
@@ -2976,7 +3015,7 @@ var ResizableComponent = Object.assign(ResizablePanelGroup, {
 // components/ui/Chart.tsx
 import * as React39 from "react";
 import * as RechartsPrimitive from "recharts";
-import { Fragment, jsx as jsx42, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
 var THEMES = { light: "", dark: ".dark" };
 var ChartContext = React39.createContext(null);
 function useChart() {
@@ -2991,7 +3030,7 @@ var ChartContainer = React39.forwardRef(
     var _b = _a, { id, className, children, config } = _b, props = __objRest(_b, ["id", "className", "children", "config"]);
     const uniqueId = React39.useId();
     const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-    return /* @__PURE__ */ jsx42(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsx42(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs16(
       "div",
       __spreadProps(__spreadValues({
         ref,
@@ -3087,7 +3126,7 @@ var ChartTooltipContent = React39.forwardRef(
       return null;
     }
     const nestLabel = payload.length === 1 && indicator !== "dot";
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       "div",
       {
         ref,
@@ -3109,7 +3148,7 @@ var ChartTooltipContent = React39.forwardRef(
                   "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                   indicator === "dot" && "items-center"
                 ),
-                children: formatter && (item == null ? void 0 : item.value) !== void 0 && item.name ? formatter(item.value, item.name, item, index, itemPayload) : /* @__PURE__ */ jsxs15(Fragment, { children: [
+                children: formatter && (item == null ? void 0 : item.value) !== void 0 && item.name ? formatter(item.value, item.name, item, index, itemPayload) : /* @__PURE__ */ jsxs16(Fragment, { children: [
                   (itemConfig == null ? void 0 : itemConfig.icon) ? /* @__PURE__ */ jsx42(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx42(
                     "div",
                     {
@@ -3127,7 +3166,7 @@ var ChartTooltipContent = React39.forwardRef(
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxs15(
+                  /* @__PURE__ */ jsxs16(
                     "div",
                     {
                       className: cn(
@@ -3135,7 +3174,7 @@ var ChartTooltipContent = React39.forwardRef(
                         nestLabel ? "items-end" : "items-center"
                       ),
                       children: [
-                        /* @__PURE__ */ jsxs15("div", { className: "grid gap-1.5", children: [
+                        /* @__PURE__ */ jsxs16("div", { className: "grid gap-1.5", children: [
                           nestLabel ? tooltipLabel : null,
                           /* @__PURE__ */ jsx42("span", { className: "text-muted-foreground", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
                         ] }),
@@ -3173,7 +3212,7 @@ var ChartLegendContent = React39.forwardRef(
         children: payload.map((item) => {
           const key = `${nameKey || item.dataKey || "value"}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          return /* @__PURE__ */ jsxs15(
+          return /* @__PURE__ */ jsxs16(
             "div",
             {
               className: cn(
@@ -3232,30 +3271,58 @@ import * as React40 from "react";
 // components/ThemeProvider.tsx
 import { createContext as createContext3, useContext as useContext3, useEffect, useState as useState2, useCallback, useMemo as useMemo2 } from "react";
 import { jsx as jsx43 } from "react/jsx-runtime";
+var VALID_THEMES = ["light", "dark", "system"];
+var COLOR_THEMES = ["blue", "plum", "plum-trio"];
 var ThemeContext = createContext3(void 0);
 var STORAGE_KEY = "substrateui-theme";
+var COLOR_STORAGE_KEY = "substrateui-color-theme";
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
+function readStoredTheme(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  const stored = localStorage.getItem(key);
+  return VALID_THEMES.includes(stored) ? stored : fallback;
+}
+function readStoredColorTheme(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  const stored = localStorage.getItem(key);
+  return COLOR_THEMES.includes(stored != null ? stored : "") ? stored : fallback;
+}
 function applyClass(resolved) {
   document.documentElement.classList.remove("light", "dark");
   document.documentElement.classList.add(resolved);
 }
+function applyColorTheme(colorTheme) {
+  for (const t of COLOR_THEMES) {
+    document.documentElement.classList.remove(`theme-${t}`);
+  }
+  if (colorTheme !== "blue") {
+    document.documentElement.classList.add(`theme-${colorTheme}`);
+  }
+}
 function ThemeProvider({
   children,
   defaultTheme = "system",
-  storageKey = STORAGE_KEY
+  defaultColorTheme = "blue",
+  storageKey = STORAGE_KEY,
+  colorStorageKey = COLOR_STORAGE_KEY
 }) {
-  const [theme, setThemeState] = useState2(() => {
-    if (typeof window === "undefined") return defaultTheme;
-    return localStorage.getItem(storageKey) || defaultTheme;
-  });
+  const [theme, setThemeState] = useState2(
+    () => readStoredTheme(storageKey, defaultTheme)
+  );
+  const [colorTheme, setColorThemeState] = useState2(
+    () => readStoredColorTheme(colorStorageKey, defaultColorTheme)
+  );
   const [systemTheme, setSystemTheme] = useState2(getSystemTheme);
   const resolvedTheme = theme === "system" ? systemTheme : theme;
   useEffect(() => {
     applyClass(resolvedTheme);
   }, [resolvedTheme]);
+  useEffect(() => {
+    applyColorTheme(colorTheme);
+  }, [colorTheme]);
   useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => {
@@ -3264,6 +3331,23 @@ function ThemeProvider({
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      var _a;
+      if (e.key === storageKey) {
+        setThemeState(
+          VALID_THEMES.includes(e.newValue) ? e.newValue : defaultTheme
+        );
+      }
+      if (e.key === colorStorageKey) {
+        setColorThemeState(
+          COLOR_THEMES.includes((_a = e.newValue) != null ? _a : "") ? e.newValue : defaultColorTheme
+        );
+      }
+    };
+    window.addEventListener("storage", handler);
+    return () => window.removeEventListener("storage", handler);
+  }, [storageKey, colorStorageKey, defaultTheme, defaultColorTheme]);
   const setTheme = useCallback(
     (newTheme) => {
       localStorage.setItem(storageKey, newTheme);
@@ -3271,9 +3355,16 @@ function ThemeProvider({
     },
     [storageKey]
   );
+  const setColorTheme = useCallback(
+    (newColorTheme) => {
+      localStorage.setItem(colorStorageKey, newColorTheme);
+      setColorThemeState(newColorTheme);
+    },
+    [colorStorageKey]
+  );
   const value = useMemo2(
-    () => ({ theme, resolvedTheme, setTheme }),
-    [theme, resolvedTheme, setTheme]
+    () => ({ theme, resolvedTheme, setTheme, colorTheme, setColorTheme, colorThemes: COLOR_THEMES }),
+    [theme, resolvedTheme, setTheme, colorTheme, setColorTheme]
   );
   return /* @__PURE__ */ jsx43(ThemeContext.Provider, { value, children });
 }
@@ -3316,7 +3407,7 @@ Toaster.displayName = "Toaster";
 
 // components/ui/Marquee.tsx
 import * as React41 from "react";
-import { jsx as jsx45, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs17 } from "react/jsx-runtime";
 var Marquee = React41.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -3333,7 +3424,7 @@ var Marquee = React41.forwardRef(
       "className"
     ]);
     const direction = reverse ? "reverse" : "normal";
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs17(
       "div",
       __spreadProps(__spreadValues({
         ref,
@@ -3375,11 +3466,11 @@ Marquee.displayName = "Marquee";
 
 // components/ui/ImageCard.tsx
 import * as React42 from "react";
-import { jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs18 } from "react/jsx-runtime";
 var ImageCard = React42.forwardRef(
   (_a, ref) => {
     var _b = _a, { imageUrl, caption, alt, className } = _b, props = __objRest(_b, ["imageUrl", "caption", "alt", "className"]);
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs18(
       "figure",
       __spreadProps(__spreadValues({
         ref,
@@ -3409,7 +3500,7 @@ ImageCard.displayName = "ImageCard";
 import * as React43 from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Dot } from "lucide-react";
-import { jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs19 } from "react/jsx-runtime";
 var InputOTPRoot = React43.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, containerClassName } = _b, props = __objRest(_b, ["className", "containerClassName"]);
@@ -3446,7 +3537,7 @@ var InputOTPSlot = React43.forwardRef(
     var _a2;
     const inputOTPContext = React43.useContext(OTPInputContext);
     const { char, hasFakeCaret, isActive } = (_a2 = inputOTPContext == null ? void 0 : inputOTPContext.slots[index]) != null ? _a2 : {};
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "div",
       __spreadProps(__spreadValues({
         ref,
@@ -3479,7 +3570,7 @@ var InputOTPComponent = Object.assign(InputOTPRoot, {
 // components/ui/AlertDialog.tsx
 import * as React44 from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { jsx as jsx48, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs20 } from "react/jsx-runtime";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
@@ -3499,7 +3590,7 @@ var AlertDialogOverlay = React44.forwardRef((_a, ref) => {
 AlertDialogOverlay.displayName = "AlertDialog.Overlay";
 var AlertDialogContent = React44.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxs19(AlertDialogPortal, { children: [
+  return /* @__PURE__ */ jsxs20(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx48(AlertDialogOverlay, {}),
     /* @__PURE__ */ jsx48(
       AlertDialogPrimitive.Content,
@@ -3598,7 +3689,7 @@ var AlertDialogComponent = Object.assign(AlertDialog, {
 import * as React45 from "react";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
 import { ChevronRight as ChevronRight4, MoreHorizontal as MoreHorizontal2 } from "lucide-react";
-import { jsx as jsx49, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs21 } from "react/jsx-runtime";
 var Breadcrumb = React45.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsx49("nav", __spreadValues({ ref, "aria-label": "breadcrumb" }, props));
@@ -3674,7 +3765,7 @@ var BreadcrumbSeparator = React45.forwardRef((_a, ref) => {
 BreadcrumbSeparator.displayName = "Breadcrumb.Separator";
 var BreadcrumbEllipsis = React45.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "span",
     __spreadProps(__spreadValues({
       ref,
@@ -3769,7 +3860,7 @@ Calendar.displayName = "Calendar";
 import * as React47 from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { jsx as jsx51, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
 var CarouselContext = React47.createContext(null);
 function useCarousel() {
   const context = React47.useContext(CarouselContext);
@@ -3907,7 +3998,7 @@ var CarouselPrevious = React47.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "outline", size = "icon" } = _b, props = __objRest(_b, ["className", "variant", "size"]);
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs22(
       Button,
       __spreadProps(__spreadValues({
         ref,
@@ -3934,7 +4025,7 @@ var CarouselNext = React47.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "outline", size = "icon" } = _b, props = __objRest(_b, ["className", "variant", "size"]);
     const { orientation, scrollNext, canScrollNext } = useCarousel();
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs22(
       Button,
       __spreadProps(__spreadValues({
         ref,
@@ -3967,7 +4058,7 @@ var CarouselComponent = Object.assign(CarouselRoot, {
 // components/ui/Pagination.tsx
 import * as React48 from "react";
 import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight6, MoreHorizontal as MoreHorizontal3 } from "lucide-react";
-import { jsx as jsx52, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
 var PaginationRoot = React48.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx52(
@@ -4019,7 +4110,7 @@ var PaginationLink = React48.forwardRef((_a, ref) => {
 PaginationLink.displayName = "Pagination.Link";
 var PaginationPrevious = React48.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     PaginationLink,
     __spreadProps(__spreadValues({
       ref,
@@ -4037,7 +4128,7 @@ var PaginationPrevious = React48.forwardRef((_a, ref) => {
 PaginationPrevious.displayName = "Pagination.Previous";
 var PaginationNext = React48.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     PaginationLink,
     __spreadProps(__spreadValues({
       ref,
@@ -4055,7 +4146,7 @@ var PaginationNext = React48.forwardRef((_a, ref) => {
 PaginationNext.displayName = "Pagination.Next";
 var PaginationEllipsis = React48.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "span",
     __spreadProps(__spreadValues({
       ref,
@@ -4082,9 +4173,9 @@ var Pagination = Object.assign(PaginationRoot, {
 // components/ui/Sheet.tsx
 import * as React49 from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva as cva17 } from "class-variance-authority";
+import { cva as cva18 } from "class-variance-authority";
 import { X as X2 } from "lucide-react";
-import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs24 } from "react/jsx-runtime";
 var Sheet = SheetPrimitive.Root;
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
@@ -4102,7 +4193,7 @@ var SheetOverlay = React49.forwardRef((_a, ref) => {
   );
 });
 SheetOverlay.displayName = "Sheet.Overlay";
-var sheetContentVariants = cva17(
+var sheetContentVariants = cva18(
   "fixed z-50 flex flex-col gap-4 border-2 border-border bg-background transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
@@ -4120,9 +4211,9 @@ var sheetContentVariants = cva17(
 );
 var SheetContent = React49.forwardRef((_a, ref) => {
   var _b = _a, { children, side = "right", className } = _b, props = __objRest(_b, ["children", "side", "className"]);
-  return /* @__PURE__ */ jsxs23(SheetPrimitive.Portal, { children: [
+  return /* @__PURE__ */ jsxs24(SheetPrimitive.Portal, { children: [
     /* @__PURE__ */ jsx53(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsxs24(
       SheetPrimitive.Content,
       __spreadProps(__spreadValues({
         ref,
@@ -4130,7 +4221,7 @@ var SheetContent = React49.forwardRef((_a, ref) => {
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ jsxs23(SheetPrimitive.Close, { className: "absolute right-4 top-4 cursor-pointer ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsxs24(SheetPrimitive.Close, { className: "absolute right-4 top-4 cursor-pointer ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
             /* @__PURE__ */ jsx53(X2, { className: "h-4 w-4" }),
             /* @__PURE__ */ jsx53("span", { className: "sr-only", children: "Close" })
           ] })
@@ -4323,7 +4414,7 @@ var FormComponent = Object.assign(Form, {
 import * as React51 from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
-import { jsx as jsx55, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs25 } from "react/jsx-runtime";
 var CommandRoot = React51.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx55(
@@ -4355,7 +4446,7 @@ var CommandDialog = (_a) => {
 CommandDialog.displayName = "Command.Dialog";
 var CommandInput = React51.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxs24("div", { className: "flex h-9 gap-2 items-center border-b-2 border-border px-3", children: [
+  return /* @__PURE__ */ jsxs25("div", { className: "flex h-9 gap-2 items-center border-b-2 border-border px-3", children: [
     /* @__PURE__ */ jsx55(Search, { className: "size-4 shrink-0" }),
     /* @__PURE__ */ jsx55(
       CommandPrimitive.Input,
@@ -4465,7 +4556,7 @@ var CommandComponent = Object.assign(CommandRoot, {
 // components/ui/Combobox.tsx
 import * as React52 from "react";
 import { Check as Check6, ChevronsUpDown } from "lucide-react";
-import { jsx as jsx56, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs26 } from "react/jsx-runtime";
 var ComboboxRoot = React52.forwardRef(
   ({
     items,
@@ -4491,8 +4582,8 @@ var ComboboxRoot = React52.forwardRef(
       [onValueChange]
     );
     const selectedItem = items.find((item) => item.value === value);
-    return /* @__PURE__ */ jsxs25(PopoverComponent, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx56(PopoverComponent.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs26(PopoverComponent, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx56(PopoverComponent.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs26(
         Button,
         {
           ref,
@@ -4507,11 +4598,11 @@ var ComboboxRoot = React52.forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx56(PopoverComponent.Content, { className: "w-[200px] border-0! p-0", children: /* @__PURE__ */ jsxs25(CommandComponent, { children: [
+      /* @__PURE__ */ jsx56(PopoverComponent.Content, { className: "w-[200px] border-0! p-0", children: /* @__PURE__ */ jsxs26(CommandComponent, { children: [
         /* @__PURE__ */ jsx56(CommandComponent.Input, { placeholder: searchPlaceholder }),
-        /* @__PURE__ */ jsxs25(CommandComponent.List, { children: [
+        /* @__PURE__ */ jsxs26(CommandComponent.List, { children: [
           /* @__PURE__ */ jsx56(CommandComponent.Empty, { children: emptyText }),
-          /* @__PURE__ */ jsx56(CommandComponent.Group, { children: items.map((item) => /* @__PURE__ */ jsxs25(
+          /* @__PURE__ */ jsx56(CommandComponent.Group, { children: items.map((item) => /* @__PURE__ */ jsxs26(
             CommandComponent.Item,
             {
               value: item.value,
@@ -4566,8 +4657,8 @@ var ComboboxMulti = React52.forwardRef(
       [onValuesChange]
     );
     const selectedLabels = items.filter((item) => values.includes(item.value)).map((item) => item.label);
-    return /* @__PURE__ */ jsxs25(PopoverComponent, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx56(PopoverComponent.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs26(PopoverComponent, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx56(PopoverComponent.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs26(
         Button,
         {
           ref,
@@ -4582,11 +4673,11 @@ var ComboboxMulti = React52.forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx56(PopoverComponent.Content, { className: "w-[200px] border-0! p-0", children: /* @__PURE__ */ jsxs25(CommandComponent, { children: [
+      /* @__PURE__ */ jsx56(PopoverComponent.Content, { className: "w-[200px] border-0! p-0", children: /* @__PURE__ */ jsxs26(CommandComponent, { children: [
         /* @__PURE__ */ jsx56(CommandComponent.Input, { placeholder: searchPlaceholder }),
-        /* @__PURE__ */ jsxs25(CommandComponent.List, { children: [
+        /* @__PURE__ */ jsxs26(CommandComponent.List, { children: [
           /* @__PURE__ */ jsx56(CommandComponent.Empty, { children: emptyText }),
-          /* @__PURE__ */ jsx56(CommandComponent.Group, { children: items.map((item) => /* @__PURE__ */ jsxs25(
+          /* @__PURE__ */ jsx56(CommandComponent.Group, { children: items.map((item) => /* @__PURE__ */ jsxs26(
             CommandComponent.Item,
             {
               value: item.value,
@@ -4631,14 +4722,14 @@ import {
   useReactTable
 } from "@tanstack/react-table";
 import { ArrowUpDown, ChevronDown as ChevronDown4 } from "lucide-react";
-import { jsx as jsx57, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs27 } from "react/jsx-runtime";
 var DataTableToolbar = ({
   filterValue,
   onFilterChange,
   filterPlaceholder,
   showColumnToggle,
   columns
-}) => /* @__PURE__ */ jsxs26("div", { className: "flex items-center py-4 gap-2", children: [
+}) => /* @__PURE__ */ jsxs27("div", { className: "flex items-center py-4 gap-2", children: [
   /* @__PURE__ */ jsx57(
     Input,
     {
@@ -4648,8 +4739,8 @@ var DataTableToolbar = ({
       className: "max-w-sm"
     }
   ),
-  showColumnToggle && /* @__PURE__ */ jsxs26(DropdownMenuComponent, { children: [
-    /* @__PURE__ */ jsx57(DropdownMenuComponent.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs26(Button, { variant: "outline", className: "ml-auto", children: [
+  showColumnToggle && /* @__PURE__ */ jsxs27(DropdownMenuComponent, { children: [
+    /* @__PURE__ */ jsx57(DropdownMenuComponent.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs27(Button, { variant: "outline", className: "ml-auto", children: [
       "Columns ",
       /* @__PURE__ */ jsx57(ChevronDown4, { className: "ml-2 size-4" })
     ] }) }),
@@ -4674,14 +4765,14 @@ var DataTablePagination = ({
   canNextPage,
   onPreviousPage,
   onNextPage
-}) => /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-end gap-2 py-4", children: [
-  showSelectedCount && /* @__PURE__ */ jsxs26("div", { className: "text-foreground flex-1 text-sm font-sans", children: [
+}) => /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-end gap-2 py-4", children: [
+  showSelectedCount && /* @__PURE__ */ jsxs27("div", { className: "text-foreground flex-1 text-sm font-sans", children: [
     selectedCount,
     " of ",
     totalCount,
     " row(s) selected."
   ] }),
-  /* @__PURE__ */ jsxs26("div", { className: "flex gap-2", children: [
+  /* @__PURE__ */ jsxs27("div", { className: "flex gap-2", children: [
     /* @__PURE__ */ jsx57(
       Button,
       {
@@ -4709,7 +4800,7 @@ var DataTableSortButton = ({
   children,
   onClick,
   className
-}) => /* @__PURE__ */ jsxs26(
+}) => /* @__PURE__ */ jsxs27(
   Button,
   {
     variant: "ghost",
@@ -4756,7 +4847,7 @@ function DataTableRoot({
       rowSelection
     }
   });
-  return /* @__PURE__ */ jsxs26("div", { className: cn("w-full font-sans text-foreground", className), children: [
+  return /* @__PURE__ */ jsxs27("div", { className: cn("w-full font-sans text-foreground", className), children: [
     filterColumn && /* @__PURE__ */ jsx57(
       DataTableToolbar,
       {
@@ -4770,7 +4861,7 @@ function DataTableRoot({
         columns: table.getAllColumns()
       }
     ),
-    /* @__PURE__ */ jsx57("div", { children: /* @__PURE__ */ jsxs26(TableComponent, { children: [
+    /* @__PURE__ */ jsx57("div", { children: /* @__PURE__ */ jsxs27(TableComponent, { children: [
       /* @__PURE__ */ jsx57(TableComponent.Header, { className: "font-head", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx57(
         TableComponent.Row,
         {
@@ -4822,7 +4913,7 @@ var DataTableComponent = Object.assign(DataTableRoot, {
 // components/ui/Sidebar.tsx
 import * as React55 from "react";
 import { Slot as Slot8 } from "@radix-ui/react-slot";
-import { cva as cva18 } from "class-variance-authority";
+import { cva as cva19 } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
 
 // hooks/use-mobile.ts
@@ -4845,7 +4936,7 @@ function useIsMobile() {
 }
 
 // components/ui/Sidebar.tsx
-import { jsx as jsx58, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
@@ -4964,7 +5055,7 @@ var SidebarRoot = (_a) => {
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ jsx58(SheetComponent, __spreadProps(__spreadValues({ open: openMobile, onOpenChange: setOpenMobile }, props), { children: /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsx58(SheetComponent, __spreadProps(__spreadValues({ open: openMobile, onOpenChange: setOpenMobile }, props), { children: /* @__PURE__ */ jsxs28(
       SheetComponent.Content,
       {
         "data-sidebar": "sidebar",
@@ -4975,7 +5066,7 @@ var SidebarRoot = (_a) => {
         },
         side,
         children: [
-          /* @__PURE__ */ jsxs27(SheetComponent.Header, { className: "sr-only", children: [
+          /* @__PURE__ */ jsxs28(SheetComponent.Header, { className: "sr-only", children: [
             /* @__PURE__ */ jsx58(SheetComponent.Title, { children: "Sidebar" }),
             /* @__PURE__ */ jsx58(SheetComponent.Description, { children: "Displays the mobile sidebar." })
           ] }),
@@ -4984,7 +5075,7 @@ var SidebarRoot = (_a) => {
       }
     ) }));
   }
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: "group peer hidden md:block",
@@ -5032,7 +5123,7 @@ SidebarRoot.displayName = "Sidebar";
 var SidebarTrigger = React55.forwardRef((_a, ref) => {
   var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     Button,
     __spreadProps(__spreadValues({
       ref,
@@ -5236,7 +5327,7 @@ var SidebarMenuItem = React55.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuItem.displayName = "Sidebar.MenuItem";
-var sidebarMenuButtonVariants = cva18(
+var sidebarMenuButtonVariants = cva19(
   "peer/menu-button flex w-full items-center gap-2 overflow-hidden outline-2 outline-transparent p-2 text-left text-sm ring-ring transition-[width,height,padding] hover:bg-primary hover:text-primary-foreground hover:outline-border focus-visible:outline-border focus-visible:text-primary-foreground focus-visible:bg-primary disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
@@ -5282,7 +5373,7 @@ var SidebarMenuButton = React55.forwardRef(
       return button;
     }
     const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
-    return /* @__PURE__ */ jsxs27(TooltipComponent, { children: [
+    return /* @__PURE__ */ jsxs28(TooltipComponent, { children: [
       /* @__PURE__ */ jsx58(TooltipComponent.Trigger, { asChild: true, children: button }),
       /* @__PURE__ */ jsx58(
         TooltipComponent.Content,
@@ -5343,7 +5434,7 @@ var SidebarMenuSkeleton = React55.forwardRef((_a, ref) => {
   const [width] = React55.useState(
     () => `${Math.floor(Math.random() * 40) + 50}%`
   );
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     __spreadProps(__spreadValues({
       ref,
@@ -5469,11 +5560,11 @@ function CardGrid({ children, columns = 3, className }) {
 // components/NavBar/NavBar.tsx
 import { useState as useState8 } from "react";
 import { AlignJustify, X as X3, ChevronDown as ChevronDown5 } from "lucide-react";
-import { jsx as jsx60, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs29 } from "react/jsx-runtime";
 function NavBar({ brand, links = [], auth, linkComponent: LinkComp = "a", className }) {
   var _a, _b;
   const [drawerOpen, setDrawerOpen] = useState8(false);
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "nav",
     {
       className: cn(
@@ -5481,7 +5572,7 @@ function NavBar({ brand, links = [], auth, linkComponent: LinkComp = "a", classN
         className
       ),
       children: [
-        /* @__PURE__ */ jsx60("div", { className: "mx-auto max-w-6xl px-4", children: /* @__PURE__ */ jsxs28("div", { className: "flex h-16 items-center justify-between", children: [
+        /* @__PURE__ */ jsx60("div", { className: "mx-auto max-w-6xl px-4", children: /* @__PURE__ */ jsxs29("div", { className: "flex h-16 items-center justify-between", children: [
           /* @__PURE__ */ jsx60(
             LinkComp,
             {
@@ -5500,7 +5591,7 @@ function NavBar({ brand, links = [], auth, linkComponent: LinkComp = "a", classN
             link.href
           )) }),
           /* @__PURE__ */ jsx60("div", { className: "hidden lg:flex items-center gap-3", children: auth.state === "signed-out" ? /* @__PURE__ */ jsx60(SignedOutActions, { auth, linkComponent: LinkComp }) : /* @__PURE__ */ jsx60(UserMenu, { auth, linkComponent: LinkComp }) }),
-          /* @__PURE__ */ jsxs28("div", { className: "flex lg:hidden items-center gap-3", children: [
+          /* @__PURE__ */ jsxs29("div", { className: "flex lg:hidden items-center gap-3", children: [
             auth.state === "signed-out" && /* @__PURE__ */ jsx60("div", { className: "hidden sm:flex items-center gap-2", children: /* @__PURE__ */ jsx60(SignedOutActions, { auth, linkComponent: LinkComp }) }),
             /* @__PURE__ */ jsx60(
               Button,
@@ -5520,8 +5611,8 @@ function NavBar({ brand, links = [], auth, linkComponent: LinkComp = "a", classN
             direction: "right",
             open: drawerOpen,
             onOpenChange: setDrawerOpen,
-            children: /* @__PURE__ */ jsxs28(DrawerComponent.Content, { children: [
-              /* @__PURE__ */ jsxs28(DrawerComponent.Header, { className: "flex-row items-center justify-between", children: [
+            children: /* @__PURE__ */ jsxs29(DrawerComponent.Content, { children: [
+              /* @__PURE__ */ jsxs29(DrawerComponent.Header, { className: "flex-row items-center justify-between", children: [
                 /* @__PURE__ */ jsx60(DrawerComponent.Title, { children: brand.name }),
                 /* @__PURE__ */ jsx60(DrawerComponent.Close, { asChild: true, children: /* @__PURE__ */ jsx60(Button, { size: "icon", variant: "ghost", className: "p-1", children: /* @__PURE__ */ jsx60(X3, { className: "h-5 w-5" }) }) })
               ] }),
@@ -5535,8 +5626,8 @@ function NavBar({ brand, links = [], auth, linkComponent: LinkComp = "a", classN
                 },
                 link.href
               )) }),
-              /* @__PURE__ */ jsx60(DrawerComponent.Footer, { children: auth.state === "signed-out" ? /* @__PURE__ */ jsx60(Button, { asChild: true, children: /* @__PURE__ */ jsx60(LinkComp, { href: auth.href, children: (_b = auth.label) != null ? _b : "Get Started" }) }) : /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-1 border-t-2 pt-4", children: [
-                /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-3 px-2 pb-3", children: [
+              /* @__PURE__ */ jsx60(DrawerComponent.Footer, { children: auth.state === "signed-out" ? /* @__PURE__ */ jsx60(Button, { asChild: true, children: /* @__PURE__ */ jsx60(LinkComp, { href: auth.href, children: (_b = auth.label) != null ? _b : "Get Started" }) }) : /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-1 border-t-2 pt-4", children: [
+                /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-3 px-2 pb-3", children: [
                   /* @__PURE__ */ jsx60(AvatarComponent, { className: "h-8 w-8", children: auth.user.avatar ? /* @__PURE__ */ jsx60(AvatarComponent.Image, { src: auth.user.avatar, alt: auth.user.name }) : /* @__PURE__ */ jsx60(AvatarComponent.Fallback, { children: auth.user.name.charAt(0).toUpperCase() }) }),
                   /* @__PURE__ */ jsx60("span", { className: "font-head text-sm", children: auth.user.name })
                 ] }),
@@ -5583,8 +5674,8 @@ function UserMenu({
   auth,
   linkComponent: LinkComp = "a"
 }) {
-  return /* @__PURE__ */ jsxs28(MenuComponent, { children: [
-    /* @__PURE__ */ jsx60(MenuComponent.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs28("button", { className: "flex items-center gap-2 cursor-pointer outline-hidden", children: [
+  return /* @__PURE__ */ jsxs29(MenuComponent, { children: [
+    /* @__PURE__ */ jsx60(MenuComponent.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs29("button", { className: "flex items-center gap-2 cursor-pointer outline-hidden", children: [
       /* @__PURE__ */ jsx60(AvatarComponent, { className: "h-8 w-8", children: auth.user.avatar ? /* @__PURE__ */ jsx60(AvatarComponent.Image, { src: auth.user.avatar, alt: auth.user.name }) : /* @__PURE__ */ jsx60(AvatarComponent.Fallback, { children: auth.user.name.charAt(0).toUpperCase() }) }),
       /* @__PURE__ */ jsx60(ChevronDown5, { className: "h-3 w-3" })
     ] }) }),
@@ -5598,7 +5689,7 @@ function UserMenu({
 }
 
 // components/Page/Page.tsx
-import { jsx as jsx61, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs30 } from "react/jsx-runtime";
 function SimplePage({
   title,
   subtitle,
@@ -5606,9 +5697,9 @@ function SimplePage({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs29("div", { className: cn("min-h-screen", className), children: [
-    /* @__PURE__ */ jsx61("header", { className: "border-b-2 bg-background", children: /* @__PURE__ */ jsx61("div", { className: "mx-auto max-w-6xl px-4 py-8", children: /* @__PURE__ */ jsxs29("div", { className: "flex items-start justify-between gap-4", children: [
-      /* @__PURE__ */ jsxs29("div", { children: [
+  return /* @__PURE__ */ jsxs30("div", { className: cn("min-h-screen", className), children: [
+    /* @__PURE__ */ jsx61("header", { className: "border-b-2 bg-background", children: /* @__PURE__ */ jsx61("div", { className: "mx-auto max-w-6xl px-4 py-8", children: /* @__PURE__ */ jsxs30("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs30("div", { children: [
         /* @__PURE__ */ jsx61("h1", { className: "font-head text-4xl mb-2", children: title }),
         subtitle && /* @__PURE__ */ jsx61("p", { className: "font-sans text-lg text-muted-foreground max-w-xl", children: subtitle })
       ] }),
@@ -5675,7 +5766,7 @@ function SectionNav({ items, className, offsetTop }) {
 // components/TwoColumnLayout/TwoColumnLayout.tsx
 import { PanelRight } from "lucide-react";
 import React59, { useState as useState10 } from "react";
-import { jsx as jsx63, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs31 } from "react/jsx-runtime";
 function TwoColumnLayout({
   children,
   className,
@@ -5690,7 +5781,7 @@ function TwoColumnLayout({
     if (type.displayName === "TwoColumnLayout.Left") leftContent = child;
     if (type.displayName === "TwoColumnLayout.Right") rightContent = child;
   });
-  return /* @__PURE__ */ jsxs30("div", { className: cn("flex flex-col md:flex-row gap-0 min-h-0", className), children: [
+  return /* @__PURE__ */ jsxs31("div", { className: cn("flex flex-col md:flex-row gap-0 min-h-0", className), children: [
     /* @__PURE__ */ jsx63("div", { className: "flex-1 min-w-0 md:border-r-2", children: leftContent }),
     /* @__PURE__ */ jsx63("div", { className: "hidden md:block flex-1 min-w-0", children: rightContent }),
     rightContent && /* @__PURE__ */ jsx63("div", { className: "fixed bottom-6 right-6 md:hidden z-40", children: /* @__PURE__ */ jsx63(
@@ -5703,7 +5794,7 @@ function TwoColumnLayout({
         children: /* @__PURE__ */ jsx63(PanelRight, { className: "size-5" })
       }
     ) }),
-    /* @__PURE__ */ jsx63(DrawerComponent, { open: drawerOpen, onOpenChange: setDrawerOpen, direction: "right", children: /* @__PURE__ */ jsxs30(DrawerComponent.Content, { children: [
+    /* @__PURE__ */ jsx63(DrawerComponent, { open: drawerOpen, onOpenChange: setDrawerOpen, direction: "right", children: /* @__PURE__ */ jsxs31(DrawerComponent.Content, { children: [
       /* @__PURE__ */ jsx63(DrawerComponent.Header, { children: /* @__PURE__ */ jsx63(DrawerComponent.Title, { children: drawerTitle }) }),
       /* @__PURE__ */ jsx63("div", { className: "flex-1 overflow-y-auto p-4", children: rightContent })
     ] }) })
@@ -5724,7 +5815,7 @@ var TwoColumnLayoutComponent = Object.assign(TwoColumnLayout, {
 
 // components/ThemeToggle.tsx
 import { useSyncExternalStore } from "react";
-import { jsx as jsx64, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs32 } from "react/jsx-runtime";
 var subscribe = () => () => {
 };
 var getSnapshot = () => true;
@@ -5742,7 +5833,7 @@ function ThemeToggle(_a) {
   const { resolvedTheme, setTheme } = useTheme();
   const mounted = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   const opposite = resolvedTheme === "dark" ? "light" : "dark";
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     IconButton,
     __spreadProps(__spreadValues({
       variant,
@@ -5752,7 +5843,7 @@ function ThemeToggle(_a) {
       "aria-label": mounted ? `Switch to ${opposite} mode` : "Toggle theme"
     }, props), {
       children: [
-        /* @__PURE__ */ jsxs31(
+        /* @__PURE__ */ jsxs32(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -5797,6 +5888,83 @@ function ThemeToggle(_a) {
   );
 }
 
+// components/ColorThemeToggle.tsx
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { jsx as jsx65, jsxs as jsxs33 } from "react/jsx-runtime";
+var subscribe2 = () => () => {
+};
+var getSnapshot2 = () => true;
+var getServerSnapshot2 = () => false;
+var COLOR_SWATCHES = {
+  blue: "#5294FF",
+  plum: "#B254CF",
+  "plum-trio": "#B254CF"
+};
+var COLOR_LABELS = {
+  blue: "Blue",
+  plum: "Plum",
+  "plum-trio": "Plum Trio"
+};
+function ColorThemeToggle(_a) {
+  var _b = _a, {
+    variant = "ghost",
+    size = "md",
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "className"
+  ]);
+  const { colorTheme, setColorTheme, colorThemes } = useTheme();
+  const mounted = useSyncExternalStore2(subscribe2, getSnapshot2, getServerSnapshot2);
+  return /* @__PURE__ */ jsxs33(DropdownMenuComponent, { children: [
+    /* @__PURE__ */ jsx65(DropdownMenuComponent.Trigger, { asChild: true, children: /* @__PURE__ */ jsx65(
+      IconButton,
+      __spreadProps(__spreadValues({
+        variant,
+        size,
+        className,
+        "aria-label": mounted ? `Color theme: ${colorTheme}` : "Color theme"
+      }, props), {
+        children: /* @__PURE__ */ jsx65(
+          "span",
+          {
+            className: "block w-4 h-4 border-2 border-border",
+            style: {
+              backgroundColor: mounted ? COLOR_SWATCHES[colorTheme] : void 0,
+              borderRadius: "var(--radius, 0)"
+            }
+          }
+        )
+      })
+    ) }),
+    /* @__PURE__ */ jsxs33(DropdownMenuComponent.Content, { align: "end", children: [
+      /* @__PURE__ */ jsx65(DropdownMenuComponent.Label, { children: "Color Theme" }),
+      /* @__PURE__ */ jsx65(DropdownMenuComponent.Separator, {}),
+      /* @__PURE__ */ jsx65(
+        DropdownMenuComponent.RadioGroup,
+        {
+          value: colorTheme,
+          onValueChange: (v) => setColorTheme(v),
+          children: colorThemes.map((theme) => /* @__PURE__ */ jsxs33(DropdownMenuComponent.RadioItem, { value: theme, children: [
+            /* @__PURE__ */ jsx65(
+              "span",
+              {
+                className: "inline-block w-3 h-3 border border-border mr-1",
+                style: {
+                  backgroundColor: COLOR_SWATCHES[theme],
+                  borderRadius: "var(--radius, 0)"
+                }
+              }
+            ),
+            COLOR_LABELS[theme]
+          ] }, theme))
+        }
+      )
+    ] })
+  ] });
+}
+
 // lib/create-theme.ts
 function createTheme(name, config) {
   const declarations = [];
@@ -5837,7 +6005,7 @@ ${declarations.join("\n")}
 }
 
 // components/landing/Hero.tsx
-import { jsx as jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs34 } from "react/jsx-runtime";
 function Hero({
   badge,
   title,
@@ -5847,14 +6015,14 @@ function Hero({
   className,
   align = "center"
 }) {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     "section",
     {
       className: cn(
         "w-full border-b-2 bg-background",
         className
       ),
-      children: /* @__PURE__ */ jsxs32(
+      children: /* @__PURE__ */ jsxs34(
         "div",
         {
           className: cn(
@@ -5863,10 +6031,10 @@ function Hero({
             align === "left" && "items-start text-left"
           ),
           children: [
-            badge && /* @__PURE__ */ jsx65("div", { children: badge }),
-            /* @__PURE__ */ jsx65("h1", { className: "font-head text-4xl sm:text-5xl lg:text-6xl max-w-4xl", children: title }),
-            subtitle && /* @__PURE__ */ jsx65("p", { className: "font-sans text-lg lg:text-xl text-muted-foreground max-w-2xl", children: subtitle }),
-            actions && /* @__PURE__ */ jsx65("div", { className: "flex flex-wrap gap-3 mt-2", children: actions }),
+            badge && /* @__PURE__ */ jsx66("div", { children: badge }),
+            /* @__PURE__ */ jsx66("h1", { className: "font-head text-4xl sm:text-5xl lg:text-6xl max-w-4xl", children: title }),
+            subtitle && /* @__PURE__ */ jsx66("p", { className: "font-sans text-lg lg:text-xl text-muted-foreground max-w-2xl", children: subtitle }),
+            actions && /* @__PURE__ */ jsx66("div", { className: "flex flex-wrap gap-3 mt-2", children: actions }),
             children
           ]
         }
@@ -5876,9 +6044,9 @@ function Hero({
 }
 
 // components/landing/Section.tsx
-import { cva as cva19 } from "class-variance-authority";
-import { jsx as jsx66, jsxs as jsxs33 } from "react/jsx-runtime";
-var sectionVariants = cva19("w-full py-16 lg:py-24 scroll-mt-[120px]", {
+import { cva as cva20 } from "class-variance-authority";
+import { jsx as jsx67, jsxs as jsxs35 } from "react/jsx-runtime";
+var sectionVariants = cva20("w-full py-16 lg:py-24 scroll-mt-[120px]", {
   variants: {
     background: {
       default: "bg-background",
@@ -5907,13 +6075,13 @@ function Section(_a) {
     "background",
     "align"
   ]);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     "section",
     __spreadProps(__spreadValues({
       className: cn(sectionVariants({ background }), className)
     }, props), {
-      children: /* @__PURE__ */ jsxs33("div", { className: "mx-auto max-w-6xl px-4", children: [
-        (title || subtitle) && /* @__PURE__ */ jsxs33(
+      children: /* @__PURE__ */ jsxs35("div", { className: "mx-auto max-w-6xl px-4", children: [
+        (title || subtitle) && /* @__PURE__ */ jsxs35(
           "div",
           {
             className: cn(
@@ -5922,8 +6090,8 @@ function Section(_a) {
               align === "left" && "text-left"
             ),
             children: [
-              title && /* @__PURE__ */ jsx66("h2", { className: "font-head text-3xl lg:text-4xl mb-3", children: title }),
-              subtitle && /* @__PURE__ */ jsx66("p", { className: "font-sans text-lg text-muted-foreground max-w-2xl mx-auto", children: subtitle })
+              title && /* @__PURE__ */ jsx67("h2", { className: "font-head text-3xl lg:text-4xl mb-3", children: title }),
+              subtitle && /* @__PURE__ */ jsx67("p", { className: "font-sans text-lg text-muted-foreground max-w-2xl mx-auto", children: subtitle })
             ]
           }
         ),
@@ -5934,7 +6102,7 @@ function Section(_a) {
 }
 
 // components/landing/Footer.tsx
-import { jsx as jsx67, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs36 } from "react/jsx-runtime";
 function Footer({
   brand,
   tagline,
@@ -5942,15 +6110,15 @@ function Footer({
   bottom,
   className
 }) {
-  return /* @__PURE__ */ jsx67("footer", { className: cn("w-full border-t-2 bg-background", className), children: /* @__PURE__ */ jsxs34("div", { className: "mx-auto max-w-6xl px-4 py-12 lg:py-16", children: [
-    /* @__PURE__ */ jsxs34("div", { className: "grid gap-8 lg:grid-cols-[1.5fr_repeat(auto-fit,1fr)]", children: [
-      /* @__PURE__ */ jsxs34("div", { className: "max-w-xs", children: [
-        /* @__PURE__ */ jsx67("div", { className: "font-head text-2xl mb-2", children: brand }),
-        tagline && /* @__PURE__ */ jsx67("p", { className: "font-sans text-sm text-muted-foreground", children: tagline })
+  return /* @__PURE__ */ jsx68("footer", { className: cn("w-full border-t-2 bg-background", className), children: /* @__PURE__ */ jsxs36("div", { className: "mx-auto max-w-6xl px-4 py-12 lg:py-16", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "grid gap-8 lg:grid-cols-[1.5fr_repeat(auto-fit,1fr)]", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "max-w-xs", children: [
+        /* @__PURE__ */ jsx68("div", { className: "font-head text-2xl mb-2", children: brand }),
+        tagline && /* @__PURE__ */ jsx68("p", { className: "font-sans text-sm text-muted-foreground", children: tagline })
       ] }),
-      groups.length > 0 && /* @__PURE__ */ jsx67("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3 col-span-full lg:col-span-1", children: groups.map((group) => /* @__PURE__ */ jsxs34("div", { children: [
-        /* @__PURE__ */ jsx67("h4", { className: "font-head text-sm uppercase mb-3", children: group.title }),
-        /* @__PURE__ */ jsx67("ul", { className: "flex flex-col gap-2", children: group.links.map((link) => /* @__PURE__ */ jsx67("li", { children: /* @__PURE__ */ jsx67(
+      groups.length > 0 && /* @__PURE__ */ jsx68("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3 col-span-full lg:col-span-1", children: groups.map((group) => /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx68("h4", { className: "font-head text-sm uppercase mb-3", children: group.title }),
+        /* @__PURE__ */ jsx68("ul", { className: "flex flex-col gap-2", children: group.links.map((link) => /* @__PURE__ */ jsx68("li", { children: /* @__PURE__ */ jsx68(
           "a",
           {
             href: link.href,
@@ -5960,21 +6128,21 @@ function Footer({
         ) }, link.label)) })
       ] }, group.title)) })
     ] }),
-    bottom && /* @__PURE__ */ jsx67("div", { className: "mt-12 pt-6 border-t-2 font-sans text-sm text-muted-foreground", children: bottom })
+    bottom && /* @__PURE__ */ jsx68("div", { className: "mt-12 pt-6 border-t-2 font-sans text-sm text-muted-foreground", children: bottom })
   ] }) });
 }
 
 // components/landing/PricingTable.tsx
-import { jsx as jsx68, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs37 } from "react/jsx-runtime";
 function PricingTable({ tiers, className }) {
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       className: cn(
         "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
         className
       ),
-      children: tiers.map((tier) => /* @__PURE__ */ jsxs35(
+      children: tiers.map((tier) => /* @__PURE__ */ jsxs37(
         "div",
         {
           className: cn(
@@ -5982,15 +6150,15 @@ function PricingTable({ tiers, className }) {
             tier.highlighted ? "shadow-lg border-primary ring-2 ring-primary scale-[1.02]" : "shadow-md"
           ),
           children: [
-            /* @__PURE__ */ jsxs35("div", { className: "p-6 border-b-2", children: [
-              /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between mb-2", children: [
-                /* @__PURE__ */ jsx68("h3", { className: "font-head text-xl", children: tier.name }),
+            /* @__PURE__ */ jsxs37("div", { className: "p-6 border-b-2", children: [
+              /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between mb-2", children: [
+                /* @__PURE__ */ jsx69("h3", { className: "font-head text-xl", children: tier.name }),
                 tier.badge
               ] }),
-              /* @__PURE__ */ jsx68("div", { className: "font-head text-4xl mb-1", children: tier.price }),
-              tier.description && /* @__PURE__ */ jsx68("p", { className: "font-sans text-sm text-muted-foreground", children: tier.description })
+              /* @__PURE__ */ jsx69("div", { className: "font-head text-4xl mb-1", children: tier.price }),
+              tier.description && /* @__PURE__ */ jsx69("p", { className: "font-sans text-sm text-muted-foreground", children: tier.description })
             ] }),
-            /* @__PURE__ */ jsx68("div", { className: "p-6 flex-1", children: /* @__PURE__ */ jsx68("ul", { className: "flex flex-col gap-3", children: tier.features.map((feature) => /* @__PURE__ */ jsxs35(
+            /* @__PURE__ */ jsx69("div", { className: "p-6 flex-1", children: /* @__PURE__ */ jsx69("ul", { className: "flex flex-col gap-3", children: tier.features.map((feature) => /* @__PURE__ */ jsxs37(
               "li",
               {
                 className: cn(
@@ -5998,7 +6166,7 @@ function PricingTable({ tiers, className }) {
                   !feature.included && "text-muted-foreground line-through"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx68(
+                  /* @__PURE__ */ jsx69(
                     "span",
                     {
                       className: cn(
@@ -6013,7 +6181,7 @@ function PricingTable({ tiers, className }) {
               },
               feature.text
             )) }) }),
-            /* @__PURE__ */ jsx68("div", { className: "p-6 border-t-2", children: tier.cta })
+            /* @__PURE__ */ jsx69("div", { className: "p-6 border-t-2", children: tier.cta })
           ]
         },
         tier.name
@@ -6023,7 +6191,7 @@ function PricingTable({ tiers, className }) {
 }
 
 // components/landing/FeatureSection.tsx
-import { jsx as jsx69, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs38 } from "react/jsx-runtime";
 var columnClasses2 = {
   2: "grid gap-6 sm:grid-cols-2",
   3: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
@@ -6034,14 +6202,14 @@ function FeatureSection({
   columns = 3,
   className
 }) {
-  return /* @__PURE__ */ jsx69("div", { className: cn(columnClasses2[columns], className), children: features.map((feature) => /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsx70("div", { className: cn(columnClasses2[columns], className), children: features.map((feature) => /* @__PURE__ */ jsxs38(
     "div",
     {
       className: "border-2 p-6 bg-card shadow-md",
       children: [
-        feature.icon && /* @__PURE__ */ jsx69("div", { className: "mb-4 inline-flex items-center justify-center h-12 w-12 border-2 bg-primary text-primary-foreground shadow-sm", children: feature.icon }),
-        /* @__PURE__ */ jsx69("h3", { className: "font-head text-lg mb-2", children: feature.title }),
-        /* @__PURE__ */ jsx69("p", { className: "font-sans text-sm text-muted-foreground", children: feature.description })
+        feature.icon && /* @__PURE__ */ jsx70("div", { className: "mb-4 inline-flex items-center justify-center h-12 w-12 border-2 bg-primary text-primary-foreground shadow-sm", children: feature.icon }),
+        /* @__PURE__ */ jsx70("h3", { className: "font-head text-lg mb-2", children: feature.title }),
+        /* @__PURE__ */ jsx70("p", { className: "font-sans text-sm text-muted-foreground", children: feature.description })
       ]
     },
     feature.title
@@ -6049,7 +6217,7 @@ function FeatureSection({
 }
 
 // components/landing/Testimonial.tsx
-import { jsx as jsx70, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs39 } from "react/jsx-runtime";
 var columnClasses3 = {
   1: "grid gap-6 max-w-2xl mx-auto",
   2: "grid gap-6 sm:grid-cols-2",
@@ -6060,21 +6228,21 @@ function Testimonial({
   columns = 3,
   className
 }) {
-  return /* @__PURE__ */ jsx70("div", { className: cn(columnClasses3[columns], className), children: testimonials.map((t) => /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsx71("div", { className: cn(columnClasses3[columns], className), children: testimonials.map((t) => /* @__PURE__ */ jsxs39(
     "div",
     {
       className: "border-2 p-6 bg-card shadow-md flex flex-col",
       children: [
-        /* @__PURE__ */ jsxs37("blockquote", { className: "font-sans text-sm leading-relaxed flex-1 mb-6", children: [
+        /* @__PURE__ */ jsxs39("blockquote", { className: "font-sans text-sm leading-relaxed flex-1 mb-6", children: [
           "\u201C",
           t.quote,
           "\u201D"
         ] }),
-        /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-3 border-t-2 pt-4", children: [
-          t.avatar && /* @__PURE__ */ jsx70("div", { className: "h-10 w-10 shrink-0 border-2 overflow-hidden", children: t.avatar }),
-          /* @__PURE__ */ jsxs37("div", { children: [
-            /* @__PURE__ */ jsx70("p", { className: "font-head text-sm", children: t.name }),
-            (t.role || t.company) && /* @__PURE__ */ jsx70("p", { className: "font-sans text-xs text-muted-foreground", children: [t.role, t.company].filter(Boolean).join(", ") })
+        /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-3 border-t-2 pt-4", children: [
+          t.avatar && /* @__PURE__ */ jsx71("div", { className: "h-10 w-10 shrink-0 border-2 overflow-hidden", children: t.avatar }),
+          /* @__PURE__ */ jsxs39("div", { children: [
+            /* @__PURE__ */ jsx71("p", { className: "font-head text-sm", children: t.name }),
+            (t.role || t.company) && /* @__PURE__ */ jsx71("p", { className: "font-sans text-xs text-muted-foreground", children: [t.role, t.company].filter(Boolean).join(", ") })
           ] })
         ] })
       ]
@@ -6084,9 +6252,9 @@ function Testimonial({
 }
 
 // components/landing/LogoCloud.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 function LogoCloud({ children, className }) {
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     "div",
     {
       className: cn(
@@ -6099,24 +6267,24 @@ function LogoCloud({ children, className }) {
 }
 
 // components/landing/CTABanner.tsx
-import { jsx as jsx72, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs40 } from "react/jsx-runtime";
 function CTABanner({
   title,
   subtitle,
   actions,
   className
 }) {
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(
     "section",
     {
       className: cn(
         "w-full border-y-2 bg-primary text-primary-foreground",
         className
       ),
-      children: /* @__PURE__ */ jsxs38("div", { className: "mx-auto max-w-6xl px-4 py-16 lg:py-20 flex flex-col items-center text-center gap-4", children: [
-        /* @__PURE__ */ jsx72("h2", { className: "font-head text-3xl lg:text-4xl", children: title }),
-        subtitle && /* @__PURE__ */ jsx72("p", { className: "font-sans text-lg max-w-xl", children: subtitle }),
-        actions && /* @__PURE__ */ jsx72("div", { className: "flex flex-wrap gap-3 mt-2", children: actions })
+      children: /* @__PURE__ */ jsxs40("div", { className: "mx-auto max-w-6xl px-4 py-16 lg:py-20 flex flex-col items-center text-center gap-4", children: [
+        /* @__PURE__ */ jsx73("h2", { className: "font-head text-3xl lg:text-4xl", children: title }),
+        subtitle && /* @__PURE__ */ jsx73("p", { className: "font-sans text-lg max-w-xl", children: subtitle }),
+        actions && /* @__PURE__ */ jsx73("div", { className: "flex flex-wrap gap-3 mt-2", children: actions })
       ] })
     }
   );
@@ -6125,20 +6293,20 @@ function CTABanner({
 // components/landing/FAQ.tsx
 import * as React60 from "react";
 import { ChevronDown as ChevronDown6 } from "lucide-react";
-import { jsx as jsx73, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs41 } from "react/jsx-runtime";
 function FAQ({ items, className }) {
   const [openIndex, setOpenIndex] = React60.useState(null);
-  return /* @__PURE__ */ jsx73("div", { className: cn("w-full max-w-3xl mx-auto", className), children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx74("div", { className: cn("w-full max-w-3xl mx-auto", className), children: items.map((item, i) => {
     const isOpen = openIndex === i;
-    return /* @__PURE__ */ jsxs39("div", { className: "border-2 border-b-0 last:border-b-2", children: [
-      /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs41("div", { className: "border-2 border-b-0 last:border-b-2", children: [
+      /* @__PURE__ */ jsxs41(
         "button",
         {
           onClick: () => setOpenIndex(isOpen ? null : i),
           className: "w-full flex items-center justify-between p-4 text-left cursor-pointer hover:bg-accent/30 transition-colors",
           children: [
-            /* @__PURE__ */ jsx73("span", { className: "font-head text-sm pr-4", children: item.question }),
-            /* @__PURE__ */ jsx73(
+            /* @__PURE__ */ jsx74("span", { className: "font-head text-sm pr-4", children: item.question }),
+            /* @__PURE__ */ jsx74(
               ChevronDown6,
               {
                 className: cn(
@@ -6150,24 +6318,24 @@ function FAQ({ items, className }) {
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsx73("div", { className: "px-4 pb-4 font-sans text-sm text-muted-foreground", children: item.answer })
+      isOpen && /* @__PURE__ */ jsx74("div", { className: "px-4 pb-4 font-sans text-sm text-muted-foreground", children: item.answer })
     ] }, i);
   }) });
 }
 
 // components/landing/StatsBar.tsx
-import { jsx as jsx74, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs42 } from "react/jsx-runtime";
 function StatsBar({ stats, className }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn(
         "w-full border-y-2 bg-card",
         className
       ),
-      children: /* @__PURE__ */ jsx74("div", { className: "mx-auto max-w-6xl px-4 py-10 grid grid-cols-2 lg:grid-cols-4 gap-8", children: stats.map((stat) => /* @__PURE__ */ jsxs40("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx74("div", { className: "font-head text-3xl lg:text-4xl mb-1", children: stat.value }),
-        /* @__PURE__ */ jsx74("div", { className: "font-sans text-sm text-muted-foreground uppercase", children: stat.label })
+      children: /* @__PURE__ */ jsx75("div", { className: "mx-auto max-w-6xl px-4 py-10 grid grid-cols-2 lg:grid-cols-4 gap-8", children: stats.map((stat) => /* @__PURE__ */ jsxs42("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx75("div", { className: "font-head text-3xl lg:text-4xl mb-1", children: stat.value }),
+        /* @__PURE__ */ jsx75("div", { className: "font-sans text-sm text-muted-foreground uppercase", children: stat.label })
       ] }, stat.label)) })
     }
   );
@@ -6176,37 +6344,39 @@ function StatsBar({ stats, className }) {
 // components/landing/AnnouncementBanner.tsx
 import * as React61 from "react";
 import { X as X4 } from "lucide-react";
-import { jsx as jsx75, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs43 } from "react/jsx-runtime";
 function AnnouncementBanner({
   children,
   dismissible = true,
   className
 }) {
-  const [visible, setVisible] = React61.useState(() => {
-    if (typeof window === "undefined") return true;
-    return sessionStorage.getItem("announcement-dismissed") !== "true";
-  });
+  const [visible, setVisible] = React61.useState(true);
+  React61.useEffect(() => {
+    if (sessionStorage.getItem("announcement-dismissed") === "true") {
+      setVisible(false);
+    }
+  }, []);
   const handleDismiss = () => {
     setVisible(false);
     sessionStorage.setItem("announcement-dismissed", "true");
   };
   if (!visible) return null;
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       className: cn(
         "w-full bg-primary text-primary-foreground border-b-2",
         className
       ),
-      children: /* @__PURE__ */ jsxs41("div", { className: "mx-auto max-w-6xl px-4 py-2 flex items-center justify-center gap-3", children: [
-        /* @__PURE__ */ jsx75("p", { className: "font-sans text-sm text-center flex-1", children }),
-        dismissible && /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsxs43("div", { className: "mx-auto max-w-6xl px-4 py-2 flex items-center justify-center gap-3", children: [
+        /* @__PURE__ */ jsx76("p", { className: "font-sans text-sm text-center flex-1", children }),
+        dismissible && /* @__PURE__ */ jsx76(
           "button",
           {
             onClick: handleDismiss,
             className: "shrink-0 p-2 min-w-[44px] min-h-[44px] inline-flex items-center justify-center hover:bg-foreground/10 transition-colors cursor-pointer",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx75(X4, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx76(X4, { className: "h-4 w-4" })
           }
         )
       ] })
@@ -6215,7 +6385,7 @@ function AnnouncementBanner({
 }
 
 // components/landing/NewsletterSignup.tsx
-import { jsx as jsx76, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs44 } from "react/jsx-runtime";
 function NewsletterSignup({
   title = "Stay in the loop",
   subtitle,
@@ -6223,16 +6393,16 @@ function NewsletterSignup({
   buttonLabel = "Subscribe",
   className
 }) {
-  return /* @__PURE__ */ jsxs42("div", { className: cn("w-full max-w-md mx-auto", className), children: [
-    title && /* @__PURE__ */ jsx76("h3", { className: "font-head text-xl mb-2 text-center", children: title }),
-    subtitle && /* @__PURE__ */ jsx76("p", { className: "font-sans text-sm text-muted-foreground text-center mb-4", children: subtitle }),
-    /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs44("div", { className: cn("w-full max-w-md mx-auto", className), children: [
+    title && /* @__PURE__ */ jsx77("h3", { className: "font-head text-xl mb-2 text-center", children: title }),
+    subtitle && /* @__PURE__ */ jsx77("p", { className: "font-sans text-sm text-muted-foreground text-center mb-4", children: subtitle }),
+    /* @__PURE__ */ jsxs44(
       "form",
       {
         onSubmit: (e) => e.preventDefault(),
         className: "flex gap-2",
         children: [
-          /* @__PURE__ */ jsx76(
+          /* @__PURE__ */ jsx77(
             "input",
             {
               type: "email",
@@ -6241,7 +6411,7 @@ function NewsletterSignup({
               required: true
             }
           ),
-          /* @__PURE__ */ jsx76(
+          /* @__PURE__ */ jsx77(
             "button",
             {
               type: "submit",
@@ -6271,6 +6441,7 @@ export {
   ChartComponent as Chart,
   Checkbox,
   CollapsibleComponent as Collapsible,
+  ColorThemeToggle,
   ComboboxComponent as Combobox,
   CommandComponent as Command,
   Container,
@@ -6332,6 +6503,7 @@ export {
   TooltipComponent as Tooltip,
   TwoColumnLayoutComponent as TwoColumnLayout,
   alertVariants,
+  avatarVariants,
   badgeVariants,
   buttonVariants,
   cardVariants,