@bccampus/ui-components 0.9.15 → 0.9.16

package/dist/components/ui/banner.js

@@ -3,6 +3,7 @@ import { c as cva } from "../../_chunks/index2.js";
 import { c as cn } from "../../_chunks/utils.js";
 import { useState, useCallback } from "react";
 import { Button } from "./button.js";
+import { PageSection } from "./page-section.js";
 import { c as createLucideIcon } from "../../_chunks/createLucideIcon.js";
 const __iconNode$2 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
@@ -62,8 +63,9 @@ function Banner({
   }, [id, onDismiss]);
   if (dismissed) return null;
   return /* @__PURE__ */ jsxs(
-    "div",
+    PageSection,
     {
+      py: "none",
       "data-slot": "banner",
       id: `announcement-${id}`,
       className: cn(bannerVariants({ variant, size }), className),
@@ -72,15 +74,15 @@ function Banner({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("flex-auto flex flex-col justify-center items-center gap-2", {
+            className: cn("flex-auto flex flex-col justify-center items-center", {
               "items-start": children
             }),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex-auto flex justify-center items-center gap-2", children: [
                 variant === "alert" ? /* @__PURE__ */ jsx(TriangleAlert, { className: "size-5" }) : /* @__PURE__ */ jsx(Info, { className: "size-5" }),
-                /* @__PURE__ */ jsx("div", { className: cn({ "text-md font-semibold": size === "lg" }), children: title })
+                /* @__PURE__ */ jsx("div", { className: cn({ "text-md font-semibold": size === "lg" }), dangerouslySetInnerHTML: { __html: title } })
               ] }),
-              children && /* @__PURE__ */ jsx("div", { className: "pl-7", children })
+              children && /* @__PURE__ */ jsx("div", { className: "pl-7", dangerouslySetInnerHTML: { __html: children } })
             ]
           }
         ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.9.15",
+  "version": "0.9.16",
   "description": "BCcampus React components",
   "type": "module",
   "license": "UNLICENSED",
@@ -44,7 +44,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.575.0",
+    "lucide-react": "^0.576.0",
     "nanostores": "^1.1.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -56,7 +56,7 @@
     "@eslint/js": "^9.39.3",
     "@ladle/react": "^5.1.1",
     "@tailwindcss/vite": "^4.2.1",
-    "@types/node": "^24.10.14",
+    "@types/node": "^24.11.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.3",
@@ -65,7 +65,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "glob": "^13.0.6",
-    "globals": "^17.3.0",
+    "globals": "^17.4.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.56.1",
     "vite": "^7.3.1",

package/src/components/ui/banner.tsx

@@ -3,6 +3,7 @@ import { cn } from "@/lib/utils";
 import { useCallback, useState } from "react";
 import { Button } from "./button";
 import { Info, TriangleAlert, X } from "lucide-react";
+import { PageSection } from "./page-section";
 
 export type BannerVariantsProps = VariantProps<typeof bannerVariants>;
 export const bannerVariants = cva("flex flex-row items-start justify-between px-(--spacing-section) text-sm", {
@@ -50,22 +51,23 @@ export function Banner({
   if (dismissed) return null;
 
   return (
-    <div
+    <PageSection
+      py="none"
       data-slot="banner"
       id={`announcement-${id}`}
       className={cn(bannerVariants({ variant, size }), className)}
       {...props}
     >
       <div
-        className={cn("flex-auto flex flex-col justify-center items-center gap-2", {
+        className={cn("flex-auto flex flex-col justify-center items-center", {
           "items-start": children,
         })}
       >
         <div className="flex-auto flex justify-center items-center gap-2">
           {variant === "alert" ? <TriangleAlert className="size-5" /> : <Info className="size-5" />}
-          <div className={cn({ "text-md font-semibold": size === "lg" })}>{title}</div>
+          <div className={cn({ "text-md font-semibold": size === "lg" })} dangerouslySetInnerHTML={{ __html: title }} />
         </div>
-        {children && <div className="pl-7">{children}</div>}
+        {children && <div className="pl-7" dangerouslySetInnerHTML={{ __html: children }} />}
       </div>
       {dismissible && (
         <div>
@@ -83,6 +85,6 @@ export function Banner({
           </Button>
         </div>
       )}
-    </div>
+    </PageSection>
   );
 }