@almadar/ui 5.0.0 → 5.1.0

package/dist/marketing/index.cjs

@@ -1,9 +1,12 @@
 'use strict';
 
-var React6 = require('react');
+var React8 = require('react');
 var logger = require('@almadar/logger');
 var jsxRuntime = require('react/jsx-runtime');
 var LucideIcons = require('lucide-react');
+var PhosphorIcons = require('@phosphor-icons/react');
+var TablerIcons = require('@tabler/icons-react');
+var FaIcons = require('react-icons/fa');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -25,8 +28,11 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React6__default = /*#__PURE__*/_interopDefault(React6);
+var React8__default = /*#__PURE__*/_interopDefault(React8);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
+var PhosphorIcons__namespace = /*#__PURE__*/_interopNamespace(PhosphorIcons);
+var TablerIcons__namespace = /*#__PURE__*/_interopNamespace(TablerIcons);
+var FaIcons__namespace = /*#__PURE__*/_interopNamespace(FaIcons);
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -2509,10 +2515,10 @@ function cn(...inputs) {
 }
 logger.createLogger("almadar:eventbus");
 logger.createLogger("almadar:eventbus:subscribe");
-var EventBusContext = React6.createContext(null);
-var TraitScopeContext = React6.createContext(null);
+var EventBusContext = React8.createContext(null);
+var TraitScopeContext = React8.createContext(null);
 function useTraitScope() {
-  return React6.useContext(TraitScopeContext);
+  return React8.useContext(TraitScopeContext);
 }
 var log = logger.createLogger("almadar:eventbus");
 var subLog2 = logger.createLogger("almadar:eventbus:subscribe");
