@opensite/ui 2.7.1 → 2.7.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.
@@ -33,36 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
33
  function cn(...inputs) {
34
34
  return tailwindMerge.twMerge(clsx.clsx(inputs));
35
35
  }
36
- function getNestedCardBg(parentBg, variant = "muted", options) {
37
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
38
- if (isDark) {
39
- switch (variant) {
40
- case "muted":
41
- return "bg-background";
42
- case "card":
43
- return "bg-card";
44
- case "accent":
45
- return "bg-accent";
46
- case "subtle":
47
- return "bg-background/50";
48
- }
49
- } else {
50
- switch (variant) {
51
- case "muted":
52
- return "bg-muted";
53
- case "card":
54
- return "bg-card";
55
- case "accent":
56
- return "bg-accent";
57
- case "subtle":
58
- return "bg-muted/50";
59
- }
60
- }
61
- }
62
- function getNestedCardTextColor(parentBg, options) {
63
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
64
- return isDark ? "text-foreground" : "";
65
- }
66
36
  var badgeVariants = classVarianceAuthority.cva(
67
37
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
68
38
  {
@@ -959,14 +929,7 @@ function StatsImpactGrid({
959
929
  const renderStatIcon = React.useCallback((stat) => {
960
930
  if (stat.iconSlot) return stat.iconSlot;
961
931
  if (!stat.icon) return null;
962
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
963
- DynamicIcon,
964
- {
965
- name: stat.icon,
966
- size: 32,
967
- className: stat.iconColor || "text-primary"
968
- }
969
- ) });
932
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 32, className: stat.iconColor }) });
970
933
  }, []);
971
934
  const statsContent = React.useMemo(() => {
972
935
  if (statsSlot) return statsSlot;
@@ -994,7 +957,7 @@ function StatsImpactGrid({
994
957
  stat.suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
995
958
  ] }),
996
959
  stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
997
- stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: stat.description }))
960
+ stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-75", children: stat.description }) : stat.description)
998
961
  ] })
999
962
  },
1000
963
  stat.id
@@ -1016,56 +979,45 @@ function StatsImpactGrid({
1016
979
  if (comparisonSlot) return comparisonSlot;
1017
980
  if (!hasComparisonContent) return null;
1018
981
  const hasProgressBars = baselineLabel && targetLabel && baselinePercent !== void 0 && targetPercent !== void 0;
1019
- return /* @__PURE__ */ jsxRuntime.jsx(
1020
- "div",
1021
- {
1022
- className: cn(
1023
- "mb-16 rounded-xl p-8",
1024
- getNestedCardBg(background, "muted"),
1025
- getNestedCardTextColor(background),
1026
- comparisonClassName
1027
- ),
1028
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
1029
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1030
- comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: comparisonHeading })),
1031
- comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: comparisonDescription })),
1032
- hasProgressBars && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
1033
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
1034
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx(
1035
- "div",
1036
- {
1037
- className: "h-full bg-muted-foreground",
1038
- style: { width: `${baselinePercent}%` }
1039
- }
1040
- ) }),
1041
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
1042
- ] }),
1043
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
1044
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(
1045
- "div",
1046
- {
1047
- className: "h-full bg-primary",
1048
- style: { width: `${targetPercent}%` }
1049
- }
1050
- ) }),
1051
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
1052
- ] })
1053
- ] })
982
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-16 rounded-xl p-8", comparisonClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
983
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
984
+ comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : comparisonHeading),
985
+ comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : comparisonDescription),
986
+ hasProgressBars && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
987
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
988
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx(
989
+ "div",
990
+ {
991
+ className: "h-full bg-muted-foreground",
992
+ style: { width: `${baselinePercent}%` }
993
+ }
994
+ ) }),
995
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
1054
996
  ] }),
1055
- (baselineValue || targetValue) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
1056
- baselineValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1057
- baselineLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
1058
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: baselineValue })
1059
- ] }),
1060
- baselineValue && targetValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-border" }),
1061
- targetValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1062
- targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
1063
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
1064
- ] })
1065
- ] }) })
997
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
998
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(
999
+ "div",
1000
+ {
1001
+ className: "h-full bg-primary",
1002
+ style: { width: `${targetPercent}%` }
1003
+ }
1004
+ ) }),
1005
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
1006
+ ] })
1066
1007
  ] })
