subos-frontend 1.0.20 → 1.0.21

package/dist/index.mjs

@@ -2142,9 +2142,7 @@ var SubscriptionInfoGrid = ({
   fields,
   className = "",
   gridCols = 3,
-  showDefaultFields = true,
-  labelFontWeight = "normal",
-  valueFontWeight = "medium"
+  showDefaultFields = true
 }) => {
   const displayFields = fields || (showDefaultFields ? defaultFields : []);
   if (!subscription || displayFields.length === 0) {
@@ -2198,9 +2196,7 @@ var SubscriptionUsageDisplay = ({
   usageMetrics,
   className = "",
   gridCols = 3,
-  showProgressBars = false,
-  labelFontWeight = "normal",
-  valueFontWeight = "medium"
+  showProgressBars = false
 }) => {
   if (!subscription || usageMetrics.length === 0) {
     return null;
@@ -2233,22 +2229,6 @@ var SubscriptionUsageDisplay = ({
     if (percentage >= 75) return "bg-yellow-500";
     return "bg-green-500";
   };
-  const getFontWeightClass = (weight) => {
-    switch (weight) {
-      case "light":
-        return "font-light";
-      case "normal":
-        return "font-normal";
-      case "medium":
-        return "font-medium";
-      case "semibold":
-        return "font-semibold";
-      case "bold":
-        return "font-bold";
-      default:
-        return "font-normal";
-    }
-  };
   return /* @__PURE__ */ jsx("div", { className: `grid ${getGridClass()} gap-4 ${className}`, children: usageMetrics.map((metric) => {
     var _a, _b;
     const used = ((_a = subscription.usage) == null ? void 0 : _a[metric.key]) || 0;
@@ -2257,8 +2237,30 @@ var SubscriptionUsageDisplay = ({
     const percentage = getProgressPercentage(used, total);
     const shouldShowProgress = showProgressBars || metric.showProgress;
     return /* @__PURE__ */ jsxs("div", { className: "p-4 border border-gray-200 rounded-lg bg-white space-y-1", children: [
-      /* @__PURE__ */ jsx("p", { className: `text-sm text-gray-500 ${getFontWeightClass(labelFontWeight)}`, children: metric.label }),
-      /* @__PURE__ */ jsx("p", { className: getFontWeightClass(valueFontWeight), children: displayValue }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-sm text-gray-500",
+          style: {
+            fontSize: "var(--subos-font-size-subscription-label, 0.875rem)",
+            fontWeight: "var(--subos-font-weight-subscription-label, 400)",
+            color: "var(--subos-color-subscription-label, #6c757d)"
+          },
+          children: metric.label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "font-medium",
+          style: {
+            fontSize: "var(--subos-font-size-subscription-value, 1rem)",
+            fontWeight: "var(--subos-font-weight-subscription-value, 500)",
+            color: "var(--subos-color-subscription-value, inherit)"
+          },
+          children: displayValue
+        }
+      ),
       shouldShowProgress && total > 0 && /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-2", children: /* @__PURE__ */ jsx(
         "div",
         {