@@ -2588,10 +2594,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React6.useContext(EventBusContext);
+  const context = React8.useContext(EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const scope = useTraitScope();
-  return React6.useMemo(() => {
+  return React8.useMemo(() => {
     if (!scope) {
       return {
         ...baseBus,
@@ -2729,7 +2735,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React6__default.default.forwardRef(
+var Box = React8__default.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2759,27 +2765,27 @@ var Box = React6__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React6.useCallback((e) => {
+    const handleClick = React8.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React6.useCallback((e) => {
+    const handleMouseEnter = React8.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React6.useCallback((e) => {
+    const handleMouseLeave = React8.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
-    return React6__default.default.createElement(
+    return React8__default.default.createElement(
       Component,
       {
         ref,
@@ -2998,41 +3004,366 @@ var Typography = ({
   );
 };
 Typography.displayName = "Typography";
-var iconAliases = {
-  "close": LucideIcons__namespace.X,
-  "trash": LucideIcons__namespace.Trash2,
-  "loader": LucideIcons__namespace.Loader2,
-  "stop": LucideIcons__namespace.Square,
-  "volume": LucideIcons__namespace.Volume2,
-  "volume-off": LucideIcons__namespace.VolumeX,
-  "refresh": LucideIcons__namespace.RefreshCw,
-  "share": LucideIcons__namespace.Share2,
-  "sort-asc": LucideIcons__namespace.ArrowUpNarrowWide,
-  "sort-desc": LucideIcons__namespace.ArrowDownNarrowWide
-};
+var DEFAULT_FAMILY = "lucide";
+var VALID_FAMILIES = [
+  "lucide",
+  "phosphor-outline",
+  "phosphor-fill",
+  "phosphor-duotone",
+  "tabler",
+  "fa-solid"
+];
+function getCurrentIconFamily() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return DEFAULT_FAMILY;
+  }
+  const raw = getComputedStyle(document.documentElement).getPropertyValue("--icon-family").trim().replace(/^["']|["']$/g, "");
+  return VALID_FAMILIES.includes(raw) ? raw : DEFAULT_FAMILY;
+}
+var cachedFamily = null;
+var listeners = /* @__PURE__ */ new Set();
+var observer = null;
+function ensureObserver() {
+  if (typeof window === "undefined" || observer) return;
+  observer = new MutationObserver(() => {
+    const next = getCurrentIconFamily();
+    if (next !== cachedFamily) {
+      cachedFamily = next;
+      listeners.forEach((fn) => fn());
+    }
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme", "style"]
+  });
+  cachedFamily = getCurrentIconFamily();
+}
+function subscribeIconFamily(notify) {
+  ensureObserver();
+  listeners.add(notify);
+  return () => {
+    listeners.delete(notify);
+  };
+}
+function getIconFamilySnapshot() {
+  if (cachedFamily !== null) return cachedFamily;
+  cachedFamily = getCurrentIconFamily();
+  return cachedFamily;
+}
+function getIconFamilyServerSnapshot() {
+  return DEFAULT_FAMILY;
+}
+function useIconFamily() {
+  return React8.useSyncExternalStore(
+    subscribeIconFamily,
+    getIconFamilySnapshot,
+    getIconFamilyServerSnapshot
+  );
+}
 function kebabToPascal(name) {
   return name.split("-").map((part) => {
     if (/^\d+$/.test(part)) return part;
     return part.charAt(0).toUpperCase() + part.slice(1);
   }).join("");
 }
-var resolvedCache = /* @__PURE__ */ new Map();
-function resolveIcon(name) {
-  const cached = resolvedCache.get(name);
-  if (cached) return cached;
-  const resolved = doResolve(name);
-  resolvedCache.set(name, resolved);
-  return resolved;
-}
-function doResolve(name) {
-  if (iconAliases[name]) return iconAliases[name];
-  const pascalName = kebabToPascal(name);
-  const directLookup = LucideIcons__namespace[pascalName];
-  if (directLookup && typeof directLookup === "object") return directLookup;
-  const asIs = LucideIcons__namespace[name];
+var lucideAliases = {
+  close: LucideIcons__namespace.X,
+  trash: LucideIcons__namespace.Trash2,
+  loader: LucideIcons__namespace.Loader2,
+  stop: LucideIcons__namespace.Square,
+  volume: LucideIcons__namespace.Volume2,
+  "volume-off": LucideIcons__namespace.VolumeX,
+  refresh: LucideIcons__namespace.RefreshCw,
+  share: LucideIcons__namespace.Share2,
+  "sort-asc": LucideIcons__namespace.ArrowUpNarrowWide,
+  "sort-desc": LucideIcons__namespace.ArrowDownNarrowWide
+};
+function resolveLucide(name) {
+  if (lucideAliases[name]) return lucideAliases[name];
+  const pascal = kebabToPascal(name);
+  const lucideMap = LucideIcons__namespace;
+  const direct = lucideMap[pascal];
+  if (direct && typeof direct === "object") return direct;
+  const asIs = lucideMap[name];
   if (asIs && typeof asIs === "object") return asIs;
   return LucideIcons__namespace.HelpCircle;
 }
+var phosphorAliases = {
+  // lucide name → phosphor PascalCase name
+  search: "MagnifyingGlass",
+  close: "X",
+  loader: "CircleNotch",
+  refresh: "ArrowsClockwise",
+  "sort-asc": "SortAscending",
+  "sort-desc": "SortDescending",
+  "chevron-down": "CaretDown",
+  "chevron-up": "CaretUp",
+  "chevron-left": "CaretLeft",
+  "chevron-right": "CaretRight",
+  "help-circle": "Question",
+  "alert-triangle": "Warning",
+  "alert-circle": "WarningCircle",
+  "check-circle": "CheckCircle",
+  "x-circle": "XCircle",
+  edit: "PencilSimple",
+  pencil: "PencilSimple",
+  trash: "Trash",
+  send: "PaperPlaneRight",
+  external: "ArrowSquareOut",
+  "external-link": "ArrowSquareOut",
+  plus: "Plus",
+  minus: "Minus",
+  x: "X",
+  check: "Check",
+  star: "Star",
+  heart: "Heart",
+  home: "House",
+  user: "User",
+  users: "Users",
+  settings: "Gear",
+  menu: "List",
+  "arrow-up": "ArrowUp",
+  "arrow-down": "ArrowDown",
+  "arrow-left": "ArrowLeft",
+  "arrow-right": "ArrowRight",
+  copy: "Copy",
+  download: "DownloadSimple",
+  upload: "UploadSimple",
+  filter: "Funnel",
+  calendar: "Calendar",
+  clock: "Clock",
+  bell: "Bell",
+  mail: "Envelope",
+  envelope: "Envelope",
+  lock: "Lock",
+  unlock: "LockOpen",
+  eye: "Eye",
+  "eye-off": "EyeSlash",
+  more: "DotsThree",
+  "more-vertical": "DotsThreeVertical",
+  info: "Info",
+  warning: "Warning",
+  error: "WarningCircle"
+};
+function resolvePhosphor(name, weight) {
+  const target = phosphorAliases[name] ?? kebabToPascal(name);
+  const map = PhosphorIcons__namespace;
+  const PhosphorComp = map[target];
+  if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
+  const Component = PhosphorComp;
+  const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      weight,
+      className: props.className,
+      style: props.style,
+      size: props.size ?? "1em"
+    }
+  );
+  Adapter.displayName = `Phosphor.${target}.${weight}`;
+  return Adapter;
+}
+var tablerAliases = {
+  // lucide name → tabler suffix (after the `Icon` prefix)
+  search: "Search",
+  close: "X",
+  loader: "Loader2",
+  refresh: "Refresh",
+  "sort-asc": "SortAscending",
+  "sort-desc": "SortDescending",
+  "chevron-down": "ChevronDown",
+  "chevron-up": "ChevronUp",
+  "chevron-left": "ChevronLeft",
+  "chevron-right": "ChevronRight",
+  "help-circle": "HelpCircle",
+  "alert-triangle": "AlertTriangle",
+  "alert-circle": "AlertCircle",
+  "check-circle": "CircleCheck",
+  "x-circle": "CircleX",
+  edit: "Pencil",
+  trash: "Trash",
+  send: "Send",
+  external: "ExternalLink",
+  plus: "Plus",
+  x: "X",
+  check: "Check",
+  star: "Star",
+  heart: "Heart",
+  home: "Home",
+  user: "User",
+  users: "Users",
+  settings: "Settings",
+  menu: "Menu2",
+  copy: "Copy",
+  download: "Download",
+  upload: "Upload",
+  filter: "Filter",
+  calendar: "Calendar",
+  clock: "Clock",
+  bell: "Bell",
+  mail: "Mail",
+  envelope: "Mail",
+  lock: "Lock",
+  unlock: "LockOpen",
+  eye: "Eye",
+  "eye-off": "EyeOff",
+  more: "Dots",
+  "more-vertical": "DotsVertical",
+  info: "InfoCircle"
+};
+function resolveTabler(name) {
+  const suffix = tablerAliases[name] ?? kebabToPascal(name);
+  const target = `Icon${suffix}`;
+  const map = TablerIcons__namespace;
+  const TablerComp = map[target];
+  if (!TablerComp || typeof TablerComp !== "object") return null;
+  const Component = TablerComp;
+  const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      stroke: props.strokeWidth ?? 1.5,
+      className: props.className,
+      style: props.style,
+      size: props.size ?? 24
+    }
+  );
+  Adapter.displayName = `Tabler.${target}`;
+  return Adapter;
+}
+var faAliases = {
+  // lucide name → fa-solid suffix (after the `Fa` prefix)
+  search: "Search",
+  close: "Times",
+  x: "Times",
+  loader: "Spinner",
+  refresh: "Sync",
+  "sort-asc": "SortAmountUp",
+  "sort-desc": "SortAmountDown",
+  "chevron-down": "ChevronDown",
+  "chevron-up": "ChevronUp",
+  "chevron-left": "ChevronLeft",
+  "chevron-right": "ChevronRight",
+  "help-circle": "QuestionCircle",
+  "alert-triangle": "ExclamationTriangle",
+  "alert-circle": "ExclamationCircle",
+  "check-circle": "CheckCircle",
+  "x-circle": "TimesCircle",
+  edit: "Edit",
+  pencil: "Pencil",
+  trash: "Trash",
+  send: "PaperPlane",
+  external: "ExternalLinkAlt",
+  plus: "Plus",
+  minus: "Minus",
+  check: "Check",
+  star: "Star",
+  heart: "Heart",
+  home: "Home",
+  user: "User",
+  users: "Users",
+  settings: "Cog",
+  menu: "Bars",
+  "arrow-up": "ArrowUp",
+  "arrow-down": "ArrowDown",
+  "arrow-left": "ArrowLeft",
+  "arrow-right": "ArrowRight",
+  copy: "Copy",
+  download: "Download",
+  upload: "Upload",
+  filter: "Filter",
+  calendar: "Calendar",
+  clock: "Clock",
+  bell: "Bell",
+  mail: "Envelope",
+  envelope: "Envelope",
+  lock: "Lock",
+  unlock: "LockOpen",
+  eye: "Eye",
+  "eye-off": "EyeSlash",
+  more: "EllipsisH",
+  "more-vertical": "EllipsisV",
+  info: "InfoCircle",
+  warning: "ExclamationTriangle"
+};
+function resolveFa(name) {
+  const suffix = faAliases[name] ?? kebabToPascal(name);
+  const target = `Fa${suffix}`;
+  const map = FaIcons__namespace;
+  const FaComp = map[target];
+  if (!FaComp || typeof FaComp !== "function") return null;
+  const Component = FaComp;
+  const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: props.className,
+      style: props.style,
+      size: props.size ?? "1em"
+    }
+  );
+  Adapter.displayName = `Fa.${target}`;
+  return Adapter;
+}
+var warned = /* @__PURE__ */ new Set();
+function warnFallback(name, family) {
+  const key = `${family}::${name}`;
+  if (warned.has(key)) return;
+  warned.add(key);
+  if (typeof console !== "undefined") {
+    console.warn(
+      `[iconFamily] No '${name}' mapping in family '${family}'; falling back to lucide. Add an alias in lib/iconFamily.ts.`
+    );
+  }
+}
+function makeLucideAdapter(name) {
+  const LucideComp = resolveLucide(name);
+  const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+    LucideComp,
+    {
+      className: props.className,
+      strokeWidth: props.strokeWidth,
+      style: props.style,
+      size: props.size
+    }
+  );
+  Adapter.displayName = `Lucide.${name}`;
+  return Adapter;
+}
+function resolveIconForFamily(name, family) {
+  switch (family) {
+    case "lucide":
+      return makeLucideAdapter(name);
+    case "phosphor-outline": {
+      const p = resolvePhosphor(name, "regular");
+      if (p) return p;
+      warnFallback(name, family);
+      return makeLucideAdapter(name);
+    }
+    case "phosphor-fill": {
+      const p = resolvePhosphor(name, "fill");
+      if (p) return p;
+      warnFallback(name, family);
+      return makeLucideAdapter(name);
+    }
+    case "phosphor-duotone": {
+      const p = resolvePhosphor(name, "duotone");
+      if (p) return p;
+      warnFallback(name, family);
+      return makeLucideAdapter(name);
+    }
+    case "tabler": {
+      const t = resolveTabler(name);
+      if (t) return t;
+      warnFallback(name, family);
+      return makeLucideAdapter(name);
+    }
+    case "fa-solid": {
+      const f3 = resolveFa(name);
+      if (f3) return f3;
+      warnFallback(name, family);
+      return makeLucideAdapter(name);
+    }
+  }
+}
 var sizeClasses = {
   xs: "w-3 h-3",
   sm: "w-4 h-4",
@@ -3055,22 +3386,50 @@ var Icon = ({
   strokeWidth,
   style
 }) => {
-  const IconComponent = icon ?? (name ? resolveIcon(name) : LucideIcons__namespace.HelpCircle);
+  const family = useIconFamily();
+  const RenderedComponent = React8__default.default.useMemo(() => {
+    if (icon) return null;
+    return name ? resolveIconForFamily(name, family) : null;
+  }, [icon, name, family]);
   const effectiveStrokeWidth = strokeWidth ?? void 0;
+  const inlineStyle = {
+    ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
+    ...style
+  };
+  const composedClassName = cn(
+    sizeClasses[size],
+    animationClasses[animation],
+    color ? color : "text-current",
+    className
+  );
+  if (icon) {
+    const Direct = icon;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Direct,
+      {
+        className: composedClassName,
+        strokeWidth: effectiveStrokeWidth,
+        style: inlineStyle
+      }
+    );
+  }
+  if (RenderedComponent) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RenderedComponent,
+      {
+        className: composedClassName,
+        strokeWidth: effectiveStrokeWidth,
+        style: inlineStyle
+      }
+    );
+  }
+  const Fallback = LucideIcons__namespace.HelpCircle;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    IconComponent,
+    Fallback,
     {
-      className: cn(
-        sizeClasses[size],
-        animationClasses[animation],
-        color ? color : "text-current",
-        className
-      ),
+      className: composedClassName,
       strokeWidth: effectiveStrokeWidth,
-      style: {
-        ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
-        ...style
-      }
+      style: inlineStyle
     }
   );
 };
@@ -3138,14 +3497,13 @@ var iconSizeStyles = {
 function resolveIconProp(value, sizeClass) {
   if (!value) return null;
   if (typeof value === "string") {
-    const Resolved = resolveIcon(value);
-    return Resolved ? /* @__PURE__ */ jsxRuntime.jsx(Resolved, { className: sizeClass }) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: value, className: sizeClass });
   }
   if (typeof value === "function") {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React6__default.default.isValidElement(value)) {
+  if (React8__default.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -3154,7 +3512,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React6__default.default.forwardRef(
+var Button = React8__default.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3250,13 +3608,10 @@ var sizeStyles3 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React6__default.default.forwardRef(
+var Badge = React8__default.default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
     const iconSizes = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
-    const resolvedIcon = typeof icon === "string" ? (() => {
-      const I = resolveIcon(icon);
-      return I ? /* @__PURE__ */ jsxRuntime.jsx(I, { className: iconSizes[size] }) : null;
-    })() : icon;
+    const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: iconSizes[size] }) : icon;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
@@ -3340,7 +3695,7 @@ var shadowStyles2 = {
   md: "shadow",
   lg: "shadow-elevation-dialog"
 };
-var Card = React6__default.default.forwardRef(
+var Card = React8__default.default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -3376,9 +3731,9 @@ var Card = React6__default.default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React6__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React8__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React6__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React8__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -3391,11 +3746,11 @@ var CardTitle = React6__default.default.forwardRef(({ className, ...props }, ref
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React6__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React8__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React6__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React8__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -3552,7 +3907,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React6__default.default.forwardRef(
+var ContentSection = React8__default.default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -3576,8 +3931,8 @@ var InstallBox = ({
   label,
   className
 }) => {
-  const [copied, setCopied] = React6.useState(false);
-  const handleCopy = React6.useCallback(() => {
+  const [copied, setCopied] = React8.useState(false);
+  const handleCopy = React8.useCallback(() => {
     void navigator.clipboard.writeText(command);
     setCopied(true);
     const timer = setTimeout(() => setCopied(false), 2e3);
@@ -4012,7 +4367,7 @@ var PricingCard = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             Icon,
             {
-              icon: LucideIcons.Check,
+              name: "check",
               size: "sm",
               className: "flex-shrink-0 text-success"
             }
@@ -4148,7 +4503,7 @@ var StepFlow = ({
   className
 }) => {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React8__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
         showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-8 bg-border" })
@@ -4159,7 +4514,7 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React6__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -4357,7 +4712,7 @@ var Avatar = ({
   alt,
   name,
   initials: providedInitials,
-  icon: Icon2,
+  icon: IconComponent,
   size = "md",
   status,
   badge,
@@ -4370,7 +4725,7 @@ var Avatar = ({
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
   const hasImage = !!src;
   const hasInitials = !!initials;
-  const hasIcon = !!Icon2;
+  const hasIcon = !!IconComponent;
   const getInitialsBackground = () => "bg-primary text-primary-foreground";
   const isClickable = action || onClick;
   const handleClick = () => {
@@ -4414,8 +4769,8 @@ var Avatar = ({
             ),
             children: initials.substring(0, 2).toUpperCase()
           }
-        ) : hasIcon ? /* @__PURE__ */ jsxRuntime.jsx(
-          Icon2,
+        ) : hasIcon && IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+          IconComponent,
           {
             className: cn(
               "text-foreground",
@@ -4423,8 +4778,9 @@ var Avatar = ({
             )
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
-          LucideIcons.User,
+          Icon,
           {
+            name: "user",
             className: cn(
               "text-foreground",
               iconSizeClasses[size]
@@ -4674,10 +5030,10 @@ var AnimatedCounter = ({
   duration = 1500,
   className
 }) => {
-  const ref = React6.useRef(null);
-  const [displayValue, setDisplayValue] = React6.useState("0");
-  const [hasAnimated, setHasAnimated] = React6.useState(false);
-  const animate = React6.useCallback(() => {
+  const ref = React8.useRef(null);
+  const [displayValue, setDisplayValue] = React8.useState("0");
+  const [hasAnimated, setHasAnimated] = React8.useState(false);
+  const animate = React8.useCallback(() => {
     const { num, prefix, suffix, decimals } = parseValue(value);
     if (num === 0) {
       setDisplayValue(String(value));
@@ -4698,22 +5054,22 @@ var AnimatedCounter = ({
     };
     requestAnimationFrame(tick);
   }, [value, duration]);
-  React6.useEffect(() => {
+  React8.useEffect(() => {
     if (hasAnimated) return;
     const el = ref.current;
     if (!el) return;
-    const observer = new IntersectionObserver(
+    const observer2 = new IntersectionObserver(
       (entries) => {
         if (entries[0].isIntersecting) {
           setHasAnimated(true);
           animate();
-          observer.disconnect();
+          observer2.disconnect();
         }
       },
       { threshold: 0.3 }
     );
-    observer.observe(el);
-    return () => observer.disconnect();
+    observer2.observe(el);
+    return () => observer2.disconnect();
   }, [hasAnimated, animate]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ref, className: cn("flex flex-col items-center gap-1 p-4", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4748,7 +5104,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React6__default.default.forwardRef(
+var AnimatedReveal = React8__default.default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -4763,10 +5119,10 @@ var AnimatedReveal = React6__default.default.forwardRef(
     style,
     ...props
   }, forwardedRef) => {
-    const [isAnimated, setIsAnimated] = React6.useState(false);
-    const internalRef = React6.useRef(null);
-    const hasAnimated = React6.useRef(false);
-    const setRef = React6.useCallback(
+    const [isAnimated, setIsAnimated] = React8.useState(false);
+    const internalRef = React8.useRef(null);
+    const hasAnimated = React8.useRef(false);
+    const setRef = React8.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -4774,11 +5130,11 @@ var AnimatedReveal = React6__default.default.forwardRef(
       },
       [forwardedRef]
     );
-    React6.useEffect(() => {
+    React8.useEffect(() => {
       if (trigger !== "scroll") return;
       const el = internalRef.current;
       if (!el) return;
-      const observer = new IntersectionObserver(
+      const observer2 = new IntersectionObserver(
         ([entry]) => {
           if (entry.isIntersecting) {
             if (once && hasAnimated.current) return;
@@ -4790,8 +5146,8 @@ var AnimatedReveal = React6__default.default.forwardRef(
         },
         { threshold }
       );
-      observer.observe(el);
-      return () => observer.disconnect();
+      observer2.observe(el);
+      return () => observer2.disconnect();
     }, [trigger, threshold, once]);
     const handleMouseEnter = trigger === "hover" ? () => setIsAnimated(true) : void 0;
     const handleMouseLeave = trigger === "hover" ? () => {
@@ -4800,7 +5156,7 @@ var AnimatedReveal = React6__default.default.forwardRef(
         setIsAnimated(false);
       }
     } : void 0;
-    React6.useEffect(() => {
+    React8.useEffect(() => {
       if (trigger === "manual" && manualAnimate !== void 0) {
         setIsAnimated(manualAnimate);
       }
@@ -4830,9 +5186,9 @@ var AnimatedReveal = React6__default.default.forwardRef(
 );
 AnimatedReveal.displayName = "AnimatedReveal";
 function useFetchedSvg(src) {
-  const [svg, setSvg] = React6.useState(null);
-  const cache = React6.useRef({});
-  React6.useEffect(() => {
+  const [svg, setSvg] = React8.useState(null);
+  const cache = React8.useRef({});
+  React8.useEffect(() => {
     if (!src) {
       setSvg(null);
       return;
@@ -4901,7 +5257,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React6__default.default.forwardRef(
+var AnimatedGraphic = React8__default.default.forwardRef(
   ({
     src,
     svgContent,
@@ -4920,11 +5276,11 @@ var AnimatedGraphic = React6__default.default.forwardRef(
     children,
     ...props
   }, ref) => {
-    const containerRef = React6.useRef(null);
+    const containerRef = React8.useRef(null);
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
-    const prevAnimateRef = React6.useRef(animate);
-    const setRef = React6__default.default.useCallback(
+    const prevAnimateRef = React8.useRef(animate);
+    const setRef = React8__default.default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -4932,7 +5288,7 @@ var AnimatedGraphic = React6__default.default.forwardRef(
       },
       [ref]
     );
-    React6.useEffect(() => {
+    React8.useEffect(() => {
       const el = containerRef.current;
       if (!el || !strokeColor) return;
       const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
@@ -4940,7 +5296,7 @@ var AnimatedGraphic = React6__default.default.forwardRef(
         p.style.stroke = strokeColor;
       });
     }, [resolvedSvg, strokeColor]);
-    React6.useEffect(() => {
+    React8.useEffect(() => {
       const el = containerRef.current;
       if (!el || !resolvedSvg) return;
       if (animation === "draw" || animation === "fill") {
@@ -4965,7 +5321,7 @@ var AnimatedGraphic = React6__default.default.forwardRef(
         });
       }
     }, [resolvedSvg, animation]);
-    React6.useEffect(() => {
+    React8.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const id = requestAnimationFrame(() => {
@@ -5765,7 +6121,7 @@ var GeometricPattern = ({
   children,
   className
 }) => {
-  const reactId = React6.useId();
+  const reactId = React8.useId();
   const patternId = `gp${reactId.replace(/:/g, "")}`;
   const size = 60 * scale;
   const stripHeight = 40 * scale;
@@ -5992,7 +6348,7 @@ var EdgeDecoration = ({
   width = 15,
   className
 }) => {
-  const id = React6.useId();
+  const id = React8.useId();
   const Variant = VARIANT_MAP2[variant];
   const sides = side === "both" ? ["left", "right"] : [side];
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: sides.map((s) => /* @__PURE__ */ jsxRuntime.jsx(