1067
- }
1068
- );
1008
+ ] }),
1009
+ (baselineValue || targetValue) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
1010
+ baselineValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1011
+ baselineLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
1012
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: baselineValue })
1013
+ ] }),
1014
+ baselineValue && targetValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-border" }),
1015
+ targetValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1016
+ targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
1017
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
1018
+ ] })
1019
+ ] }) })
1020
+ ] }) });
1069
1021
  }, [
1070
1022
  comparisonSlot,
1071
1023
  hasComparisonContent,
@@ -1115,7 +1067,7 @@ function StatsImpactGrid({
1115
1067
  if (ctaSlot) return ctaSlot;
1116
1068
  if (!ctaHeading && (!actions || actions.length === 0)) return null;
1117
1069
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", ctaClassName), children: [
1118
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: ctaHeading })),
1070
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : ctaHeading),
1119
1071
  actionsContent
1120
1072
  ] });
1121
1073
  }, [ctaSlot, ctaHeading, actions, ctaClassName, actionsContent]);
@@ -1137,22 +1089,22 @@ function StatsImpactGrid({
1137
1089
  "h2",
1138
1090
  {
1139
1091
  className: cn(
1140
- "mb-4 text-3xl font-bold md:text-5xl",
1092
+ "mb-4 text-3xl font-bold md:text-5xl text-balance",
1141
1093
  headingClassName
1142
1094
  ),
1143
1095
  children: heading
1144
1096
  }
1145
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
1097
+ ) : heading),
1146
1098
  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1147
1099
  "p",
1148
1100
  {
1149
1101
  className: cn(
1150
- "mx-auto max-w-3xl text-lg text-muted-foreground",
1102
+ "mx-auto max-w-3xl text-lg text-balance",
1151
1103
  descriptionClassName
1152
1104
  ),
1153
1105
  children: description
1154
1106
  }
1155
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
1107
+ ) : description)
1156
1108
  ] }),
1157
1109
  statsContent,
1158
1110
  comparisonContent,
@@ -12,36 +12,6 @@ import { Icon } from '@page-speed/icon';
12
12
  function cn(...inputs) {
13
13
  return twMerge(clsx(inputs));
14
14
  }
15
- function getNestedCardBg(parentBg, variant = "muted", options) {
16
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
17
- if (isDark) {
18
- switch (variant) {
19
- case "muted":
20
- return "bg-background";
21
- case "card":
22
- return "bg-card";
23
- case "accent":
24
- return "bg-accent";
25
- case "subtle":
26
- return "bg-background/50";
27
- }
28
- } else {
29
- switch (variant) {
30
- case "muted":
31
- return "bg-muted";
32
- case "card":
33
- return "bg-card";
34
- case "accent":
35
- return "bg-accent";
36
- case "subtle":
37
- return "bg-muted/50";
38
- }
39
- }
40
- }
41
- function getNestedCardTextColor(parentBg, options) {
42
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
43
- return isDark ? "text-foreground" : "";
44
- }
45
15
  var badgeVariants = cva(
46
16
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
47
17
  {
@@ -938,14 +908,7 @@ function StatsImpactGrid({
938
908
  const renderStatIcon = useCallback((stat) => {
939
909
  if (stat.iconSlot) return stat.iconSlot;
940
910
  if (!stat.icon) return null;
941
- return /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
942
- DynamicIcon,
943
- {
944
- name: stat.icon,
945
- size: 32,
946
- className: stat.iconColor || "text-primary"
947
- }
948
- ) });
911
+ return /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 32, className: stat.iconColor }) });
949
912
  }, []);
950
913
  const statsContent = useMemo(() => {
951
914
  if (statsSlot) return statsSlot;
@@ -973,7 +936,7 @@ function StatsImpactGrid({
973
936
  stat.suffix && /* @__PURE__ */ jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
974
937
  ] }),
975
938
  stat.label && /* @__PURE__ */ jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
976
- stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: stat.description }))
939
+ stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "opacity-75", children: stat.description }) : stat.description)
977
940
  ] })
978
941
  },
979
942
  stat.id
