@mediaradar/design-components 0.13.0 → 0.14.0

package/dist/index.cjs

@@ -517,17 +517,22 @@ var TONE_STYLE = {
   }
 };
 var KIND = {
-  label: "px-2 py-0.5",
+  // Twice the vertical room the first version had. At py-0.5 the pill hugged
+  // its text and read as a tight little tag; at py-1 it reads as a deliberate
+  // object. Taken from the status pills the product had already arrived at by
+  // hand, which were noticeably more comfortable than anything else -- the
+  // breathing room was what made them so, not their extra pixel of type.
+  label: "px-2.5 py-1",
   // Square-ish and centred, with a floor width so a 1-digit and a 3-digit
   // count are the same shape, and lining figures so the width does not shift
   // as the number changes.
   count: "h-[18px] min-w-[18px] justify-center px-1.5 tabular-nums",
   // The only kind that shouts. Caps need the letterspacing -- caps set tight
   // are harder to read than the sentence case they replaced.
-  eyebrow: "px-2 py-0.5 uppercase tracking-wider"
+  eyebrow: "px-2.5 py-1 uppercase tracking-wider"
 };
-function Badge({ tone = "neutral", kind = "label", children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+function Badge({ tone = "neutral", kind = "label", dot = false, children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "span",
     {
       style: TONE_STYLE[tone],
@@ -541,7 +546,10 @@ function Badge({ tone = "neutral", kind = "label", children, className }) {
         KIND[kind],
         className
       ),
-      children
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-current" }),
+        children
+      ]
     }
   );
 }