prometeo-design-system 2.8.6 → 2.8.8

package/dist/components/TabSwitch/TabSwitch.js

@@ -0,0 +1,57 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as n } from "../../lib/cn.js";
+/* empty css                     */
+import { forwardRef as p, useState as h, useRef as x, useEffect as v } from "react";
+const C = p((t, i) => {
+  const [s, m] = h(t?.currentTabName || t.tabs[0].name), r = x(null), { tabs: l = [], className: o, activeColor: c = "var(--neutral-900)" } = t;
+  v(() => {
+    r.current?.style.setProperty("--tab-bg", c);
+  }, [c]);
+  const u = l.find((e) => e.name === (t?.currentTabName || s));
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: i,
+      className: n(
+        "flex flex-col gap-2",
+        "bg-neutral-strong-default",
+        "h-full w-14 max-w-14 pl-[6px] py-6",
+        " border-r border-neutral-default-default",
+        o
+      ),
+      children: l.map(
+        (e) => {
+          const d = e.name === u?.name, f = typeof e.thumbnail == "string" ? /* @__PURE__ */ a("img", { src: e.thumbnail, alt: e.description, className: "aspect-square object-contain" }) : e.thumbnail, b = () => {
+            e.disabled || (m(e.name), e.onClick && e.onClick(e.name));
+          };
+          return /* @__PURE__ */ a(
+            "div",
+            {
+              className: n(
+                "bg-[(--tab-bg)]",
+                "h-12 w-[50px] z-20",
+                "flex items-center pl-[6px] ",
+                "rounded-l-[8px]",
+                "tabswitch-element relative",
+                d && "active"
+              ),
+              onClick: b,
+              ref: r,
+              children: /* @__PURE__ */ a("div", { className: n(
+                "size-8 rounded-[4px]",
+                "grid place-items-center",
+                "tab-thumbnail-icon",
+                "bg-transparent text-neutral-default-default",
+                e?.className
+              ), children: f })
+            },
+            e.name
+          );
+        }
+      )
+    }
+  );
+});
+export {
+  C as default
+};

package/dist/{Table.es.js → components/Table/Table.js}

@@ -1,7 +1,7 @@
-import { j as r } from "./jsx-runtime-DKDX3adD.js";
-import { c as l } from "./cn-B6yFEsav.js";
+import { jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../lib/cn.js";
 import * as o from "react";
-const n = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx("div", { className: "w-full", children: /* @__PURE__ */ r.jsx(
+const s = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r("div", { className: "w-full", children: /* @__PURE__ */ r(
   "table",
   {
     ref: a,
@@ -12,8 +12,8 @@ const n = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx("div
     ...t
   }
 ) }));
-n.displayName = "Table";
-const f = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
+s.displayName = "Table";
+const n = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r(
   "thead",
   {
     ref: a,
@@ -21,8 +21,8 @@ const f = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
     ...t
   }
 ));
-f.displayName = "TableHeader";
-const i = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
+n.displayName = "TableHeader";
+const f = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r(
   "tbody",
   {
     ref: a,
@@ -30,8 +30,8 @@ const i = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
     ...t
   }
 ));
-i.displayName = "TableBody";
-const b = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
+f.displayName = "TableBody";
+const i = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r(
   "tfoot",
   {
     ref: a,
@@ -42,9 +42,14 @@ const b = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
     ...t
   }
 ));
-b.displayName = "TableFooter";
-const c = o.forwardRef(({ className: e, isSelected: t, ...a }, d) => {
-  const s = `
+i.displayName = "TableFooter";
+const b = o.forwardRef(({ className: e, isSelected: t, ...a }, d) => /* @__PURE__ */ r(
+  "tr",
+  {
+    ref: d,
+    className: l(
+      "border-b border-neutral-default-default relative text-center text-md text-semibold transition-colors hover:bg-neutral-medium-default/50 text-neutral-default-default",
+      `
     after:content-["<span id='selected-span'></span>"]
     after:absolute
     after:top-1/2
@@ -61,22 +66,14 @@ const c = o.forwardRef(({ className: e, isSelected: t, ...a }, d) => {
     transition-all
     duration-300
     ease-in-out
-    `;
-  return /* @__PURE__ */ r.jsx(
-    "tr",
-    {
-      ref: d,
-      className: l(
-        "border-b border-neutral-default-default relative text-center text-md text-semibold transition-colors hover:bg-neutral-medium-default/50 text-neutral-default-default",
-        s,
-        e
-      ),
-      ...a
-    }
-  );
-});
-c.displayName = "TableRow";
-const m = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
+    `,
+      e
+    ),
+    ...a
+  }
+));
+b.displayName = "TableRow";
+const c = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r(
   "th",
   {
     ref: a,
@@ -87,8 +84,8 @@ const m = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
     ...t
   }
 ));
