strapi-plugin-magic-mark 3.3.0 → 3.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,7 +7,67 @@ import { Flex, Loader, Box, Typography, SingleSelect, SingleSelectOption, Thead,
7
7
  import { Pin, Eye, Pencil, Trash, Cross, Key, User, Mail, Check } from "@strapi/icons";
8
8
  import { BookOpenIcon, UserIcon, SparklesIcon, LinkIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
9
9
  import { useFetchClient, useNotification } from "@strapi/strapi/admin";
10
- import { u as useLicenseInfo, p as pluginId, g as getIconById, C as CreateEditModal } from "./index-DF8ICn1F.mjs";
10
+ import { p as pluginId, g as getIconById, C as CreateEditModal } from "./index-DNoxLWi0.mjs";
11
+ const FEATURES = {
12
+ // Free tier features
13
+ basicBookmarks: { tier: "free", limit: 10 },
14
+ basicFilters: { tier: "free" },
15
+ // Premium tier features
16
+ extendedBookmarks: { tier: "premium", limit: 50 },
17
+ queryHistory: { tier: "premium" },
18
+ exportBookmarks: { tier: "premium" },
19
+ sharedBookmarks: { tier: "premium" },
20
+ // Advanced tier features
21
+ unlimitedBookmarks: { tier: "advanced", limit: -1 },
22
+ advancedFilters: { tier: "advanced" },
23
+ subGroups: { tier: "advanced" },
24
+ bulkOperations: { tier: "advanced" },
25
+ analytics: { tier: "advanced" },
26
+ customIntegrations: { tier: "advanced" }
27
+ };
28
+ const useLicenseInfo = () => {
29
+ const { get } = useFetchClient();
30
+ const [limits, setLimits] = useState(null);
31
+ const [isLoading, setIsLoading] = useState(true);
32
+ useEffect(() => {
33
+ const fetchLimits = async () => {
34
+ try {
35
+ console.log("[useLicenseInfo] Fetching license limits...");
36
+ const response = await get("/magic-mark/license/limits");
37
+ console.log("[useLicenseInfo] Raw API response:", response);
38
+ console.log("[useLicenseInfo] Response data:", response.data);
39
+ if (response.data?.success) {
40
+ console.log("[useLicenseInfo] Setting limits:", response.data.data);
41
+ setLimits(response.data.data);
42
+ } else {
43
+ console.warn("[useLicenseInfo] API returned success=false or missing data");
44
+ }
45
+ } catch (error) {
46
+ console.error("[useLicenseInfo] Error fetching license limits:", error);
47
+ } finally {
48
+ setIsLoading(false);
49
+ }
50
+ };
51
+ fetchLimits();
52
+ }, []);
53
+ const tier = limits?.tier || "free";
54
+ const isPremium = tier === "premium" || tier === "advanced";
55
+ const isAdvanced = tier === "advanced";
56
+ console.log("[useLicenseInfo] Computed values:", { tier, isPremium, isAdvanced, limits });
57
+ return {
58
+ isLoading,
59
+ limits,
60
+ tier,
61
+ isFree: tier === "free",
62
+ isPremium,
63
+ isAdvanced,
64
+ canUseFeature: (feature) => {
65
+ const featureConfig = FEATURES[feature];
66
+ const tierOrder = { free: 0, premium: 1, advanced: 2 };
67
+ return tierOrder[tier] >= tierOrder[featureConfig.tier];
68
+ }
69
+ };
70
+ };
11
71
  const theme = {
12
72
  colors: {
13
73
  primary: {
@@ -37,12 +97,8 @@ const theme = {
37
97
  },
38
98
  neutral: {
39
99
  0: "#FFFFFF",
40
- 50: "#F9FAFB",
41
100
  100: "#F3F4F6",
42
- 200: "#E5E7EB",
43
- 600: "#4B5563",
44
- 700: "#374151",
45
- 800: "#1F2937"
101
+ 600: "#4B5563"
46
102
  }
47
103
  },
48
104
  shadows: {
@@ -187,7 +243,7 @@ const StatsGrid = styled.div`
187
243
  }
188
244
  `;
189
245
  const StatCard = styled(Box)`
190
- background: ${theme.colors.neutral[0]};
246
+ background: ${(p) => p.theme.colors.neutral0};
191
247
  border-radius: ${theme.borderRadius.lg};
192
248
  padding: ${theme.spacing.lg};
193
249
  position: relative;
@@ -196,7 +252,7 @@ const StatCard = styled(Box)`
196
252
  animation: ${fadeIn$1} ${theme.transitions.slow} backwards;
197
253
  animation-delay: ${(props) => props.$delay || "0s"};
198
254
  box-shadow: ${theme.shadows.sm};
199
- border: 1px solid ${theme.colors.neutral[200]};
255
+ border: 1px solid rgba(128, 128, 128, 0.2);
200
256
  min-width: 200px;
201
257
  flex: 1;
202
258
  text-align: center;
@@ -248,34 +304,34 @@ const StatIcon = styled(Box)`
248
304
  const StatValue = styled(Typography)`
249
305
  font-size: 2.5rem;
250
306
  font-weight: 700;
251
- color: ${theme.colors.neutral[800]};
307
+ color: ${(p) => p.theme.colors.neutral800};
252
308
  line-height: 1;
253
309
  margin-bottom: ${theme.spacing.xs};
254
310
  transition: transform ${theme.transitions.normal};
255
311
  `;
256
312
  const StatLabel = styled(Typography)`
257
313
  font-size: 0.875rem;
258
- color: ${theme.colors.neutral[600]};
314
+ color: ${(p) => p.theme.colors.neutral600};
259
315
  font-weight: 500;
260
316
  letter-spacing: 0.025em;
261
317
  text-transform: capitalize;
262
318
  `;
263
319
  const DataTable = styled(Box)`
264
- background: ${theme.colors.neutral[0]};
320
+ background: ${(p) => p.theme.colors.neutral0};
265
321
  border-radius: ${theme.borderRadius.lg};
266
322
  overflow: hidden;
267
323
  box-shadow: ${theme.shadows.sm};
268
- border: 1px solid ${theme.colors.neutral[200]};
324
+ border: 1px solid rgba(128, 128, 128, 0.2);
269
325
  margin-bottom: ${theme.spacing.xl};
270
326
  `;
271
327
  const StyledTable = styled(Table)`
272
328
  thead {
273
- background: ${theme.colors.neutral[0]};
274
- border-bottom: 2px solid ${theme.colors.neutral[100]};
329
+ background: ${(p) => p.theme.colors.neutral0};
330
+ border-bottom: 2px solid rgba(128, 128, 128, 0.15);
275
331
 
276
332
  th {
277
333
  font-weight: 600;
278
- color: ${theme.colors.neutral[700]};
334
+ color: ${(p) => p.theme.colors.neutral700};
279
335
  font-size: 0.875rem;
280
336
  text-transform: uppercase;
281
337
  letter-spacing: 0.025em;
@@ -285,14 +341,14 @@ const StyledTable = styled(Table)`
285
341
 
286
342
  tbody tr {
287
343
  transition: all ${theme.transitions.fast};
288
- border-bottom: 1px solid ${theme.colors.neutral[100]};
344
+ border-bottom: 1px solid rgba(128, 128, 128, 0.1);
289
345
 
290
346
  &:last-child {
291
347
  border-bottom: none;
292
348
  }
293
349
 
294
350
  &:hover {
295
- background: ${theme.colors.neutral[50]};
351
+ background: ${(p) => p.theme.colors.neutral100};
296
352
 
297
353
  .action-buttons {
298
354
  opacity: 1;
@@ -301,7 +357,7 @@ const StyledTable = styled(Table)`
301
357
 
302
358
  td {
303
359
  padding: ${theme.spacing.lg} ${theme.spacing.lg};
304
- color: ${theme.colors.neutral[700]};
360
+ color: ${(p) => p.theme.colors.neutral700};
305
361
  vertical-align: middle;
306
362
  }
307
363
  }
@@ -349,12 +405,12 @@ const FloatingIcon = styled.div`
349
405
  }
350
406
  `;
351
407
  const FilterBar = styled(Flex)`
352
- background: ${theme.colors.neutral[0]};
408
+ background: ${(p) => p.theme.colors.neutral0};
353
409
  padding: ${theme.spacing.md} ${theme.spacing.lg};
354
410
  border-radius: ${theme.borderRadius.lg};
355
411
  margin-bottom: ${theme.spacing.lg};
356
412
  box-shadow: ${theme.shadows.sm};
357
- border: 1px solid ${theme.colors.neutral[200]};
413
+ border: 1px solid rgba(128, 128, 128, 0.2);
358
414
  gap: ${theme.spacing.md};
359
415
  align-items: center;
360
416
  `;
@@ -372,18 +428,18 @@ const SearchIconStyled = styled(MagnifyingGlassIcon)`
372
428
  left: 12px;
373
429
  width: 16px;
374
430
  height: 16px;
375
- color: ${theme.colors.neutral[600]};
431
+ color: ${(p) => p.theme.colors.neutral600};
376
432
  pointer-events: none;
377
433
  `;
378
434
  const StyledSearchInput = styled.input`
379
435
  width: 100%;
380
436
  padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} 36px;
381
- border: 1px solid ${theme.colors.neutral[200]};
437
+ border: 1px solid rgba(128, 128, 128, 0.2);
382
438
  border-radius: ${theme.borderRadius.md};
383
439
  font-size: 0.875rem;
384
440
  transition: all ${theme.transitions.fast};
385
- background: ${theme.colors.neutral[0]};
386
- color: ${theme.colors.neutral[800]};
441
+ background: ${(p) => p.theme.colors.neutral0};
442
+ color: ${(p) => p.theme.colors.neutral800};
387
443
 
388
444
  &:focus {
389
445
  outline: none;
@@ -392,7 +448,7 @@ const StyledSearchInput = styled.input`
392
448
  }
393
449
 
394
450
  &::placeholder {
395
- color: ${theme.colors.neutral[600]};
451
+ color: ${(p) => p.theme.colors.neutral600};
396
452
  }
397
453
  `;
398
454
  const HomePageModern = () => {
@@ -640,7 +696,7 @@ const HomePageModern = () => {
640
696
  }) })
641
697
  ] }) }),
642
698
  !loading && bookmarks.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
643
- /* @__PURE__ */ jsx(Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", style: { marginBottom: theme.spacing.md, color: theme.colors.neutral[700] }, children: formatMessage({ id: `${pluginId}.allBookmarks.title`, defaultMessage: "🔖 All Available Bookmarks" }) }) }),
699
+ /* @__PURE__ */ jsx(Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", style: { marginBottom: theme.spacing.md, color: "var(--colors-neutral700, #374151)" }, children: formatMessage({ id: `${pluginId}.allBookmarks.title`, defaultMessage: "🔖 All Available Bookmarks" }) }) }),
644
700
  /* @__PURE__ */ jsxs(FilterBar, { children: [
645
701
  /* @__PURE__ */ jsxs(SearchInputWrapper, { style: { flex: 1 }, children: [
646
702
  /* @__PURE__ */ jsx(SearchIconStyled, {}),
@@ -710,7 +766,7 @@ const HomePageModern = () => {
710
766
  isCurrentUserOwner(bookmark) ? /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.primary[600], fontWeight: 500 }, children: [
711
767
  "• ",
712
768
  formatMessage({ id: `${pluginId}.bookmark.myBookmark`, defaultMessage: "My Bookmark" })
713
- ] }) : /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.neutral[600] }, children: [
769
+ ] }) : /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: "var(--colors-neutral600, #4B5563)" }, children: [
714
770
  "• ",
715
771
  formatMessage({ id: `${pluginId}.bookmark.sharedBy`, defaultMessage: "Shared by {name}" }, { name: bookmark.createdBy?.firstname || formatMessage({ id: `${pluginId}.bookmark.unknown`, defaultMessage: "Unknown" }) })
716
772
  ] }),
@@ -804,9 +860,9 @@ const HomePageModern = () => {
804
860
  Box,
805
861
  {
806
862
  style: {
807
- background: theme.colors.neutral[0],
863
+ background: "transparent",
808
864
  borderRadius: theme.borderRadius.xl,
809
- border: `2px dashed ${theme.colors.neutral[200]}`,
865
+ border: "2px dashed rgba(128, 128, 128, 0.2)",
810
866
  padding: theme.spacing["3xl"],
811
867
  textAlign: "center",
812
868
  position: "relative",
@@ -858,7 +914,7 @@ const HomePageModern = () => {
858
914
  style: {
859
915
  fontSize: "1.75rem",
860
916
  fontWeight: "700",
861
- color: theme.colors.neutral[800],
917
+ color: "var(--colors-neutral800, #1F2937)",
862
918
  marginBottom: "8px"
863
919
  },
864
920
  children: formatMessage({ id: `${pluginId}.empty.title`, defaultMessage: "No bookmarks yet" })
@@ -924,7 +980,7 @@ const ModalOverlay = styled.div`
924
980
  padding: 20px;
925
981
  `;
926
982
  const ModalContent = styled(Box)`
927
- background: white;
983
+ background: ${(p) => p.theme.colors.neutral0};
928
984
  border-radius: 16px;
929
985
  width: 100%;
930
986
  max-width: 580px;
@@ -1250,7 +1306,7 @@ const LicenseGuard = ({ children }) => {
1250
1306
  padding: 4,
1251
1307
  style: {
1252
1308
  borderRadius: "8px",
1253
- border: "2px solid #BAE6FD",
1309
+ border: "2px solid rgba(14, 165, 233, 0.3)",
1254
1310
  width: "100%"
1255
1311
  },
1256
1312
  children: /* @__PURE__ */ jsx(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." })
@@ -1314,7 +1370,7 @@ const LicenseGuard = ({ children }) => {
1314
1370
  padding: 5,
1315
1371
  style: {
1316
1372
  borderRadius: "8px",
1317
- border: "2px solid #DCFCE7",
1373
+ border: "2px solid rgba(34, 197, 94, 0.15)",
1318
1374
  textAlign: "center"
1319
1375
  },
1320
1376
  children: [
@@ -9,9 +9,69 @@ const designSystem = require("@strapi/design-system");
9
9
  const icons = require("@strapi/icons");
10
10
  const outline = require("@heroicons/react/24/outline");
11
11
  const admin = require("@strapi/strapi/admin");
12
- const index = require("./index-BKaROSTg.js");
12
+ const index = require("./index-DCsuhvUc.js");
13
13
  const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
14
14
  const styled__default = /* @__PURE__ */ _interopDefault(styled);
15
+ const FEATURES = {
16
+ // Free tier features
17
+ basicBookmarks: { tier: "free", limit: 10 },
18
+ basicFilters: { tier: "free" },
19
+ // Premium tier features
20
+ extendedBookmarks: { tier: "premium", limit: 50 },
21
+ queryHistory: { tier: "premium" },
22
+ exportBookmarks: { tier: "premium" },
23
+ sharedBookmarks: { tier: "premium" },
24
+ // Advanced tier features
25
+ unlimitedBookmarks: { tier: "advanced", limit: -1 },
26
+ advancedFilters: { tier: "advanced" },
27
+ subGroups: { tier: "advanced" },
28
+ bulkOperations: { tier: "advanced" },
29
+ analytics: { tier: "advanced" },
30
+ customIntegrations: { tier: "advanced" }
31
+ };
32
+ const useLicenseInfo = () => {
33
+ const { get } = admin.useFetchClient();
34
+ const [limits, setLimits] = React.useState(null);
35
+ const [isLoading, setIsLoading] = React.useState(true);
36
+ React.useEffect(() => {
37
+ const fetchLimits = async () => {
38
+ try {
39
+ console.log("[useLicenseInfo] Fetching license limits...");
40
+ const response = await get("/magic-mark/license/limits");
41
+ console.log("[useLicenseInfo] Raw API response:", response);
42
+ console.log("[useLicenseInfo] Response data:", response.data);
43
+ if (response.data?.success) {
44
+ console.log("[useLicenseInfo] Setting limits:", response.data.data);
45
+ setLimits(response.data.data);
46
+ } else {
47
+ console.warn("[useLicenseInfo] API returned success=false or missing data");
48
+ }
49
+ } catch (error) {
50
+ console.error("[useLicenseInfo] Error fetching license limits:", error);
51
+ } finally {
52
+ setIsLoading(false);
53
+ }
54
+ };
55
+ fetchLimits();
56
+ }, []);
57
+ const tier = limits?.tier || "free";
58
+ const isPremium = tier === "premium" || tier === "advanced";
59
+ const isAdvanced = tier === "advanced";
60
+ console.log("[useLicenseInfo] Computed values:", { tier, isPremium, isAdvanced, limits });
61
+ return {
62
+ isLoading,
63
+ limits,
64
+ tier,
65
+ isFree: tier === "free",
66
+ isPremium,
67
+ isAdvanced,
68
+ canUseFeature: (feature) => {
69
+ const featureConfig = FEATURES[feature];
70
+ const tierOrder = { free: 0, premium: 1, advanced: 2 };
71
+ return tierOrder[tier] >= tierOrder[featureConfig.tier];
72
+ }
73
+ };
74
+ };
15
75
  const theme = {
16
76
  colors: {
17
77
  primary: {
@@ -41,12 +101,8 @@ const theme = {
41
101
  },
42
102
  neutral: {
43
103
  0: "#FFFFFF",
44
- 50: "#F9FAFB",
45
104
  100: "#F3F4F6",
46
- 200: "#E5E7EB",
47
- 600: "#4B5563",
48
- 700: "#374151",
49
- 800: "#1F2937"
105
+ 600: "#4B5563"
50
106
  }
51
107
  },
52
108
  shadows: {
@@ -191,7 +247,7 @@ const StatsGrid = styled__default.default.div`
191
247
  }
192
248
  `;
193
249
  const StatCard = styled__default.default(designSystem.Box)`
194
- background: ${theme.colors.neutral[0]};
250
+ background: ${(p) => p.theme.colors.neutral0};
195
251
  border-radius: ${theme.borderRadius.lg};
196
252
  padding: ${theme.spacing.lg};
197
253
  position: relative;
@@ -200,7 +256,7 @@ const StatCard = styled__default.default(designSystem.Box)`
200
256
  animation: ${fadeIn$1} ${theme.transitions.slow} backwards;
201
257
  animation-delay: ${(props) => props.$delay || "0s"};
202
258
  box-shadow: ${theme.shadows.sm};
203
- border: 1px solid ${theme.colors.neutral[200]};
259
+ border: 1px solid rgba(128, 128, 128, 0.2);
204
260
  min-width: 200px;
205
261
  flex: 1;
206
262
  text-align: center;
@@ -252,34 +308,34 @@ const StatIcon = styled__default.default(designSystem.Box)`
252
308
  const StatValue = styled__default.default(designSystem.Typography)`
253
309
  font-size: 2.5rem;
254
310
  font-weight: 700;
255
- color: ${theme.colors.neutral[800]};
311
+ color: ${(p) => p.theme.colors.neutral800};
256
312
  line-height: 1;
257
313
  margin-bottom: ${theme.spacing.xs};
258
314
  transition: transform ${theme.transitions.normal};
259
315
  `;
260
316
  const StatLabel = styled__default.default(designSystem.Typography)`
261
317
  font-size: 0.875rem;
262
- color: ${theme.colors.neutral[600]};
318
+ color: ${(p) => p.theme.colors.neutral600};
263
319
  font-weight: 500;
264
320
  letter-spacing: 0.025em;
265
321
  text-transform: capitalize;
266
322
  `;
267
323
  const DataTable = styled__default.default(designSystem.Box)`
268
- background: ${theme.colors.neutral[0]};
324
+ background: ${(p) => p.theme.colors.neutral0};
269
325
  border-radius: ${theme.borderRadius.lg};
270
326
  overflow: hidden;
271
327
  box-shadow: ${theme.shadows.sm};
272
- border: 1px solid ${theme.colors.neutral[200]};
328
+ border: 1px solid rgba(128, 128, 128, 0.2);
273
329
  margin-bottom: ${theme.spacing.xl};
274
330
  `;
275
331
  const StyledTable = styled__default.default(designSystem.Table)`
276
332
  thead {
277
- background: ${theme.colors.neutral[0]};
278
- border-bottom: 2px solid ${theme.colors.neutral[100]};
333
+ background: ${(p) => p.theme.colors.neutral0};
334
+ border-bottom: 2px solid rgba(128, 128, 128, 0.15);
279
335
 
280
336
  th {
281
337
  font-weight: 600;
282
- color: ${theme.colors.neutral[700]};
338
+ color: ${(p) => p.theme.colors.neutral700};
283
339
  font-size: 0.875rem;
284
340
  text-transform: uppercase;
285
341
  letter-spacing: 0.025em;
@@ -289,14 +345,14 @@ const StyledTable = styled__default.default(designSystem.Table)`
289
345
 
290
346
  tbody tr {
291
347
  transition: all ${theme.transitions.fast};
292
- border-bottom: 1px solid ${theme.colors.neutral[100]};
348
+ border-bottom: 1px solid rgba(128, 128, 128, 0.1);
293
349
 
294
350
  &:last-child {
295
351
  border-bottom: none;
296
352
  }
297
353
 
298
354
  &:hover {
299
- background: ${theme.colors.neutral[50]};
355
+ background: ${(p) => p.theme.colors.neutral100};
300
356
 
301
357
  .action-buttons {
302
358
  opacity: 1;
@@ -305,7 +361,7 @@ const StyledTable = styled__default.default(designSystem.Table)`
305
361
 
306
362
  td {
307
363
  padding: ${theme.spacing.lg} ${theme.spacing.lg};
308
- color: ${theme.colors.neutral[700]};
364
+ color: ${(p) => p.theme.colors.neutral700};
309
365
  vertical-align: middle;
310
366
  }
311
367
  }
@@ -353,12 +409,12 @@ const FloatingIcon = styled__default.default.div`
353
409
  }
354
410
  `;
355
411
  const FilterBar = styled__default.default(designSystem.Flex)`
356
- background: ${theme.colors.neutral[0]};
412
+ background: ${(p) => p.theme.colors.neutral0};
357
413
  padding: ${theme.spacing.md} ${theme.spacing.lg};
358
414
  border-radius: ${theme.borderRadius.lg};
359
415
  margin-bottom: ${theme.spacing.lg};
360
416
  box-shadow: ${theme.shadows.sm};
361
- border: 1px solid ${theme.colors.neutral[200]};
417
+ border: 1px solid rgba(128, 128, 128, 0.2);
362
418
  gap: ${theme.spacing.md};
363
419
  align-items: center;
364
420
  `;
@@ -376,18 +432,18 @@ const SearchIconStyled = styled__default.default(outline.MagnifyingGlassIcon)`
376
432
  left: 12px;
377
433
  width: 16px;
378
434
  height: 16px;
379
- color: ${theme.colors.neutral[600]};
435
+ color: ${(p) => p.theme.colors.neutral600};
380
436
  pointer-events: none;
381
437
  `;
382
438
  const StyledSearchInput = styled__default.default.input`
383
439
  width: 100%;
384
440
  padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} 36px;
385
- border: 1px solid ${theme.colors.neutral[200]};
441
+ border: 1px solid rgba(128, 128, 128, 0.2);
386
442
  border-radius: ${theme.borderRadius.md};
387
443
  font-size: 0.875rem;
388
444
  transition: all ${theme.transitions.fast};
389
- background: ${theme.colors.neutral[0]};
390
- color: ${theme.colors.neutral[800]};
445
+ background: ${(p) => p.theme.colors.neutral0};
446
+ color: ${(p) => p.theme.colors.neutral800};
391
447
 
392
448
  &:focus {
393
449
  outline: none;
@@ -396,14 +452,14 @@ const StyledSearchInput = styled__default.default.input`
396
452
  }
397
453
 
398
454
  &::placeholder {
399
- color: ${theme.colors.neutral[600]};
455
+ color: ${(p) => p.theme.colors.neutral600};
400
456
  }
401
457
  `;
402
458
  const HomePageModern = () => {
403
459
  const { formatMessage } = reactIntl.useIntl();
404
460
  const navigate = reactRouterDom.useNavigate();
405
461
  const { get, post, del } = admin.useFetchClient();
406
- index.useLicenseInfo();
462
+ useLicenseInfo();
407
463
  const [currentUser, setCurrentUser] = React.useState(null);
408
464
  const [bookmarks, setBookmarks] = React.useState([]);
409
465
  const [loading, setLoading] = React.useState(false);
@@ -644,7 +700,7 @@ const HomePageModern = () => {
644
700
  }) })
645
701
  ] }) }),
646
702
  !loading && bookmarks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
647
- /* @__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" }) }) }),
703
+ /* @__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" }) }) }),
648
704
  /* @__PURE__ */ jsxRuntime.jsxs(FilterBar, { children: [
649
705
  /* @__PURE__ */ jsxRuntime.jsxs(SearchInputWrapper, { style: { flex: 1 }, children: [
650
706
  /* @__PURE__ */ jsxRuntime.jsx(SearchIconStyled, {}),
@@ -714,7 +770,7 @@ const HomePageModern = () => {
714
770
  isCurrentUserOwner(bookmark) ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.primary[600], fontWeight: 500 }, children: [
715
771
  "• ",
716
772
  formatMessage({ id: `${index.pluginId}.bookmark.myBookmark`, defaultMessage: "My Bookmark" })
717
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.neutral[600] }, children: [
773
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "0.75rem", color: "var(--colors-neutral600, #4B5563)" }, children: [
718
774
  "• ",
719
775
  formatMessage({ id: `${index.pluginId}.bookmark.sharedBy`, defaultMessage: "Shared by {name}" }, { name: bookmark.createdBy?.firstname || formatMessage({ id: `${index.pluginId}.bookmark.unknown`, defaultMessage: "Unknown" }) })
720
776
  ] }),
@@ -808,9 +864,9 @@ const HomePageModern = () => {
808
864
  designSystem.Box,
809
865
  {
810
866
  style: {
811
- background: theme.colors.neutral[0],
867
+ background: "transparent",
812
868
  borderRadius: theme.borderRadius.xl,
813
- border: `2px dashed ${theme.colors.neutral[200]}`,
869
+ border: "2px dashed rgba(128, 128, 128, 0.2)",
814
870
  padding: theme.spacing["3xl"],
815
871
  textAlign: "center",
816
872
  position: "relative",
@@ -862,7 +918,7 @@ const HomePageModern = () => {
862
918
  style: {
863
919
  fontSize: "1.75rem",
864
920
  fontWeight: "700",
865
- color: theme.colors.neutral[800],
921
+ color: "var(--colors-neutral800, #1F2937)",
866
922
  marginBottom: "8px"
867
923
  },
868
924
  children: formatMessage({ id: `${index.pluginId}.empty.title`, defaultMessage: "No bookmarks yet" })
@@ -928,7 +984,7 @@ const ModalOverlay = styled__default.default.div`
928
984
  padding: 20px;
929
985
  `;
930
986
  const ModalContent = styled__default.default(designSystem.Box)`
931
- background: white;
987
+ background: ${(p) => p.theme.colors.neutral0};
932
988
  border-radius: 16px;
933
989
  width: 100%;
934
990
  max-width: 580px;
@@ -1254,7 +1310,7 @@ const LicenseGuard = ({ children }) => {
1254
1310
  padding: 4,
1255
1311
  style: {
1256
1312
  borderRadius: "8px",
1257
- border: "2px solid #BAE6FD",
1313
+ border: "2px solid rgba(14, 165, 233, 0.3)",
1258
1314
  width: "100%"
1259
1315
  },
1260
1316
  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." })
@@ -1318,7 +1374,7 @@ const LicenseGuard = ({ children }) => {
1318
1374
  padding: 5,
1319
1375
  style: {
1320
1376
  borderRadius: "8px",
1321
- border: "2px solid #DCFCE7",
1377
+ border: "2px solid rgba(34, 197, 94, 0.15)",
1322
1378
  textAlign: "center"
1323
1379
  },
1324
1380
  children: [
@@ -5,7 +5,7 @@ import { useFetchClient, useNotification } from "@strapi/strapi/admin";
5
5
  import styled from "styled-components";
6
6
  import { Flex, Typography, Box, Badge, Button } from "@strapi/design-system";
7
7
  import { Check, Cross, Sparkle, Lightning, Rocket } from "@strapi/icons";
8
- import { p as pluginId } from "./index-DF8ICn1F.mjs";
8
+ import { p as pluginId } from "./index-DNoxLWi0.mjs";
9
9
  const Container = styled(Box)`
10
10
  padding: 32px;
11
11
  max-width: 1400px;
@@ -52,7 +52,7 @@ const TierCard = styled(Box)`
52
52
  background: ${(props) => props.theme.colors.neutral0};
53
53
  border-radius: 16px;
54
54
  padding: 32px;
55
- border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : props.theme.colors.neutral200};
55
+ border: 2px solid ${(props) => props.$featured ? "rgba(14, 165, 233, 0.5)" : props.theme.colors.neutral200};
56
56
  position: relative;
57
57
  transition: all 0.3s ease;
58
58
  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,10 +125,10 @@ const FeatureIcon = styled(Box)`
125
125
  margin-top: 2px;
126
126
 
127
127
  ${(props) => props.$included ? `
128
- background: #DCFCE7;
128
+ background: rgba(34, 197, 94, 0.15);
129
129
  svg { color: #16A34A; }
130
130
  ` : `
131
- background: #FEE2E2;
131
+ background: rgba(239, 68, 68, 0.12);
132
132
  svg { color: #DC2626; }
133
133
  `}
134
134
  `;
@@ -305,7 +305,7 @@ const UpgradePage = () => {
305
305
  /* @__PURE__ */ jsx(TierName, { variant: "beta", children: tier.name }),
306
306
  /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 1, children: [
307
307
  /* @__PURE__ */ jsx(TierPrice, { variant: "alpha", children: tier.price }),
308
- /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
308
+ /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "var(--colors-neutral600, #6B7280)" }, children: tier.period })
309
309
  ] }),
310
310
  /* @__PURE__ */ jsx(TierDescription, { variant: "omega", children: tier.description }),
311
311
  /* @__PURE__ */ jsx(LimitsBox, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
@@ -328,7 +328,7 @@ const UpgradePage = () => {
328
328
  variant: "omega",
329
329
  style: {
330
330
  fontSize: "14px",
331
- color: feature.included ? "#374151" : "#9CA3AF",
331
+ color: feature.included ? "var(--colors-neutral800, #374151)" : "var(--colors-neutral500, #9CA3AF)",
332
332
  textDecoration: feature.included ? "none" : "line-through"
333
333
  },
334
334
  children: feature.name
@@ -7,7 +7,7 @@ const admin = require("@strapi/strapi/admin");
7
7
  const styled = require("styled-components");
8
8
  const designSystem = require("@strapi/design-system");
9
9
  const icons = require("@strapi/icons");
10
- const index = require("./index-BKaROSTg.js");
10
+ const index = require("./index-DCsuhvUc.js");
11
11
  const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
12
12
  const styled__default = /* @__PURE__ */ _interopDefault(styled);
13
13
  const Container = styled__default.default(designSystem.Box)`
@@ -56,7 +56,7 @@ const TierCard = styled__default.default(designSystem.Box)`
56
56
  background: ${(props) => props.theme.colors.neutral0};
57
57
  border-radius: 16px;
58
58
  padding: 32px;
59
- border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : props.theme.colors.neutral200};
59
+ border: 2px solid ${(props) => props.$featured ? "rgba(14, 165, 233, 0.5)" : props.theme.colors.neutral200};
60
60
  position: relative;
61
61
  transition: all 0.3s ease;
62
62
  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,10 +129,10 @@ const FeatureIcon = styled__default.default(designSystem.Box)`
129
129
  margin-top: 2px;
130
130
 
131
131
  ${(props) => props.$included ? `
132
- background: #DCFCE7;
132
+ background: rgba(34, 197, 94, 0.15);
133
133
  svg { color: #16A34A; }
134
134
  ` : `
135
- background: #FEE2E2;
135
+ background: rgba(239, 68, 68, 0.12);
136
136
  svg { color: #DC2626; }
137
137
  `}
138
138
  `;
@@ -309,7 +309,7 @@ const UpgradePage = () => {
309
309
  /* @__PURE__ */ jsxRuntime.jsx(TierName, { variant: "beta", children: tier.name }),
310
310
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "baseline", gap: 1, children: [
311
311
  /* @__PURE__ */ jsxRuntime.jsx(TierPrice, { variant: "alpha", children: tier.price }),
312
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
312
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "var(--colors-neutral600, #6B7280)" }, children: tier.period })
313
313
  ] }),
314
314
  /* @__PURE__ */ jsxRuntime.jsx(TierDescription, { variant: "omega", children: tier.description }),
315
315
  /* @__PURE__ */ jsxRuntime.jsx(LimitsBox, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
@@ -332,7 +332,7 @@ const UpgradePage = () => {
332
332
  variant: "omega",
333
333
  style: {
334
334
  fontSize: "14px",
335
- color: feature.included ? "#374151" : "#9CA3AF",
335
+ color: feature.included ? "var(--colors-neutral800, #374151)" : "var(--colors-neutral500, #9CA3AF)",
336
336
  textDecoration: feature.included ? "none" : "line-through"
337
337
  },
338
338
  children: feature.name