@bizapps/ui 1.12.2 → 1.13.0

package/dist/main.cjs

@@ -2716,7 +2716,7 @@ function DialogTitle({ className, ...props }) {
     radixUi.Dialog.Title,
     {
       "data-slot": "dialog-title",
-      className: cn("font-heading text-lg leading-none font-bold", className),
+      className: cn("font-heading text-lg leading-none font-bold wrap-anywhere", className),
       ...props
     }
   );
@@ -2730,7 +2730,7 @@ function DialogDescription({
     {
       "data-slot": "dialog-description",
       className: cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+        "text-muted-foreground *:[a]:hover:text-foreground text-sm wrap-anywhere *:[a]:underline *:[a]:underline-offset-3",
         className
       ),
       ...props
@@ -2897,7 +2897,7 @@ function AlertDialogTitle({
     radixUi.AlertDialog.Title,
     {
       "data-slot": "alert-dialog-title",
-      className: cn("font-heading text-lg font-bold", className),
+      className: cn("font-heading text-lg font-bold wrap-anywhere", className),
       ...props
     }
   );
@@ -2911,7 +2911,7 @@ function AlertDialogDescription({
     {
       "data-slot": "alert-dialog-description",
       className: cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-xs text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+        "text-muted-foreground *:[a]:hover:text-foreground text-xs text-balance wrap-anywhere md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
         className
       ),
       ...props
@@ -10592,16 +10592,29 @@ function filterApps(apps, query) {
     (app) => `${app.label} ${app.description ?? ""}`.toLowerCase().includes(needle)
   );
 }
+var toneClasses = {
+  green: "bg-green-100 text-green-800",
+  yellow: "bg-yellow-200 text-yellow-800",
+  navy: "bg-main-blue-primary/10 text-main-blue-primary",
+  orange: "bg-orange-100 text-orange-800",
+  purple: "bg-purple-100 text-purple-600",
+  grey: "bg-light-200 text-main-grey",
+  // Remaining apps catalogue colours, with the catalogue's own tile and ink pairs.
+  // They have no DS scale, so they resolve to the Tailwind default palette.
+  sky: "bg-sky-100 text-sky-600",
+  rose: "bg-rose-100 text-rose-600",
+  teal: "bg-teal-100 text-teal-600",
+  indigo: "bg-indigo-100 text-indigo-600",
+  slate: "bg-slate-100 text-slate-500",
+  fuchsia: "bg-fuchsia-100 text-fuchsia-600"
+};
+function getAppHubTone(app) {
+  if (app.locked || app.tone === void 0 || !Object.hasOwn(toneClasses, app.tone)) return "grey";
+  return app.tone;
+}
 var appHubIconVariants = classVarianceAuthority.cva("relative flex shrink-0 items-center justify-center", {
   variants: {
-    tone: {
-      green: "bg-green-100 text-green-800",
-      yellow: "bg-yellow-200 text-yellow-800",
-      navy: "bg-main-blue-primary/10 text-main-blue-primary",
-      orange: "bg-orange-100 text-orange-800",
-      purple: "bg-purple-100 text-purple-600",
-      grey: "bg-light-200 text-main-grey"
-    },
+    tone: toneClasses,
     size: {
       tile: "size-12 rounded-2xl [&_svg]:size-5",
       row: "size-9 rounded-xl [&_svg]:size-4.5",
@@ -10650,7 +10663,7 @@ function AppHubCounter({ count, className }) {
 function AppHubTile({ app, current = false }) {
   const { labels, appName } = useAppHubContext();
   const name = getAppAccessibleName(app, labels, appName);
-  const tone = app.tone ?? "grey";
+  const tone = getAppHubTone(app);
   return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
       AppHubLink,
@@ -10738,7 +10751,7 @@ function AppHubRow({
       {
         "aria-hidden": "true",
         className: appHubIconVariants({
-          tone: locked ? "grey" : app.tone ?? "grey",
+          tone: getAppHubTone(app),
           size: variant === "panel" ? "row" : "sheet"
         }),
         children: app.icon