@memobit/libs 2.0.1 → 3.0.0

package/dist/useAuth-BBqdDG2z.js

@@ -0,0 +1,467 @@
+import Q, { createContext as z, forwardRef as q, useCallback as A, useContext as O, useEffect as _, useRef as E, useState as j } from "react";
+import { iconMap as W } from "@memobit/icons/map";
+import { Fragment as F, jsx as n, jsxs as b } from "react/jsx-runtime";
+import { createPortal as Y } from "react-dom";
+var U = ({ className: s = "", fade: e, fadeOnHover: f, name: a, pulse: m, pulseOnHover: o, size: i, spin: l, spinOnHover: c, variant: u }) => /* @__PURE__ */ n("span", {
+  className: [
+    "icon",
+    i ? `icon--${i}` : "",
+    u && u !== "default" ? `icon--${u}` : "",
+    l ? "icon--spin" : "",
+    e ? "icon--fade" : "",
+    m ? "icon--pulse" : "",
+    c ? "icon--spin-hover" : "",
+    f ? "icon--fade-hover" : "",
+    o ? "icon--pulse-hover" : "",
+    s
+  ].filter(Boolean).join(" "),
+  children: W[a]
+}), X = (s) => {
+  const e = E(null);
+  _(() => {
+    const f = () => {
+      if (!e.current) return;
+      const { overflow: a, position: m, top: o, left: i, right: l, width: c, scrollY: u } = e.current;
+      document.body.style.overflow = a, document.body.style.position = m, document.body.style.top = o, document.body.style.left = i, document.body.style.right = l, document.body.style.width = c, window.scrollTo(0, u), e.current = null;
+    };
+    if (s) {
+      if (!e.current) {
+        const a = window.scrollY;
+        e.current = {
+          overflow: document.body.style.overflow,
+          position: document.body.style.position,
+          top: document.body.style.top,
+          left: document.body.style.left,
+          right: document.body.style.right,
+          width: document.body.style.width,
+          scrollY: a
+        }, document.body.style.overflow = "hidden", document.body.style.position = "fixed", document.body.style.top = `-${a}px`, document.body.style.left = "0", document.body.style.right = "0", document.body.style.width = "100%";
+      }
+    } else f();
+    return () => {
+      f();
+    };
+  }, [s]);
+}, Z = z(void 0), H = () => {
+  const s = O(Z);
+  if (s === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+  return s;
+}, ee = (s) => {
+  const { effects: e } = H();
+  return e.effect && e.components.includes(s) ? e.effect : "";
+}, B = Q.forwardRef(({ borders: s = "rounded", children: e, className: f, disabled: a = !1, fullWidth: m = !1, icon: o, iconVariant: i = "default", loading: l = !1, onClick: c, emojiIcon: u, size: r = "medium", style: d, sufixIcon: t, title: h, type: v = "button", variant: g = "default" }, w) => /* @__PURE__ */ n("button", {
+  ref: w,
+  className: `button button-${r} button-${g} ${s === "rounded" ? "button-rounded" : ""} ${m ? "is-full-width" : ""} ${f || ""}`,
+  disabled: a,
+  onClick: c,
+  style: d,
+  title: h,
+  type: v,
+  children: l ? /* @__PURE__ */ b(F, { children: [/* @__PURE__ */ n("span", { className: "button__spinner" }), /* @__PURE__ */ n("span", { children: e || "Loading..." })] }) : /* @__PURE__ */ b(F, { children: [
+    o !== void 0 && (typeof o == "string" ? /* @__PURE__ */ n(U, {
+      size: "lg",
+      name: o,
+      variant: i
+    }) : o),
+    u && /* @__PURE__ */ n("span", { children: u }),
+    e && /* @__PURE__ */ n("span", { children: e }),
+    t !== void 0 && (typeof t == "string" ? /* @__PURE__ */ n(U, {
+      size: "lg",
+      name: t,
+      variant: i
+    }) : t)
+  ] })
+}));
+B.displayName = "Button";
+var I = ({ title: s, position: e = "top", delay: f = 200, children: a, disabled: m = !1, className: o = "", maxWidth: i, maxHeight: l }) => {
+  const [c, u] = j(!1), [r, d] = j({
+    top: 0,
+    left: 0
+  }), t = E(null), h = E(null), v = E(null), g = E(null), w = E(!1), T = l !== void 0, $ = T ? 150 : 0, y = () => {
+    if (!v.current || !g.current) return;
+    const N = v.current.firstElementChild?.getBoundingClientRect();
+    let p = N && N.width > 0 ? N : v.current.getBoundingClientRect();
+    if (p.width === 0 && p.height === 0) {
+      const D = document.createRange();
+      D.selectNodeContents(v.current);
+      const S = D.getBoundingClientRect();
+      (S.width > 0 || S.height > 0) && (p = S);
+    }
+    const C = g.current.getBoundingClientRect(), M = 8;
+    let k = 0, R = 0;
+    switch (e) {
+      case "top":
+        k = p.top - C.height - M, R = p.left + p.width / 2 - C.width / 2;
+        break;
+      case "bottom":
+        k = p.bottom + M, R = p.left + p.width / 2 - C.width / 2;
+        break;
+      case "left":
+        k = p.top + p.height / 2 - C.height / 2, R = p.left - C.width - M;
+        break;
+      case "right":
+        k = p.top + p.height / 2 - C.height / 2, R = p.right + M;
+        break;
+    }
+    const x = 8;
+    R < x && (R = x), R + C.width > window.innerWidth - x && (R = window.innerWidth - C.width - x), k < x && (k = x), k + C.height > window.innerHeight - x && (k = window.innerHeight - C.height - x), d({
+      top: k,
+      left: R
+    });
+  }, L = () => {
+    m || w.current || (h.current && (clearTimeout(h.current), h.current = null), t.current = setTimeout(() => {
+      u(!0);
+    }, f));
+  }, P = () => {
+    w.current || (t.current && clearTimeout(t.current), $ > 0 ? h.current = setTimeout(() => u(!1), $) : u(!1));
+  }, V = (N) => {
+    N.pointerType !== "touch" && N.pointerType !== "pen" || m || (w.current = !0, t.current && (clearTimeout(t.current), t.current = null), N.stopPropagation(), u((p) => !p));
+  };
+  _(() => (c && (y(), window.addEventListener("scroll", y, !0), window.addEventListener("resize", y)), () => {
+    window.removeEventListener("scroll", y, !0), window.removeEventListener("resize", y);
+  }), [c]), _(() => {
+    if (!c) return;
+    const N = (p) => {
+      v.current?.contains(p.target) || g.current?.contains(p.target) || u(!1);
+    };
+    return document.addEventListener("pointerdown", N), () => {
+      document.removeEventListener("pointerdown", N), w.current = !1;
+    };
+  }, [c]), _(() => () => {
+    t.current && clearTimeout(t.current), h.current && clearTimeout(h.current);
+  }, []);
+  const G = () => {
+    T && h.current && (clearTimeout(h.current), h.current = null);
+  }, K = () => {
+    T && (h.current = setTimeout(() => u(!1), $));
+  };
+  return /* @__PURE__ */ b(F, { children: [/* @__PURE__ */ n("span", {
+    ref: v,
+    className: "tooltip-trigger",
+    onMouseEnter: L,
+    onMouseLeave: P,
+    onFocus: L,
+    onBlur: P,
+    onPointerDown: V,
+    children: a
+  }), c && s && Y(/* @__PURE__ */ b("div", {
+    ref: g,
+    className: `tooltip tooltip--${e} ${T ? "tooltip--scrollable" : ""} ${o}`,
+    style: {
+      top: `${r.top}px`,
+      left: `${r.left}px`,
+      ...i !== void 0 && { maxWidth: typeof i == "number" ? `${i}px` : i },
+      ...l !== void 0 && { maxHeight: typeof l == "number" ? `${l}px` : l }
+    },
+    onMouseEnter: G,
+    onMouseLeave: K,
+    children: [s, /* @__PURE__ */ n("div", { className: `tooltip__arrow tooltip__arrow--${e}` })]
+  }), document.body)] });
+}, se = ({ children: s, className: e, fullHeight: f = !1, isOpen: a, noPadding: m = !1, onClose: o, onOverlayClick: i, primary: l, secondary: c, size: u = "auto", tertiary: r, title: d, titleIcon: t, usePortal: h = !1 }) => {
+  const v = ee("Modal");
+  X(a);
+  const g = E(null), w = E(null);
+  if (_(() => {
+    if (!a) return;
+    const y = (L) => {
+      if (L.key !== "Escape" || !o) return;
+      const P = document.querySelectorAll(".modal-overlay");
+      P[P.length - 1] === w.current && (L.stopPropagation(), o());
+    };
+    return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
+  }, [a, o]), !a) return null;
+  const T = l || c || r, $ = /* @__PURE__ */ n("div", {
+    ref: w,
+    className: "modal-overlay",
+    onClick: i,
+    children: /* @__PURE__ */ b("div", {
+      ref: g,
+      className: `modal modal--${u} ${f ? "modal--full-height" : ""} ${e || ""} ${v}`,
+      onClick: (y) => y.stopPropagation(),
+      children: [
+        /* @__PURE__ */ b("div", {
+          className: "modal__header",
+          children: [/* @__PURE__ */ b("h2", { children: [
+            t ? /* @__PURE__ */ n(U, { name: t }) : null,
+            " ",
+            d
+          ] }), /* @__PURE__ */ n(I, {
+            title: "Close modal",
+            children: /* @__PURE__ */ n(B, {
+              className: "modal__close",
+              icon: "clear",
+              onClick: o,
+              size: "medium",
+              variant: "ghost"
+            })
+          })]
+        }),
+        s != null && /* @__PURE__ */ n("div", {
+          className: `modal__body ${m ? "modal__body--no-padding" : ""}`,
+          children: s
+        }),
+        T && /* @__PURE__ */ b("div", {
+          className: "modal__footer",
+          children: [
+            r && /* @__PURE__ */ n(B, {
+              variant: r.variant || "default",
+              icon: r.icon,
+              onClick: r.onClick,
+              disabled: r.disabled,
+              children: r.text
+            }),
+            c && /* @__PURE__ */ n(B, {
+              variant: c.variant || "default",
+              icon: c.icon || "clear",
+              onClick: c.onClick,
+              disabled: c.disabled,
+              children: c.text
+            }),
+            l && /* @__PURE__ */ n(B, {
+              variant: l.variant || "success",
+              icon: l.icon || "checkmark",
+              onClick: l.onClick,
+              disabled: l.disabled,
+              children: l.text
+            })
+          ]
+        })
+      ]
+    })
+  });
+  return h ? Y($, document.body) : $;
+}, ae = q(({ autoComplete: s = "on", autoFocus: e, disabled: f, error: a, highlighted: m, id: o, label: i, maxLength: l, onBlur: c, onChange: u, onClick: r, onKeyDown: d, onKeyUp: t, placeholder: h, readOnly: v = !1, required: g = !1, success: w, value: T }, $) => /* @__PURE__ */ b("div", {
+  className: `input-text-wrapper${m ? " input-text-highlighted" : ""}`,
+  children: [
+    i && /* @__PURE__ */ b("label", {
+      htmlFor: o,
+      className: "input-text-label",
+      children: [i, g && /* @__PURE__ */ n("span", {
+        className: "input-text-required",
+        children: "*"
+      })]
+    }),
+    /* @__PURE__ */ n("input", {
+      autoComplete: s,
+      autoFocus: e,
+      disabled: f,
+      type: "text",
+      className: `input-text ${a ? "input-text-error" : ""} ${w ? "input-text-success" : ""}`,
+      id: o,
+      maxLength: l,
+      placeholder: h,
+      ref: $,
+      value: T,
+      onBlur: c,
+      onChange: (y) => u?.(y.target.value),
+      onClick: r,
+      onKeyDown: d,
+      onKeyUp: t,
+      readOnly: v,
+      required: g
+    }),
+    a && /* @__PURE__ */ n("span", {
+      className: "input-text-error-message",
+      children: a
+    }),
+    w && /* @__PURE__ */ n("span", {
+      className: "input-text-success-message",
+      children: w
+    })
+  ]
+})), ie = q(({ autoComplete: s = "on", autoFocus: e, disabled: f, error: a, highlighted: m, id: o, label: i, maxLength: l, onBlur: c, onChange: u, onClick: r, onKeyDown: d, onKeyUp: t, placeholder: h, readOnly: v = !1, required: g = !1, success: w, value: T }, $) => /* @__PURE__ */ b("div", {
+  className: `input-password-wrapper${m ? " input-password-highlighted" : ""}`,
+  children: [
+    i && /* @__PURE__ */ b("label", {
+      htmlFor: o,
+      className: "input-password-label",
+      children: [i, g && /* @__PURE__ */ n("span", {
+        className: "input-password-required",
+        children: "*"
+      })]
+    }),
+    /* @__PURE__ */ n("input", {
+      autoComplete: s,
+      autoFocus: e,
+      disabled: f,
+      type: "password",
+      className: `input-password${a ? " input-password-error" : ""}${w ? " input-password-success" : ""}`,
+      id: o,
+      maxLength: l,
+      placeholder: h,
+      ref: $,
+      value: T,
+      onBlur: c,
+      onChange: (y) => u?.(y.target.value),
+      onClick: r,
+      onKeyDown: d,
+      onKeyUp: t,
+      readOnly: v,
+      required: g
+    }),
+    a && /* @__PURE__ */ n("span", {
+      className: "input-password-error-message",
+      children: a
+    }),
+    w && /* @__PURE__ */ n("span", {
+      className: "input-password-success-message",
+      children: w
+    })
+  ]
+})), le = ({ message: s, type: e = "success", onClose: f, position: a = "top-right", showDismissButton: m = !0, timeout: o = 3e3, action: i }) => (_(() => {
+  const l = setTimeout(() => {
+    f();
+  }, o);
+  return () => clearTimeout(l);
+}, [f, o]), /* @__PURE__ */ b("div", {
+  className: `toast toast--fixed toast-${e} toast--${a}`,
+  children: [
+    /* @__PURE__ */ n("span", {
+      className: "toast__message",
+      children: s
+    }),
+    i && /* @__PURE__ */ n("button", {
+      className: "toast__action",
+      onClick: i.onClick,
+      children: i.label
+    }),
+    m && /* @__PURE__ */ n(I, {
+      title: "Close",
+      children: /* @__PURE__ */ n("button", {
+        className: "toast__close",
+        onClick: f,
+        children: /* @__PURE__ */ n(U, {
+          name: "clear",
+          size: "sm"
+        })
+      })
+    })
+  ]
+})), J = z(void 0);
+function ce({ children: s, config: e }) {
+  const [f, a] = j(null), [m, o] = j(!0);
+  _(() => {
+    (async () => {
+      try {
+        const d = await fetch(`${e.apiBaseUrl}/auth/verify`, {
+          method: "GET",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" }
+        });
+        if (d.ok) {
+          const t = await d.json();
+          a({
+            id: t.user.id,
+            username: t.user.username,
+            createdAt: new Date(t.user.createdAt)
+          });
+        }
+      } catch (d) {
+        console.error("Failed to restore auth state:", d);
+      } finally {
+        o(!1);
+      }
+    })();
+  }, [e.apiBaseUrl]);
+  const i = A((r) => {
+    r.user && a({
+      id: r.user.id,
+      username: r.user.username,
+      createdAt: new Date(r.user.createdAt)
+    });
+  }, []), l = A(async (r) => {
+    o(!0);
+    try {
+      const d = await fetch(`${e.apiBaseUrl}/auth/login`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username: r.username,
+          password: r.password,
+          rememberMe: r.rememberMe
+        })
+      });
+      if (!d.ok) {
+        const h = await d.json();
+        throw new Error(h.error || "Login failed");
+      }
+      const t = await d.json();
+      return t.mfaRequired ? {
+        mfaRequired: !0,
+        method: t.method
+      } : (i(t), { mfaRequired: !1 });
+    } catch (d) {
+      throw console.error("Login failed:", d), d;
+    } finally {
+      o(!1);
+    }
+  }, [e.apiBaseUrl, i]), c = A(async (r, d) => {
+    o(!0);
+    try {
+      const t = await fetch(`${e.apiBaseUrl}/auth/verifyMfa`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          code: r,
+          trustDevice: d
+        })
+      });
+      if (!t.ok) {
+        const h = await t.json();
+        throw new Error(h.error || "Verification failed");
+      }
+      i(await t.json());
+    } catch (t) {
+      throw console.error("MFA verification failed:", t), t;
+    } finally {
+      o(!1);
+    }
+  }, [e.apiBaseUrl, i]), u = A(async () => {
+    try {
+      await fetch(`${e.apiBaseUrl}/auth/logout`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" }
+      });
+    } catch (r) {
+      console.error("Logout error:", r);
+    } finally {
+      a(null);
+    }
+  }, [e.apiBaseUrl]);
+  return /* @__PURE__ */ n(J.Provider, {
+    value: {
+      user: f,
+      isAuthenticated: !!f,
+      isLoading: m,
+      config: e,
+      login: l,
+      verifyMfa: c,
+      logout: u
+    },
+    children: s
+  });
+}
+var ue = () => {
+  const s = O(J);
+  if (s === void 0) throw new Error("useAuth must be used within an AuthProvider");
+  return s;
+};
+export {
+  ie as a,
+  I as c,
+  H as d,
+  Z as f,
+  le as i,
+  B as l,
+  U as m,
+  J as n,
+  ae as o,
+  X as p,
+  ce as r,
+  se as s,
+  ue as t,
+  ee as u
+};

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.0.1",
-  "buildNumber": 415,
-  "commit": "63b3e43",
-  "buildDate": "2026-09-29T20:18:55.941Z"
+  "version": "3.0.0",
+  "buildNumber": 425,
+  "commit": "92949d1",
+  "buildDate": "2026-09-30T05:04:58.651Z"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@memobit/libs",
-  "version": "2.0.1",
-  "description": "React component library powering the Memobit apps — 100+ components, 70+ themes, helpers and hooks. Icons ship separately as @memobit/icons. TypeScript-first, ESM-only, React 19.",
+  "version": "3.0.0",
+  "description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
   "keywords": [
     "react",
     "react-components",
@@ -10,7 +10,6 @@
     "ui-kit",
     "design-system",
     "typescript",
-    "themes",
     "hooks",
     "memobit"
   ],
