@gearbox-protocol/permissionless-ui 1.22.0-next.32 → 1.22.0-next.34

package/dist/esm/components/explorer-links-dropdown/explorer-links-dropdown.js

@@ -1,6 +1,6 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { ExternalLink as k } from "lucide-react";
-import * as c from "react";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { IconExternal as k } from "@gearbox-protocol/static";
+import * as s from "react";
 import { DropdownMenu as C, DropdownMenuTrigger as b } from "../dropdown-menu/dropdown-menu.js";
 import "../dropdown-menu/dropdown-menu-checkbox-item.js";
 import { DropdownMenuContent as D } from "../dropdown-menu/dropdown-menu-content.js";
@@ -44,16 +44,16 @@ function q({
   className: f,
   children: d
 }) {
-  const [g, i] = c.useState(r ?? !1);
-  c.useEffect(() => {
+  const [g, i] = s.useState(r ?? !1);
+  s.useEffect(() => {
     r !== void 0 && i(r);
   }, [r]);
   const x = (t) => {
     i(t), t || p?.();
   }, E = e ?? m[h] ?? m[1];
-  return /* @__PURE__ */ s(C, { open: g, onOpenChange: x, children: [
+  return /* @__PURE__ */ c(C, { open: g, onOpenChange: x, children: [
     /* @__PURE__ */ o(b, { asChild: !0, children: /* @__PURE__ */ o("span", { className: M("cursor-pointer", f), children: d || a || "Explorer" }) }),
-    /* @__PURE__ */ o(D, { align: n === "left" ? "start" : "end", children: E?.map((t) => /* @__PURE__ */ o(w, { asChild: !0, children: /* @__PURE__ */ s(
+    /* @__PURE__ */ o(D, { align: n === "left" ? "start" : "end", children: E?.map((t) => /* @__PURE__ */ o(w, { asChild: !0, children: /* @__PURE__ */ c(
       "a",
       {
         href: N(t.url, l, u),

package/dist/esm/components/filter/filter-checkbox-item.js

@@ -1,27 +1,28 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-dropdown-menu";
-import { Check as n } from "lucide-react";
-import * as m from "react";
+import * as n from "react";
+import { faCheck as m } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as l } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
-import { cn as l } from "../../utils/cn.js";
+import { cn as d } from "../../utils/cn.js";
 import "sonner";
-const d = m.forwardRef(({ className: o, children: r, checked: a, ...s }, i) => /* @__PURE__ */ c(
+const p = n.forwardRef(({ className: o, children: r, checked: a, ...s }, i) => /* @__PURE__ */ c(
   t.CheckboxItem,
   {
     ref: i,
-    className: l(
+    className: d(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       o
     ),
     checked: a,
     ...s,
     children: [
-      /* @__PURE__ */ e("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(n, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ e("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(l, { icon: m, className: "size-4" }) }) }),
       r
     ]
   }
 ));
-d.displayName = t.CheckboxItem.displayName;
+p.displayName = t.CheckboxItem.displayName;
 export {
-  d as FilterCheckboxItem
+  p as FilterCheckboxItem
 };

package/dist/esm/components/filter/filter-chip.js

@@ -1,23 +1,24 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { X as p } from "lucide-react";
-import * as m from "react";
-import { Badge as f } from "../badge/badge.js";
+import * as p from "react";
+import { Badge as m } from "../badge/badge.js";
+import { faXmark as f } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as l } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
-import { cn as l } from "../../utils/cn.js";
+import { cn as u } from "../../utils/cn.js";
 import "sonner";
-const u = m.forwardRef(
-  ({ className: e, label: t, value: d, onRemove: o, showRemove: i = !0, ...a }, n) => /* @__PURE__ */ r("div", { ref: n, ...a, children: /* @__PURE__ */ s(
-    f,
+const d = p.forwardRef(
+  ({ className: e, label: i, value: g, onRemove: o, showRemove: t = !0, ...a }, n) => /* @__PURE__ */ r("div", { ref: n, ...a, children: /* @__PURE__ */ s(
+    m,
     {
       variant: "secondary",
-      className: l(
+      className: u(
         "gap-1.5 px-2 py-1 pr-1.5",
-        i && o && "cursor-pointer",
+        t && o && "cursor-pointer",
         e
       ),
       children: [
-        /* @__PURE__ */ r("span", { children: t }),
-        i && o && /* @__PURE__ */ r(
+        /* @__PURE__ */ r("span", { children: i }),
+        t && o && /* @__PURE__ */ r(
           "button",
           {
             type: "button",
@@ -25,15 +26,15 @@ const u = m.forwardRef(
               c.stopPropagation(), o();
             },
             className: "ml-1 rounded-sm hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-            "aria-label": `Remove filter: ${t}`,
-            children: /* @__PURE__ */ r(p, { className: "h-3 w-3" })
+            "aria-label": `Remove filter: ${i}`,
+            children: /* @__PURE__ */ r(l, { icon: f, className: "size-3" })
           }
         )
       ]
     }
   ) })
 );
-u.displayName = "FilterChip";
+d.displayName = "FilterChip";
 export {
-  u as FilterChip
+  d as FilterChip
 };

package/dist/esm/components/filter/filter-radio-item.js

@@ -1,26 +1,27 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-dropdown-menu";
-import { Circle as n } from "lucide-react";
-import * as l from "react";
+import * as n from "react";
+import { faCircle as c } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as m } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
-import { cn as c } from "../../utils/cn.js";
+import { cn as l } from "../../utils/cn.js";
 import "sonner";
-const m = l.forwardRef(({ className: o, children: r, ...a }, i) => /* @__PURE__ */ s(
+const d = n.forwardRef(({ className: o, children: r, ...a }, i) => /* @__PURE__ */ s(
   t.RadioItem,
   {
     ref: i,
-    className: c(
+    className: l(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       o
     ),
     ...a,
     children: [
-      /* @__PURE__ */ e("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(n, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ e("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(m, { icon: c, className: "size-2 fill-current" }) }) }),
       r
     ]
   }
 ));
-m.displayName = t.RadioItem.displayName;
+d.displayName = t.RadioItem.displayName;
 export {
-  m as FilterRadioItem
+  d as FilterRadioItem
 };

package/dist/esm/components/head-cell/head-cell.js

@@ -1,60 +1,62 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { ChevronUp as v, ChevronDown as C } from "lucide-react";
-import * as N from "react";
-import { HelpTip as m } from "../help-tip/help-tip.js";
-import { TooltipProvider as T, Tooltip as w, TooltipTrigger as y, TooltipContent as b } from "../tooltip/tooltip.js";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import * as v from "react";
+import { HelpTip as f } from "../help-tip/help-tip.js";
+import { faCaretUp as N, faCaretDown as T } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as d } from "../icons/fa-icon.js";
+import "../tooltip/simple-tooltip.js";
+import { TooltipProvider as y, Tooltip as b, TooltipTrigger as H, TooltipContent as w } from "../tooltip/tooltip.js";
 import "@gearbox-protocol/sdk";
-import { cn as o } from "../../utils/cn.js";
+import { cn as n } from "../../utils/cn.js";
 import "sonner";
 function R({
   title: l,
   tip: r,
-  arrowPosition: n = "left",
+  arrowPosition: i = "left",
   sortDirection: s,
-  sortField: f = "this field",
-  sortTip: p,
+  sortField: p = "this field",
+  sortTip: u,
   onSort: t,
-  className: u
+  className: h
 }) {
-  const [h, c] = N.useState(!1), x = !!s || h, d = () => /* @__PURE__ */ e(
+  const [x, a] = v.useState(!1), g = !!s || x, c = () => /* @__PURE__ */ e(
     "span",
     {
-      className: o(
+      className: n(
         "inline-flex items-center transition-opacity",
-        x ? "opacity-100" : "opacity-0"
+        g ? "opacity-100" : "opacity-0"
       ),
-      children: s === "asc" ? /* @__PURE__ */ e(v, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ e(C, { className: "h-3 w-3 text-muted-foreground" })
+      children: s === "asc" ? /* @__PURE__ */ e(d, { icon: N, className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ e(d, { icon: T, className: "size-3 text-muted-foreground" })
     }
-  ), a = () => /* @__PURE__ */ i(
+  ), m = () => /* @__PURE__ */ o(
     "button",
     {
       type: "button",
       onClick: t,
       disabled: !t,
-      className: o(
+      className: n(
         "inline-flex items-center gap-1 text-sm font-medium text-muted-foreground",
         t && "cursor-pointer hover:text-foreground transition-colors",
         !t && "cursor-default"
       ),
       children: [
-        t && n === "left" && d(),
+        t && i === "left" && c(),
         l,
-        t && n === "right" && d()
+        t && i === "right" && c()
       ]
     }
-  ), g = `Sort by ${f}`;
-  return /* @__PURE__ */ i(
+  ), C = `Sort by ${p}`;
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: o("inline-flex items-center gap-1.5", u),
-      onPointerEnter: () => c(!0),
-      onPointerLeave: () => c(!1),
+      className: n("inline-flex items-center gap-1.5", h),
+      onPointerEnter: () => a(!0),
+      onPointerLeave: () => a(!1),
       children: [
-        t ? /* @__PURE__ */ e(T, { children: /* @__PURE__ */ i(w, { children: [
-          /* @__PURE__ */ e(y, { asChild: !0, children: a() }),
-          /* @__PURE__ */ e(b, { children: p || g })
-        ] }) }) : a(),
-        r && /* @__PURE__ */ e(m, { children: r })
+        t ? /* @__PURE__ */ e(y, { children: /* @__PURE__ */ o(b, { children: [
+          /* @__PURE__ */ e(H, { asChild: !0, children: m() }),
+          /* @__PURE__ */ e(w, { children: u || C })
+        ] }) }) : m(),
+        r && /* @__PURE__ */ e(f, { children: r })
       ]
     }
   );
@@ -62,11 +64,11 @@ function R({
 function U({
   title: l,
   tip: r,
-  className: n
+  className: i
 }) {
-  return /* @__PURE__ */ i("div", { className: o("inline-flex items-center gap-1.5", n), children: [
+  return /* @__PURE__ */ o("div", { className: n("inline-flex items-center gap-1.5", i), children: [
     /* @__PURE__ */ e("span", { className: "text-sm font-medium text-muted-foreground", children: l }),
-    r && /* @__PURE__ */ e(m, { children: r })
+    r && /* @__PURE__ */ e(f, { children: r })
   ] });
 }
 export {

package/dist/esm/components/help-tip/help-tip.js

@@ -1,9 +1,10 @@
 import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import { HelpCircle as s } from "lucide-react";
+import { IconQuestionCircle as s } from "@gearbox-protocol/static";
 import * as l from "react";
 import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
+import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as T, Tooltip as h, TooltipTrigger as y, TooltipContent as g } from "../tooltip/tooltip.js";
 const N = l.forwardRef(
   ({

package/dist/esm/components/horizontal-indicator/horizontal-indicator.js

@@ -1,28 +1,29 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { HelpCircle as a } from "lucide-react";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { IconQuestionCircle as a } from "@gearbox-protocol/static";
 import * as d from "react";
+import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as c, Tooltip as m, TooltipTrigger as f, TooltipContent as p } from "../tooltip/tooltip.js";
 import "@gearbox-protocol/sdk";
 import { cn as x } from "../../utils/cn.js";
 import "sonner";
-const h = d.forwardRef(({ label: i, value: l, tip: t, valueDescription: o, className: n }, s) => /* @__PURE__ */ r("div", { ref: s, className: x("flex flex-col gap-2 w-full", n), children: [
-  /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+const h = d.forwardRef(({ label: i, value: l, tip: r, valueDescription: t, className: n }, s) => /* @__PURE__ */ o("div", { ref: s, className: x("flex flex-col gap-2 w-full", n), children: [
+  /* @__PURE__ */ o("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
     /* @__PURE__ */ e("span", { children: i }),
-    t && /* @__PURE__ */ e(c, { delayDuration: 0, children: /* @__PURE__ */ r(m, { children: [
+    r && /* @__PURE__ */ e(c, { delayDuration: 0, children: /* @__PURE__ */ o(m, { children: [
       /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           className: "inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors cursor-help",
-          children: /* @__PURE__ */ e(a, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ e(a, { size: 14, className: "size-3.5" })
         }
       ) }),
-      /* @__PURE__ */ e(p, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ e("p", { children: t }) })
+      /* @__PURE__ */ e(p, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ e("p", { children: r }) })
     ] }) })
   ] }),
-  /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ e("div", { className: "text-base font-semibold text-foreground", children: l }),
-    o && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: o })
+    t && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: t })
   ] })
 ] }));
 h.displayName = "HorizontalIndicator";

package/dist/esm/components/icons/fa-icon.js

@@ -0,0 +1,20 @@
+import { jsx as m } from "react/jsx-runtime";
+import { config as i } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon as t } from "@fortawesome/react-fontawesome";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as n } from "../../utils/cn.js";
+import "sonner";
+i.autoAddCss = !1;
+function u({ className: o, ...r }) {
+  return /* @__PURE__ */ m(
+    t,
+    {
+      className: n("inline-block shrink-0", o),
+      ...r
+    }
+  );
+}
+export {
+  u as FaIcon
+};

package/dist/esm/components/icons/index.js

@@ -0,0 +1,42 @@
+import { faArrowDown as r, faArrowLeft as e, faArrowRight as o, faArrowUp as i, faArrowsUpDown as t, faBars as l, faBolt as s, faCaretDown as C, faCaretLeft as n, faCaretRight as c, faCaretUp as g, faCheck as h, faChevronLeft as w, faChevronRight as p, faCircle as m, faCircleCheck as U, faCircleExclamation as u, faCirclePlus as A, faCircleQuestion as R, faCloud as d, faCog as k, faCreditCard as x, faEllipsisVertical as E, faEnvelope as L, faKeyboard as v, faLifeRing as B, faMagnifyingGlass as D, faMessage as P, faPlus as y, faRightFromBracket as F, faTrash as M, faTriangleExclamation as T, faUser as b, faUserPlus as G, faUsers as I, faWallet as K, faXmark as Q } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as W } from "./fa-icon.js";
+export {
+  W as FaIcon,
+  r as faArrowDown,
+  e as faArrowLeft,
+  o as faArrowRight,
+  i as faArrowUp,
+  t as faArrowsUpDown,
+  l as faBars,
+  s as faBolt,
+  C as faCaretDown,
+  n as faCaretLeft,
+  c as faCaretRight,
+  g as faCaretUp,
+  h as faCheck,
+  w as faChevronLeft,
+  p as faChevronRight,
+  m as faCircle,
+  U as faCircleCheck,
+  u as faCircleExclamation,
+  A as faCirclePlus,
+  R as faCircleQuestion,
+  d as faCloud,
+  k as faCog,
+  x as faCreditCard,
+  E as faEllipsisVertical,
+  L as faEnvelope,
+  v as faKeyboard,
+  B as faLifeRing,
+  D as faMagnifyingGlass,
+  P as faMessage,
+  y as faPlus,
+  F as faRightFromBracket,
+  M as faTrash,
+  T as faTriangleExclamation,
+  b as faUser,
+  G as faUserPlus,
+  I as faUsers,
+  K as faWallet,
+  Q as faXmark
+};

package/dist/esm/components/index.js

@@ -193,17 +193,18 @@ import { TokenIcon as Hl, preloadTokenIcons as vl } from "./token-icon/token-ico
 import { TokenSymbol as El } from "./token-symbol/token-symbol.js";
 import { TokenTemplate as Rl } from "./token-template/token-template.js";
 import { TokensListCell as Nl } from "./tokens-list-cell/tokens-list-cell.js";
-import { Tooltip as Ul, TooltipContent as Wl, TooltipProvider as ql, TooltipTrigger as Yl } from "./tooltip/tooltip.js";
-import { GraphDropdown as zl } from "./trading-view/graph-dropdown.js";
-import { TradingView as jl } from "./trading-view/trading-view.js";
-import { FormattedMessageTyped as Kl, useIntlTyped as Ql } from "./typed-intl/index.js";
-import { Typography as rm, typographyVariants as om } from "./typography/typography.js";
-import { VerticalIndicator as tm, verticalIndicatorVariants as am } from "./vertical-indicator/vertical-indicator.js";
-import { VerticalList as im, verticalListVariants as nm } from "./vertical-list/vertical-list.js";
-import { VSpace as mm } from "./vspace/vspace.js";
-import { WithCopy as fm } from "./with-copy/with-copy.js";
-import { WithFilterButton as sm } from "./with-filter-button/with-filter-button.js";
-import { WithTitle as Tm } from "./with-title/with-title.js";
+import { SimpleTooltip as Ul } from "./tooltip/simple-tooltip.js";
+import { Tooltip as ql, TooltipContent as Yl, TooltipProvider as Zl, TooltipTrigger as zl } from "./tooltip/tooltip.js";
+import { GraphDropdown as jl } from "./trading-view/graph-dropdown.js";
+import { TradingView as Kl } from "./trading-view/trading-view.js";
+import { FormattedMessageTyped as $l, useIntlTyped as rm } from "./typed-intl/index.js";
+import { Typography as em, typographyVariants as tm } from "./typography/typography.js";
+import { VerticalIndicator as pm, verticalIndicatorVariants as im } from "./vertical-indicator/vertical-indicator.js";
+import { VerticalList as lm, verticalListVariants as mm } from "./vertical-list/vertical-list.js";
+import { VSpace as fm } from "./vspace/vspace.js";
+import { WithCopy as sm } from "./with-copy/with-copy.js";
+import { WithFilterButton as Tm } from "./with-filter-button/with-filter-button.js";
+import { WithTitle as cm } from "./with-title/with-title.js";
 export {
   e as Accordion,
   t as AccordionContent,
@@ -326,7 +327,7 @@ export {
   La as FooterLink,
   Va as FooterLinkSection,
   Qe as FormField,
-  Kl as FormattedMessageTyped,
+  $l as FormattedMessageTyped,
   rt as FormattedNumberString,
   Rt as GOOD_HF,
   Ia as GearboxFooter,
@@ -334,7 +335,7 @@ export {
   at as GeneralSelect,
   ct as Graph,
   Ct as GraphCurrentValue,
-  zl as GraphDropdown,
+  jl as GraphDropdown,
   Dt as GraphTooltip,
   Vt as GraphView,
   It as GraphViewWithData,
@@ -427,6 +428,7 @@ export {
   Qt as ShowOn,
   R as SignInRequired,
   yt as SimpleHeadCell,
+  Ul as SimpleTooltip,
   Bi as Skeleton,
   ki as SkeletonStack,
   Hi as Slider,
@@ -481,22 +483,22 @@ export {
   El as TokenSymbol,
   Rl as TokenTemplate,
   Nl as TokensListCell,
-  Ul as Tooltip,
-  Wl as TooltipContent,
-  ql as TooltipProvider,
-  Yl as TooltipTrigger,
-  jl as TradingView,
-  rm as Typography,
+  ql as Tooltip,
+  Yl as TooltipContent,
+  Zl as TooltipProvider,
+  zl as TooltipTrigger,
+  Kl as TradingView,
+  em as Typography,
   sl as UpdatedValue,
-  mm as VSpace,
+  fm as VSpace,
   Bt as VertLine,
-  tm as VerticalIndicator,
-  im as VerticalList,
+  pm as VerticalIndicator,
+  lm as VerticalList,
   Gi as VerticalTimeline,
-  fm as WithCopy,
-  sm as WithFilterButton,
+  sm as WithCopy,
+  Tm as WithFilterButton,
   $p as WithSearchLine,
-  Tm as WithTitle,
+  cm as WithTitle,
   x as alertBadgeVariants,
   ar as backButtonVariants,
   z as badgeVariants,
@@ -541,15 +543,15 @@ export {
   al as tableVariants,
   Vl as textareaVariants,
   kl as tipCardVariants,
-  om as typographyVariants,
+  tm as typographyVariants,
   Gt as useGraphAside,
   fn as useHashTabs,
-  Ql as useIntlTyped,
+  rm as useIntlTyped,
   Fa as useMobileMenu,
   np as useNavbarIndicator,
   dn as useSectionTab,
   sn as useTabControl,
   Gl as useTheme,
-  am as verticalIndicatorVariants,
-  nm as verticalListVariants
+  im as verticalIndicatorVariants,
+  mm as verticalListVariants
 };

package/dist/esm/components/layout/header/header.js

@@ -1,12 +1,13 @@
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { X as b, Menu as N } from "lucide-react";
 import * as c from "react";
+import { faXmark as N, faBars as v } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as m } from "../../icons/fa-icon.js";
 import { cn as o } from "../../../utils/cn.js";
-const m = c.createContext(
+const f = c.createContext(
   null
 );
 function j() {
-  const e = c.useContext(m);
+  const e = c.useContext(f);
   if (!e)
     throw new Error("useMobileMenu must be used within Header component");
   return e;
@@ -16,34 +17,34 @@ const w = c.forwardRef(
     navigation: e,
     logo: a,
     actions: l,
-    fixed: n = !1,
-    sticky: f = !1,
-    containerClassName: u,
+    fixed: i = !1,
+    sticky: u = !1,
+    containerClassName: p,
     className: h,
-    children: v,
+    children: g,
     mobileMenuContent: s,
-    ...p
-  }, x) => {
-    const [t, i] = c.useState(!1);
+    ...x
+  }, b) => {
+    const [t, n] = c.useState(!1);
     return /* @__PURE__ */ d(
       "header",
       {
-        ref: x,
+        ref: b,
         className: o(
           "relative w-full bg-background h-18 flex flex-nowrap items-center",
-          n && "fixed top-0 left-0 right-0 z-50",
-          f && "sticky top-0 z-50",
+          i && "fixed top-0 left-0 right-0 z-50",
+          u && "sticky top-0 z-50",
           h
         ),
-        "data-fixed": n ? "true" : void 0,
-        ...p,
+        "data-fixed": i ? "true" : void 0,
+        ...x,
         children: [
           /* @__PURE__ */ d(
             "div",
             {
               className: o(
                 "w-full h-full flex items-stretch justify-between mx-auto px-4 sm:px-6 lg:px-8",
-                u
+                p
               ),
               children: [
                 a && /* @__PURE__ */ r("div", { className: "flex items-center", children: a }),
@@ -55,9 +56,9 @@ const w = c.forwardRef(
                     {
                       type: "button",
                       className: "md:hidden flex items-center justify-center p-2 rounded-md hover:bg-secondary hover:text-accent-foreground focus:outline-none cursor-pointer",
-                      onClick: () => i(!t),
+                      onClick: () => n(!t),
                       "aria-label": t ? "Close menu" : "Open menu",
-                      children: t ? /* @__PURE__ */ r(b, { className: "h-6 w-6" }) : /* @__PURE__ */ r(N, { className: "h-6 w-6" })
+                      children: t ? /* @__PURE__ */ r(m, { icon: N, className: "size-6" }) : /* @__PURE__ */ r(m, { icon: v, className: "size-6" })
                     }
                   )
                 ] })
@@ -65,9 +66,9 @@ const w = c.forwardRef(
             }
           ),
           t && (e || s || l) && /* @__PURE__ */ r(
-            m.Provider,
+            f.Provider,
             {
-              value: { closeMobileMenu: () => i(!1) },
+              value: { closeMobileMenu: () => n(!1) },
               children: /* @__PURE__ */ r("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ d("div", { className: "flex flex-col px-4 sm:px-6 py-4 space-y-2", children: [
                 s || e,
                 l && /* @__PURE__ */ r(