strapi-plugin-magic-link-v5 5.3.16 → 5.3.18

package/dist/_chunks/{LicenseGuard-B_r3b1Vh.mjs → LicenseGuard-5sMwgS6j.mjs}

@@ -82,7 +82,7 @@ const ModalOverlay = styled.div`
   padding: 20px;
 `;
 const ModalContent = styled(Box)`
-  background: white;
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: 16px;
   width: 100%;
   max-width: 580px;
@@ -91,7 +91,7 @@ const ModalContent = styled(Box)`
   overflow: hidden;
 `;
 const GradientHeader = styled(Box)`
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #4945ff 0%, #7c3aed 100%);
   padding: 32px 40px;
   position: relative;
   overflow: hidden;
@@ -158,7 +158,7 @@ const CloseButton = styled.button`
 const ToggleButton = styled.button`
   background: none;
   border: none;
-  color: #667eea;
+  color: #4945ff;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
@@ -167,9 +167,44 @@ const ToggleButton = styled.button`
   transition: color 0.2s;
   
   &:hover {
-    color: #764ba2;
+    color: #7c3aed;
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+const GradientButton = styled(Button)`
+  && {
+    background: linear-gradient(135deg, #4945ff 0%, #7c3aed 100%);
+    color: white;
+    font-weight: 600;
+    border: none;
+    box-shadow: 0 4px 12px rgba(73, 69, 255, 0.4);
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
+      box-shadow: 0 6px 16px rgba(73, 69, 255, 0.5);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
   }
 `;
+styled(Box)`
+  background: rgba(73, 69, 255, 0.06);
+  border: 2px solid rgba(73, 69, 255, 0.3);
+  border-radius: 8px;
+  padding: 16px;
+`;
+styled(Typography)`
+  font-size: 13px;
+  line-height: 1.6;
+  color: ${(p) => p.theme.colors.neutral800};
+`;
 const LicenseGuard = ({ children }) => {
   const { get, post } = useFetchClient();
   const { toggleNotification } = useNotification();
@@ -573,40 +608,26 @@ const LicenseGuard = ({ children }) => {
             /* @__PURE__ */ jsx(Flex, { gap: 3, justifyContent: "center", style: { marginTop: "16px" }, children: useExistingKey ? (
               // Validate Button
               /* @__PURE__ */ jsx(
-                Button,
+                GradientButton,
                 {
                   type: "submit",
                   size: "L",
                   startIcon: /* @__PURE__ */ jsx(Check, {}),
                   loading: isCreating,
                   disabled: isCreating || !existingLicenseKey.trim() || !existingEmail.trim(),
-                  style: {
-                    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-                    color: "white",
-                    fontWeight: "600",
-                    border: "none",
-                    boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)"
-                  },
                   children: "Validate License"
                 }
               )
             ) : (
               // Create/Auto-Create License Button
               /* @__PURE__ */ jsx(
-                Button,
+                GradientButton,
                 {
                   type: "submit",
                   size: "L",
                   startIcon: /* @__PURE__ */ jsx(Check, {}),
                   loading: isCreating,
                   disabled: isCreating || !useAutoCreate && (!formData.email || !formData.firstName || !formData.lastName),
-                  style: {
-                    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-                    color: "white",
-                    fontWeight: "600",
-                    border: "none",
-                    boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)"
-                  },
                   children: useAutoCreate ? "Activate License" : "Create License"
                 }
               )

package/dist/_chunks/{LicenseGuard-BEEd9IpN.js → LicenseGuard-DqyOwTlf.js}

@@ -85,7 +85,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;
@@ -94,7 +94,7 @@ const ModalContent = styled__default.default(designSystem.Box)`
   overflow: hidden;
 `;
 const GradientHeader = styled__default.default(designSystem.Box)`
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #4945ff 0%, #7c3aed 100%);
   padding: 32px 40px;
   position: relative;
   overflow: hidden;
@@ -161,7 +161,7 @@ const CloseButton = styled__default.default.button`
 const ToggleButton = styled__default.default.button`
   background: none;
   border: none;
-  color: #667eea;
+  color: #4945ff;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
@@ -170,9 +170,44 @@ const ToggleButton = styled__default.default.button`
   transition: color 0.2s;
   
   &:hover {
-    color: #764ba2;
+    color: #7c3aed;
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+const GradientButton = styled__default.default(designSystem.Button)`
+  && {
+    background: linear-gradient(135deg, #4945ff 0%, #7c3aed 100%);
+    color: white;
+    font-weight: 600;
+    border: none;
+    box-shadow: 0 4px 12px rgba(73, 69, 255, 0.4);
+    
+    &:hover:not(:disabled) {
+      background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
+      box-shadow: 0 6px 16px rgba(73, 69, 255, 0.5);
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
   }
 `;
+styled__default.default(designSystem.Box)`
+  background: rgba(73, 69, 255, 0.06);
+  border: 2px solid rgba(73, 69, 255, 0.3);
+  border-radius: 8px;
+  padding: 16px;
+`;
+styled__default.default(designSystem.Typography)`
+  font-size: 13px;
+  line-height: 1.6;
+  color: ${(p) => p.theme.colors.neutral800};
+`;
 const LicenseGuard = ({ children }) => {
   const { get, post } = admin.useFetchClient();
   const { toggleNotification } = admin.useNotification();
@@ -576,40 +611,26 @@ const LicenseGuard = ({ children }) => {
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 3, justifyContent: "center", style: { marginTop: "16px" }, children: useExistingKey ? (
               // Validate Button
               /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
+                GradientButton,
                 {
                   type: "submit",
                   size: "L",
                   startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
                   loading: isCreating,
                   disabled: isCreating || !existingLicenseKey.trim() || !existingEmail.trim(),
-                  style: {
-                    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-                    color: "white",
-                    fontWeight: "600",
-                    border: "none",
-                    boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)"
-                  },
                   children: "Validate License"
                 }
               )
             ) : (
               // Create/Auto-Create License Button
               /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Button,
+                GradientButton,
                 {
                   type: "submit",
                   size: "L",
                   startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
                   loading: isCreating,
                   disabled: isCreating || !useAutoCreate && (!formData.email || !formData.firstName || !formData.lastName),
-                  style: {
-                    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-                    color: "white",
-                    fontWeight: "600",
-                    border: "none",
-                    boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)"
-                  },
                   children: useAutoCreate ? "Activate License" : "Create License"
                 }
               )

package/dist/_chunks/{LicensePage-zvD9SEpq.js → LicensePage-2M-vOJX8.js}

@@ -25,14 +25,14 @@ const Title = styled__default.default(designSystem.Typography)`
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 8px;
-  background: linear-gradient(135deg, #0EA5E9, #A855F7);
+  background: linear-gradient(135deg, #4945ff, #7c3aed);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   display: block;
 `;
 const Subtitle = styled__default.default(designSystem.Typography)`
   font-size: 1.125rem;
-  color: #6B7280;
+  color: ${(p) => p.theme.colors.neutral600};
   line-height: 1.6;
   display: block;
 `;
@@ -49,24 +49,24 @@ const TierWrapper = styled__default.default(designSystem.Box)`
   max-width: 340px;
 `;
 const TierCard = styled__default.default(designSystem.Box)`
-  background: white;
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: 16px;
   padding: 32px;
-  border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : "#E5E7EB"};
+  border: 2px solid ${(props) => props.$featured ? "#4945ff" : 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)"};
+  box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(73, 69, 255, 0.25), 0 8px 10px -6px rgba(73, 69, 255, 0.2)" : "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05)"};
 
   &:hover {
     transform: translateY(-4px);
-    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
   }
 `;
 const PopularBadge = styled__default.default(designSystem.Badge)`
   position: absolute;
   top: -12px;
   right: 24px;
-  background: linear-gradient(135deg, #0EA5E9, #0284C7);
+  background: linear-gradient(135deg, #4945ff, #4338ca);
   color: white;
   padding: 4px 16px;
   font-size: 12px;
@@ -92,16 +92,36 @@ const TierName = styled__default.default(designSystem.Typography)`
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 8px;
+  color: ${(p) => p.theme.colors.neutral800};
 `;
 const TierPrice = styled__default.default(designSystem.Typography)`
   font-size: 2rem;
   font-weight: 800;
   margin-bottom: 4px;
+  color: ${(p) => p.theme.colors.neutral800};
 `;
 const TierDescription = styled__default.default(designSystem.Typography)`
-  color: #6B7280;
+  color: ${(p) => p.theme.colors.neutral600};
   margin-bottom: 24px;
 `;
+const LimitsBox = styled__default.default(designSystem.Box)`
+  background: ${(p) => p.theme.colors.neutral100};
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 20px;
+`;
+const LimitText = styled__default.default(designSystem.Typography)`
+  font-size: 13px;
+  color: ${(p) => p.theme.colors.neutral800};
+`;
+const PeriodText = styled__default.default(designSystem.Typography)`
+  color: ${(p) => p.theme.colors.neutral600};
+`;
+const FeatureText = styled__default.default(designSystem.Typography)`
+  font-size: 14px;
+  color: ${(p) => p.$included ? p.theme.colors.neutral800 : p.theme.colors.neutral500};
+  text-decoration: ${(p) => p.$included ? "none" : "line-through"};
+`;
 const FeatureList = styled__default.default(designSystem.Box)`
   margin-bottom: 24px;
 `;
@@ -121,10 +141,10 @@ 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;
+    background: rgba(220, 38, 38, 0.12);
     svg { color: #DC2626; }
   `}
 `;
@@ -148,8 +168,8 @@ const CurrentPlanBadge = styled__default.default(designSystem.Badge)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #F3F4F6;
-  color: #6B7280;
+  background: ${(p) => p.theme.colors.neutral100};
+  color: ${(p) => p.theme.colors.neutral600};
   font-weight: 600;
   font-size: 15px;
 `;
@@ -319,26 +339,21 @@ const LicensePage = () => {
       /* @__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(PeriodText, { variant: "omega", children: tier.period })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(TierDescription, { variant: "omega", children: tier.description }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: {
-        background: "#F9FAFB",
-        borderRadius: "8px",
-        padding: "12px",
-        marginBottom: "20px"
-      }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LimitsBox, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(LimitText, { variant: "pi", children: [
           /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Authentication:" }),
           " ",
           tier.limits.authentication
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(LimitText, { variant: "pi", children: [
           /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "MFA:" }),
           " ",
           tier.limits.mfa
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(LimitText, { variant: "pi", children: [
           /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Support:" }),
           " ",
           tier.limits.support
@@ -346,18 +361,7 @@ const LicensePage = () => {
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(FeatureList, { children: tier.features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(Feature, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(FeatureIcon, { $included: feature.included, children: feature.included ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, { style: { width: 14, height: 14 } }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Typography,
-          {
-            variant: "omega",
-            style: {
-              fontSize: "14px",
-              color: feature.included ? "#374151" : "#9CA3AF",
-              textDecoration: feature.included ? "none" : "line-through"
-            },
-            children: feature.name
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(FeatureText, { variant: "omega", $included: feature.included, children: feature.name })
       ] }, index)) }),
       currentTier === tier.id ? /* @__PURE__ */ jsxRuntime.jsx(CurrentPlanBadge, { children: "Current Plan" }) : /* @__PURE__ */ jsxRuntime.jsx(
         UpgradeButton,

package/dist/_chunks/{LicensePage-DxTqY1Qq.mjs → LicensePage-CCNW2hT6.mjs}

@@ -21,14 +21,14 @@ const Title = styled(Typography)`
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 8px;
-  background: linear-gradient(135deg, #0EA5E9, #A855F7);
+  background: linear-gradient(135deg, #4945ff, #7c3aed);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   display: block;
 `;
 const Subtitle = styled(Typography)`
   font-size: 1.125rem;
-  color: #6B7280;
+  color: ${(p) => p.theme.colors.neutral600};
   line-height: 1.6;
   display: block;
 `;
@@ -45,24 +45,24 @@ const TierWrapper = styled(Box)`
   max-width: 340px;
 `;
 const TierCard = styled(Box)`
-  background: white;
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: 16px;
   padding: 32px;
-  border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : "#E5E7EB"};
+  border: 2px solid ${(props) => props.$featured ? "#4945ff" : 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)"};
+  box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(73, 69, 255, 0.25), 0 8px 10px -6px rgba(73, 69, 255, 0.2)" : "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05)"};
 
   &:hover {
     transform: translateY(-4px);
-    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
   }
 `;
 const PopularBadge = styled(Badge)`
   position: absolute;
   top: -12px;
   right: 24px;
-  background: linear-gradient(135deg, #0EA5E9, #0284C7);
+  background: linear-gradient(135deg, #4945ff, #4338ca);
   color: white;
   padding: 4px 16px;
   font-size: 12px;
@@ -88,16 +88,36 @@ const TierName = styled(Typography)`
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 8px;
+  color: ${(p) => p.theme.colors.neutral800};
 `;
 const TierPrice = styled(Typography)`
   font-size: 2rem;
   font-weight: 800;
   margin-bottom: 4px;
+  color: ${(p) => p.theme.colors.neutral800};
 `;
 const TierDescription = styled(Typography)`
-  color: #6B7280;
+  color: ${(p) => p.theme.colors.neutral600};
   margin-bottom: 24px;
 `;
+const LimitsBox = styled(Box)`
+  background: ${(p) => p.theme.colors.neutral100};
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 20px;
+`;
+const LimitText = styled(Typography)`
+  font-size: 13px;
+  color: ${(p) => p.theme.colors.neutral800};
+`;
+const PeriodText = styled(Typography)`
+  color: ${(p) => p.theme.colors.neutral600};
+`;
+const FeatureText = styled(Typography)`
+  font-size: 14px;
+  color: ${(p) => p.$included ? p.theme.colors.neutral800 : p.theme.colors.neutral500};
+  text-decoration: ${(p) => p.$included ? "none" : "line-through"};
+`;
 const FeatureList = styled(Box)`
   margin-bottom: 24px;
 `;
@@ -117,10 +137,10 @@ const FeatureIcon = styled(Box)`
   margin-top: 2px;
   
   ${(props) => props.$included ? `
-    background: #DCFCE7;
+    background: rgba(34, 197, 94, 0.15);
     svg { color: #16A34A; }
   ` : `
-    background: #FEE2E2;
+    background: rgba(220, 38, 38, 0.12);
     svg { color: #DC2626; }
   `}
 `;
@@ -144,8 +164,8 @@ const CurrentPlanBadge = styled(Badge)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #F3F4F6;
-  color: #6B7280;
+  background: ${(p) => p.theme.colors.neutral100};
+  color: ${(p) => p.theme.colors.neutral600};
   font-weight: 600;
   font-size: 15px;
 `;
@@ -315,26 +335,21 @@ const LicensePage = () => {
       /* @__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(PeriodText, { variant: "omega", children: tier.period })
       ] }),
       /* @__PURE__ */ jsx(TierDescription, { variant: "omega", children: tier.description }),
-      /* @__PURE__ */ jsx(Box, { style: {
-        background: "#F9FAFB",
-        borderRadius: "8px",
-        padding: "12px",
-        marginBottom: "20px"
-      }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
-        /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+      /* @__PURE__ */ jsx(LimitsBox, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsxs(LimitText, { variant: "pi", children: [
           /* @__PURE__ */ jsx("strong", { children: "Authentication:" }),
           " ",
           tier.limits.authentication
         ] }),
-        /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+        /* @__PURE__ */ jsxs(LimitText, { variant: "pi", children: [
           /* @__PURE__ */ jsx("strong", { children: "MFA:" }),
           " ",
           tier.limits.mfa
         ] }),
-        /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "13px" }, children: [
+        /* @__PURE__ */ jsxs(LimitText, { variant: "pi", children: [
           /* @__PURE__ */ jsx("strong", { children: "Support:" }),
           " ",
           tier.limits.support
@@ -342,18 +357,7 @@ const LicensePage = () => {
       ] }) }),
       /* @__PURE__ */ jsx(FeatureList, { children: tier.features.map((feature, index) => /* @__PURE__ */ jsxs(Feature, { children: [
         /* @__PURE__ */ jsx(FeatureIcon, { $included: feature.included, children: feature.included ? /* @__PURE__ */ jsx(Check, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsx(Cross, { style: { width: 14, height: 14 } }) }),
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "omega",
-            style: {
-              fontSize: "14px",
-              color: feature.included ? "#374151" : "#9CA3AF",
-              textDecoration: feature.included ? "none" : "line-through"
-            },
-            children: feature.name
-          }
-        )
+        /* @__PURE__ */ jsx(FeatureText, { variant: "omega", $included: feature.included, children: feature.name })
       ] }, index)) }),
       currentTier === tier.id ? /* @__PURE__ */ jsx(CurrentPlanBadge, { children: "Current Plan" }) : /* @__PURE__ */ jsx(
         UpgradeButton,