@@ -40,6 +39,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.esm.js"
     },
+    "./mfa": {
+      "types": "./dist/mfa.d.ts",
+      "import": "./dist/mfa.esm.js"
+    },
     "./dist/index.css": "./dist/index.css",
     "./dist/styles/variables.scss": "./dist/styles/variables.scss",
     "./dist/styles/base.scss": "./dist/styles/base.scss",
@@ -47,73 +50,7 @@
     "./dist/styles/highlight.scss": "./dist/styles/highlight.scss",
     "./dist/styles/scrollbars.scss": "./dist/styles/scrollbars.scss",
     "./dist/styles/utilities.scss": "./dist/styles/utilities.scss",
-    "./dist/styles/utility-classes.scss": "./dist/styles/utility-classes.scss",
-    "./dist/styles/themes.scss": "./dist/styles/themes.scss",
-    "./dist/styles/theming/_profile-theme.scss": "./dist/styles/theming/_profile-theme.scss",
-    "./dist/styles/theming/amber-meridian.scss": "./dist/styles/theming/amber-meridian.scss",
-    "./dist/styles/theming/archive-indigo.scss": "./dist/styles/theming/archive-indigo.scss",
-    "./dist/styles/theming/arctic-blue.scss": "./dist/styles/theming/arctic-blue.scss",
-    "./dist/styles/theming/asphalt-code.scss": "./dist/styles/theming/asphalt-code.scss",
-    "./dist/styles/theming/atelier-media.scss": "./dist/styles/theming/atelier-media.scss",
-    "./dist/styles/theming/audit-ember.scss": "./dist/styles/theming/audit-ember.scss",
-    "./dist/styles/theming/azure-night.scss": "./dist/styles/theming/azure-night.scss",
-    "./dist/styles/theming/blossom-meadow.scss": "./dist/styles/theming/blossom-meadow.scss",
-    "./dist/styles/theming/blueprint-clay.scss": "./dist/styles/theming/blueprint-clay.scss",
-    "./dist/styles/theming/blush-market.scss": "./dist/styles/theming/blush-market.scss",
-    "./dist/styles/theming/brass-chronicle.scss": "./dist/styles/theming/brass-chronicle.scss",
-    "./dist/styles/theming/carbon-velocity.scss": "./dist/styles/theming/carbon-velocity.scss",
-    "./dist/styles/theming/chalk-circuit.scss": "./dist/styles/theming/chalk-circuit.scss",
-    "./dist/styles/theming/chrono-atlas.scss": "./dist/styles/theming/chrono-atlas.scss",
-    "./dist/styles/theming/clinical-aqua.scss": "./dist/styles/theming/clinical-aqua.scss",
-    "./dist/styles/theming/cobalt-pulse.scss": "./dist/styles/theming/cobalt-pulse.scss",
-    "./dist/styles/theming/citrus-vital.scss": "./dist/styles/theming/citrus-vital.scss",
-    "./dist/styles/theming/command-slate.scss": "./dist/styles/theming/command-slate.scss",
-    "./dist/styles/theming/crawler-dusk.scss": "./dist/styles/theming/crawler-dusk.scss",
-    "./dist/styles/theming/crimson-dusk.scss": "./dist/styles/theming/crimson-dusk.scss",
-    "./dist/styles/theming/cyber-forest.scss": "./dist/styles/theming/cyber-forest.scss",
-    "./dist/styles/theming/dashdarkx.scss": "./dist/styles/theming/dashdarkx.scss",
-    "./dist/styles/theming/ember-night.scss": "./dist/styles/theming/ember-night.scss",
-    "./dist/styles/theming/emerald-ledger.scss": "./dist/styles/theming/emerald-ledger.scss",
-    "./dist/styles/theming/frost-petal.scss": "./dist/styles/theming/frost-petal.scss",
-    "./dist/styles/theming/garden-harvest.scss": "./dist/styles/theming/garden-harvest.scss",
-    "./dist/styles/theming/gilded-bear.scss": "./dist/styles/theming/gilded-bear.scss",
-    "./dist/styles/theming/graphite-shell.scss": "./dist/styles/theming/graphite-shell.scss",
-    "./dist/styles/theming/horizon-amber.scss": "./dist/styles/theming/horizon-amber.scss",
-    "./dist/styles/theming/horizon-drift.scss": "./dist/styles/theming/horizon-drift.scss",
-    "./dist/styles/theming/ivory-serif.scss": "./dist/styles/theming/ivory-serif.scss",
-    "./dist/styles/theming/lavender-mist.scss": "./dist/styles/theming/lavender-mist.scss",
-    "./dist/styles/theming/light-blue.scss": "./dist/styles/theming/light-blue.scss",
-    "./dist/styles/theming/lumen.scss": "./dist/styles/theming/lumen.scss",
-    "./dist/styles/theming/luna.scss": "./dist/styles/theming/luna.scss",
-    "./dist/styles/theming/mesh-circuit.scss": "./dist/styles/theming/mesh-circuit.scss",
-    "./dist/styles/theming/midnight-atlas.scss": "./dist/styles/theming/midnight-atlas.scss",
-    "./dist/styles/theming/midnight-amber.scss": "./dist/styles/theming/midnight-amber.scss",
-    "./dist/styles/theming/midnight-folio.scss": "./dist/styles/theming/midnight-folio.scss",
-    "./dist/styles/theming/mint-meadow.scss": "./dist/styles/theming/mint-meadow.scss",
-    "./dist/styles/theming/mintone.scss": "./dist/styles/theming/mintone.scss",
-    "./dist/styles/theming/neon-tokyo.scss": "./dist/styles/theming/neon-tokyo.scss",
-    "./dist/styles/theming/noir-marquee.scss": "./dist/styles/theming/noir-marquee.scss",
-    "./dist/styles/theming/ocean-breeze.scss": "./dist/styles/theming/ocean-breeze.scss",
-    "./dist/styles/theming/ocean-depths.scss": "./dist/styles/theming/ocean-depths.scss",
-    "./dist/styles/theming/orbital-night.scss": "./dist/styles/theming/orbital-night.scss",
-    "./dist/styles/theming/sandstone.scss": "./dist/styles/theming/sandstone.scss",
-    "./dist/styles/theming/sandy-parchment.scss": "./dist/styles/theming/sandy-parchment.scss",
-    "./dist/styles/theming/screening-room.scss": "./dist/styles/theming/screening-room.scss",
-    "./dist/styles/theming/signal-burst.scss": "./dist/styles/theming/signal-burst.scss",
-    "./dist/styles/theming/signal-clarity.scss": "./dist/styles/theming/signal-clarity.scss",
-    "./dist/styles/theming/slate-focus.scss": "./dist/styles/theming/slate-focus.scss",
-    "./dist/styles/theming/slate-bazaar.scss": "./dist/styles/theming/slate-bazaar.scss",
-    "./dist/styles/theming/spectrum-vault.scss": "./dist/styles/theming/spectrum-vault.scss",
-    "./dist/styles/theming/tailwind-vue-dark.scss": "./dist/styles/theming/tailwind-vue-dark.scss",
-    "./dist/styles/theming/terminal-phosphor.scss": "./dist/styles/theming/terminal-phosphor.scss",
-    "./dist/styles/theming/terracotta-kitchen.scss": "./dist/styles/theming/terracotta-kitchen.scss",
-    "./dist/styles/theming/twilight-pulse.scss": "./dist/styles/theming/twilight-pulse.scss",
-    "./dist/styles/theming/vault-guard.scss": "./dist/styles/theming/vault-guard.scss",
-    "./dist/styles/theming/velvet-reel.scss": "./dist/styles/theming/velvet-reel.scss",
-    "./dist/styles/theming/velvet-tome.scss": "./dist/styles/theming/velvet-tome.scss",
-    "./dist/styles/theming/verdant-pulse.scss": "./dist/styles/theming/verdant-pulse.scss",
-    "./dist/styles/theming/vital-aurora.scss": "./dist/styles/theming/vital-aurora.scss",
-    "./dist/styles/theming/vital-signal.scss": "./dist/styles/theming/vital-signal.scss"
+    "./dist/styles/utility-classes.scss": "./dist/styles/utility-classes.scss"
   },
   "files": [
     "dist"
@@ -135,12 +72,14 @@
   },
   "peerDependencies": {
     "@memobit/icons": "^1.0.0",
+    "@memobit/themes": "^1.0.0",
     "react": "19.2.7",
     "react-dom": "19.2.7"
   },
   "devDependencies": {
-    "@memobit/icons": "file:../memobit-react-icons",
     "@eslint/js": "9.39.4",
+    "@memobit/icons": "file:../memobit-react-icons",
+    "@memobit/themes": "file:../memobit-react-themes",
     "@microsoft/api-extractor": "7.58.8",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
@@ -154,6 +93,7 @@
     "eslint-plugin-simple-import-sort": "13.0.0",
     "globals": "17.6.0",
     "prettier": "3.8.3",
+    "qrcode.react": "4.2.0",
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "react-router": "8.3.0",
@@ -165,9 +105,6 @@
     "vite-plugin-dts": "5.0.0",
     "vite-plugin-static-copy": "3.4.0"
   },
-  "dependencies": {
-    "qrcode.react": "4.2.0"
-  },
   "overrides": {
     "brace-expansion@1": "1.1.18",
     "brace-expansion@5": "5.0.9",