@ship-it-ui/ui 0.0.8 → 0.0.9

package/dist/index.cjs

@@ -343,11 +343,13 @@ function useOutsideClick(ref, handler, enabled = true) {
 var import_react7 = require("react");
 function useTheme() {
   const [theme, setThemeState] = (0, import_react7.useState)("dark");
+  const internalMutation = (0, import_react7.useRef)(false);
   const setTheme = (0, import_react7.useCallback)((next) => {
     if (typeof document === "undefined") {
       setThemeState(next);
       return;
     }
+    internalMutation.current = true;
     if (next === "light") {
       document.documentElement.setAttribute("data-theme", "light");
     } else {
@@ -362,6 +364,10 @@ function useTheme() {
     const initial = document.documentElement.getAttribute("data-theme");
     setThemeState(initial === "light" ? "light" : "dark");
     const observer = new MutationObserver(() => {
+      if (internalMutation.current) {
+        internalMutation.current = false;
+        return;
+      }
       const attr = document.documentElement.getAttribute("data-theme");
       setThemeState(attr === "light" ? "light" : "dark");
     });
@@ -1741,6 +1747,53 @@ AccordionContent.displayName = "AccordionContent";
 var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
 var import_react28 = require("react");
 
+// src/utils/color-override.ts
+var HEX = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var FUNCTIONAL = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\([^()]*(?:\([^()]*\)[^()]*)*\)$/;
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "transparent",
+  "currentColor",
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "red",
+  "green",
+  "blue",
+  "black",
+  "white",
+  "gray",
+  "grey",
+  "orange",
+  "yellow",
+  "purple",
+  "pink",
+  "brown",
+  "cyan",
+  "magenta"
+]);
+var isValid = (value) => {
+  const v = value.trim();
+  if (!v) return false;
+  if (typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports("color", v);
+  }
+  return HEX.test(v) || FUNCTIONAL.test(v) || KEYWORDS.has(v);
+};
+var warnIfInvalidColor = (value, component) => {
+  if (isValid(value)) return true;
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      `[${component}] Invalid color value "${value}". Falling back to the default variant. Use a hex, rgb/rgba, hsl, oklch, lab/lch, color(), color-mix(), or a CSS color keyword.`
+    );
+  }
+  return false;
+};
+var tintStyle = (color) => ({
+  background: `color-mix(in oklab, ${color}, transparent 85%)`,
+  color
+});
+
 // src/components/StatusDot/StatusDot.tsx
 var import_react27 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -1768,13 +1821,14 @@ var stateLabel = {
   sync: "Syncing",
   accent: "Active"
 };
-var StatusDot = (0, import_react27.forwardRef)(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
+var StatusDot = (0, import_react27.forwardRef)(function StatusDot2({ state = "ok", color, label, pulse, size = 8, className, ...props }, ref) {
+  const useColor = color && warnIfInvalidColor(color, "StatusDot");
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "span",
     {
       ref,
       role: label ? "status" : "img",
-      "aria-label": !label ? stateLabel[state] : void 0,
+      "aria-label": !label ? useColor ? "Status" : stateLabel[state] : void 0,
       className: cn("inline-flex items-center gap-[6px]", className),
       ...props,
       children: [
@@ -1783,11 +1837,15 @@ var StatusDot = (0, import_react27.forwardRef)(function StatusDot2({ state = "ok
           {
             className: cn(
               "inline-block rounded-full",
-              stateColor[state],
-              pulse && "animate-[ship-pulse-ring_1.6s_infinite]",
-              stateText[state]
+              !useColor && stateColor[state],
+              !useColor && stateText[state],
+              pulse && "animate-[ship-pulse-ring_1.6s_infinite]"
             ),
-            style: { width: size, height: size }
+            style: {
+              width: size,
+              height: size,
+              ...useColor ? { backgroundColor: color, color } : {}
+            }
           }
         ),
         label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-text-muted text-[12px]", children: label })
@@ -1822,10 +1880,12 @@ function hashHue(str) {
   for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) % 360;
   return h;
 }
-var Avatar = (0, import_react28.forwardRef)(function Avatar2({ name = "?", src, size = "md", status, initials, className, style, ...props }, ref) {
+var Avatar = (0, import_react28.forwardRef)(function Avatar2({ name = "?", src, size = "md", status, initials, color, className, style, ...props }, ref) {
   const dim = sizePx[size];
   const hue = hashHue(name);
   const computedInitials = initials ?? initialsFor(name);
+  const useColor = color && warnIfInvalidColor(color, "Avatar");
+  const fallbackBg = useColor ? color : `oklch(var(--color-avatar-fallback-l) var(--color-avatar-fallback-c) ${hue})`;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "span",
     {
@@ -1839,7 +1899,7 @@ var Avatar = (0, import_react28.forwardRef)(function Avatar2({ name = "?", src,
           {
             className: "border-border relative inline-flex h-full w-full shrink-0 overflow-hidden rounded-full border",
             style: {
-              background: src ? void 0 : `oklch(var(--color-avatar-fallback-l) var(--color-avatar-fallback-c) ${hue})`
+              background: src ? void 0 : fallbackBg
             },
             children: [
               src && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixAvatar.Image, { src, alt: name, className: "h-full w-full object-cover" }),
@@ -1907,6 +1967,16 @@ AvatarGroup.displayName = "AvatarGroup";
 var import_class_variance_authority6 = require("class-variance-authority");
 var import_react30 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
+var badgeStructural = (0, import_class_variance_authority6.cva)("inline-flex items-center font-sans leading-none whitespace-nowrap", {
+  variants: {
+    size: {
+      sm: "h-[18px] px-[6px] py-[1px] text-[10px] gap-1 rounded-full",
+      md: "h-[22px] px-2 py-[2px] text-[11px] gap-[5px] rounded-full",
+      lg: "h-[26px] px-[10px] py-[3px] text-[12px] gap-[6px] rounded-full"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
 var badgeStyles = (0, import_class_variance_authority6.cva)("inline-flex items-center font-sans leading-none whitespace-nowrap", {
   variants: {
     variant: {
@@ -1940,20 +2010,53 @@ var dotColorClass = {
   solid: "bg-bg"
 };
 var dotSize = { sm: "h-[5px] w-[5px]", md: "h-[6px] w-[6px]", lg: "h-[7px] w-[7px]" };
-var Badge = (0, import_react30.forwardRef)(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
+var Badge = (0, import_react30.forwardRef)(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, color, style, ...props }, ref) {
   const sz = size ?? "md";
-  const v = variant ?? "neutral";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
-    dot && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const useColor = color && warnIfInvalidColor(color, "Badge");
+  if (useColor) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "span",
       {
-        "aria-hidden": true,
-        className: cn("inline-block rounded-full", dotSize[sz], dotColorClass[v])
+        ref,
+        className: cn(badgeStructural({ size }), className),
+        style: { ...tintStyle(color), ...style },
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn("inline-block rounded-full", dotSize[sz]),
+              style: { background: color }
+            }
+          ),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-flex leading-none", children: icon }),
+          children
+        ]
       }
-    ),
-    icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-flex leading-none", children: icon }),
-    children
-  ] });
+    );
+  }
+  const v = variant ?? "neutral";
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "span",
+    {
+      ref,
+      className: cn(badgeStyles({ variant, size }), className),
+      style,
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn("inline-block rounded-full", dotSize[sz], dotColorClass[v])
+          }
+        ),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-flex leading-none", children: icon }),
+        children
+      ]
+    }
+  );
 });
 Badge.displayName = "Badge";
 
@@ -2101,18 +2204,23 @@ StatCard.displayName = "StatCard";
 // src/components/Chip/Chip.tsx
 var import_react33 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Chip = (0, import_react33.forwardRef)(function Chip2({ icon, onRemove, density = "comfortable", className, children, ...props }, ref) {
+var Chip = (0, import_react33.forwardRef)(function Chip2({ icon, onRemove, density = "comfortable", color, className, children, style, ...props }, ref) {
   const isTouch = density === "touch";
+  const useColor = color && warnIfInvalidColor(color, "Chip");
+  const structural = cn(
+    "inline-flex items-center gap-[6px] font-sans rounded-full border",
+    isTouch ? "text-m-mono h-8 py-[5px] pr-[6px] pl-3" : "h-[26px] py-[4px] pr-1 pl-[10px] text-[12px]"
+  );
+  const defaultPaint = "bg-panel-2 text-text border-border";
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "span",
     {
       ref,
-      className: cn(
-        "inline-flex items-center gap-[6px] font-sans",
-        isTouch ? "text-m-mono h-8 py-[5px] pr-[6px] pl-3" : "h-[26px] py-[4px] pr-1 pl-[10px] text-[12px]",
-        "bg-panel-2 text-text border-border rounded-full border",
-        className
-      ),
+      className: cn(structural, !useColor && defaultPaint, className),
+      style: {
+        ...useColor ? { ...tintStyle(color), borderColor: "transparent" } : {},
+        ...style
+      },
       ...props,
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn("text-text-dim inline-flex", isTouch ? "text-[12px]" : "text-[10px]"), children: icon }),
@@ -2176,8 +2284,10 @@ var Rating = (0, import_react35.forwardRef)(function Rating2({
   readOnly = false,
   className,
   "aria-label": ariaLabel,
+  color,
   ...props
 }, ref) {
+  const useColor = color && warnIfInvalidColor(color, "Rating");
   const [current, setCurrent] = useControllableState({
     value,
     defaultValue: defaultValue ?? 0,
@@ -2231,10 +2341,19 @@ var Rating = (0, import_react35.forwardRef)(function Rating2({
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "div",
             {
+              "data-filled-stars": true,
               className: "pointer-events-none absolute inset-0 inline-flex items-center gap-0.5 overflow-hidden",
-              style: { width: `${fillPct}%` },
+              style: { width: `${fillPct}%`, ...useColor ? { color } : {} },
               "aria-hidden": true,
-              children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons4.IconGlyph, { name: "star", size: px, className: "text-rating shrink-0" }, i))
+              children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                import_icons4.IconGlyph,
+                {
+                  name: "star",
+                  size: px,
+                  className: cn("shrink-0", !useColor && "text-rating")
+                },
+                i
+              ))
             }
           )
         ]
@@ -2249,6 +2368,7 @@ var Rating = (0, import_react35.forwardRef)(function Rating2({
       "aria-label": ariaLabel ?? "Rating",
       tabIndex: -1,
       className: cn("inline-flex items-center gap-0.5", className),
+      style: useColor ? { color } : void 0,
       onKeyDown: handleKey,
       ...props,
       children: Array.from({ length: max }).map((_, i) => {
@@ -2272,8 +2392,8 @@ var Rating = (0, import_react35.forwardRef)(function Rating2({
               "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm",
               "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
               "transition-colors duration-(--duration-micro)",
-              filled ? "text-rating" : "text-rating-dim",
-              "hover:text-rating"
+              useColor ? filled ? "" : "opacity-30" : filled ? "text-rating" : "text-rating-dim",
+              !useColor && "hover:text-rating"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons4.IconGlyph, { name: "star", size: px })
           },
@@ -2399,17 +2519,20 @@ SkeletonGroup.displayName = "SkeletonGroup";
 // src/components/Tag/Tag.tsx
 var import_react38 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Tag = (0, import_react38.forwardRef)(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
+var Tag = (0, import_react38.forwardRef)(function Tag2({ onRemove, icon, size = 22, color, className, children, style, ...props }, ref) {
+  const useColor = color && warnIfInvalidColor(color, "Tag");
+  const structural = "inline-flex items-center gap-[6px] px-2 py-[3px] font-sans text-[11px] rounded-xs border";
+  const defaultPaint = "bg-panel-2 text-text border-border";
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "span",
     {
       ref,
-      className: cn(
-        "inline-flex items-center gap-[6px] px-2 py-[3px] font-sans text-[11px]",
-        "bg-panel-2 text-text border-border rounded-xs border",
-        className
-      ),
-      style: { height: size },
+      className: cn(structural, !useColor && defaultPaint, className),
+      style: {
+        height: size,
+        ...useColor ? { ...tintStyle(color), borderColor: "transparent" } : {},
+        ...style
+      },
       ...props,
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-text-dim inline-flex", children: icon }),
@@ -2538,18 +2661,25 @@ var DialogContent = (0, import_react40.forwardRef)(function DialogContent2({ cla
 });
 DialogContent.displayName = "DialogContent";
 function Dialog({ title, description, footer, width, children, ...rootProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DialogContent, { width, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      RadixDialog.Title,
-      {
-        className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
-        children: title
-      }
-    ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
-    children,
-    footer && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mt-5 flex justify-end gap-2", children: footer })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    DialogContent,
+    {
+      width,
+      ...description ? {} : { "aria-describedby": void 0 },
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          RadixDialog.Title,
+          {
+            className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+        children,
+        footer && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+      ]
+    }
+  ) });
 }
 
 // src/components/Dialog/Drawer.tsx
@@ -2667,7 +2797,13 @@ var AlertDialog = (0, import_react43.forwardRef)(function AlertDialog2({ title,
               children: title
             }
           ),
-          description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }) : (
+            // Radix AlertDialog requires a description for screen-reader users
+            // and warns in dev mode when one is missing. When the caller opts
+            // out of a visible description, fall back to the title text in a
+            // visually-hidden Description so the a11y contract is still met.
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixAlert.Description, { className: "sr-only", children: title })
+          ),
           children,
           footer && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mt-5 flex justify-end gap-2", children: footer })
         ]
@@ -3682,7 +3818,7 @@ function DataTable(props) {
       return next;
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("table", { ref, className: cn("relative w-full border-collapse text-[12px]", className), children: [
     caption && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("caption", { className: "sr-only", children: caption }),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { className: cn("bg-panel-2", stickyHeader && "z-raised sticky top-0"), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("tr", { children: [
       selectable && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -6705,6 +6841,7 @@ Topbar.displayName = "Topbar";
 
 // src/patterns/Tree/Tree.tsx
 var import_react87 = require("react");
+var import_react_dom = require("react-dom");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var EMPTY_SET2 = /* @__PURE__ */ new Set();
 function flattenVisible(items, expanded, level, parentId, out) {
@@ -6772,8 +6909,8 @@ var Tree = (0, import_react87.forwardRef)(function Tree2({
   }, []);
   const moveActive = (0, import_react87.useCallback)(
     (id) => {
-      setActiveId(id);
-      queueMicrotask(() => focusItem(id));
+      (0, import_react_dom.flushSync)(() => setActiveId(id));
+      focusItem(id);
     },
     [focusItem]
   );
@@ -7044,17 +7181,30 @@ var WizardDialog = (0, import_react88.forwardRef)(function WizardDialog2({
       goNext();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(DialogContent, { ref, width, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WizardTitle, { children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WizardDescription, { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mb-5", children: body }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex justify-end gap-2", children: [
-      cancelLabel && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+    DialogContent,
+    {
+      ref,
+      width,
+      ...description ? {} : { "aria-describedby": void 0 },
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WizardTitle, { children: title }) : (
+          // Radix Dialog requires a Title for assistive tech and warns in dev
+          // mode without one. Fall back to a visually-hidden generic title so
+          // the contract is met even when no title prop is supplied.
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(RadixDialog6.Title, { className: "sr-only", children: "Wizard" })
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(WizardDescription, { children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mb-5", children: body }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex justify-end gap-2", children: [
+          cancelLabel && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
+        ] })
+      ]
+    }
+  ) });
 });
 function WizardTitle({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(RadixDialog6.Title, { className: "mb-2 text-[16px] font-medium", children });