-m.displayName = "TableHead";
-const u = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
+c.displayName = "TableHead";
+const m = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r(
   "td",
   {
     ref: a,
@@ -99,8 +96,8 @@ const u = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
     ...t
   }
 ));
-u.displayName = "TableCell";
-const p = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
+m.displayName = "TableCell";
+const u = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r(
   "caption",
   {
     ref: a,
@@ -108,14 +105,14 @@ const p = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx(
     ...t
   }
 ));
-p.displayName = "TableCaption";
+u.displayName = "TableCaption";
 export {
-  n as Table,
-  i as TableBody,
-  p as TableCaption,
-  u as TableCell,
-  b as TableFooter,
-  m as TableHead,
-  f as TableHeader,
-  c as TableRow
+  s as Table,
+  f as TableBody,
+  u as TableCaption,
+  m as TableCell,
+  i as TableFooter,
+  c as TableHead,
+  n as TableHeader,
+  b as TableRow
 };

package/dist/{TextArea.es.js → components/TextArea/TextArea.js}

@@ -1,8 +1,8 @@
-import { j as k } from "./jsx-runtime-DKDX3adD.js";
-import { c as A } from "./cn-B6yFEsav.js";
+import { jsx as j } from "react/jsx-runtime";
+import { cn as k } from "../../lib/cn.js";
 import * as a from "react";