@@ -995,56 +958,45 @@ function StatsImpactGrid({
995
958
  if (comparisonSlot) return comparisonSlot;
996
959
  if (!hasComparisonContent) return null;
997
960
  const hasProgressBars = baselineLabel && targetLabel && baselinePercent !== void 0 && targetPercent !== void 0;
998
- return /* @__PURE__ */ jsx(
999
- "div",
1000
- {
1001
- className: cn(
1002
- "mb-16 rounded-xl p-8",
1003
- getNestedCardBg(background, "muted"),
1004
- getNestedCardTextColor(background),
1005
- comparisonClassName
1006
- ),
1007
- children: /* @__PURE__ */ jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
1008
- /* @__PURE__ */ jsxs("div", { children: [
1009
- comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: comparisonHeading })),
1010
- comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: comparisonDescription })),
1011
- hasProgressBars && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
1012
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
1013
- /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsx(
1014
- "div",
1015
- {
1016
- className: "h-full bg-muted-foreground",
1017
- style: { width: `${baselinePercent}%` }
1018
- }
1019
- ) }),
1020
- /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
1021
- ] }),
1022
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
1023
- /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(
1024
- "div",
1025
- {
1026
- className: "h-full bg-primary",
1027
- style: { width: `${targetPercent}%` }
1028
- }
1029
- ) }),
1030
- /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
1031
- ] })
1032
- ] })
961
+ return /* @__PURE__ */ jsx("div", { className: cn("mb-16 rounded-xl p-8", comparisonClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
962
+ /* @__PURE__ */ jsxs("div", { children: [
963
+ comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : comparisonHeading),
964
+ comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : comparisonDescription),
965
+ hasProgressBars && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
966
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
967
+ /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsx(
968
+ "div",
969
+ {
970
+ className: "h-full bg-muted-foreground",
971
+ style: { width: `${baselinePercent}%` }
972
+ }
973
+ ) }),
974
+ /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
1033
975
  ] }),
1034
- (baselineValue || targetValue) && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
1035
- baselineValue && /* @__PURE__ */ jsxs("div", { children: [
1036
- baselineLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
1037
- /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: baselineValue })
1038
- ] }),
1039
- baselineValue && targetValue && /* @__PURE__ */ jsx("div", { className: "h-px bg-border" }),
1040
- targetValue && /* @__PURE__ */ jsxs("div", { children: [
1041
- targetLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
1042
- /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
1043
- ] })
1044
- ] }) })
976
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
977
+ /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(
978
+ "div",
979
+ {
980
+ className: "h-full bg-primary",
981
+ style: { width: `${targetPercent}%` }
982
+ }
983
+ ) }),
984
+ /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
985
+ ] })
1045
986
  ] })
1046
- }
1047
- );
987
+ ] }),
988
+ (baselineValue || targetValue) && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
989
+ baselineValue && /* @__PURE__ */ jsxs("div", { children: [
990
+ baselineLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
991
+ /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: baselineValue })
992
+ ] }),
993
+ baselineValue && targetValue && /* @__PURE__ */ jsx("div", { className: "h-px bg-border" }),
994
+ targetValue && /* @__PURE__ */ jsxs("div", { children: [
995
+ targetLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
996
+ /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
997
+ ] })
998
+ ] }) })
999
+ ] }) });
1048
1000
  }, [
1049
1001
  comparisonSlot,
1050
1002
  hasComparisonContent,
@@ -1094,7 +1046,7 @@ function StatsImpactGrid({
1094
1046
  if (ctaSlot) return ctaSlot;
1095
1047
  if (!ctaHeading && (!actions || actions.length === 0)) return null;
1096
1048
  return /* @__PURE__ */ jsxs("div", { className: cn("text-center", ctaClassName), children: [
1097
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: ctaHeading })),
1049
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : ctaHeading),
1098
1050
  actionsContent
1099
1051
  ] });
1100
1052
  }, [ctaSlot, ctaHeading, actions, ctaClassName, actionsContent]);
@@ -1116,22 +1068,22 @@ function StatsImpactGrid({
1116
1068
  "h2",
1117
1069
  {
1118
1070
  className: cn(
1119
- "mb-4 text-3xl font-bold md:text-5xl",
1071
+ "mb-4 text-3xl font-bold md:text-5xl text-balance",
1120
1072
  headingClassName
1121
1073
  ),
1122
1074
  children: heading
1123
1075
  }
1124
- ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
1076
+ ) : heading),
1125
1077
  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
1126
1078
  "p",
1127
1079
  {
1128
1080
  className: cn(
1129
- "mx-auto max-w-3xl text-lg text-muted-foreground",
1081
+ "mx-auto max-w-3xl text-lg text-balance",
1130
1082
  descriptionClassName
1131
1083
  ),
1132
1084
  children: description
1133
1085
  }
1134
- ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
1086
+ ) : description)
1135
1087
  ] }),
1136
1088
  statsContent,
1137
1089
  comparisonContent,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensite/ui",
3
- "version": "2.7.1",
3
+ "version": "2.7.2",
4
4
  "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
5
5
  "keywords": [
6
6
  "react",