trepur_components 2.3.47 → 2.3.48

package/lib/components/Dropdown/index.js

@@ -1,45 +1,47 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import { createContext as f, forwardRef as r, useState as D, useRef as b, useMemo as x, useContext as a } from "react";
-import { Button as l } from "../Button/index.js";
-import { faChevronDown as y } from "@fortawesome/fontawesome-free-solid";
-import { useClickOutside as v } from "./utils.js";
-const s = f(null), d = r(({ children: t }) => {
-  const [o, e] = D(!1), i = b(null), u = x(
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { createContext as D, forwardRef as s, useState as b, useRef as x, useMemo as y, useContext as i } from "react";
+import { Button as d } from "../Button/index.js";
+import { faChevronDown as v } from "@fortawesome/fontawesome-free-solid";
+import { useClickOutside as C } from "./utils.js";
+const a = D(null), c = s(({ children: t }, n) => {
+  const [o, e] = b(!1), l = x(null), w = y(
     () => ({
       showDropdown: o,
       setShowDropdown: e
     }),
     [o, e]
   );
-  return v(i, () => {
+  return C(l, () => {
     e(!1);
-  }), /* @__PURE__ */ n(s.Provider, { value: u, children: /* @__PURE__ */ n("div", { ref: i, className: "relative inline-block text-left", children: t }) });
-}), c = r(({ children: t }) => {
-  const { showDropdown: o, setShowDropdown: e } = a(s) || {};
-  return /* @__PURE__ */ w(l, { onClick: () => e == null ? void 0 : e(!o), children: [
+  }), /* @__PURE__ */ r(a.Provider, { value: w, children: /* @__PURE__ */ r("div", { ref: l ?? n, className: "relative inline-block text-left", children: t }) });
+}), m = s(({ children: t }, n) => {
+  const { showDropdown: o, setShowDropdown: e } = i(a) || {};
+  return /* @__PURE__ */ f(d, { ref: n, onClick: () => e == null ? void 0 : e(!o), children: [
     t,
-    /* @__PURE__ */ n(l.Icon, { icon: y })
+    /* @__PURE__ */ r(d.Icon, { icon: v })
   ] });
-}), m = r(
-  ({ children: t }) => {
-    const { showDropdown: o } = a(s) || {};
-    return o ? /* @__PURE__ */ n(
+}), p = s(
+  ({ children: t }, n) => {
+    const { showDropdown: o } = i(a) || {};
+    return o ? /* @__PURE__ */ r(
       "div",
       {
+        ref: n,
         className: "z-50 mt-2 w-48 rounded-lg border-2 bg-primary text-white",
         role: "menu",
         "aria-orientation": "vertical",
         "aria-labelledby": "menu-button",
-        children: /* @__PURE__ */ n("ul", { className: "py-1 text-sm", children: t })
+        children: /* @__PURE__ */ r("ul", { className: "py-1 text-sm", children: t })
       }
-    ) : /* @__PURE__ */ n("div", {});
+    ) : /* @__PURE__ */ r("div", {});
   }
-), p = r(
-  ({ children: t }) => {
-    const { setShowDropdown: o } = a(s) || {};
-    return /* @__PURE__ */ n(
+), u = s(
+  ({ children: t }, n) => {
+    const { setShowDropdown: o } = i(a) || {};
+    return /* @__PURE__ */ r(
       "li",
       {
+        ref: n,
         className: "px-4 py-2",
         onClick: () => {
           o == null || o(!1);
@@ -52,15 +54,15 @@ const s = f(null), d = r(({ children: t }) => {
     );
   }
 );
-d.displayName = "Dropdown";
-c.displayName = "Dropdown.Label";
-m.displayName = "Dropdown.List";
-p.displayName = "Dropdown.Item";
-const I = Object.assign(d, {
-  Label: c,
-  List: m,
-  Item: p
+c.displayName = "Dropdown";
+m.displayName = "Dropdown.Label";
+p.displayName = "Dropdown.List";
+u.displayName = "Dropdown.Item";
+const g = Object.assign(c, {
+  Label: m,
+  List: p,
+  Item: u
 });
 export {
-  I as Dropdown
+  g as Dropdown
 };

package/lib/components/FooterNav/index.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
 import s from "clsx";
-import { Icon as N } from "../Icon/index.js";
+import { Icon as d } from "../Icon/index.js";
 const l = n(({ className: o, children: e, ...t }, r) => /* @__PURE__ */ a(
   "div",
   {
@@ -13,9 +13,10 @@ const l = n(({ className: o, children: e, ...t }, r) => /* @__PURE__ */ a(
     ...t,
     children: e
   }
-)), m = n(({ className: o, children: e, href: t, onClick: r, ...p }) => /* @__PURE__ */ a(
+)), m = n(({ className: o, children: e, href: t, onClick: r, ...p }, N) => /* @__PURE__ */ a(
   "div",
   {
+    ref: N,
     className: s(
       "group w-full cursor-pointer py-2 text-center transition-all duration-500",
       o
@@ -31,16 +32,16 @@ const l = n(({ className: o, children: e, ...t }, r) => /* @__PURE__ */ a(
     ...t,
     children: e
   }
-)), c = n(({ icon: o, ...e }) => /* @__PURE__ */ a(N, { icon: o, ...e }));
+)), c = n(({ icon: o, ...e }, t) => /* @__PURE__ */ a(d, { icon: o, ref: t, ...e }));
 l.displayName = "FooterNav";
 m.displayName = "FooterNav.Item";
 c.displayName = "FooterNav.Icon";
 i.displayName = "FooterNav.Label";
-const x = Object.assign(l, {
+const F = Object.assign(l, {
   Item: m,
   Label: i,
   Icon: c
 });
 export {
-  x as FooterNav
+  F as FooterNav
 };

package/lib/components/ImageCard/index.js

@@ -1,35 +1,36 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as o } from "react";
 import { Image as N } from "../Image/index.js";
-import s from "clsx";
+import r from "clsx";
 import { Button as f } from "../Button/index.js";
-const d = o(({ className: a, children: e, onClick: t, ...r }, I) => /* @__PURE__ */ m(
+const d = o(({ className: a, children: e, onClick: t, ...s }, I) => /* @__PURE__ */ m(
   "div",
   {
     ref: I,
-    className: s(
+    className: r(
       "grid overflow-hidden rounded-xl bg-white drop-shadow",
       a
     ),
     onClick: t,
-    ...r,
+    ...s,
     children: e
   }
-)), n = o(({ src: a, ...e }) => /* @__PURE__ */ m("div", { className: "h-64", children: /* @__PURE__ */ m(N, { className: "object-cover", src: a, ...e }) })), l = o(({ children: a, className: e, ...t }, r) => /* @__PURE__ */ m("div", { className: s("p-4 pt-2", e), ref: r, ...t, children: a })), i = o(({ className: a, ...e }, t) => /* @__PURE__ */ m("p", { className: s("text-sm font-bold", a), ref: t, ...e })), p = o(({ className: a, ...e }, t) => /* @__PURE__ */ m("p", { className: s("text-sm font-normal", a), ref: t, ...e })), c = o(({ className: a, ...e }, t) => /* @__PURE__ */ m(
+)), n = o(({ src: a, ...e }, t) => /* @__PURE__ */ m("div", { ref: t, className: "h-64", children: /* @__PURE__ */ m(N, { className: "object-cover", src: a, ...e }) })), l = o(({ children: a, className: e, ...t }, s) => /* @__PURE__ */ m("div", { className: r("p-4 pt-2", e), ref: s, ...t, children: a })), i = o(({ className: a, ...e }, t) => /* @__PURE__ */ m("p", { className: r("text-sm font-bold", a), ref: t, ...e })), p = o(({ className: a, ...e }, t) => /* @__PURE__ */ m("p", { className: r("text-sm font-normal", a), ref: t, ...e })), c = o(({ className: a, ...e }, t) => /* @__PURE__ */ m(
   "p",
   {
-    className: s("line-clamp-5 pt-2 text-md font-normal", a),
+    className: r("line-clamp-5 pt-2 text-md font-normal", a),
     ref: t,
     ...e
   }
-)), g = o(({ children: a, className: e, ...t }) => /* @__PURE__ */ m(
+)), g = o(({ children: a, className: e, ...t }, s) => /* @__PURE__ */ m(
   f,
   {
-    className: s("mt-4 my-auto w-full justify-center", e),
+    ref: s,
+    className: r("mt-4 my-auto w-full justify-center", e),
     ...t,
     children: a
   }
-)), C = o(({ children: a, className: e, ...t }) => /* @__PURE__ */ m("p", { className: s("pt-4 text-end text-sm", e), ...t, children: a }));
+)), C = o(({ children: a, className: e, ...t }, s) => /* @__PURE__ */ m("p", { ref: s, className: r("pt-4 text-end text-sm", e), ...t, children: a }));
 d.displayName = "ImageCard";
 n.displayName = "ImageCard.Image";
 i.displayName = "ImageCard.Title";

package/lib/components/Input/Input.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
         Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
             required?: boolean | undefined;
         } & import('react').RefAttributes<HTMLDivElement>>;
-        Box: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Box: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLInputElement> & import('react').RefAttributes<HTMLInputElement>>;
         Validation: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     };
     args: {

package/lib/components/Input/index.d.ts

@@ -27,7 +27,7 @@ declare const Input: import('react').ForwardRefExoticComponent<HTMLAttributes<HT
     Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
         required?: boolean | undefined;
     } & import('react').RefAttributes<HTMLDivElement>>;
-    Box: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Box: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & import('react').RefAttributes<HTMLInputElement>>;
     Validation: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
 };
 export { Input };

package/lib/components/Input/index.js

@@ -1,69 +1,70 @@
 import { jsx as o, jsxs as I } from "react/jsx-runtime";
 import { createContext as b, forwardRef as a, useMemo as N, useRef as y, useContext as d } from "react";
 import m from "clsx";
-const s = b(null), p = a(({ children: n, errors: e, placeholder: t, ...r }, l) => {
+const s = b(null), p = a(({ children: r, errors: e, placeholder: t, ...n }, l) => {
   const f = N(
     () => ({
       errors: e,
       placeholder: t,
-      ...r
+      ...n
     }),
-    [e, r]
+    [e, n]
   );
-  return /* @__PURE__ */ o(s.Provider, { value: f, children: /* @__PURE__ */ o("div", { ref: l, children: n }) });
+  return /* @__PURE__ */ o(s.Provider, { value: f, children: /* @__PURE__ */ o("div", { ref: l, children: r }) });
 }), u = a(
-  ({ children: n, ...e }, t) => {
-    const r = y(null);
+  ({ children: r, ...e }, t) => {
+    const n = y(null);
     return /* @__PURE__ */ o(
       "div",
       {
         className: "mt-4 w-full",
         onClick: () => {
           var l;
-          return (l = r.current) == null ? void 0 : l.focus();
+          return (l = n.current) == null ? void 0 : l.focus();
         },
         ref: t,
         ...e,
-        children: n
+        children: r
       }
     );
   }
-), i = a(({ className: n, children: e, required: t = !1 }, r) => /* @__PURE__ */ I(
+), i = a(({ className: r, children: e, required: t = !1 }, n) => /* @__PURE__ */ I(
   "div",
   {
-    ref: r,
-    className: m("flex px-1 text-sm font-normal leading-5", n),
+    ref: n,
+    className: m("flex px-1 text-sm font-normal leading-5", r),
     children: [
       /* @__PURE__ */ o("p", { children: e }),
       t && /* @__PURE__ */ o("p", { className: "text-sm font-normal", children: " *" })
     ]
   }
 )), c = a(
-  ({ ...n }) => {
-    const { errors: e, placeholder: t } = d(s) || {};
+  ({ ...r }, e) => {
+    const { errors: t, placeholder: n } = d(s) || {};
     return /* @__PURE__ */ o(
       "input",
       {
-        placeholder: t,
+        ref: e,
+        placeholder: n,
         className: m(
           "text-ink text-md w-full rounded-md border border-gray-300 bg-white py-2 pl-4",
           {
-            "border-error border-2": e != null
+            "border-error border-2": t != null
           }
         ),
-        ...n
+        ...r
       }
     );
   }
-), x = a(({ ...n }, e) => {
+), x = a(({ ...r }, e) => {
   const { errors: t } = d(s) || {};
   return /* @__PURE__ */ o(
     "div",
     {
       ref: e,
       className: "text-md gap-y-2 pl-1 pt-2 font-semibold text-error-default",
-      ...n,
-      children: t == null ? void 0 : t.map((r, l) => /* @__PURE__ */ o("p", { children: r }, `error-msg-${l + 1}`))
+      ...r,
+      children: t == null ? void 0 : t.map((n, l) => /* @__PURE__ */ o("p", { children: n }, `error-msg-${l + 1}`))
     }
   );
 });

package/lib/components/Link/Link.stories.d.ts

@@ -26,6 +26,5 @@ export declare const Ghost: Story;
 export declare const Basic: Story;
 export declare const Loading: Story;
 export declare const Small: Story;
-export declare const Medium: Story;
 export declare const Large: Story;
 export declare const Download: Story;

package/lib/components/Link/index.js

@@ -1,6 +1,6 @@
-import { jsx as b } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
-import { Icon as x } from "../Icon/index.js";
+import { Icon as h } from "../Icon/index.js";
 import c from "clsx";
 const i = a(
   ({
@@ -8,15 +8,16 @@ const i = a(
     children: e,
     loading: t = !1,
     variant: r = "primary",
-    size: n = "sm",
+    size: b = "sm",
     downloadFileName: s,
-    href: g,
+    href: m,
     target: u,
     ...p
-  }) => /* @__PURE__ */ b("div", { className: "inline-block", children: /* @__PURE__ */ b(
+  }, x) => /* @__PURE__ */ n(
     "a",
     {
-      href: g,
+      ref: x,
+      href: m,
       target: u,
       ...s && { download: s },
       className: c(
@@ -29,24 +30,24 @@ const i = a(
           "border-button-bordered-border text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": r === "bordered" && !t,
           "border-button-basic-border bg-button-basic-bg text-button-basic-text hover:bg-button-basic-hover active:bg-button-basic-active": r === "basic" && !t,
           "w-40 animate-pulse border-loading bg-loading": t,
-          "px-12 py-3 text-base font-normal leading-4": n === "sm",
-          "px-12 py-3 text-lg font-normal leading-8": n === "md",
-          "px-12 py-4 text-xl font-normal leading-8": n === "lg"
+          "px-12 py-3 text-base font-normal leading-4": b === "sm",
+          "px-12 py-3 text-lg font-normal leading-8": b === "md",
+          "px-12 py-4 text-xl font-normal leading-8": b === "lg"
         },
         o
       ),
       ...p,
       children: !t && e
     }
-  ) })
-), d = a(({ className: o, ...e }, t) => /* @__PURE__ */ b("p", { className: c("text-md", o), ref: t, ...e })), m = a(({ icon: o }, e) => /* @__PURE__ */ b(x, { size: "md", ref: e, icon: o }));
+  )
+), g = a(({ className: o, ...e }, t) => /* @__PURE__ */ n("p", { className: c("text-md", o), ref: t, ...e })), d = a(({ icon: o }, e) => /* @__PURE__ */ n(h, { size: "lg", ref: e, icon: o }));
 i.displayName = "Link";
-m.displayName = "Link.Icon";
-d.displayName = "Link.Label";
-const f = Object.assign(i, {
-  Icon: m,
-  Label: d
+d.displayName = "Link.Icon";
+g.displayName = "Link.Label";
+const L = Object.assign(i, {
+  Icon: d,
+  Label: g
 });
 export {
-  f as Link
+  L as Link
 };

package/lib/components/Nav/index.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as p, Fragment as H } from "react/jsx-runtime";
-import { createContext as w, forwardRef as d, useState as v, useMemo as C, useContext as c, useRef as k } from "react";
-import { HamburgerIcon as M } from "../HamburgerIcon/index.js";
-import { faChevronDown as j } from "@fortawesome/fontawesome-free-solid";
+import { jsx as e, jsxs as p, Fragment as w } from "react/jsx-runtime";
+import { createContext as C, forwardRef as d, useState as v, useMemo as k, useContext as m, useRef as M } from "react";
+import { HamburgerIcon as j } from "../HamburgerIcon/index.js";
+import { faChevronDown as D } from "@fortawesome/fontawesome-free-solid";
 import n from "clsx";
-import { Icon as D } from "../Icon/index.js";
-import { NavItem as F } from "../NavItem/index.js";
-const i = w(null), g = d(({ className: t, children: r, loading: a }, o) => {
-  const [s, l] = v(!1), m = C(
+import { Icon as F } from "../Icon/index.js";
+import { NavItem as L } from "../NavItem/index.js";
+const c = C(null), g = d(({ className: r, children: t, loading: a }, o) => {
+  const [s, l] = v(!1), i = k(
     () => ({
       expanded: s,
       setExpanded: l,
@@ -14,115 +14,115 @@ const i = w(null), g = d(({ className: t, children: r, loading: a }, o) => {
     }),
     [s, l, a]
   );
-  return /* @__PURE__ */ e(i.Provider, { value: m, children: /* @__PURE__ */ e("div", { className: t, ref: o, children: r }) });
-}), N = d(
-  ({ className: t, children: r }, a) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(c.Provider, { value: i, children: /* @__PURE__ */ e("div", { className: r, ref: o, children: t }) });
+}), f = d(
+  ({ className: r, children: t }, a) => /* @__PURE__ */ e(
     "div",
     {
       ref: a,
-      className: n("relative h-24 w-full bg-nav-bg px-2 py-2", t),
-      children: r
+      className: n("relative h-24 w-full bg-nav-bg px-2 py-2", r),
+      children: t
     }
   )
-), f = d(({ className: t, children: r }, a) => {
-  const { loading: o, setExpanded: s, expanded: l } = c(i) || {};
-  return /* @__PURE__ */ p("div", { ref: a, className: n("flex h-full lg:hidden", t), children: [
+), N = d(({ className: r, children: t }, a) => {
+  const { loading: o, setExpanded: s, expanded: l } = m(c) || {};
+  return /* @__PURE__ */ p("div", { ref: a, className: n("flex h-full lg:hidden", r), children: [
     !o && /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
-      M,
+      j,
       {
         variant: "ghost",
         onClick: () => s == null ? void 0 : s(!l),
         className: "aspect-square"
       }
     ) }),
-    /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: r })
+    /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: t })
   ] });
-}), u = d(({ className: t, children: r }, a) => /* @__PURE__ */ e(
+}), u = d(({ className: r, children: t }, a) => /* @__PURE__ */ e(
   "div",
   {
     ref: a,
     className: n(
       "hidden justify-between lg:flex gap-4 px-4 lg:gap-8 lg:px-20",
-      t
+      r
     ),
-    children: r
+    children: t
   }
 )), x = d(
-  ({ className: t, children: r }, a) => {
-    const { expanded: o } = c(i) || {};
+  ({ className: r, children: t }, a) => {
+    const { expanded: o } = m(c) || {};
     return o ? /* @__PURE__ */ e(
       "div",
       {
         ref: a,
         className: n(
           "h-screen bg-nav-bg px-8 pb-12 pt-2 lg:hidden",
-          t
+          r
         ),
-        children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 lg:hidden", children: r })
+        children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 lg:hidden", children: t })
       }
-    ) : /* @__PURE__ */ e(H, {});
+    ) : /* @__PURE__ */ e(w, {});
   }
 ), h = d(
-  ({ className: t, children: r }, a) => {
-    const { loading: o } = c(i) || {};
-    return o ? /* @__PURE__ */ e("div", { ref: a, className: n("my-4 lg:flex lg:gap-6", t), children: [...Array(5)].map((s, l) => /* @__PURE__ */ e(F, { loading: !0 }, l)) }) : /* @__PURE__ */ e("div", { ref: a, className: n("my-4 lg:flex lg:gap-6", t), children: r });
+  ({ className: r, children: t }, a) => {
+    const { loading: o } = m(c) || {};
+    return o ? /* @__PURE__ */ e("div", { ref: a, className: n("my-4 lg:flex lg:gap-6", r), children: [...Array(5)].map((s, l) => /* @__PURE__ */ e(L, { loading: !0 }, l)) }) : /* @__PURE__ */ e("div", { ref: a, className: n("my-4 lg:flex lg:gap-6", r), children: t });
   }
-), b = d(({ className: t, label: r, children: a, active: o = !1 }) => {
-  const [s, l] = v(!1), m = k(null);
+), b = d(({ className: r, label: t, children: a, active: o = !1 }, s) => {
+  const [l, i] = v(!1), H = M(null);
   return /* @__PURE__ */ p(
     "div",
     {
-      ref: m,
-      onMouseEnter: () => l(!0),
-      onMouseLeave: () => l(!1),
-      onClick: () => l(!s),
+      ref: H ?? s,
+      onMouseEnter: () => i(!0),
+      onMouseLeave: () => i(!1),
+      onClick: () => i(!l),
       className: n(
         "relative m-auto py-0 text-nav-text lg:after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
         {
           "font-bold": o,
           "font-light": !o
         },
-        t
+        r
       ),
       children: [
         /* @__PURE__ */ p("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ e("p", { className: "text-lg", children: r }),
-          /* @__PURE__ */ e(D, { size: "xs", icon: j })
+          /* @__PURE__ */ e("p", { className: "text-lg", children: t }),
+          /* @__PURE__ */ e(F, { size: "xs", icon: D })
         ] }),
-        s && /* @__PURE__ */ e("div", { className: "rounded-md lg:absolute lg:-left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "rounded-md grid grid-cols-1 gap-y-2 bg-nav-bg px-1 py-2 w-full", children: a }) })
+        l && /* @__PURE__ */ e("div", { className: "rounded-md lg:absolute lg:-left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "rounded-md grid grid-cols-1 gap-y-2 bg-nav-bg px-1 py-2 w-full", children: a }) })
       ]
     }
   );
-}), y = d(({ className: t, src: r, alt: a, ...o }, s) => {
-  const { loading: l } = c(i) || {};
+}), y = d(({ className: r, src: t, alt: a, ...o }, s) => {
+  const { loading: l } = m(c) || {};
   return l ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "h-20 w-20 animate-pulse bg-gray-300" }) }) : /* @__PURE__ */ e(
     "img",
     {
-      className: n("h-20 flex-none", t),
+      className: n("h-20 flex-none", r),
       ref: s,
-      src: r,
+      src: t,
       alt: a,
       ...o
     }
   );
 });
 g.displayName = "Nav";
-N.displayName = "Nav.Header";
+f.displayName = "Nav.Header";
 u.displayName = "Nav.DesktopHeader";
-f.displayName = "Nav.MobileHeader";
+N.displayName = "Nav.MobileHeader";
 y.displayName = "Nav.Logo";
 h.displayName = "Nav.Section";
 x.displayName = "Nav.Body";
 b.displayName = "Nav.Folder";
-const q = Object.assign(g, {
-  Header: N,
+const A = Object.assign(g, {
+  Header: f,
   DesktopHeader: u,
-  MobileHeader: f,
+  MobileHeader: N,
   Section: h,
   Logo: y,
   Body: x,
   Folder: b
 });
 export {
-  q as Nav
+  A as Nav
 };

package/lib/components/Pill/index.js

@@ -1,11 +1,11 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
 import s from "clsx";
-import { Icon as a } from "../Icon/index.js";
-const i = r(({ children: o, variant: e = "info", inverse: l = !1 }, f) => /* @__PURE__ */ t(
+import { Icon as c } from "../Icon/index.js";
+const i = r(({ children: o, variant: e = "info", inverse: l = !1 }, a) => /* @__PURE__ */ t(
   "div",
   {
-    ref: f,
+    ref: a,
     className: s(
       "inline-grid grid-flow-col w-auto py-2 px-4 text-base font-semibold rounded-full gap-2",
       {
@@ -21,12 +21,12 @@ const i = r(({ children: o, variant: e = "info", inverse: l = !1 }, f) => /* @__
     ),
     children: o
   }
-)), g = r(({ className: o, ...e }, l) => /* @__PURE__ */ t("p", { className: s("text-base my-auto", o), ref: l, ...e })), d = r(({ icon: o }, e) => /* @__PURE__ */ t(a, { className: "my-auto", size: "md", ref: e, icon: o }));
+)), g = r(({ className: o, ...e }, l) => /* @__PURE__ */ t("p", { className: s("text-base my-auto", o), ref: l, ...e })), f = r(({ icon: o }, e) => /* @__PURE__ */ t(c, { className: "my-auto", size: "sm", ref: e, icon: o }));
 i.displayName = "Pill";
-d.displayName = "Pill.Icon";
+f.displayName = "Pill.Icon";
 g.displayName = "Chip.Label";
 const m = Object.assign(i, {
-  Icon: d,
+  Icon: f,
   Label: g
 });
 export {

package/lib/components/Timeline/index.js

@@ -1,30 +1,30 @@
 import { jsx as n, jsxs as c } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-import l from "clsx";
-const o = t(({ id: e, className: m, children: i }, d) => /* @__PURE__ */ n("div", { ref: d, id: e, className: m, children: i })), r = t(
+import o from "clsx";
+const r = t(({ id: e, className: m, children: i }, l) => /* @__PURE__ */ n("div", { ref: l, id: e, className: m, children: i })), s = t(
   ({ id: e, children: m }, i) => /* @__PURE__ */ n("div", { ref: i, id: e, className: "flex", children: m })
-), s = t(({ className: e, index: m, length: i }) => /* @__PURE__ */ c("div", { className: "hidden sm:block", children: [
+), a = t(({ className: e, index: m, length: i }, l) => /* @__PURE__ */ c("div", { ref: l, className: "hidden sm:block", children: [
   /* @__PURE__ */ n(
     "p",
     {
-      className: l("z-10 m-auto mt-12 h-4 w-4 rounded-full", e)
+      className: o("z-10 m-auto mt-12 h-4 w-4 rounded-full", e)
     }
   ),
   /* @__PURE__ */ n(
     "div",
     {
-      className: m !== i - 1 ? l("m-auto h-full w-1", e) : "border-r-2 border-transparent"
+      className: m !== i - 1 ? o("m-auto h-full w-1", e) : "border-r-2 border-transparent"
     }
   )
-] })), a = t(({ children: e }) => /* @__PURE__ */ n("div", { className: "my-2 w-full sm:ml-8", children: e }));
-o.displayName = "Timeline";
-r.displayName = "Timeline.Item";
-s.displayName = "Timeline.Dot";
-a.displayName = "Timeline.Content";
-const T = Object.assign(o, {
-  Item: r,
-  Dot: s,
-  Content: a
+] })), d = t(({ children: e }, m) => /* @__PURE__ */ n("div", { ref: m, className: "my-2 w-full sm:ml-8", children: e }));
+r.displayName = "Timeline";
+s.displayName = "Timeline.Item";
+a.displayName = "Timeline.Dot";
+d.displayName = "Timeline.Content";
+const T = Object.assign(r, {
+  Item: s,
+  Dot: a,
+  Content: d
 });
 export {
   T as Timeline