@gardenfi/garden-book 0.3.0-beta.1 → 0.3.0-beta.2

package/dist/DashboardLayout/MobileMenu.js

@@ -1,102 +1,102 @@
-import { jsxs as n, Fragment as C, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, Fragment as C, jsx as e } from "react/jsx-runtime";
 import { useState as m } from "react";
 import { HamburgerIcon as S } from "../HamburgerIcon/index.js";
 import { ResponsiveModal as w } from "../ResponsiveModal/index.js";
-import { Typography as f } from "../Typography/index.js";
+import { Typography as t } from "../Typography/index.js";
 import { Button as M } from "../Button/index.js";
 import { cn as j } from "../utils/index.js";
 import I from "../node_modules/lucide-react/dist/esm/icons/log-out.js";
-const R = ({ title: i, isOpen: s, onToggle: o, children: a }) => /* @__PURE__ */ n("div", { children: [
-  /* @__PURE__ */ e("span", { onClick: o, className: "gf-block gf-cursor-pointer", children: /* @__PURE__ */ e(f, { size: "h3", weight: "medium", children: i }) }),
+const R = ({ title: i, isOpen: n, onToggle: o, children: s }) => /* @__PURE__ */ a("div", { children: [
+  /* @__PURE__ */ e("span", { onClick: o, className: "gf-block gf-cursor-pointer", children: /* @__PURE__ */ e(t, { size: "h3", weight: "medium", children: i }) }),
   /* @__PURE__ */ e(
     "div",
     {
       className: j(
         "gf-grid gf-transition-[grid-template-rows,opacity] gf-duration-500 gf-ease-[cubic-bezier(0.22,1,0.36,1)]",
-        s ? "gf-grid-rows-[1fr] gf-opacity-100" : "gf-grid-rows-[0fr] gf-opacity-0"
+        n ? "gf-grid-rows-[1fr] gf-opacity-100" : "gf-grid-rows-[0fr] gf-opacity-0"
       ),
-      children: /* @__PURE__ */ e("div", { className: "gf-overflow-hidden", children: /* @__PURE__ */ e("div", { className: "gf-ml-6 gf-flex gf-flex-col", children: a }) })
+      children: /* @__PURE__ */ e("div", { className: "gf-overflow-hidden", children: /* @__PURE__ */ e("div", { className: "gf-ml-6 gf-flex gf-flex-col", children: s }) })
     }
   )
 ] }), A = ({
   navGroups: i,
-  activePath: s,
+  activePath: n,
   onNavigate: o,
-  onLogout: a,
+  onLogout: s,
   showLogoutConfirm: N = !1,
   onLogoutConfirmClose: c
 }) => {
   var b;
-  const [p, h] = m(!1), [y, g] = m(!1), [k, u] = m(
+  const [h, p] = m(!1), [y, g] = m(!1), [k, u] = m(
     ((b = i[0]) == null ? void 0 : b.label) ?? "group-0"
   ), d = () => {
-    var r;
-    h(!1), u(((r = i[0]) == null ? void 0 : r.label) ?? "group-0");
+    var l;
+    p(!1), u(((l = i[0]) == null ? void 0 : l.label) ?? "group-0");
   }, v = () => {
-    d(), N ? g(!0) : a();
+    d(), N ? g(!0) : s();
   }, z = () => {
     g(!1), c == null || c();
   };
-  return /* @__PURE__ */ n(C, { children: [
+  return /* @__PURE__ */ a(C, { children: [
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        onClick: () => h((r) => !r),
+        onClick: () => p((l) => !l),
         "aria-label": "Open menu",
         className: "gf-shrink-0",
-        children: /* @__PURE__ */ e(S, { isOpen: p })
+        children: /* @__PURE__ */ e(S, { isOpen: h })
       }
     ),
-    /* @__PURE__ */ n(w, { open: p, onClose: d, className: "gf-w-full", children: [
-      /* @__PURE__ */ e("nav", { className: "gf-flex gf-flex-col gf-gap-4 gf-p-6 gf-bg-white/30 gf-rounded-xl", children: i.map((r, O) => {
-        const t = r.label ?? `group-${O}`;
+    /* @__PURE__ */ a(w, { open: h, onClose: d, className: "gf-w-full", children: [
+      /* @__PURE__ */ e("nav", { className: "gf-flex gf-flex-col gf-gap-4 gf-p-6 gf-bg-white/30 gf-rounded-xl", children: i.map((l, O) => {
+        const f = l.label ?? `group-${O}`;
         return /* @__PURE__ */ e(
           R,
           {
-            title: r.label ?? "Navigation",
-            isOpen: k === t,
-            onToggle: () => u((l) => l === t ? "" : t),
-            children: r.items.map((l) => {
-              const x = s === l.href || s === `${l.href}/`;
+            title: l.label ?? "Navigation",
+            isOpen: k === f,
+            onToggle: () => u((r) => r === f ? "" : f),
+            children: l.items.map((r) => {
+              const x = n === r.href || n === `${r.href}/`;
               return /* @__PURE__ */ e(
                 "div",
                 {
                   className: "gf-cursor-pointer gf-pt-4",
                   onClick: () => {
-                    o(l.href), d();
+                    o(r.href), d();
                   },
                   children: /* @__PURE__ */ e(
-                    f,
+                    t,
                     {
                       size: "h3",
                       weight: x ? "medium" : "regular",
                       className: x ? "gf-text-primaryIris" : "gf-text-dark-grey",
-                      children: l.title
+                      children: r.title
                     }
                   )
                 },
-                l.href
+                r.href
               );
             })
           },
-          t
+          f
         );
       }) }),
-      /* @__PURE__ */ e("nav", { className: "gf-py-5 gf-px-6 gf-bg-white/30 gf-rounded-xl gf-cursor-pointer", children: /* @__PURE__ */ n(
+      /* @__PURE__ */ e("nav", { className: "gf-py-5 gf-px-6 gf-bg-white/30 gf-rounded-xl", children: /* @__PURE__ */ a(
         "button",
         {
           type: "button",
           onClick: v,
-          className: "gf-flex gf-cursor-pointer gf-items-center gf-gap-2 focus:gf-outline-none",
+          className: "gf-flex gf-w-full gf-cursor-pointer gf-items-center gf-gap-2 focus:gf-outline-none",
           children: [
             /* @__PURE__ */ e(I, { className: "gf-h-5 gf-w-5" }),
-            /* @__PURE__ */ e(f, { size: "h3", weight: "medium", children: "Log out" })
+            /* @__PURE__ */ e(t, { size: "h3", weight: "medium", children: "Log out" })
           ]
         }
       ) })
     ] }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ a(
       w,
       {
         open: y,
@@ -104,14 +104,14 @@ const R = ({ title: i, isOpen: s, onToggle: o, children: a }) => /* @__PURE__ */
         label: "Ready to sign out?",
         className: "gf-max-w-sm",
         children: [
-          /* @__PURE__ */ e("div", { className: "gf-flex gf-flex-col gf-gap-2", children: /* @__PURE__ */ e(f, { size: "h5", weight: "regular", children: "You'll be signed out and redirected to the login page." }) }),
+          /* @__PURE__ */ e("div", { className: "gf-flex gf-flex-col gf-gap-2", children: /* @__PURE__ */ e(t, { size: "h5", weight: "regular", children: "You'll be signed out and redirected to the login page." }) }),
           /* @__PURE__ */ e(
             M,
             {
               variant: "primary",
               className: "gf-w-full",
               onClick: () => {
-                g(!1), a();
+                g(!1), s();
               },
               children: "Sign out"
             }

package/dist/InfoTooltip/index.js

@@ -1,68 +1,81 @@
-import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import { useState as p, useEffect as m, useRef as b } from "react";
-import { Provider as h, Root as x, Trigger as y, Content as v } from "../node_modules/@radix-ui/react-tooltip/dist/index.js";
-import { cn as d } from "../utils/index.js";
+import { jsx as f, jsxs as m } from "react/jsx-runtime";
+import { useState as u, useEffect as d, useRef as b } from "react";
+import { Provider as h, Root as x, Trigger as v, Content as y } from "../node_modules/@radix-ui/react-tooltip/dist/index.js";
+import { cn as p } from "../utils/index.js";
 const w = {
   top: "gf-left-1/2 -gf-ml-1.5 -gf-bottom-1",
   bottom: "gf-left-1/2 -gf-ml-1.5 -gf-top-1",
   left: "gf-top-1/2 -gf-mt-1.5 -gf-right-1",
   right: "gf-top-1/2 -gf-mt-1.5 -gf-left-1"
-}, O = ({ side: t, className: r, children: f, collisionBoundary: n }) => {
-  const e = b(null), [i, s] = p(t);
-  return m(() => {
-    const g = e.current;
-    if (!g) return;
-    const l = () => {
-      const c = g.getAttribute("data-side");
-      c && s(c);
+}, O = ({ side: r, className: i, children: a, collisionBoundary: g }) => {
+  const n = b(null), [c, l] = u(r);
+  return d(() => {
+    const t = n.current;
+    if (!t) return;
+    const o = () => {
+      const s = t.getAttribute("data-side");
+      s && l(s);
     };
-    l();
-    const a = new MutationObserver(l);
-    return a.observe(g, { attributes: !0, attributeFilter: ["data-side"] }), () => a.disconnect();
-  }, []), /* @__PURE__ */ u(
-    v,
+    o();
+    const e = new MutationObserver(o);
+    return e.observe(t, { attributes: !0, attributeFilter: ["data-side"] }), () => e.disconnect();
+  }, []), /* @__PURE__ */ m(
+    y,
     {
-      ref: e,
-      side: t,
+      ref: n,
+      side: r,
       sideOffset: 10,
       collisionPadding: 12,
-      collisionBoundary: n ?? void 0,
-      className: d(
+      collisionBoundary: g ?? void 0,
+      className: p(
         "gf-relative gf-max-w-[260px] gf-rounded-2xl gf-bg-white gf-px-4 gf-py-3 gf-border-0 gf-overflow-visible",
         "gf-shadow-[0_4px_12px_-4px_rgba(85,75,106,0.14)]",
         "gf-text-primaryIris",
-        r
+        i
       ),
       children: [
-        f,
-        /* @__PURE__ */ o(
+        a,
+        /* @__PURE__ */ f(
           "span",
           {
             "aria-hidden": !0,
-            className: d(
+            className: p(
               "gf-absolute gf-block gf-h-3 gf-w-3 gf-rotate-45 gf-rounded-[3px] gf-bg-white",
-              w[i]
+              w[c]
             )
           }
         )
       ]
     }
   );
-}, C = ({
-  trigger: t,
-  children: r,
-  side: f = "top",
-  delayDuration: n = 150,
-  className: e
+}, B = ({
+  trigger: r,
+  children: i,
+  side: a = "top",
+  delayDuration: g = 150,
+  className: n
 }) => {
-  const [i, s] = p(null);
-  return m(() => {
-    s(document.querySelector("main"));
-  }, []), /* @__PURE__ */ o(h, { delayDuration: n, children: /* @__PURE__ */ u(x, { children: [
-    /* @__PURE__ */ o(y, { asChild: !0, children: t }),
-    /* @__PURE__ */ o(O, { side: f, className: e, collisionBoundary: i, children: r })
+  const [c, l] = u(null), [t, o] = u(!1);
+  return d(() => {
+    l(document.querySelector("main"));
+  }, []), d(() => {
+    if (!t) return;
+    const e = () => o(!1);
+    return document.addEventListener("touchstart", e, { passive: !0 }), () => document.removeEventListener("touchstart", e);
+  }, [t]), /* @__PURE__ */ f(h, { delayDuration: g, children: /* @__PURE__ */ m(x, { open: t, onOpenChange: o, children: [
+    /* @__PURE__ */ f(
+      v,
+      {
+        asChild: !0,
+        onTouchStart: (e) => {
+          e.stopPropagation(), o((s) => !s);
+        },
+        children: r
+      }
+    ),
+    /* @__PURE__ */ f(O, { side: a, className: n, collisionBoundary: c, children: i })
   ] }) });
 };
 export {
-  C as InfoTooltip
+  B as InfoTooltip
 };

package/dist/SelectDropdown/SelectDropdown.d.ts

@@ -30,10 +30,12 @@ export type SelectDropdownProps<V extends string> = {
     triggerIcon?: ReactNode;
     /** Typography size for trigger + item labels. Default `"h5"`. */
     labelSize?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /** Tailwind `from-*` class for the scroll-overflow gradient fades. Default `"gf-from-white"`. */
+    scrollGradientColor?: string;
 };
 /**
  * Glassmorphic select — no background, no border, just backdrop-blur on the
  * panel. Built from scratch (no shadcn DropdownMenu) so the blur actually
  * shows through to the page content behind it.
  */
-export declare const SelectDropdown: <V extends string>({ items, value, onChange, placeholder, separatorsAfter, clearAction, align, disabled, contentClassName, triggerClassName, wrapperClassName, triggerIcon, labelSize, }: SelectDropdownProps<V>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectDropdown: <V extends string>({ items, value, onChange, placeholder, separatorsAfter, clearAction, align, disabled, contentClassName, triggerClassName, wrapperClassName, triggerIcon, labelSize, scrollGradientColor, }: SelectDropdownProps<V>) => import("react/jsx-runtime").JSX.Element;

package/dist/SelectDropdown/index.js

@@ -1,97 +1,109 @@
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { useState as C, useRef as y, useLayoutEffect as B, useEffect as F, Fragment as H } from "react";
-import { AnimatePresence as K, motion as T } from "framer-motion";
-import { Typography as k } from "../Typography/index.js";
-import { Portal as q } from "../Portal/index.js";
-import { cn as c } from "../utils/index.js";
-import G from "../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-const Y = ({
-  items: p,
-  value: h,
-  onChange: N,
-  placeholder: S = "",
-  separatorsAfter: m,
-  clearAction: d,
-  align: w = "start",
-  disabled: _,
-  contentClassName: j,
-  triggerClassName: $,
-  wrapperClassName: D,
-  triggerIcon: E,
-  labelSize: L = "h5"
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useState as m, useRef as w, useCallback as J, useLayoutEffect as M, useEffect as B, Fragment as Q } from "react";
+import { AnimatePresence as U, motion as V } from "framer-motion";
+import { Typography as E } from "../Typography/index.js";
+import { Portal as X } from "../Portal/index.js";
+import { cn as f } from "../utils/index.js";
+import Y from "../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+const ie = ({
+  items: d,
+  value: b,
+  onChange: L,
+  placeholder: H = "",
+  separatorsAfter: v,
+  clearAction: u,
+  align: x = "start",
+  disabled: $,
+  contentClassName: D,
+  triggerClassName: O,
+  wrapperClassName: W,
+  triggerIcon: z,
+  labelSize: R = "h5",
+  scrollGradientColor: S = "gf-from-white"
 }) => {
-  const [o, f] = C(!1), z = y(null), P = y(null), l = y(null), [u, O] = C({ top: 0, width: 0 }), x = p.find((e) => e.value === h) ?? null, W = (x == null ? void 0 : x.label) ?? S;
-  return B(() => {
-    if (!o) return;
-    const e = (a = !1) => {
+  const [n, l] = m(!1), T = w(null), P = w(null), a = w(null), C = w(null), [p, F] = m({ top: 0, width: 0 }), [K, G] = m(!1), [q, _] = m(!1), y = d.find((e) => e.value === b) ?? null, I = (y == null ? void 0 : y.label) ?? H, h = J(() => {
+    const e = C.current;
+    e && (G(e.scrollTop > 0), _(e.scrollTop + e.clientHeight < e.scrollHeight - 1));
+  }, []);
+  return M(() => {
+    if (!n) return;
+    const e = (g = !1) => {
       const s = P.current;
       if (!s) return;
-      const n = s.getBoundingClientRect();
-      if (n.bottom < 0 || n.top > window.innerHeight) {
-        f(!1);
+      const r = s.getBoundingClientRect();
+      if (r.bottom < 0 || r.top > window.innerHeight) {
+        l(!1);
         return;
       }
-      const R = n.bottom + 6, v = w === "end" ? void 0 : n.left, b = w === "end" ? window.innerWidth - n.right : void 0;
-      a && l.current ? (l.current.style.top = `${R}px`, v !== void 0 && (l.current.style.left = `${v}px`), b !== void 0 && (l.current.style.right = `${b}px`)) : O({ top: R, left: v, right: b, width: n.width });
+      const j = r.bottom + 6, N = x === "end" ? void 0 : r.left, k = x === "end" ? window.innerWidth - r.right : void 0;
+      g && a.current ? (a.current.style.top = `${j}px`, N !== void 0 && (a.current.style.left = `${N}px`), k !== void 0 && (a.current.style.right = `${k}px`)) : F({ top: j, left: N, right: k, width: r.width });
     };
     e();
-    const i = () => e(!1), r = () => e(!0);
-    return window.addEventListener("resize", i), window.addEventListener("scroll", r, !0), () => {
-      window.removeEventListener("resize", i), window.removeEventListener("scroll", r, !0);
+    const i = () => e(!1), o = () => e(!0);
+    return window.addEventListener("resize", i), window.addEventListener("scroll", o, !0), () => {
+      window.removeEventListener("resize", i), window.removeEventListener("scroll", o, !0);
     };
-  }, [o, w]), F(() => {
-    if (!o) return;
-    const e = (r) => {
-      var s, n;
-      const a = r.target;
-      (s = z.current) != null && s.contains(a) || (n = l.current) != null && n.contains(a) || f(!1);
-    }, i = (r) => {
-      r.key === "Escape" && f(!1);
+  }, [n, x]), B(() => {
+    if (!n) {
+      G(!1), _(!1);
+      return;
+    }
+    h();
+    const e = setTimeout(h, 50);
+    return () => clearTimeout(e);
+  }, [n, d, h]), B(() => {
+    if (!n) return;
+    const e = (o) => {
+      var s, r;
+      const g = o.target;
+      (s = T.current) != null && s.contains(g) || (r = a.current) != null && r.contains(g) || l(!1);
+    }, i = (o) => {
+      o.key === "Escape" && l(!1);
     };
     return document.addEventListener("mousedown", e), document.addEventListener("keydown", i), () => {
       document.removeEventListener("mousedown", e), document.removeEventListener("keydown", i);
     };
-  }, [o]), /* @__PURE__ */ g("div", { ref: z, className: c("gf-relative gf-inline-block", D), children: [
-    /* @__PURE__ */ g(
+  }, [n]), /* @__PURE__ */ c("div", { ref: T, className: f("gf-relative gf-inline-block", W), children: [
+    /* @__PURE__ */ c(
       "button",
       {
         ref: P,
         type: "button",
-        disabled: _,
-        onClick: () => f((e) => !e),
+        disabled: $,
+        onClick: () => l((e) => !e),
         "aria-haspopup": "listbox",
-        "aria-expanded": o,
-        className: c(
+        "aria-expanded": n,
+        className: f(
           "gf-flex gf-items-center gf-gap-1.5 gf-py-2 gf-px-3 gf-rounded-full gf-bg-white/70 focus:gf-outline-none gf-transition-colors disabled:gf-cursor-not-allowed",
-          $
+          O
         ),
         children: [
-          E && /* @__PURE__ */ t("span", { className: "gf-flex gf-items-center gf-shrink-0", children: E }),
+          z && /* @__PURE__ */ t("span", { className: "gf-flex gf-items-center gf-shrink-0", children: z }),
           /* @__PURE__ */ t(
-            k,
+            E,
             {
-              size: L,
+              size: R,
               weight: "regular",
               className: "gf-truncate gf-flex-1 gf-text-left",
-              children: W
+              children: I
             }
           ),
           /* @__PURE__ */ t(
-            G,
+            Y,
             {
-              className: c(
+              className: f(
                 "gf-h-3.5 gf-w-3.5 gf-text-primaryIris gf-flex-shrink-0 gf-transition-transform",
-                o && "gf-rotate-180"
+                n && "gf-rotate-180"
               )
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(K, { children: o && /* @__PURE__ */ g(
-      T.div,
+    /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(U, { children: n && /* @__PURE__ */ t(
+      V.div,
       {
-        ref: l,
+        ref: a,
         role: "listbox",
         initial: { opacity: 0, y: -4 },
         animate: { opacity: 1, y: 0 },
@@ -99,65 +111,85 @@ const Y = ({
         transition: { duration: 0.15, ease: "easeOut" },
         style: {
           position: "fixed",
-          top: u.top,
-          left: u.left,
-          right: u.right,
-          minWidth: u.width || void 0
+          top: p.top,
+          left: p.left,
+          right: p.right,
+          minWidth: p.width || void 0
         },
-        className: c(
-          "gf-z-[60] gf-py-2 gf-rounded-xl gf-min-w-28 gf-bg-white/30 gf-backdrop-blur-lg [-webkit-backdrop-filter:blur(12px)] gf-overflow-hidden gf-shadow-[0_8px_24px_-12px_rgba(71,60,117,0.2)]",
-          j
-        ),
-        children: [
-          p.map((e, i) => {
-            const r = e.value === h, a = i === p.length - 1, s = (m == null ? void 0 : m.includes(e.value)) && !a;
-            return /* @__PURE__ */ g(H, { children: [
-              /* @__PURE__ */ g(
-                "button",
-                {
-                  type: "button",
-                  role: "option",
-                  "aria-selected": r,
-                  disabled: e.disabled,
-                  onClick: () => {
-                    e.disabled || (N(e.value), f(!1));
-                  },
-                  className: c(
-                    "gf-w-full gf-flex gf-items-center gf-gap-3 gf-px-4 gf-py-2 gf-text-sm gf-transition-colors",
-                    e.disabled ? "gf-opacity-35 gf-cursor-default gf-pointer-events-none" : "hover:gf-bg-white/50 gf-cursor-pointer"
-                  ),
-                  children: [
-                    e.icon && /* @__PURE__ */ t("span", { className: "gf-flex-shrink-0 gf-flex gf-items-center", children: e.icon }),
-                    /* @__PURE__ */ t(
-                      k,
+        className: "gf-z-[60] gf-rounded-xl gf-min-w-28 gf-bg-white/30 gf-backdrop-blur-lg [-webkit-backdrop-filter:blur(12px)] gf-overflow-hidden gf-shadow-[0_8px_24px_-12px_rgba(71,60,117,0.2)]",
+        children: /* @__PURE__ */ c("div", { className: "gf-relative", children: [
+          K && /* @__PURE__ */ t(
+            "div",
+            {
+              className: f("gf-absolute gf-top-0 gf-left-0 gf-right-0 gf-h-8 gf-pointer-events-none gf-z-10 gf-bg-gradient-to-b gf-to-transparent", S)
+            }
+          ),
+          /* @__PURE__ */ c("div", { className: "gf-relative", children: [
+            /* @__PURE__ */ t(
+              "div",
+              {
+                ref: C,
+                onScroll: h,
+                className: f("gf-py-2 gf-overflow-y-auto gf-max-h-96 [scrollbar-width:none] [&::-webkit-scrollbar]:gf-hidden", D),
+                children: d.map((e, i) => {
+                  const o = e.value === b, g = i === d.length - 1, s = (v == null ? void 0 : v.includes(e.value)) && !g;
+                  return /* @__PURE__ */ c(Q, { children: [
+                    /* @__PURE__ */ c(
+                      "button",
                       {
-                        size: L,
-                        weight: "regular",
-                        className: "gf-truncate gf-flex-1 gf-text-left",
-                        children: e.label
+                        type: "button",
+                        role: "option",
+                        "aria-selected": o,
+                        disabled: e.disabled,
+                        onClick: () => {
+                          e.disabled || (L(e.value), l(!1));
+                        },
+                        className: f(
+                          "gf-w-full gf-flex gf-items-center gf-gap-3 gf-px-4 gf-py-2 gf-text-sm gf-transition-colors",
+                          e.disabled ? "gf-opacity-35 gf-cursor-default gf-pointer-events-none" : "hover:gf-bg-white/50 gf-cursor-pointer"
+                        ),
+                        children: [
+                          e.icon && /* @__PURE__ */ t("span", { className: "gf-flex-shrink-0 gf-flex gf-items-center", children: e.icon }),
+                          /* @__PURE__ */ t(
+                            E,
+                            {
+                              size: R,
+                              weight: "regular",
+                              className: "gf-truncate gf-flex-1 gf-text-left",
+                              children: e.label
+                            }
+                          )
+                        ]
                       }
-                    )
-                  ]
-                }
-              ),
-              s && /* @__PURE__ */ t("div", { className: "gf-h-px gf-bg-white/40 gf-my-1 gf-mx-3" })
-            ] }, e.value);
-          }),
-          d && h !== d.value && /* @__PURE__ */ t("div", { className: "gf-px-2.5 gf-pb-1", children: /* @__PURE__ */ t(
-            "div",
+                    ),
+                    s && /* @__PURE__ */ t("div", { className: "gf-h-px gf-bg-white/40 gf-my-1 gf-mx-3" })
+                  ] }, e.value);
+                })
+              }
+            ),
+            q && /* @__PURE__ */ t(
+              "div",
+              {
+                className: f("gf-absolute gf-bottom-0 gf-left-0 gf-right-0 gf-h-8 gf-pointer-events-none gf-z-10 gf-bg-gradient-to-t gf-to-transparent", S)
+              }
+            )
+          ] }),
+          u && b !== u.value && /* @__PURE__ */ t("div", { className: "gf-px-2.5 gf-pb-2 gf-pt-1", children: /* @__PURE__ */ t(
+            "button",
             {
+              type: "button",
               onClick: () => {
-                N(d.value), f(!1);
+                L(u.value), l(!1);
               },
-              className: "gf-flex gf-items-center gf-justify-center gf-w-full gf-rounded-lg gf-bg-white/70 hover:gf-bg-white/80 gf-py-1.5 gf-mt-2 gf-px-3 gf-cursor-pointer gf-transition-colors",
-              children: /* @__PURE__ */ t(k, { size: "h5", weight: "regular", children: d.label })
+              className: "gf-flex gf-items-center gf-justify-center gf-w-full gf-rounded-full gf-bg-white/70 hover:gf-bg-white/80 gf-py-1.5 gf-px-3 gf-cursor-pointer gf-transition-colors",
+              children: /* @__PURE__ */ t(E, { size: "h5", weight: "regular", children: u.label })
             }
           ) })
-        ]
+        ] })
       }
     ) }) })
   ] });
 };
 export {
-  Y as SelectDropdown
+  ie as SelectDropdown
 };

package/dist/index.d.ts

@@ -31,7 +31,6 @@ export * from './components/molecules/EmptyState';
 export * from './components/molecules/ErrorState';
 export * from './components/molecules/InfoTooltip';
 export * from './components/molecules/SelectDropdown';
-export * from './components/molecules/FilterDropdown';
 export * from './components/molecules/ResponsiveModal';
 export * from './components/molecules/Toast';
 export * from './components/organisms/BlogCard';