magic-editor-x 1.5.0 → 1.5.1

package/dist/_chunks/{LicensePage-vJxKYZGQ.js → LicensePage-CmvILX9m.js}

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const m = require("react");
 const admin = require("@strapi/strapi/admin");
-const getTranslation = require("./getTranslation--JcqVOd5.js");
+const getTranslation = require("./getTranslation-BADoesEn.js");
 const styled = require("styled-components");
-const index = require("./index-CPs6WJDY.js");
+const index = require("./index-BXBnwuRw.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const Container = styled__default.default(getTranslation.Box)`
+const Container = styled__default.default(getTranslation.R)`
   padding: 32px;
   max-width: 1400px;
   margin: 0 auto;
 `;
-const Header = styled__default.default(getTranslation.Box)`
+const Header = styled__default.default(getTranslation.R)`
   text-align: center;
   margin-bottom: 48px;
   display: flex;
@@ -21,7 +21,7 @@ const Header = styled__default.default(getTranslation.Box)`
   align-items: center;
   gap: 8px;
 `;
-const Title = styled__default.default(getTranslation.Typography)`
+const Title = styled__default.default(getTranslation.I)`
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 8px;
@@ -30,13 +30,13 @@ const Title = styled__default.default(getTranslation.Typography)`
   -webkit-text-fill-color: transparent;
   display: block;
 `;
-const Subtitle = styled__default.default(getTranslation.Typography)`
+const Subtitle = styled__default.default(getTranslation.I)`
   font-size: 1.125rem;
   color: ${(props) => props.theme.colors.neutral600};
   line-height: 1.6;
   display: block;
 `;
-const TierGrid = styled__default.default(getTranslation.Flex)`
+const TierGrid = styled__default.default(getTranslation.T)`
   gap: 32px;
   margin: 0 auto 48px;
   max-width: 1080px;
@@ -44,13 +44,13 @@ const TierGrid = styled__default.default(getTranslation.Flex)`
   flex-wrap: wrap;
   align-items: stretch;
 `;
-const TierWrapper = styled__default.default(getTranslation.Box)`
+const TierWrapper = styled__default.default(getTranslation.R)`
   flex: 1;
   min-width: 280px;
   max-width: 340px;
   display: flex;
 `;
-const TierCard = styled__default.default(getTranslation.Box)`
+const TierCard = styled__default.default(getTranslation.R)`
   background: ${(props) => props.theme.colors.neutral0};
   border-radius: 16px;
   padding: 32px;
@@ -67,7 +67,7 @@ const TierCard = styled__default.default(getTranslation.Box)`
     box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
   }
 `;
-const PopularBadge = styled__default.default(getTranslation.Badge)`
+const PopularBadge = styled__default.default(getTranslation.Ps)`
   position: absolute;
   top: -12px;
   right: 24px;
@@ -77,7 +77,7 @@ const PopularBadge = styled__default.default(getTranslation.Badge)`
   font-size: 12px;
   font-weight: 600;
 `;
-const TierIcon = styled__default.default(getTranslation.Box)`
+const TierIcon = styled__default.default(getTranslation.R)`
   width: 48px;
   height: 48px;
   border-radius: 12px;
@@ -93,30 +93,30 @@ const TierIcon = styled__default.default(getTranslation.Box)`
     color: white;
   }
 `;
-const TierName = styled__default.default(getTranslation.Typography)`
+const TierName = styled__default.default(getTranslation.I)`
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 8px;
 `;
-const TierPrice = styled__default.default(getTranslation.Typography)`
+const TierPrice = styled__default.default(getTranslation.I)`
   font-size: 2rem;
   font-weight: 800;
   margin-bottom: 4px;
 `;
-const TierDescription = styled__default.default(getTranslation.Typography)`
+const TierDescription = styled__default.default(getTranslation.I)`
   color: ${(props) => props.theme.colors.neutral600};
   margin-bottom: 24px;
 `;
-const FeatureList = styled__default.default(getTranslation.Box)`
+const FeatureList = styled__default.default(getTranslation.R)`
   margin-bottom: 24px;
   flex: 1;
 `;
-const Feature = styled__default.default(getTranslation.Flex)`
+const Feature = styled__default.default(getTranslation.T)`
   gap: 12px;
   margin-bottom: 12px;
   align-items: flex-start;
 `;
-const FeatureIcon = styled__default.default(getTranslation.Box)`
+const FeatureIcon = styled__default.default(getTranslation.R)`
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -134,7 +134,7 @@ const FeatureIcon = styled__default.default(getTranslation.Box)`
     svg { color: #DC2626; }
   `}
 `;
-const UpgradeButton = styled__default.default(getTranslation.Button)`
+const UpgradeButton = styled__default.default(getTranslation.zn)`
   width: 100%;
   height: 48px;
   font-weight: 600;
@@ -148,7 +148,7 @@ const UpgradeButton = styled__default.default(getTranslation.Button)`
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 `;
-const CurrentPlanBadge = styled__default.default(getTranslation.Badge)`
+const CurrentPlanBadge = styled__default.default(getTranslation.Ps)`
   width: 100%;
   height: 48px;
   display: flex;
@@ -159,7 +159,7 @@ const CurrentPlanBadge = styled__default.default(getTranslation.Badge)`
   font-weight: 600;
   font-size: 15px;
 `;
-const UsageBox = styled__default.default(getTranslation.Box)`
+const UsageBox = styled__default.default(getTranslation.R)`
   background: ${(props) => props.theme.colors.neutral100};
   border: 1px solid ${(props) => props.theme.colors.neutral200};
   border-radius: 12px;
@@ -184,10 +184,10 @@ const LicensePage = () => {
   const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation.getTranslation(id), defaultMessage }, values);
   const { get } = admin.useFetchClient();
   const { toggleNotification } = admin.useNotification();
-  const [currentTier, setCurrentTier] = React.useState("free");
-  const [limits, setLimits] = React.useState(null);
-  const [loading, setLoading] = React.useState(true);
-  React.useEffect(() => {
+  const [currentTier, setCurrentTier] = m.useState("free");
+  const [limits, setLimits] = m.useState(null);
+  const [loading, setLoading] = m.useState(true);
+  m.useEffect(() => {
     fetchLicenseInfo();
   }, []);
   const fetchLicenseInfo = async () => {
@@ -229,7 +229,7 @@ const LicensePage = () => {
       price: "$0",
       period: "forever",
       description: "Perfect for small projects and testing",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(index.ForwardRef$o, {}),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(index.Sn, {}),
       color: "linear-gradient(135deg, #6B7280, #4B5563)",
       features: [
         { name: "Full Editor Access", included: true },
@@ -254,7 +254,7 @@ const LicensePage = () => {
       price: "$9.90",
       period: "/month",
       description: "Enhanced collaboration for teams",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(index.ForwardRef$1g, {}),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(index.C3, {}),
       color: "linear-gradient(135deg, #8B5CF6, #7C3AED)",
       featured: true,
       features: [
@@ -280,7 +280,7 @@ const LicensePage = () => {
       price: "$24.90",
       period: "/month",
       description: "Unlimited collaboration for enterprises",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(index.ForwardRef$y, {}),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(index.ln, {}),
       color: "linear-gradient(135deg, #7C3AED, #6d28d9)",
       features: [
         { name: "Full Editor Access", included: true },
@@ -304,7 +304,7 @@ const LicensePage = () => {
     window.open("https://store.magicdx.dev/", "_blank");
   };
   if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Loader, { children: t("license.loading", "Loading license information...") }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.T, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Vd, { children: t("license.loading", "Loading license information...") }) }) });
   }
   const collaboratorUsage = limits?.collaborators ? {
     current: limits.collaborators.current || 0,
@@ -318,14 +318,14 @@ const LicensePage = () => {
       /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { variant: "omega", children: t("upgradePage.subtitle", "Choose your plan for collaborative editing") })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(UsageBox, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { justifyContent: "space-between", alignItems: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "beta", fontWeight: "bold", children: t("upgradePage.currentUsage", "Current Usage") }),
-        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Badge, { style: { background: currentTier === "free" ? "#6B7280" : "#7C3AED", color: "white" }, children: currentTier.toUpperCase() })
+      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.T, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.I, { variant: "beta", fontWeight: "bold", children: t("upgradePage.currentUsage", "Current Usage") }),
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Ps, { style: { background: currentTier === "free" ? "#6B7280" : "#7C3AED", color: "white" }, children: currentTier.toUpperCase() })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Box, { marginTop: 4, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", children: t("upgradePage.collaborators", "Collaborators") }),
-          /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "omega", fontWeight: "bold", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.R, { marginTop: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.T, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(getTranslation.I, { variant: "omega", children: t("upgradePage.collaborators", "Collaborators") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.I, { variant: "omega", fontWeight: "bold", children: [
             collaboratorUsage.current,
             " / ",
             collaboratorUsage.unlimited ? t("license.unlimited", "Unlimited") : collaboratorUsage.max
@@ -338,25 +338,25 @@ const LicensePage = () => {
       tier.featured && /* @__PURE__ */ jsxRuntime.jsx(PopularBadge, { children: t("upgradePage.mostPopular", "MOST POPULAR") }),
       /* @__PURE__ */ jsxRuntime.jsx(TierIcon, { $color: tier.color, children: tier.icon }),
       /* @__PURE__ */ jsxRuntime.jsx(TierName, { variant: "beta", children: tier.name }),
-      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { alignItems: "baseline", gap: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.T, { alignItems: "baseline", gap: 1, children: [
         /* @__PURE__ */ jsxRuntime.jsx(TierPrice, { variant: "alpha", children: tier.price }),
-        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.I, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(TierDescription, { variant: "omega", children: tier.description }),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        getTranslation.Box,
+        getTranslation.R,
         {
           background: "neutral100",
           hasRadius: true,
           padding: 3,
           marginBottom: 5,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "pi", style: { fontSize: "13px", display: "block", marginBottom: "4px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.I, { variant: "pi", style: { fontSize: "13px", display: "block", marginBottom: "4px" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Collaborators:" }),
               " ",
               tier.limits.collaborators
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Typography, { variant: "pi", style: { fontSize: "13px", display: "block" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.I, { variant: "pi", style: { fontSize: "13px", display: "block" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Custom Blocks:" }),
               " ",
               tier.limits.customBlocks
@@ -365,9 +365,9 @@ const LicensePage = () => {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(FeatureList, { children: tier.features.map((feature, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(Feature, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FeatureIcon, { $included: feature.included, children: feature.included ? /* @__PURE__ */ jsxRuntime.jsx(index.ForwardRef$2o, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsxRuntime.jsx(index.ForwardRef$26, { style: { width: 14, height: 14 } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(FeatureIcon, { $included: feature.included, children: feature.included ? /* @__PURE__ */ jsxRuntime.jsx(index.t5, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsxRuntime.jsx(index.C5, { style: { width: 14, height: 14 } }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          getTranslation.Typography,
+          getTranslation.I,
           {
             variant: "omega",
             textColor: feature.included ? "neutral800" : "neutral500",

package/dist/_chunks/{LicensePage-B2STSez2.mjs → LicensePage-gLRoo8WJ.mjs}

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
-import { u as useIntl, F as Flex, L as Loader, T as Typography, d as Badge, a as Box, g as getTranslation, B as Button } from "./getTranslation-bLklCCaI.mjs";
+import { u as useIntl, T, V as Vd, I, P as Ps, R, g as getTranslation, z as zn } from "./getTranslation-D3h3Z3gU.mjs";
 import styled from "styled-components";
-import { F as ForwardRef$2o, a as ForwardRef$26, b as ForwardRef$o, c as ForwardRef$1g, d as ForwardRef$y } from "./index-CAPc_Y1F.mjs";
-const Container = styled(Box)`
+import { t as t5, C as C5, S as Sn, a as C3, l as ln } from "./index-BvEdg518.mjs";
+const Container = styled(R)`
   padding: 32px;
   max-width: 1400px;
   margin: 0 auto;
 `;
-const Header = styled(Box)`
+const Header = styled(R)`
   text-align: center;
   margin-bottom: 48px;
   display: flex;
@@ -17,7 +17,7 @@ const Header = styled(Box)`
   align-items: center;
   gap: 8px;
 `;
-const Title = styled(Typography)`
+const Title = styled(I)`
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 8px;
@@ -26,13 +26,13 @@ const Title = styled(Typography)`
   -webkit-text-fill-color: transparent;
   display: block;
 `;
-const Subtitle = styled(Typography)`
+const Subtitle = styled(I)`
   font-size: 1.125rem;
   color: ${(props) => props.theme.colors.neutral600};
   line-height: 1.6;
   display: block;
 `;
-const TierGrid = styled(Flex)`
+const TierGrid = styled(T)`
   gap: 32px;
   margin: 0 auto 48px;
   max-width: 1080px;
@@ -40,13 +40,13 @@ const TierGrid = styled(Flex)`
   flex-wrap: wrap;
   align-items: stretch;
 `;
-const TierWrapper = styled(Box)`
+const TierWrapper = styled(R)`
   flex: 1;
   min-width: 280px;
   max-width: 340px;
   display: flex;
 `;
-const TierCard = styled(Box)`
+const TierCard = styled(R)`
   background: ${(props) => props.theme.colors.neutral0};
   border-radius: 16px;
   padding: 32px;
@@ -63,7 +63,7 @@ const TierCard = styled(Box)`
     box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
   }
 `;
-const PopularBadge = styled(Badge)`
+const PopularBadge = styled(Ps)`
   position: absolute;
   top: -12px;
   right: 24px;
@@ -73,7 +73,7 @@ const PopularBadge = styled(Badge)`
   font-size: 12px;
   font-weight: 600;
 `;
-const TierIcon = styled(Box)`
+const TierIcon = styled(R)`
   width: 48px;
   height: 48px;
   border-radius: 12px;
@@ -89,30 +89,30 @@ const TierIcon = styled(Box)`
     color: white;
   }
 `;
-const TierName = styled(Typography)`
+const TierName = styled(I)`
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 8px;
 `;
-const TierPrice = styled(Typography)`
+const TierPrice = styled(I)`
   font-size: 2rem;
   font-weight: 800;
   margin-bottom: 4px;
 `;
-const TierDescription = styled(Typography)`
+const TierDescription = styled(I)`
   color: ${(props) => props.theme.colors.neutral600};
   margin-bottom: 24px;
 `;
-const FeatureList = styled(Box)`
+const FeatureList = styled(R)`
   margin-bottom: 24px;
   flex: 1;
 `;
-const Feature = styled(Flex)`
+const Feature = styled(T)`
   gap: 12px;
   margin-bottom: 12px;
   align-items: flex-start;
 `;
-const FeatureIcon = styled(Box)`
+const FeatureIcon = styled(R)`
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -130,7 +130,7 @@ const FeatureIcon = styled(Box)`
     svg { color: #DC2626; }
   `}
 `;
-const UpgradeButton = styled(Button)`
+const UpgradeButton = styled(zn)`
   width: 100%;
   height: 48px;
   font-weight: 600;
@@ -144,7 +144,7 @@ const UpgradeButton = styled(Button)`
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 `;
-const CurrentPlanBadge = styled(Badge)`
+const CurrentPlanBadge = styled(Ps)`
   width: 100%;
   height: 48px;
   display: flex;
@@ -155,7 +155,7 @@ const CurrentPlanBadge = styled(Badge)`
   font-weight: 600;
   font-size: 15px;
 `;
-const UsageBox = styled(Box)`
+const UsageBox = styled(R)`
   background: ${(props) => props.theme.colors.neutral100};
   border: 1px solid ${(props) => props.theme.colors.neutral200};
   border-radius: 12px;
@@ -225,7 +225,7 @@ const LicensePage = () => {
       price: "$0",
       period: "forever",
       description: "Perfect for small projects and testing",
-      icon: /* @__PURE__ */ jsx(ForwardRef$o, {}),
+      icon: /* @__PURE__ */ jsx(Sn, {}),
       color: "linear-gradient(135deg, #6B7280, #4B5563)",
       features: [
         { name: "Full Editor Access", included: true },
@@ -250,7 +250,7 @@ const LicensePage = () => {
       price: "$9.90",
       period: "/month",
       description: "Enhanced collaboration for teams",
-      icon: /* @__PURE__ */ jsx(ForwardRef$1g, {}),
+      icon: /* @__PURE__ */ jsx(C3, {}),
       color: "linear-gradient(135deg, #8B5CF6, #7C3AED)",
       featured: true,
       features: [
@@ -276,7 +276,7 @@ const LicensePage = () => {
       price: "$24.90",
       period: "/month",
       description: "Unlimited collaboration for enterprises",
-      icon: /* @__PURE__ */ jsx(ForwardRef$y, {}),
+      icon: /* @__PURE__ */ jsx(ln, {}),
       color: "linear-gradient(135deg, #7C3AED, #6d28d9)",
       features: [
         { name: "Full Editor Access", included: true },
@@ -300,7 +300,7 @@ const LicensePage = () => {
     window.open("https://store.magicdx.dev/", "_blank");
   };
   if (loading) {
-    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, { children: t("license.loading", "Loading license information...") }) }) });
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(T, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Vd, { children: t("license.loading", "Loading license information...") }) }) });
   }
   const collaboratorUsage = limits?.collaborators ? {
     current: limits.collaborators.current || 0,
@@ -314,14 +314,14 @@ const LicensePage = () => {
       /* @__PURE__ */ jsx(Subtitle, { variant: "omega", children: t("upgradePage.subtitle", "Choose your plan for collaborative editing") })
     ] }),
     /* @__PURE__ */ jsxs(UsageBox, { children: [
-      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", children: t("upgradePage.currentUsage", "Current Usage") }),
-        /* @__PURE__ */ jsx(Badge, { style: { background: currentTier === "free" ? "#6B7280" : "#7C3AED", color: "white" }, children: currentTier.toUpperCase() })
+      /* @__PURE__ */ jsxs(T, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(I, { variant: "beta", fontWeight: "bold", children: t("upgradePage.currentUsage", "Current Usage") }),
+        /* @__PURE__ */ jsx(Ps, { style: { background: currentTier === "free" ? "#6B7280" : "#7C3AED", color: "white" }, children: currentTier.toUpperCase() })
       ] }),
-      /* @__PURE__ */ jsxs(Box, { marginTop: 4, children: [
-        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: t("upgradePage.collaborators", "Collaborators") }),
-          /* @__PURE__ */ jsxs(Typography, { variant: "omega", fontWeight: "bold", children: [
+      /* @__PURE__ */ jsxs(R, { marginTop: 4, children: [
+        /* @__PURE__ */ jsxs(T, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsx(I, { variant: "omega", children: t("upgradePage.collaborators", "Collaborators") }),
+          /* @__PURE__ */ jsxs(I, { variant: "omega", fontWeight: "bold", children: [
             collaboratorUsage.current,
             " / ",
             collaboratorUsage.unlimited ? t("license.unlimited", "Unlimited") : collaboratorUsage.max
@@ -334,25 +334,25 @@ const LicensePage = () => {
       tier.featured && /* @__PURE__ */ jsx(PopularBadge, { children: t("upgradePage.mostPopular", "MOST POPULAR") }),
       /* @__PURE__ */ jsx(TierIcon, { $color: tier.color, children: tier.icon }),
       /* @__PURE__ */ jsx(TierName, { variant: "beta", children: tier.name }),
-      /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 1, children: [
+      /* @__PURE__ */ jsxs(T, { 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(I, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
       ] }),
       /* @__PURE__ */ jsx(TierDescription, { variant: "omega", children: tier.description }),
       /* @__PURE__ */ jsxs(
-        Box,
+        R,
         {
           background: "neutral100",
           hasRadius: true,
           padding: 3,
           marginBottom: 5,
           children: [
-            /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "13px", display: "block", marginBottom: "4px" }, children: [
+            /* @__PURE__ */ jsxs(I, { variant: "pi", style: { fontSize: "13px", display: "block", marginBottom: "4px" }, children: [
               /* @__PURE__ */ jsx("strong", { children: "Collaborators:" }),
               " ",
               tier.limits.collaborators
             ] }),
-            /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "13px", display: "block" }, children: [
+            /* @__PURE__ */ jsxs(I, { variant: "pi", style: { fontSize: "13px", display: "block" }, children: [
               /* @__PURE__ */ jsx("strong", { children: "Custom Blocks:" }),
               " ",
               tier.limits.customBlocks
@@ -361,9 +361,9 @@ 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(ForwardRef$2o, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsx(ForwardRef$26, { style: { width: 14, height: 14 } }) }),
+        /* @__PURE__ */ jsx(FeatureIcon, { $included: feature.included, children: feature.included ? /* @__PURE__ */ jsx(t5, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsx(C5, { style: { width: 14, height: 14 } }) }),
         /* @__PURE__ */ jsx(
-          Typography,
+          I,
           {
             variant: "omega",
             textColor: feature.included ? "neutral800" : "neutral500",

package/dist/_chunks/{LiveCollaborationPanel-D70o6EGf.js → LiveCollaborationPanel-BFybu8h0.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const getTranslation = require("./getTranslation--JcqVOd5.js");
+const m = require("react");
+const getTranslation = require("./getTranslation-BADoesEn.js");
 const styled = require("styled-components");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
@@ -152,12 +152,12 @@ const getPeerName = (user = {}, t) => {
 const LiveCollaborationPanel = ({ documentId, model, document }) => {
   const { formatMessage } = getTranslation.useIntl();
   const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation.getTranslation(id), defaultMessage }, values);
-  const [collabState, setCollabState] = React.useState({
+  const [collabState, setCollabState] = m.useState({
     status: "disabled",
     peers: [],
     error: null
   });
-  React.useEffect(() => {
+  m.useEffect(() => {
     const handleCollabUpdate = (event) => {
       if (event.detail) {
         setCollabState(event.detail);
@@ -172,7 +172,7 @@ const LiveCollaborationPanel = ({ documentId, model, document }) => {
     };
   }, []);
   const { status, peers, error } = collabState;
-  const statusLabel = React.useMemo(() => {
+  const statusLabel = m.useMemo(() => {
     switch (status) {
       case "connected":
         return t("collab.live", "Live");
@@ -196,7 +196,7 @@ const LiveCollaborationPanel = ({ documentId, model, document }) => {
   const isConnected = status === "connected";
   return {
     title: t("collab.title", "Live Collaboration"),
-    content: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.Flex, { direction: "column", gap: 4, alignItems: "stretch", style: { width: "100%" }, children: [
+    content: /* @__PURE__ */ jsxRuntime.jsxs(getTranslation.T, { direction: "column", gap: 4, alignItems: "stretch", style: { width: "100%" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(StatusCard, { $status: status, children: [
         /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { $status: status }),
         /* @__PURE__ */ jsxRuntime.jsxs(StatusText, { children: [
@@ -206,7 +206,7 @@ const LiveCollaborationPanel = ({ documentId, model, document }) => {
       ] }),
       isConnected && peers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: t("collab.activePeers", "Active Collaborators ({count})", { count: peers.length }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.Flex, { direction: "column", gap: 2, alignItems: "stretch", children: peers.map((peer, idx) => /* @__PURE__ */ jsxRuntime.jsxs(PeerItem, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(getTranslation.T, { direction: "column", gap: 2, alignItems: "stretch", children: peers.map((peer, idx) => /* @__PURE__ */ jsxRuntime.jsxs(PeerItem, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(PeerAvatar, { $color: PEER_COLORS[idx % PEER_COLORS.length], children: getPeerInitials(peer) }),
           /* @__PURE__ */ jsxRuntime.jsxs(PeerInfo, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(PeerName, { children: getPeerName(peer, t) }),

package/dist/_chunks/{LiveCollaborationPanel-uLIJs5z_.mjs → LiveCollaborationPanel-CVgl4IyR.mjs}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
-import { u as useIntl, F as Flex, g as getTranslation } from "./getTranslation-bLklCCaI.mjs";
+import { u as useIntl, T, g as getTranslation } from "./getTranslation-D3h3Z3gU.mjs";
 import styled, { css, keyframes } from "styled-components";
 const pulse = keyframes`
   0%, 100% { 
@@ -192,7 +192,7 @@ const LiveCollaborationPanel = ({ documentId, model, document }) => {
   const isConnected = status === "connected";
   return {
     title: t("collab.title", "Live Collaboration"),
-    content: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, alignItems: "stretch", style: { width: "100%" }, children: [
+    content: /* @__PURE__ */ jsxs(T, { direction: "column", gap: 4, alignItems: "stretch", style: { width: "100%" }, children: [
       /* @__PURE__ */ jsxs(StatusCard, { $status: status, children: [
         /* @__PURE__ */ jsx(StatusDot, { $status: status }),
         /* @__PURE__ */ jsxs(StatusText, { children: [
@@ -202,7 +202,7 @@ const LiveCollaborationPanel = ({ documentId, model, document }) => {
       ] }),
       isConnected && peers.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(SectionTitle, { children: t("collab.activePeers", "Active Collaborators ({count})", { count: peers.length }) }),
-        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, alignItems: "stretch", children: peers.map((peer, idx) => /* @__PURE__ */ jsxs(PeerItem, { children: [
+        /* @__PURE__ */ jsx(T, { direction: "column", gap: 2, alignItems: "stretch", children: peers.map((peer, idx) => /* @__PURE__ */ jsxs(PeerItem, { children: [
           /* @__PURE__ */ jsx(PeerAvatar, { $color: PEER_COLORS[idx % PEER_COLORS.length], children: getPeerInitials(peer) }),
           /* @__PURE__ */ jsxs(PeerInfo, { children: [
             /* @__PURE__ */ jsx(PeerName, { children: getPeerName(peer, t) }),