@assure-one/design-system 1.18.0 → 1.19.0

package/dist/index.d.ts

@@ -1192,7 +1192,13 @@ interface LogoProps {
     className?: string;
     iconClassName?: string;
     textClassName?: string;
-    /** Product suffix rendered after "Assure". Pass `null` to render just "Assure". Defaults to "Pro" for backwards compatibility. */
+    /**
+     * Product suffix rendered after "Assure" (e.g. "Pro", "Audit"). Pass `null`
+     * to render just "Assure". A few products are standalone brands whose
+     * wordmark is the complete identity (e.g. "Teams" → myCPE Teams) — those
+     * render their own name with no "Assure" prefix. Defaults to "Pro" for
+     * backwards compatibility.
+     */
     productName?: string | null;
     /** When true, render on dark/brand surfaces (white "Assure" + lighter suffix). */
     inverted?: boolean;
@@ -3686,6 +3692,15 @@ interface SidebarBrandSwitcherExtra {
     id: string;
     /** Left glyph (a consumer-owned mark/tile). Vendor color belongs here. */
     glyph?: React$1.ReactNode;
+    /**
+     * Full-width identity node rendered in place of the `glyph` + `name` — e.g. a
+     * product wordmark lockup (`<Logo href={null} …>`) — mirroring
+     * `SidebarBrandSwitcherItem.identity`. Use it so an external launcher row
+     * reads at the same size and on the same line as the suite product rows.
+     * When present, `tagline` still renders beneath it and `glyph`/`name` are
+     * omitted. Consumer-owned and framework-neutral like the rest of this slot.
+     */
+    identity?: React$1.ReactNode;
     /** Primary display name, e.g. "myCPE One". */
     name: React$1.ReactNode;
     /** Sub-line under the name. */
@@ -3752,9 +3767,10 @@ interface SidebarBrandSwitcherProps {
     /** Extra classes applied to the dropdown content panel. */
     contentClassName?: string;
     /**
-     * Extra classes applied to the current row and each "Switch to" product row
-     * (not to `extras`). Lets a consumer reproduce bespoke row padding/height via
-     * tailwind-merge without the DS owning that geometry.
+     * Extra classes applied to the current row, each "Switch to" product row, and
+     * each `extras` launcher row. Lets a consumer reproduce bespoke row
+     * padding/height via tailwind-merge without the DS owning that geometry, and
+     * keeps launcher rows aligned with the product rows.
      */
     rowClassName?: string;
     /**

package/dist/index.js

@@ -5885,13 +5885,15 @@ var productLogoAssets = {
   Pro: { src: "/brand/assure-pro.svg", width: 384, height: 90 },
   Audit: { src: "/brand/assure-audit.svg", width: 441, height: 90 },
   Books: { src: "/brand/assure-books.svg", width: 470, height: 90 },
-  Tax: { src: "/brand/assure-tax.svg", width: 374, height: 90 }
+  Tax: { src: "/brand/assure-tax.svg", width: 374, height: 90 },
+  Teams: { src: "/brand/mycpe-teams.svg", width: 221, height: 49 }
 };
 var productMarkAssets = {
   Pro: { src: "/brand/assure-pro-mark.svg", width: 55, height: 48 },
   Audit: { src: "/brand/assure-audit-mark.svg", width: 55, height: 48 },
   Books: { src: "/brand/assure-books-mark.svg", width: 55, height: 48 },
-  Tax: { src: "/brand/assure-tax-mark.svg", width: 55, height: 48 }
+  Tax: { src: "/brand/assure-tax-mark.svg", width: 55, height: 48 },
+  Teams: { src: "/brand/mycpe-teams-mark.svg", width: 26, height: 31 }
 };
 var productGlyphs = {
   Pro: AssureProBrandIcon,
@@ -5899,6 +5901,9 @@ var productGlyphs = {
   Books: AssureBooksBrandIcon,
   Tax: AssureTaxBrandIcon
 };
+var standaloneBrands = {
+  Teams: "myCPE Teams"
+};
 function Logo({
   size = "md",
   href = "/",
@@ -5910,7 +5915,9 @@ function Logo({
   inverted = false
 }) {
   const s = sizeStyles[size];
-  const ariaLabel = productName ? `Assure ${productName}` : "Assure";
+  const standaloneLabel = productName ? standaloneBrands[productName] : void 0;
+  const isStandalone = Boolean(standaloneLabel);
+  const ariaLabel = standaloneLabel ?? (productName ? `Assure ${productName}` : "Assure");
   const asset = productName ? productLogoAssets[productName] : void 0;
   const markAsset = productName ? productMarkAssets[productName] : void 0;
   const Glyph = productName ? productGlyphs[productName] : void 0;
@@ -5950,7 +5957,7 @@ function Logo({
         children: "A"
       }
     ) }),
-    showText && /* @__PURE__ */ jsxs(
+    showText && /* @__PURE__ */ jsx(
       "span",
       {
         className: cn(
@@ -5960,13 +5967,13 @@ function Logo({
           asset && "sr-only",
           textClassName
         ),
-        children: [
+        children: isStandalone ? /* @__PURE__ */ jsx("span", { children: standaloneLabel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { children: "Assure" }),
           productName && /* @__PURE__ */ jsxs(Fragment, { children: [
             " ",
             /* @__PURE__ */ jsx("span", { className: cn("font-medium", inverted ? "text-[#d8cfff]" : "text-pro-fg"), children: productName })
           ] })
-        ]
+        ] })
       }
     )
   ] });
@@ -14139,7 +14146,14 @@ var SidebarBrandSwitcher = React38.forwardRef(
                       },
                       p.id
                     )),
-                    extras?.map((extra) => /* @__PURE__ */ jsx(SidebarBrandSwitcherExtraRow, { extra }, extra.id))
+                    extras?.map((extra) => /* @__PURE__ */ jsx(
+                      SidebarBrandSwitcherExtraRow,
+                      {
+                        extra,
+                        rowClassName
+                      },
+                      extra.id
+                    ))
                   ]
                 }
               )
@@ -14246,20 +14260,26 @@ function SidebarBrandSwitcherOtherRow({
     }
   );
 }
-function SidebarBrandSwitcherExtraRow({ extra }) {
-  return /* @__PURE__ */ jsxs(
+function SidebarBrandSwitcherExtraRow({
+  extra,
+  rowClassName
+}) {
+  return /* @__PURE__ */ jsx(
     DropdownMenuItem,
     {
       onSelect: () => extra.onSelect(),
       "data-item": extra.dataAttr ?? extra.id,
-      className: "flex items-center gap-2.5 rounded-md px-2 py-1.5",
-      children: [
+      className: cn("flex items-center gap-2.5 rounded-md px-2 py-1.5", rowClassName),
+      children: extra.identity ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+        extra.identity,
+        extra.tagline && /* @__PURE__ */ jsx("span", { className: "text-fg-3 text-[11px] leading-tight", children: extra.tagline })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         extra.glyph,
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
           /* @__PURE__ */ jsx("span", { className: "text-fg text-[13px] font-medium", children: extra.name }),
           extra.tagline && /* @__PURE__ */ jsx("span", { className: "text-fg-3 text-[11px]", children: extra.tagline })
         ] })
-      ]
+      ] })
     }
   );
 }