@parto-system-design/ui 1.1.17 → 1.1.18

package/dist/components/ui/label.d.ts

@@ -1,8 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 
-declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
 declare namespace Label {
     var displayName: string;
 }

package/dist/components/ui/label.js

@@ -26,5 +26,3 @@ function Label({
 Label.displayName = "Label";
 
 export { Label };
-//# sourceMappingURL=label.js.map
-//# sourceMappingURL=label.js.map

package/dist/components/ui/page-card.cjs

@@ -39,11 +39,148 @@ function convertToLocalNumbers(text, locale) {
 }
 
 // src/lib/i18n.ts
+var EMOTION_KEYS = [
+  "anger",
+  "anticipation",
+  "joy",
+  "trust",
+  "fear",
+  "surprise",
+  "sadness",
+  "disgust",
+  "neutral"
+];
+var emotionLabels = {
+  fa: {
+    anger: "\u062E\u0634\u0645",
+    anticipation: "\u0627\u0646\u062A\u0638\u0627\u0631",
+    joy: "\u0634\u0627\u062F\u06CC",
+    trust: "\u0627\u0639\u062A\u0645\u0627\u062F",
+    fear: "\u062A\u0631\u0633",
+    surprise: "\u0634\u06AF\u0641\u062A\u06CC",
+    sadness: "\u063A\u0645",
+    disgust: "\u0627\u0646\u0632\u062C\u0627\u0631",
+    neutral: "\u062E\u0646\u062B\u06CC"
+  },
+  ar: {
+    anger: "\u063A\u0636\u0628",
+    anticipation: "\u062A\u0631\u0642\u0651\u0628",
+    joy: "\u0641\u0631\u062D",
+    trust: "\u062B\u0642\u0629",
+    fear: "\u062E\u0648\u0641",
+    surprise: "\u062F\u0647\u0634\u0629",
+    sadness: "\u062D\u0632\u0646",
+    disgust: "\u0627\u0634\u0645\u0626\u0632\u0627\u0632",
+    neutral: "\u0645\u062D\u0627\u064A\u062F"
+  },
+  en: {
+    anger: "Anger",
+    anticipation: "Anticipation",
+    joy: "Joy",
+    trust: "Trust",
+    fear: "Fear",
+    surprise: "Surprise",
+    sadness: "Sadness",
+    disgust: "Disgust",
+    neutral: "Neutral"
+  }
+};
+(() => {
+  const map = {};
+  for (const key of EMOTION_KEYS) map[key] = key;
+  for (const locale of Object.keys(emotionLabels)) {
+    for (const key of EMOTION_KEYS) {
+      map[emotionLabels[locale][key].toLowerCase()] = key;
+    }
+  }
+  return map;
+})();
+var FLOW_KEYS = [
+  "pro-gov",
+  "internal-critic",
+  "internal-opponent",
+  "external-opponent",
+  "grey"
+];
+var flowLabels = {
+  fa: {
+    "pro-gov": "\u062D\u0627\u0645\u06CC\u0627\u0646 \u062D\u06A9\u0648\u0645\u062A",
+    "internal-critic": "\u0645\u0646\u062A\u0642\u062F\u0627\u0646 \u062F\u0627\u062E\u0644\u06CC",
+    "internal-opponent": "\u0645\u062E\u0627\u0644\u0641\u0627\u0646 \u062F\u0627\u062E\u0644\u06CC",
+    "external-opponent": "\u0645\u062E\u0627\u0644\u0641\u0627\u0646 \u062E\u0627\u0631\u062C\u06CC",
+    grey: "\u0642\u0634\u0631 \u062E\u0627\u06A9\u0633\u062A\u0631\u06CC"
+  },
+  ar: {
+    "pro-gov": "\u0645\u0624\u064A\u062F\u0648 \u0627\u0644\u062D\u0643\u0648\u0645\u0629",
+    "internal-critic": "\u0645\u0646\u062A\u0642\u062F\u0648\u0646 \u062F\u0627\u062E\u0644\u064A\u0648\u0646",
+    "internal-opponent": "\u0645\u0639\u0627\u0631\u0636\u0648\u0646 \u062F\u0627\u062E\u0644\u064A\u0648\u0646",
+    "external-opponent": "\u0645\u0639\u0627\u0631\u0636\u0648\u0646 \u062E\u0627\u0631\u062C\u064A\u0648\u0646",
+    grey: "\u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0631\u0645\u0627\u062F\u064A\u0629"
+  },
+  en: {
+    "pro-gov": "Pro-Government",
+    "internal-critic": "Internal Critic",
+    "internal-opponent": "Internal Opponent",
+    "external-opponent": "External Opponent",
+    grey: "Grey"
+  }
+};
+(() => {
+  const map = {};
+  for (const key of FLOW_KEYS) map[key] = key;
+  for (const locale of Object.keys(flowLabels)) {
+    for (const key of FLOW_KEYS) {
+      map[flowLabels[locale][key].toLowerCase()] = key;
+    }
+  }
+  return map;
+})();
+var STATUS_KEYS = ["critical", "warning", "middle", "low"];
 var statusLabels = {
-  fa: { critical: "\u0628\u062D\u0631\u0627\u0646\u06CC", warning: "\u0647\u0634\u062F\u0627\u0631", normal: "\u0639\u0627\u062F\u06CC" },
-  ar: { critical: "\u062D\u0631\u062C", warning: "\u062A\u062D\u0630\u064A\u0631", normal: "\u0637\u0628\u064A\u0639\u064A" },
-  en: { critical: "Critical", warning: "Warning", normal: "Normal" }
+  fa: { critical: "\u0628\u062D\u0631\u0627\u0646\u06CC", warning: "\u0647\u0634\u062F\u0627\u0631", middle: "\u0645\u062A\u0648\u0633\u0637", low: "\u067E\u0627\u06CC\u06CC\u0646" },
+  ar: { critical: "\u062D\u0631\u062C", warning: "\u062A\u062D\u0630\u064A\u0631", middle: "\u0645\u062A\u0648\u0633\u0637", low: "\u0645\u0646\u062E\u0641\u0636" },
+  en: { critical: "Critical", warning: "Warning", middle: "Middle", low: "Low" }
+};
+var STATUS_VALUE_MAP = {
+  1: "critical",
+  2: "warning",
+  3: "middle",
+  4: "low"
+};
+var STATUS_LABEL_LOOKUP = (() => {
+  const map = { normal: "low" };
+  for (const key of STATUS_KEYS) map[key] = key;
+  for (const locale of Object.keys(statusLabels)) {
+    for (const key of STATUS_KEYS) {
+      map[statusLabels[locale][key].toLowerCase()] = key;
+    }
+  }
+  return map;
+})();
+function resolveStatus(input) {
+  if (input == null) return null;
+  if (typeof input === "number") return STATUS_VALUE_MAP[input] ?? null;
+  const raw = String(input).trim();
+  if (raw === "") return null;
+  if (/^\d+$/.test(raw)) return STATUS_VALUE_MAP[Number(raw)] ?? null;
+  return STATUS_LABEL_LOOKUP[raw.toLowerCase()] ?? null;
+}
+var SEVERITY_KEYS = ["urgent", "high", "medium", "low"];
+var severityLabels = {
+  fa: { urgent: "\u0641\u0648\u0631\u06CC", high: "\u0628\u0627\u0644\u0627", medium: "\u0645\u062A\u0648\u0633\u0637", low: "\u067E\u0627\u06CC\u06CC\u0646" },
+  ar: { urgent: "\u0639\u0627\u062C\u0644", high: "\u0645\u0631\u062A\u0641\u0639", medium: "\u0645\u062A\u0648\u0633\u0637", low: "\u0645\u0646\u062E\u0641\u0636" },
+  en: { urgent: "Urgent", high: "High", medium: "Medium", low: "Low" }
 };
+(() => {
+  const map = {};
+  for (const key of SEVERITY_KEYS) map[key] = key;
+  for (const locale of Object.keys(severityLabels)) {
+    for (const key of SEVERITY_KEYS) {
+      map[severityLabels[locale][key].toLowerCase()] = key;
+    }
+  }
+  return map;
+})();
 var SIZE_CLASSES = {
   sm: { badge: "h-6 text-xs px-2 gap-1.5", dot: "size-1.5" },
   md: { badge: "h-7 text-sm px-2.5 gap-2", dot: "size-2" }
@@ -53,15 +190,17 @@ function tokenVar(status) {
 }
 var StatusBadge = React__namespace.forwardRef(
   ({ className, status, size = "md", showLabel = true, locale = "fa", animated, ...props }, ref) => {
-    const label = statusLabels[locale]?.[status] ?? statusLabels.fa[status];
-    const shouldPulse = animated ?? status === "critical";
-    const token = tokenVar(status);
+    const resolved = resolveStatus(status);
+    if (!resolved) return null;
+    const label = statusLabels[locale]?.[resolved] ?? statusLabels.fa[resolved];
+    const shouldPulse = animated ?? resolved === "critical";
+    const token = tokenVar(resolved);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
         ref,
         "data-slot": "status-badge",
-        "data-status": status,
+        "data-status": resolved,
         "aria-label": showLabel ? void 0 : label,
         className: cn(
           "inline-flex items-center rounded-full border font-medium transition-colors duration-150",
@@ -69,9 +208,9 @@ var StatusBadge = React__namespace.forwardRef(
           className
         ),
         style: {
-          backgroundColor: `hsl(var(${token}) / 0.1)`,
-          borderColor: `hsl(var(${token}) / 0.3)`,
-          color: `hsl(var(${token}))`
+          backgroundColor: `color-mix(in srgb, var(${token}) 10%, transparent)`,
+          borderColor: `color-mix(in srgb, var(${token}) 30%, transparent)`,
+          color: `var(${token})`
         },
         ...props,
         children: [
@@ -80,7 +219,7 @@ var StatusBadge = React__namespace.forwardRef(
               "span",
               {
                 className: "absolute inset-0 rounded-full animate-pulse-subtle",
-                style: { backgroundColor: `hsl(var(${token}) / 0.5)` },
+                style: { backgroundColor: `color-mix(in srgb, var(${token}) 50%, transparent)` },
                 "aria-hidden": "true"
               }
             ),
@@ -88,7 +227,7 @@ var StatusBadge = React__namespace.forwardRef(
               "span",
               {
                 className: cn("relative inline-block rounded-full", SIZE_CLASSES[size].dot),
-                style: { backgroundColor: `hsl(var(${token}))` },
+                style: { backgroundColor: `var(${token})` },
                 "aria-hidden": "true"
               }
             )
@@ -184,9 +323,9 @@ var SocialPlatformBadge = React__namespace.forwardRef(
 );
 SocialPlatformBadge.displayName = "SocialPlatformBadge";
 var TREND_CLASSES = {
-  up: "text-[hsl(var(--sentiment-positive))]",
-  down: "text-[hsl(var(--sentiment-negative))]",
-  neutral: "text-[hsl(var(--sentiment-neutral))]"
+  up: "text-[var(--sentiment-positive)]",
+  down: "text-[var(--sentiment-negative)]",
+  neutral: "text-[var(--sentiment-neutral)]"
 };
 function resolveTrend(data, trend) {
   if (trend !== "auto") return trend;
@@ -321,22 +460,22 @@ var LABELS = {
 };
 var SEGMENT_STYLES = {
   real: {
-    bar: "bg-[hsl(var(--sentiment-positive))]",
-    text: "text-[hsl(var(--sentiment-positive))]",
-    bg: "bg-[hsl(var(--sentiment-positive)/0.12)]",
-    dot: "bg-[hsl(var(--sentiment-positive))]"
+    bar: "bg-[var(--sentiment-positive)]",
+    text: "text-[var(--sentiment-positive)]",
+    bg: "bg-[color-mix(in_srgb,var(--sentiment-positive)_12%,transparent)]",
+    dot: "bg-[var(--sentiment-positive)]"
   },
   suspicious: {
-    bar: "bg-[hsl(var(--warning-default))]",
-    text: "text-[hsl(var(--warning-default))]",
-    bg: "bg-[hsl(var(--warning-default)/0.12)]",
-    dot: "bg-[hsl(var(--warning-default))]"
+    bar: "bg-[var(--warning-default)]",
+    text: "text-[var(--warning-default)]",
+    bg: "bg-[color-mix(in_srgb,var(--warning-default)_12%,transparent)]",
+    dot: "bg-[var(--warning-default)]"
   },
   bot: {
-    bar: "bg-[hsl(var(--destructive-default))]",
-    text: "text-[hsl(var(--destructive-default))]",
-    bg: "bg-[hsl(var(--destructive-default)/0.12)]",
-    dot: "bg-[hsl(var(--destructive-default))]"
+    bar: "bg-[var(--destructive-default)]",
+    text: "text-[var(--destructive-default)]",
+    bg: "bg-[color-mix(in_srgb,var(--destructive-default)_12%,transparent)]",
+    dot: "bg-[var(--destructive-default)]"
   }
 };
 var SEGMENT_ORDER = ["real", "suspicious", "bot"];
@@ -584,7 +723,7 @@ var PageCard = React__namespace.forwardRef(
                 {
                   style: {
                     width: `${contentMix.photo / totalContent * 100}%`,
-                    backgroundColor: "hsl(var(--chart-1))"
+                    backgroundColor: "var(--chart-1)"
                   },
                   "aria-label": `photo ${contentMix.photo}`
                 }
@@ -594,7 +733,7 @@ var PageCard = React__namespace.forwardRef(
                 {
                   style: {
                     width: `${contentMix.video / totalContent * 100}%`,
-                    backgroundColor: "hsl(var(--chart-2))"
+                    backgroundColor: "var(--chart-2)"
                   },
                   "aria-label": `video ${contentMix.video}`
                 }
@@ -604,7 +743,7 @@ var PageCard = React__namespace.forwardRef(
                 {
                   style: {
                     width: `${contentMix.carousel / totalContent * 100}%`,
-                    backgroundColor: "hsl(var(--chart-3))"
+                    backgroundColor: "var(--chart-3)"
                   },
                   "aria-label": `carousel ${contentMix.carousel}`
                 }
@@ -614,7 +753,7 @@ var PageCard = React__namespace.forwardRef(
                 {
                   style: {
                     width: `${contentMix.story / totalContent * 100}%`,
-                    backgroundColor: "hsl(var(--chart-4))"
+                    backgroundColor: "var(--chart-4)"
                   },
                   "aria-label": `story ${contentMix.story}`
                 }
@@ -631,5 +770,3 @@ var PageCard = React__namespace.forwardRef(
 PageCard.displayName = "PageCard";
 
 exports.PageCard = PageCard;
-//# sourceMappingURL=page-card.cjs.map
-//# sourceMappingURL=page-card.cjs.map

package/dist/components/ui/page-card.d.cts

@@ -1,7 +1,7 @@
 import 'react';
-import '../../utils-DlXWmDZ-.cjs';
+import '../../utils-Czyp5Ned.cjs';
 import './social-platform-badge.cjs';
-export { P as PageCard, a as PageCardContentMix, b as PageCardProps } from '../../page-card-C9XXXOVr.cjs';
-import '../../i18n-BfRhV5aw.cjs';
+export { P as PageCard, d as PageCardContentMix, e as PageCardProps } from '../../page-card-DjztZrFM.cjs';
+import '../../i18n-DD3DMY8O.cjs';
 import 'clsx';
 import 'class-variance-authority/types';

package/dist/components/ui/page-card.d.ts

@@ -1,7 +1,7 @@
 import 'react';
-import '../../utils-DlXWmDZ-.js';
+import '../../utils-Czyp5Ned.js';
 import './social-platform-badge.js';
-export { P as PageCard, a as PageCardContentMix, b as PageCardProps } from '../../page-card-DAnbez_f.js';
-import '../../i18n-ewyqbKM-.js';
+export { P as PageCard, d as PageCardContentMix, e as PageCardProps } from '../../page-card-sIE4lvnb.js';
+import '../../i18n-UEClNsBy.js';
 import 'clsx';
 import 'class-variance-authority/types';

package/dist/components/ui/page-card.js

@@ -17,11 +17,148 @@ function convertToLocalNumbers(text, locale) {
 }
 
 // src/lib/i18n.ts
+var EMOTION_KEYS = [
+  "anger",
+  "anticipation",
+  "joy",
+  "trust",
+  "fear",
+  "surprise",
+  "sadness",
+  "disgust",
+  "neutral"
+];
+var emotionLabels = {
+  fa: {
+    anger: "\u062E\u0634\u0645",
+    anticipation: "\u0627\u0646\u062A\u0638\u0627\u0631",
+    joy: "\u0634\u0627\u062F\u06CC",
+    trust: "\u0627\u0639\u062A\u0645\u0627\u062F",
+    fear: "\u062A\u0631\u0633",
+    surprise: "\u0634\u06AF\u0641\u062A\u06CC",
+    sadness: "\u063A\u0645",
+    disgust: "\u0627\u0646\u0632\u062C\u0627\u0631",
+    neutral: "\u062E\u0646\u062B\u06CC"
+  },
+  ar: {
+    anger: "\u063A\u0636\u0628",
+    anticipation: "\u062A\u0631\u0642\u0651\u0628",
+    joy: "\u0641\u0631\u062D",
+    trust: "\u062B\u0642\u0629",
+    fear: "\u062E\u0648\u0641",
+    surprise: "\u062F\u0647\u0634\u0629",
+    sadness: "\u062D\u0632\u0646",
+    disgust: "\u0627\u0634\u0645\u0626\u0632\u0627\u0632",
+    neutral: "\u0645\u062D\u0627\u064A\u062F"
+  },
+  en: {
+    anger: "Anger",
+    anticipation: "Anticipation",
+    joy: "Joy",
+    trust: "Trust",
+    fear: "Fear",
+    surprise: "Surprise",
+    sadness: "Sadness",
+    disgust: "Disgust",
+    neutral: "Neutral"
+  }
+};
+(() => {
+  const map = {};
+  for (const key of EMOTION_KEYS) map[key] = key;
+  for (const locale of Object.keys(emotionLabels)) {
+    for (const key of EMOTION_KEYS) {
+      map[emotionLabels[locale][key].toLowerCase()] = key;
+    }
+  }
+  return map;
+})();
+var FLOW_KEYS = [
+  "pro-gov",
+  "internal-critic",
+  "internal-opponent",
+  "external-opponent",
+  "grey"
+];
+var flowLabels = {
+  fa: {
+    "pro-gov": "\u062D\u0627\u0645\u06CC\u0627\u0646 \u062D\u06A9\u0648\u0645\u062A",
+    "internal-critic": "\u0645\u0646\u062A\u0642\u062F\u0627\u0646 \u062F\u0627\u062E\u0644\u06CC",
+    "internal-opponent": "\u0645\u062E\u0627\u0644\u0641\u0627\u0646 \u062F\u0627\u062E\u0644\u06CC",
+    "external-opponent": "\u0645\u062E\u0627\u0644\u0641\u0627\u0646 \u062E\u0627\u0631\u062C\u06CC",
+    grey: "\u0642\u0634\u0631 \u062E\u0627\u06A9\u0633\u062A\u0631\u06CC"
+  },
+  ar: {
+    "pro-gov": "\u0645\u0624\u064A\u062F\u0648 \u0627\u0644\u062D\u0643\u0648\u0645\u0629",
+    "internal-critic": "\u0645\u0646\u062A\u0642\u062F\u0648\u0646 \u062F\u0627\u062E\u0644\u064A\u0648\u0646",
+    "internal-opponent": "\u0645\u0639\u0627\u0631\u0636\u0648\u0646 \u062F\u0627\u062E\u0644\u064A\u0648\u0646",
+    "external-opponent": "\u0645\u0639\u0627\u0631\u0636\u0648\u0646 \u062E\u0627\u0631\u062C\u064A\u0648\u0646",
+    grey: "\u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0631\u0645\u0627\u062F\u064A\u0629"
+  },
+  en: {
+    "pro-gov": "Pro-Government",
+    "internal-critic": "Internal Critic",
+    "internal-opponent": "Internal Opponent",
+    "external-opponent": "External Opponent",
+    grey: "Grey"
+  }
+};
+(() => {
+  const map = {};
+  for (const key of FLOW_KEYS) map[key] = key;
+  for (const locale of Object.keys(flowLabels)) {
+    for (const key of FLOW_KEYS) {
+      map[flowLabels[locale][key].toLowerCase()] = key;
+    }
+  }
+  return map;
+})();
+var STATUS_KEYS = ["critical", "warning", "middle", "low"];
 var statusLabels = {
-  fa: { critical: "\u0628\u062D\u0631\u0627\u0646\u06CC", warning: "\u0647\u0634\u062F\u0627\u0631", normal: "\u0639\u0627\u062F\u06CC" },
-  ar: { critical: "\u062D\u0631\u062C", warning: "\u062A\u062D\u0630\u064A\u0631", normal: "\u0637\u0628\u064A\u0639\u064A" },
-  en: { critical: "Critical", warning: "Warning", normal: "Normal" }
+  fa: { critical: "\u0628\u062D\u0631\u0627\u0646\u06CC", warning: "\u0647\u0634\u062F\u0627\u0631", middle: "\u0645\u062A\u0648\u0633\u0637", low: "\u067E\u0627\u06CC\u06CC\u0646" },
+  ar: { critical: "\u062D\u0631\u062C", warning: "\u062A\u062D\u0630\u064A\u0631", middle: "\u0645\u062A\u0648\u0633\u0637", low: "\u0645\u0646\u062E\u0641\u0636" },
+  en: { critical: "Critical", warning: "Warning", middle: "Middle", low: "Low" }
+};
+var STATUS_VALUE_MAP = {
+  1: "critical",
+  2: "warning",
+  3: "middle",
+  4: "low"
+};
+var STATUS_LABEL_LOOKUP = (() => {
+  const map = { normal: "low" };
+  for (const key of STATUS_KEYS) map[key] = key;
+  for (const locale of Object.keys(statusLabels)) {
+    for (const key of STATUS_KEYS) {
+      map[statusLabels[locale][key].toLowerCase()] = key;
+    }
+  }
+  return map;
+})();
+function resolveStatus(input) {
+  if (input == null) return null;
+  if (typeof input === "number") return STATUS_VALUE_MAP[input] ?? null;
+  const raw = String(input).trim();
+  if (raw === "") return null;
+  if (/^\d+$/.test(raw)) return STATUS_VALUE_MAP[Number(raw)] ?? null;
+  return STATUS_LABEL_LOOKUP[raw.toLowerCase()] ?? null;
+}
+var SEVERITY_KEYS = ["urgent", "high", "medium", "low"];
+var severityLabels = {
+  fa: { urgent: "\u0641\u0648\u0631\u06CC", high: "\u0628\u0627\u0644\u0627", medium: "\u0645\u062A\u0648\u0633\u0637", low: "\u067E\u0627\u06CC\u06CC\u0646" },
+  ar: { urgent: "\u0639\u0627\u062C\u0644", high: "\u0645\u0631\u062A\u0641\u0639", medium: "\u0645\u062A\u0648\u0633\u0637", low: "\u0645\u0646\u062E\u0641\u0636" },
+  en: { urgent: "Urgent", high: "High", medium: "Medium", low: "Low" }
 };
+(() => {
+  const map = {};
+  for (const key of SEVERITY_KEYS) map[key] = key;
+  for (const locale of Object.keys(severityLabels)) {
+    for (const key of SEVERITY_KEYS) {
+      map[severityLabels[locale][key].toLowerCase()] = key;
+    }
+  }
+  return map;
+})();
 var SIZE_CLASSES = {
   sm: { badge: "h-6 text-xs px-2 gap-1.5", dot: "size-1.5" },
   md: { badge: "h-7 text-sm px-2.5 gap-2", dot: "size-2" }
@@ -31,15 +168,17 @@ function tokenVar(status) {
 }
 var StatusBadge = React.forwardRef(
   ({ className, status, size = "md", showLabel = true, locale = "fa", animated, ...props }, ref) => {
-    const label = statusLabels[locale]?.[status] ?? statusLabels.fa[status];
-    const shouldPulse = animated ?? status === "critical";
-    const token = tokenVar(status);
+    const resolved = resolveStatus(status);
+    if (!resolved) return null;
+    const label = statusLabels[locale]?.[resolved] ?? statusLabels.fa[resolved];
+    const shouldPulse = animated ?? resolved === "critical";
+    const token = tokenVar(resolved);
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
         "data-slot": "status-badge",
-        "data-status": status,
+        "data-status": resolved,
         "aria-label": showLabel ? void 0 : label,
         className: cn(
           "inline-flex items-center rounded-full border font-medium transition-colors duration-150",
@@ -47,9 +186,9 @@ var StatusBadge = React.forwardRef(
           className
         ),
         style: {
-          backgroundColor: `hsl(var(${token}) / 0.1)`,
-          borderColor: `hsl(var(${token}) / 0.3)`,
-          color: `hsl(var(${token}))`
+          backgroundColor: `color-mix(in srgb, var(${token}) 10%, transparent)`,
+          borderColor: `color-mix(in srgb, var(${token}) 30%, transparent)`,
+          color: `var(${token})`
         },
         ...props,
         children: [
@@ -58,7 +197,7 @@ var StatusBadge = React.forwardRef(
               "span",
               {
                 className: "absolute inset-0 rounded-full animate-pulse-subtle",
-                style: { backgroundColor: `hsl(var(${token}) / 0.5)` },
+                style: { backgroundColor: `color-mix(in srgb, var(${token}) 50%, transparent)` },
                 "aria-hidden": "true"
               }
             ),
@@ -66,7 +205,7 @@ var StatusBadge = React.forwardRef(
               "span",
               {
                 className: cn("relative inline-block rounded-full", SIZE_CLASSES[size].dot),
-                style: { backgroundColor: `hsl(var(${token}))` },
+                style: { backgroundColor: `var(${token})` },
                 "aria-hidden": "true"
               }
             )
@@ -162,9 +301,9 @@ var SocialPlatformBadge = React.forwardRef(
 );
 SocialPlatformBadge.displayName = "SocialPlatformBadge";
 var TREND_CLASSES = {
-  up: "text-[hsl(var(--sentiment-positive))]",
-  down: "text-[hsl(var(--sentiment-negative))]",
-  neutral: "text-[hsl(var(--sentiment-neutral))]"
+  up: "text-[var(--sentiment-positive)]",
+  down: "text-[var(--sentiment-negative)]",
+  neutral: "text-[var(--sentiment-neutral)]"
 };
 function resolveTrend(data, trend) {
   if (trend !== "auto") return trend;
@@ -299,22 +438,22 @@ var LABELS = {
 };
 var SEGMENT_STYLES = {
   real: {
-    bar: "bg-[hsl(var(--sentiment-positive))]",
-    text: "text-[hsl(var(--sentiment-positive))]",
-    bg: "bg-[hsl(var(--sentiment-positive)/0.12)]",
-    dot: "bg-[hsl(var(--sentiment-positive))]"
+    bar: "bg-[var(--sentiment-positive)]",
+    text: "text-[var(--sentiment-positive)]",
+    bg: "bg-[color-mix(in_srgb,var(--sentiment-positive)_12%,transparent)]",
+    dot: "bg-[var(--sentiment-positive)]"
   },
   suspicious: {
-    bar: "bg-[hsl(var(--warning-default))]",
-    text: "text-[hsl(var(--warning-default))]",
-    bg: "bg-[hsl(var(--warning-default)/0.12)]",
-    dot: "bg-[hsl(var(--warning-default))]"
+    bar: "bg-[var(--warning-default)]",
+    text: "text-[var(--warning-default)]",
+    bg: "bg-[color-mix(in_srgb,var(--warning-default)_12%,transparent)]",
+    dot: "bg-[var(--warning-default)]"
   },
   bot: {
-    bar: "bg-[hsl(var(--destructive-default))]",
-    text: "text-[hsl(var(--destructive-default))]",
-    bg: "bg-[hsl(var(--destructive-default)/0.12)]",
-    dot: "bg-[hsl(var(--destructive-default))]"
+    bar: "bg-[var(--destructive-default)]",
+    text: "text-[var(--destructive-default)]",
+    bg: "bg-[color-mix(in_srgb,var(--destructive-default)_12%,transparent)]",
+    dot: "bg-[var(--destructive-default)]"
   }
 };
 var SEGMENT_ORDER = ["real", "suspicious", "bot"];
@@ -562,7 +701,7 @@ var PageCard = React.forwardRef(
                 {
                   style: {
                     width: `${contentMix.photo / totalContent * 100}%`,
-                    backgroundColor: "hsl(var(--chart-1))"
+                    backgroundColor: "var(--chart-1)"
                   },
                   "aria-label": `photo ${contentMix.photo}`
                 }
@@ -572,7 +711,7 @@ var PageCard = React.forwardRef(
                 {
                   style: {
                     width: `${contentMix.video / totalContent * 100}%`,
-                    backgroundColor: "hsl(var(--chart-2))"
+                    backgroundColor: "var(--chart-2)"
                   },
                   "aria-label": `video ${contentMix.video}`
                 }
@@ -582,7 +721,7 @@ var PageCard = React.forwardRef(
                 {
                   style: {
                     width: `${contentMix.carousel / totalContent * 100}%`,
-                    backgroundColor: "hsl(var(--chart-3))"
+                    backgroundColor: "var(--chart-3)"
                   },
                   "aria-label": `carousel ${contentMix.carousel}`
                 }
@@ -592,7 +731,7 @@ var PageCard = React.forwardRef(
                 {
                   style: {
                     width: `${contentMix.story / totalContent * 100}%`,
-                    backgroundColor: "hsl(var(--chart-4))"
+                    backgroundColor: "var(--chart-4)"
                   },
                   "aria-label": `story ${contentMix.story}`
                 }
@@ -609,5 +748,3 @@ var PageCard = React.forwardRef(
 PageCard.displayName = "PageCard";
 
 export { PageCard };
-//# sourceMappingURL=page-card.js.map
-//# sourceMappingURL=page-card.js.map