strapi-plugin-magic-mark 3.2.8 → 3.3.1

package/dist/_chunks/{App-C6Crb_w7.js → App-PJuAWFXQ.js}

@@ -7,10 +7,71 @@ const reactRouterDom = require("react-router-dom");
 const styled = require("styled-components");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
+const outline = require("@heroicons/react/24/outline");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-svfBWq9B.js");
+const index = require("./index-D1AjX5wc.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const FEATURES = {
+  // Free tier features
+  basicBookmarks: { tier: "free", limit: 10 },
+  basicFilters: { tier: "free" },
+  // Premium tier features
+  extendedBookmarks: { tier: "premium", limit: 50 },
+  queryHistory: { tier: "premium" },
+  exportBookmarks: { tier: "premium" },
+  sharedBookmarks: { tier: "premium" },
+  // Advanced tier features
+  unlimitedBookmarks: { tier: "advanced", limit: -1 },
+  advancedFilters: { tier: "advanced" },
+  subGroups: { tier: "advanced" },
+  bulkOperations: { tier: "advanced" },
+  analytics: { tier: "advanced" },
+  customIntegrations: { tier: "advanced" }
+};
+const useLicenseInfo = () => {
+  const { get } = admin.useFetchClient();
+  const [limits, setLimits] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    const fetchLimits = async () => {
+      try {
+        console.log("[useLicenseInfo] Fetching license limits...");
+        const response = await get("/magic-mark/license/limits");
+        console.log("[useLicenseInfo] Raw API response:", response);
+        console.log("[useLicenseInfo] Response data:", response.data);
+        if (response.data?.success) {
+          console.log("[useLicenseInfo] Setting limits:", response.data.data);
+          setLimits(response.data.data);
+        } else {
+          console.warn("[useLicenseInfo] API returned success=false or missing data");
+        }
+      } catch (error) {
+        console.error("[useLicenseInfo] Error fetching license limits:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchLimits();
+  }, []);
+  const tier = limits?.tier || "free";
+  const isPremium = tier === "premium" || tier === "advanced";
+  const isAdvanced = tier === "advanced";
+  console.log("[useLicenseInfo] Computed values:", { tier, isPremium, isAdvanced, limits });
+  return {
+    isLoading,
+    limits,
+    tier,
+    isFree: tier === "free",
+    isPremium,
+    isAdvanced,
+    canUseFeature: (feature) => {
+      const featureConfig = FEATURES[feature];
+      const tierOrder = { free: 0, premium: 1, advanced: 2 };
+      return tierOrder[tier] >= tierOrder[featureConfig.tier];
+    }
+  };
+};
 const theme = {
   colors: {
     primary: {
@@ -40,12 +101,8 @@ const theme = {
     },
     neutral: {
       0: "#FFFFFF",
-      50: "#F9FAFB",
       100: "#F3F4F6",
-      200: "#E5E7EB",
-      600: "#4B5563",
-      700: "#374151",
-      800: "#1F2937"
+      600: "#4B5563"
     }
   },
   shadows: {
@@ -190,7 +247,7 @@ const StatsGrid = styled__default.default.div`
   }
 `;
 const StatCard = styled__default.default(designSystem.Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: ${theme.spacing.lg};
   position: relative;
@@ -199,7 +256,7 @@ const StatCard = styled__default.default(designSystem.Box)`
   animation: ${fadeIn$1} ${theme.transitions.slow} backwards;
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -251,34 +308,34 @@ const StatIcon = styled__default.default(designSystem.Box)`
 const StatValue = styled__default.default(designSystem.Typography)`
   font-size: 2.5rem;
   font-weight: 700;
-  color: ${theme.colors.neutral[800]};
+  color: ${(p) => p.theme.colors.neutral800};
   line-height: 1;
   margin-bottom: ${theme.spacing.xs};
   transition: transform ${theme.transitions.normal};
 `;
 const StatLabel = styled__default.default(designSystem.Typography)`
   font-size: 0.875rem;
-  color: ${theme.colors.neutral[600]};
+  color: ${(p) => p.theme.colors.neutral600};
   font-weight: 500;
   letter-spacing: 0.025em;
   text-transform: capitalize;
 `;
 const DataTable = styled__default.default(designSystem.Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   overflow: hidden;
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   margin-bottom: ${theme.spacing.xl};
 `;
 const StyledTable = styled__default.default(designSystem.Table)`
   thead {
-    background: ${theme.colors.neutral[0]};
-    border-bottom: 2px solid ${theme.colors.neutral[100]};
+    background: ${(p) => p.theme.colors.neutral0};
+    border-bottom: 2px solid rgba(128, 128, 128, 0.15);
     
     th {
       font-weight: 600;
-      color: ${theme.colors.neutral[700]};
+      color: ${(p) => p.theme.colors.neutral700};
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -288,14 +345,14 @@ const StyledTable = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme.transitions.fast};
-    border-bottom: 1px solid ${theme.colors.neutral[100]};
+    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${theme.colors.neutral[50]};
+      background: ${(p) => p.theme.colors.neutral100};
       
       .action-buttons {
         opacity: 1;
@@ -304,7 +361,7 @@ const StyledTable = styled__default.default(designSystem.Table)`
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${theme.colors.neutral[700]};
+      color: ${(p) => p.theme.colors.neutral700};
       vertical-align: middle;
     }
   }
@@ -316,10 +373,21 @@ styled__default.default(designSystem.Box)`
   border-radius: 2px;
   transition: all ${theme.transitions.normal};
 `;
-styled__default.default.div`
-  font-size: 32px;
-  line-height: 1;
-  text-align: center;
+const BookmarkIconWrapper = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, ${theme.colors.primary[100]} 0%, #E0E7FF 100%);
+  border-radius: 8px;
+  flex-shrink: 0;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: ${theme.colors.primary[600]};
+  }
 `;
 const ActionButtons = styled__default.default(designSystem.Flex)`
   opacity: 1;
@@ -327,21 +395,26 @@ const ActionButtons = styled__default.default(designSystem.Flex)`
   gap: ${theme.spacing.xs};
   justify-content: flex-end;
 `;
-const FloatingEmoji = styled__default.default.div`
+const FloatingIcon = styled__default.default.div`
   position: absolute;
   bottom: 40px;
   right: 40px;
-  font-size: 72px;
   opacity: 0.08;
   animation: ${float} 4s ease-in-out infinite;
+  
+  svg {
+    width: 72px;
+    height: 72px;
+    color: ${theme.colors.warning[500]};
+  }
 `;
 const FilterBar = styled__default.default(designSystem.Flex)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(p) => p.theme.colors.neutral0};
   padding: ${theme.spacing.md} ${theme.spacing.lg};
   border-radius: ${theme.borderRadius.lg};
   margin-bottom: ${theme.spacing.lg};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   gap: ${theme.spacing.md};
   align-items: center;
 `;
@@ -354,23 +427,23 @@ const SearchInputWrapper = styled__default.default.div`
   display: flex;
   align-items: center;
 `;
-const SearchIcon = styled__default.default(icons.Search)`
+const SearchIconStyled = styled__default.default(outline.MagnifyingGlassIcon)`
   position: absolute;
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${theme.colors.neutral[600]};
+  color: ${(p) => p.theme.colors.neutral600};
   pointer-events: none;
 `;
 const StyledSearchInput = styled__default.default.input`
   width: 100%;
   padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} 36px;
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: ${theme.borderRadius.md};
   font-size: 0.875rem;
   transition: all ${theme.transitions.fast};
-  background: ${theme.colors.neutral[0]};
-  color: ${theme.colors.neutral[800]};
+  background: ${(p) => p.theme.colors.neutral0};
+  color: ${(p) => p.theme.colors.neutral800};
   
   &:focus {
     outline: none;
@@ -379,14 +452,14 @@ const StyledSearchInput = styled__default.default.input`
   }
   
   &::placeholder {
-    color: ${theme.colors.neutral[600]};
+    color: ${(p) => p.theme.colors.neutral600};
   }
 `;
 const HomePageModern = () => {
   const { formatMessage } = reactIntl.useIntl();
   const navigate = reactRouterDom.useNavigate();
   const { get, post, del } = admin.useFetchClient();
-  index.useLicenseInfo();
+  useLicenseInfo();
   const [currentUser, setCurrentUser] = React.useState(null);
   const [bookmarks, setBookmarks] = React.useState([]);
   const [loading, setLoading] = React.useState(false);
@@ -453,6 +526,19 @@ const HomePageModern = () => {
       console.error("[Magic-Mark] Error fetching current user:", error);
     }
   };
+  const isCurrentUserOwner = (bookmark) => {
+    if (!bookmark.createdBy || !currentUser) return false;
+    if (bookmark.createdBy.documentId && currentUser.documentId) {
+      return bookmark.createdBy.documentId === currentUser.documentId;
+    }
+    if (bookmark.createdBy.id && currentUser.id) {
+      return String(bookmark.createdBy.id) === String(currentUser.id);
+    }
+    if (bookmark.createdBy.id && currentUser.documentId) {
+      return String(bookmark.createdBy.id) === String(currentUser.documentId);
+    }
+    return false;
+  };
   const fetchLicenseLimits = async () => {
     try {
       const response = await get(`/${index.pluginId}/license/limits`);
@@ -477,27 +563,29 @@ const HomePageModern = () => {
       setLoading(false);
     }
   };
-  const handleDelete = async (id) => {
+  const handleDelete = async (bookmark) => {
     if (!confirm(formatMessage({
       id: `${index.pluginId}.confirm.delete`,
       defaultMessage: "Are you sure you want to delete this bookmark?"
     }))) {
       return;
     }
+    const deleteId = bookmark.documentId || bookmark.id;
     try {
-      await del(`/${index.pluginId}/bookmarks/${id}`);
-      console.log("[Magic-Mark HomePage] Bookmark deleted:", id);
+      await del(`/${index.pluginId}/bookmarks/${deleteId}`);
+      console.log("[Magic-Mark HomePage] Bookmark deleted:", deleteId);
       fetchBookmarks();
     } catch (error) {
       console.error("[Magic-Mark HomePage] Error deleting bookmark:", error);
     }
   };
   const handlePin = async (bookmark) => {
+    const pinId = bookmark.documentId || bookmark.id;
     try {
-      await post(`/${index.pluginId}/bookmarks/${bookmark.id}/pin`, {
+      await post(`/${index.pluginId}/bookmarks/${pinId}/pin`, {
         isPinned: !bookmark.isPinned
       });
-      console.log("[Magic-Mark HomePage] Bookmark pinned:", bookmark.id);
+      console.log("[Magic-Mark HomePage] Bookmark pinned:", pinId);
       fetchBookmarks();
     } catch (error) {
       console.error("[Magic-Mark HomePage] Error pinning bookmark:", error);
@@ -536,24 +624,24 @@ const HomePageModern = () => {
     return bookmark.name.toLowerCase().includes(query) || bookmark.description && bookmark.description.toLowerCase().includes(query) || bookmark.path.toLowerCase().includes(query);
   }).slice(0, parseInt(entriesPerPage));
   const pinnedBookmarks = bookmarks.filter((b) => b.isPinned);
-  const myBookmarks = bookmarks.filter((b) => b.createdBy?.id === currentUser?.id);
-  const sharedWithMe = bookmarks.filter((b) => b.createdBy?.id !== currentUser?.id && b.createdBy?.id);
+  const myBookmarks = bookmarks.filter((b) => isCurrentUserOwner(b));
+  const sharedWithMe = bookmarks.filter((b) => !isCurrentUserOwner(b) && b.createdBy);
   return /* @__PURE__ */ jsxRuntime.jsxs(Container, { padding: 8, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderContent, { direction: "column", alignItems: "flex-start", gap: 2, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(icons.Book, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(outline.BookOpenIcon, {}),
         " MagicMark"
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { children: "Save filtered views and navigate with one click" })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(StatsGrid, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.1s", $color: theme.colors.primary[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.primary[100], $color: theme.colors.primary[600], children: /* @__PURE__ */ jsxRuntime.jsx(icons.User, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.primary[100], $color: theme.colors.primary[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.UserIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: myBookmarks.length }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "My Bookmarks" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.2s", $color: theme.colors.success[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkle, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: sharedWithMe.length }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: formatMessage({ id: `${index.pluginId}.stats.shared`, defaultMessage: "Shared with Me" }) })
       ] }),
@@ -576,7 +664,7 @@ const HomePageModern = () => {
                 className: "stat-icon",
                 $bg: licenseLimits.canCreate ? theme.colors.neutral[100] : theme.colors.danger[100],
                 $color: licenseLimits.canCreate ? theme.colors.neutral[600] : theme.colors.danger[600],
-                children: /* @__PURE__ */ jsxRuntime.jsx(icons.Link, {})
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.LinkIcon, {})
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(StatValue, { className: "stat-value", children: [
@@ -612,10 +700,10 @@ const HomePageModern = () => {
       }) })
     ] }) }),
     !loading && bookmarks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", style: { marginBottom: theme.spacing.md, color: theme.colors.neutral[700] }, children: formatMessage({ id: `${index.pluginId}.allBookmarks.title`, defaultMessage: "🔖 All Available Bookmarks" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", style: { marginBottom: theme.spacing.md, color: "var(--colors-neutral700, #374151)" }, children: formatMessage({ id: `${index.pluginId}.allBookmarks.title`, defaultMessage: "🔖 All Available Bookmarks" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(FilterBar, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(SearchInputWrapper, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(SearchIconStyled, {}),
           /* @__PURE__ */ jsxRuntime.jsx(
             StyledSearchInput,
             {
@@ -672,28 +760,17 @@ const HomePageModern = () => {
           background: bookmark.isPinned ? theme.colors.warning[50] : "transparent"
         }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { onClick: () => handleBookmarkClick(bookmark), style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Box,
-              {
-                style: {
-                  width: "36px",
-                  height: "36px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0,
-                  fontSize: "24px"
-                },
-                children: bookmark.emoji
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(BookmarkIconWrapper, { children: (() => {
+              const IconComponent = index.getIconById(bookmark.icon || bookmark.emoji || "bookmark");
+              return /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {});
+            })() }),
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 0, children: [
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", ellipsis: true, style: { fontSize: "1.125rem", lineHeight: "1.4" }, children: bookmark.name }),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", children: [
-                bookmark.createdBy?.id && currentUser?.id && bookmark.createdBy.id === currentUser.id ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.primary[600], fontWeight: 500 }, children: [
+                isCurrentUserOwner(bookmark) ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.primary[600], fontWeight: 500 }, children: [
                   "• ",
                   formatMessage({ id: `${index.pluginId}.bookmark.myBookmark`, defaultMessage: "My Bookmark" })
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.neutral[600] }, children: [
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "0.75rem", color: "var(--colors-neutral600, #4B5563)" }, children: [
                   "• ",
                   formatMessage({ id: `${index.pluginId}.bookmark.sharedBy`, defaultMessage: "Shared by {name}" }, { name: bookmark.createdBy?.firstname || formatMessage({ id: `${index.pluginId}.bookmark.unknown`, defaultMessage: "Unknown" }) })
                 ] }),
@@ -752,7 +829,7 @@ const HomePageModern = () => {
                     children: /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, {})
                   }
                 ),
-                bookmark.createdBy && /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.Button,
                   {
                     variant: "ghost",
@@ -761,18 +838,18 @@ const HomePageModern = () => {
                       e.stopPropagation();
                       handleEdit(bookmark);
                     },
-                    disabled: bookmark.createdBy?.id !== currentUser?.id,
+                    disabled: !isCurrentUserOwner(bookmark),
                     children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
                   }
                 ),
-                bookmark.createdBy?.id && currentUser?.id && bookmark.createdBy.id === currentUser.id && /* @__PURE__ */ jsxRuntime.jsx(
+                isCurrentUserOwner(bookmark) && /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.Button,
                   {
                     variant: "ghost",
                     size: "S",
                     onClick: (e) => {
                       e.stopPropagation();
-                      handleDelete(bookmark.id);
+                      handleDelete(bookmark);
                     },
                     children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
                   }
@@ -787,9 +864,9 @@ const HomePageModern = () => {
       designSystem.Box,
       {
         style: {
-          background: theme.colors.neutral[0],
+          background: "transparent",
           borderRadius: theme.borderRadius.xl,
-          border: `2px dashed ${theme.colors.neutral[200]}`,
+          border: "2px dashed rgba(128, 128, 128, 0.2)",
           padding: theme.spacing["3xl"],
           textAlign: "center",
           position: "relative",
@@ -816,7 +893,7 @@ const HomePageModern = () => {
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(FloatingEmoji, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkle, { fill: "warning500" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FloatingIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, {}) }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 6, style: { position: "relative", zIndex: 1 }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               designSystem.Box,
@@ -831,7 +908,7 @@ const HomePageModern = () => {
                   justifyContent: "center",
                   boxShadow: theme.shadows.xl
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkle, { style: { width: "60px", height: "60px", color: theme.colors.primary[600] } })
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: "60px", height: "60px", color: theme.colors.primary[600] } })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -841,7 +918,7 @@ const HomePageModern = () => {
                 style: {
                   fontSize: "1.75rem",
                   fontWeight: "700",
-                  color: theme.colors.neutral[800],
+                  color: "var(--colors-neutral800, #1F2937)",
                   marginBottom: "8px"
                 },
                 children: formatMessage({ id: `${index.pluginId}.empty.title`, defaultMessage: "No bookmarks yet" })
@@ -907,7 +984,7 @@ const ModalOverlay = styled__default.default.div`
   padding: 20px;
 `;
 const ModalContent = styled__default.default(designSystem.Box)`
-  background: white;
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: 16px;
   width: 100%;
   max-width: 580px;
@@ -1233,7 +1310,7 @@ const LicenseGuard = ({ children }) => {
                 padding: 4,
                 style: {
                   borderRadius: "8px",
-                  border: "2px solid #BAE6FD",
+                  border: "2px solid rgba(14, 165, 233, 0.3)",
                   width: "100%"
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { fontSize: "13px", lineHeight: "1.6" }, children: useExistingKey ? "Enter your email and license key to activate." : useAutoCreate && adminUser && adminUser.email ? `Click "Activate" to auto-create a license with your account (${adminUser.email})` : useAutoCreate ? 'Click "Activate" to auto-create a license with your admin account' : "A license will be created with the details below." })
@@ -1297,7 +1374,7 @@ const LicenseGuard = ({ children }) => {
                   padding: 5,
                   style: {
                     borderRadius: "8px",
-                    border: "2px solid #DCFCE7",
+                    border: "2px solid rgba(34, 197, 94, 0.15)",
                     textAlign: "center"
                   },
                   children: [

package/dist/_chunks/{UpgradePage-BWjKwdCf.mjs → UpgradePage-BWZTKs8A.mjs}

@@ -5,7 +5,7 @@ import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import styled from "styled-components";
 import { Flex, Typography, Box, Badge, Button } from "@strapi/design-system";
 import { Check, Cross, Sparkle, Lightning, Rocket } from "@strapi/icons";
-import { p as pluginId } from "./index-C7wF7iqT.mjs";
+import { p as pluginId } from "./index-Bh3DfbXD.mjs";
 const Container = styled(Box)`
   padding: 32px;
   max-width: 1400px;
@@ -52,7 +52,7 @@ const TierCard = styled(Box)`
   background: ${(props) => props.theme.colors.neutral0};
   border-radius: 16px;
   padding: 32px;
-  border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : props.theme.colors.neutral200};
+  border: 2px solid ${(props) => props.$featured ? "rgba(14, 165, 233, 0.5)" : props.theme.colors.neutral200};
   position: relative;
   transition: all 0.3s ease;
   box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(14, 165, 233, 0.25), 0 8px 10px -6px rgba(14, 165, 233, 0.2)" : "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)"};
@@ -125,7 +125,7 @@ const FeatureIcon = styled(Box)`
   margin-top: 2px;
   
   ${(props) => props.$included ? `
-    background: #DCFCE7;
+    background: rgba(34, 197, 94, 0.15);
     svg { color: #16A34A; }
   ` : `
     background: #FEE2E2;
@@ -305,7 +305,7 @@ const UpgradePage = () => {
       /* @__PURE__ */ jsx(TierName, { variant: "beta", children: tier.name }),
       /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 1, children: [
         /* @__PURE__ */ jsx(TierPrice, { variant: "alpha", children: tier.price }),
-        /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
+        /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "var(--colors-neutral600, #6B7280)" }, children: tier.period })
       ] }),
       /* @__PURE__ */ jsx(TierDescription, { variant: "omega", children: tier.description }),
       /* @__PURE__ */ jsx(LimitsBox, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
@@ -328,7 +328,7 @@ const UpgradePage = () => {
             variant: "omega",
             style: {
               fontSize: "14px",
-              color: feature.included ? "#374151" : "#9CA3AF",
+              color: feature.included ? "var(--colors-neutral800, #374151)" : "var(--colors-neutral500, #9CA3AF)",
               textDecoration: feature.included ? "none" : "line-through"
             },
             children: feature.name

package/dist/_chunks/{UpgradePage-CYrqGUnv.js → UpgradePage-hQjPuiMV.js}

@@ -7,7 +7,7 @@ const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const index = require("./index-svfBWq9B.js");
+const index = require("./index-D1AjX5wc.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const Container = styled__default.default(designSystem.Box)`
@@ -56,7 +56,7 @@ const TierCard = styled__default.default(designSystem.Box)`
   background: ${(props) => props.theme.colors.neutral0};
   border-radius: 16px;
   padding: 32px;
-  border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : props.theme.colors.neutral200};
+  border: 2px solid ${(props) => props.$featured ? "rgba(14, 165, 233, 0.5)" : props.theme.colors.neutral200};
   position: relative;
   transition: all 0.3s ease;
   box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(14, 165, 233, 0.25), 0 8px 10px -6px rgba(14, 165, 233, 0.2)" : "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)"};
@@ -129,7 +129,7 @@ const FeatureIcon = styled__default.default(designSystem.Box)`
   margin-top: 2px;
   
   ${(props) => props.$included ? `
-    background: #DCFCE7;
+    background: rgba(34, 197, 94, 0.15);
     svg { color: #16A34A; }
   ` : `
     background: #FEE2E2;
@@ -309,7 +309,7 @@ const UpgradePage = () => {
       /* @__PURE__ */ jsxRuntime.jsx(TierName, { variant: "beta", children: tier.name }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "baseline", gap: 1, children: [
         /* @__PURE__ */ jsxRuntime.jsx(TierPrice, { variant: "alpha", children: tier.price }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "var(--colors-neutral600, #6B7280)" }, children: tier.period })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(TierDescription, { variant: "omega", children: tier.description }),
       /* @__PURE__ */ jsxRuntime.jsx(LimitsBox, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
@@ -332,7 +332,7 @@ const UpgradePage = () => {
             variant: "omega",
             style: {
               fontSize: "14px",
-              color: feature.included ? "#374151" : "#9CA3AF",
+              color: feature.included ? "var(--colors-neutral800, #374151)" : "var(--colors-neutral500, #9CA3AF)",
               textDecoration: feature.included ? "none" : "line-through"
             },
             children: feature.name