-import { forwardRef as E } from "react";
-const M = E(
+import { forwardRef as z } from "react";
+const A = z(
   ({
     className: f,
     autoResize: r = !1,
@@ -10,57 +10,55 @@ const M = E(
     minRows: l = 3,
     maxRows: n,
     placeholder: d,
-    onChange: m,
-    value: h,
+    onChange: h,
+    value: m,
     rows: p,
-    disabled: x = !1,
-    ...g
+    disabled: g = !1,
+    ...x
     // ← Para pasar las props nativas
   }, t) => {
-    const o = a.useRef(null), b = a.useCallback(
+    const i = a.useRef(null), b = a.useCallback(
       (e) => {
-        o.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+        i.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
       },
       [t]
     ), s = a.useCallback(() => {
-      const e = o.current;
+      const e = i.current;
       if (!e || !r) return;
       e.style.height = "auto";
-      const C = e.scrollHeight, i = Number.parseInt(getComputedStyle(e).lineHeight) || 20, j = l * i + 16;
-      let u = Math.max(C, j);
+      const H = e.scrollHeight, o = Number.parseInt(getComputedStyle(e).lineHeight) || 20, C = l * o + 16;
+      let u = Math.max(H, C);
       if (n) {
-        const N = n * i + 16;
+        const N = n * o + 16;
         u = Math.min(u, N);
       }
       e.style.height = `${u}px`;
     }, [r, l, n]), y = (e) => {
-      m?.(e), s();
+      h?.(e), s();
     };
-    a.useEffect(() => {
+    return a.useEffect(() => {
       s();
-    }, [s]);
-    const H = () => c ? r ? "resize-x" : "resize" : "resize-none";
-    return /* @__PURE__ */ k.jsx(
+    }, [s]), /* @__PURE__ */ j(
       "textarea",
       {
         ref: b,
         "data-slot": "textarea",
-        className: A(
+        className: k(
           "placeholder:text-neutral-medium-default text-neutral-default-default appearance-none border border-neutral-default-default focus:border-primary-default-default flex w-full rounded-md px-3 py-2 outline-none disabled:cursor-default disabled:opacity-50 md:text-sm",
-          H(),
+          c ? r ? "resize-x" : "resize" : "resize-none",
           f
         ),
         onChange: y,
         rows: r ? l : p,
-        value: h,
+        value: m,
         placeholder: d,
-        disabled: x,
-        ...g
+        disabled: g,
+        ...x
       }
     );
   }
 );
-M.displayName = "TextArea";
+A.displayName = "TextArea";
 export {
-  M as default
+  A as default
 };

package/dist/components/Toaster/ToastProvider.js

@@ -0,0 +1,6 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Toaster as r } from "sonner";
+const s = ({ ...o }) => /* @__PURE__ */ t(r, { ...o, position: "bottom-right", richColors: !1, theme: "light" });
+export {
+  s as default
+};

package/dist/{Toast.es.js → components/Toaster/Toaster.js}

@@ -1,52 +1,52 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
-import w from "react";
-import { toast as p } from "sonner";
-import { c as r } from "./cn-B6yFEsav.js";
-import { I as m, E as u, i as f, k as b, a as C } from "./Icons-DtFC5DJ7.js";
-import h from "./Button.es.js";
-const x = {
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import C from "react";
+import { toast as m } from "sonner";
+import { cn as o } from "../../lib/cn.js";
+import { Info as u, Error as f, Cancel as b, CheckCircle as h, Close as v } from "../../Icons/Icons.js";
+import g from "../Button/Button.js";
+const p = {
   dark: {
     success: {
       container: "border-b-[2px] border-success-default-default",
       iconClass: "text-success-medium-default",
-      icon: b
+      icon: h
     },
     error: {
       container: "border-b-[2px] border-error-default-default",
       iconClass: "text-error-medium-default",
-      icon: f
+      icon: b
     },
     warning: {
       container: "border-b-[2px] border-warning-default-default",
       iconClass: "text-warning-medium-default",
-      icon: u
+      icon: f
     },
     info: {
       container: " border-b-[2px] border-primary-default-default",
       iconClass: "text-primary-default-default",
-      icon: m
+      icon: u
     }
   },
   light: {
     success: {
       container: "",
       iconClass: "text-success-default-pressed",
-      icon: b
+      icon: h
     },
     error: {
       container: "",
       iconClass: "text-error-medium-pressed",
-      icon: f
+      icon: b
     },
     warning: {
       container: "",
       iconClass: "text-warning-medium-pressed",
-      icon: u
+      icon: f
     },
     info: {
       container: "",
       iconClass: "text-primary-default-pressed",
-      icon: m
+      icon: u
     }
   }
 }, i = {
@@ -62,84 +62,84 @@ const x = {
     description: "text-neutral-medium-focused",
     shadow: "0px 0px 2px 0px rgba(0, 0, 0, 0.35),8px 8px 20px 0px rgba(0, 0, 0, 0.3),0px 0px 15px 0px rgba(0, 0, 0, 0.2),0px 0px 20px 0px rgba(21, 21, 21, 0.3) inset,6px 0px 100px 0px rgba(0, 0, 0, 0.05) inset"
   }
-}, v = (l) => {
-  const { title: t, description: o, button: s, id: n, icon: c, variant: d = "info", colorMode: a = "dark", showClose: g = !1 } = l;
-  return /* @__PURE__ */ e.jsxs(
+}, y = (l) => {
+  const { title: a, description: s, button: r, id: n, icon: c, variant: d = "info", colorMode: e = "dark", showClose: w = !1 } = l;
+  return /* @__PURE__ */ x(
     "div",
     {
       style: {
-        boxShadow: i[a].shadow
+        boxShadow: i[e].shadow
       },
-      className: r(
+      className: o(
         "flex p-3 pb-4 md:w-[485px] md:max-w-[485px] md:min-w-[485px] md:h-[68px] md:max-h-[68px] rounded-lg gap-2",
         "w-[345px] max-w-[345px] min-w-[345px] h-[68px] max-h-[68px]",
-        i[a].container,
-        x[a][d].container
+        i[e].container,
+        p[e][d].container
       ),
       children: [
-        /* @__PURE__ */ e.jsxs(
+        /* @__PURE__ */ x(
           "div",
           {
             className: "flex items-center justify-start gap-2 max-h-[38px] h-[38px] overflow-hidden flex-1 ",
             children: [
-              /* @__PURE__ */ e.jsx("div", { className: "f", style: { color: "inherit" }, children: w.createElement(c || x[a][d].icon, { size: 24, className: x[a][d].iconClass }) }),
-              /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
-                /* @__PURE__ */ e.jsx("p", { className: r("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", i[a].title), children: t }),
-                o && /* @__PURE__ */ e.jsx("p", { className: r("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", i[a].description), children: o })
+              /* @__PURE__ */ t("div", { className: "f", style: { color: "inherit" }, children: C.createElement(c || p[e][d].icon, { size: 24, className: p[e][d].iconClass }) }),
+              /* @__PURE__ */ x("div", { className: "flex-1 flex flex-col gap-1", children: [
+                /* @__PURE__ */ t("p", { className: o("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", i[e].title), children: a }),
+                s && /* @__PURE__ */ t("p", { className: o("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", i[e].description), children: s })
               ] })
             ]
           }
         ),
-        s?.label && /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ e.jsx(
-          h,
+        r?.label && /* @__PURE__ */ t("div", { className: "shrink-0", children: /* @__PURE__ */ t(
+          g,
           {
-            label: s?.label,
+            label: r?.label,
             onClick: () => {
-              s?.onClick(), p.dismiss(n);
+              r?.onClick(), m.dismiss(n);
             },
             size: "small",
             color: "secondary"
           }
         ) }),
-        g && /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ e.jsx(
-          h,
+        w && /* @__PURE__ */ t("div", { className: "shrink-0", children: /* @__PURE__ */ t(
+          g,
           {
             onClick: () => {
-              p.dismiss(n);
+              m.dismiss(n);
             },
             label: "",
             size: "small",
             color: "secondary",
-            icon: /* @__PURE__ */ e.jsx(C, { className: r(a === "light" ? "text-neutral-medium-focused " : "") }),
+            icon: /* @__PURE__ */ t(v, { className: o(e === "light" ? "text-neutral-medium-focused " : "") }),
             variant: "text",
             animate: !1,
-            className: r(a === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
+            className: o(e === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
           }
         ) })
       ]
     }
   );
 };
-function M(l, t) {
-  const { duration: o = 2500, showClose: s = !1, colorMode: n = "dark" } = t || {};
-  return p.custom((c) => /* @__PURE__ */ e.jsx(
-    v,
+function E(l, a) {
+  const { duration: s = 2500, showClose: r = !1, colorMode: n = "dark" } = a || {};
+  return m.custom((c) => /* @__PURE__ */ t(
+    y,
     {
       id: c,
-      variant: t?.variant || "success",
+      variant: a?.variant || "success",
       title: l,
-      description: t?.description,
-      icon: t?.icon,
-      button: t?.button,
-      showClose: s,
+      description: a?.description,
+      icon: a?.icon,
+      button: a?.button,
+      showClose: r,
       colorMode: n
     }
   ), {
-    duration: o,
+    duration: s,
     unstyled: !0
   });
 }
 export {
-  v as default,
-  M as toastpyrion
+  y as default,
+  E as toastpyrion
 };

package/dist/components/Tooltip/Tootip.js

@@ -0,0 +1,62 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Close as p } from "../../Icons/Icons.js";
+import { AnimatePresence as b, motion as i } from "framer-motion";
+import { useState as g, cloneElement as x } from "react";
+const T = ({
+  title: r,
+  trigger: o,
+  children: c,
+  position: t = "top",
+  component: m
+}) => {
+  const [a, l] = g(!1), u = () => l(!0), s = () => l(!1), d = o === "hover" ? {
+    onMouseEnter: u,
+    onMouseLeave: s
+  } : {
+    onClick: () => l(!a)
+  }, h = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2"
+  };
+  return /* @__PURE__ */ n("div", { className: "relative inline-block", children: [
+    x(c, d),
+    /* @__PURE__ */ e(b, { children: a && /* @__PURE__ */ e(
+      i.div,
+      {
+        initial: { opacity: 0, scale: 0.8, y: t === "top" ? 10 : -10 },
+        animate: {
+          opacity: 1,
+          scale: 1,
+          y: 0
+        },
+        exit: { opacity: 0, scale: 0.8, y: t === "top" ? 10 : -10 },
+        transition: {
+          duration: 0.15,
+          ease: "easeOut"
+        },
+        className: `absolute z-50 ${h[t]}`,
+        children: /* @__PURE__ */ n("div", { className: "min-w-80 max-w-80 min-h-36 h-fit text-white rounded-lg shadow-lg p-3 bg-neutral-medium-default", children: [
+          /* @__PURE__ */ e("h3", { className: "font-bold text-sm mb-1 text-neutral-strong-default", children: r }),
+          m,
+          o === "click" && /* @__PURE__ */ e(
+            i.button,
+            {
+              onClick: (f) => {
+                f.stopPropagation(), s();
+              },
+              className: "absolute cursor-pointer -top-2 -right-2 w-6 h-6 bg-neutral-strong-default hover:bg-neutral-medium-default rounded-full flex items-center justify-center transition-colors z-10",
+              whileHover: { scale: 1.1 },
+              whileTap: { scale: 0.95 },
+              children: /* @__PURE__ */ e(p, { size: 14, className: "text-white" })
+            }
+          )
+        ] })
+      }
+    ) })
+  ] });
+};
+export {
+  T as default
+};

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,24 @@
+import { useRef as o, useEffect as c } from "react";
+const d = (r, u = !0) => {
+  const t = o(null);
+  return c(() => {
+    if (!u) return;
+    const e = (n) => {
+      t.current && !t.current.contains(n.target) && r();
+    };
+    return document.addEventListener("mousedown", e, {
+      capture: !0
+    }), document.addEventListener("touchstart", e, {
+      capture: !0
+    }), () => {
+      document.removeEventListener("mousedown", e, {
+        capture: !0
+      }), document.removeEventListener("touchstart", e, {
+        capture: !0
+      });
+    };
+  }, [r, u]), t;
+};
+export {
+  d as useClickOutside
+};

package/dist/{useDragScroll-CHN9OMwn.js → hooks/useDragScroll.js}

@@ -161,5 +161,5 @@ function I(i) {
   }), [b, x, D, M, L, C]);
 }
 export {
-  I as u
+  I as useDragScroll
 };

package/dist/hooks/useLabelBackground.js

@@ -0,0 +1,25 @@
+import { useRef as o, useLayoutEffect as u } from "react";
+const c = (e) => {
+  let t = e;
+  for (; t && t !== document.body; ) {
+    const n = window.getComputedStyle(t).backgroundColor;
+    if (n && n !== "transparent" && n !== "rgba(0, 0, 0, 0)")
+      return n;
+    t = t.parentElement;
+  }
+  const r = window.getComputedStyle(document.body).backgroundColor;
+  return r && r !== "transparent" && r !== "rgba(0, 0, 0, 0)" ? r : "rgb(255, 255, 255)";
+};
+function d() {
+  const e = o(null);
+  return u(() => {
+    if (!e.current || !e.current.parentElement) return;
+    const t = c(e.current.parentElement);
+    e.current.style.backgroundColor = t;
+  }, []), {
+    ref: e
+  };
+}
+export {
+  d as useLabelBackground
+};

package/dist/index.d.ts

@@ -40,13 +40,6 @@ export { NavbarCollapseButton } from './components/Sidebar/components/collapse-b
 export { CompanyLogo } from './components/Sidebar/components/company-logo';
 export { NavbarLinks } from './components/Sidebar/components/nav-links';
 export { default as OtpInput } from './components/OtpInput/OtpInput';
-export { useDialogControl } from './components/Dialog/useDialogControl';
-export { useFileDropzone } from './components/DropZone/useFileDropzone';
-export { SidebarProvider as SidebarRefProvider, useSidebarContext, } from './components/Sidebar/context/SidebarContext';
-export { SidebarProvider } from './components/Sidebar/hooks/SidebarProvider';
-export { useSidebar } from './components/Sidebar/hooks/useSidebarHook';
-export { useClickOutside } from './hooks/useClickOutside';
-export { useIsMobile } from './hooks/useDevice';
 export type { ButtonProps } from './components/Button/Button';
 export type { ISessionLocalStorage } from './components/CardProfile/CardProfile';
 export type { CheckBoxProps } from './components/CheckBox/CheckBox';
@@ -68,7 +61,6 @@ export type { PaginationProps } from './components/Pagination/Pagination';
 export type { ProfilePictureUploadProps } from './components/ProfilePictureUpload/ProfilePictureUpload';
 export type { Step, StepsProps } from './components/Steps/Steps';
 export type { SelectProps } from './components/Select/Select';
-export type { DialogHandle } from './components/Dialog/Dialog';
 export { DropZone } from './components/DropZone/DropZone';
 export type { PyrionToastProps as ToasterPrometeo } from './components/Toaster/Toaster';
 export type { LayoutGenericProps } from './components/Layout/LayoutGeneric';
@@ -82,10 +74,6 @@ export type { DatePickerProps } from './components/DatePicker/DatePicker';
 export type { ImageProps } from './components/Image/Image';
 export type { ImageGalleryProps } from './components/Image/ImageGallery';
 export type { ImageGalleryHandle } from './components/Image/ImageGallery';
-export type { DrawerMobileProps } from './components/Drawer/DrawerMobile';
-export type { DrawerDesktopProps } from './components/Drawer/DrawerDesktop';
-export type { DrawerMobileHandle } from './components/Drawer/DrawerMobile';
-export type { DrawerDesktopHandle } from './components/Drawer/DrawerDesktop';
 export type { CustomSelectionDisplayProps } from './components/Select/Select';
 export type { CustomSelectOptionRendererProps } from './components/Select/Select';
 export type { SelectControlsHandler } from './components/Select/Select';
@@ -94,3 +82,19 @@ export type { BaseSelectSearchProps as SelectSearchProps } from './components/Se
 export type { FAButtonProps } from './components/FAB/FAButton';
 export type { RadioButtonProps } from './components/RadioButton/RadioButton';
 export { Icons } from './Icons/Icons';
+export { default as DrawerDesktop } from './components/Drawer/DrawerDesktop';
+export { default as DrawerMobile } from './components/Drawer/DrawerMobile';
+export type { DrawerMobileProps } from './components/Drawer/DrawerMobile';
+export type { DrawerDesktopProps } from './components/Drawer/DrawerDesktop';
+export type { DrawerMobileHandle } from './components/Drawer/DrawerMobile';
+export type { DrawerDesktopHandle } from './components/Drawer/DrawerDesktop';
+export type { DialogHandle } from './components/Dialog/Dialog';
+export { useDrawerMobile } from './components/Drawer/useDrawerMobile';
+export { useDrawerDesktop } from './components/Drawer/useDrawerDesktop';
+export { SidebarProvider } from './components/Sidebar/hooks/SidebarProvider';
+export { useSidebar } from './components/Sidebar/hooks/useSidebarHook';
+export { useClickOutside } from './hooks/useClickOutside';
+export { useIsMobile } from './hooks/useDevice';
+export { useDialogControl } from './components/Dialog/useDialogControl';
+export { useFileDropzone } from './components/DropZone/useFileDropzone';
+export { SidebarProvider as SidebarRefProvider, useSidebarContext, } from './components/Sidebar/context/SidebarContext';