@assure-one/design-system 1.17.0 → 1.17.2

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React38 from 'react';
-import { forwardRef, useId, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, createContext, useContext } from 'react';
+import { forwardRef, useId, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, createContext, Fragment as Fragment$1, useContext } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -5834,7 +5834,8 @@ LoadingRows.displayName = "LoadingRows";
 var sizeStyles = {
   sm: { icon: 20, text: "text-sm", gap: "gap-2", assetHeight: 24 },
   md: { icon: 24, text: "text-[17px]", gap: "gap-2.5", assetHeight: 30 },
-  lg: { icon: 32, text: "text-xl", gap: "gap-3", assetHeight: 40 }
+  lg: { icon: 32, text: "text-xl", gap: "gap-3", assetHeight: 40 },
+  xl: { icon: 40, text: "text-2xl", gap: "gap-3.5", assetHeight: 48 }
 };
 var productLogoAssets = {
   Pro: { src: "/brand/assure-pro.svg", width: 384, height: 90 },
@@ -5869,69 +5870,66 @@ function Logo({
   const asset = productName ? productLogoAssets[productName] : void 0;
   const markAsset = productName ? productMarkAssets[productName] : void 0;
   const Glyph = productName ? productGlyphs[productName] : void 0;
-  return /* @__PURE__ */ jsxs(
-    Link,
-    {
-      href,
-      className: cn("inline-flex items-center", s.gap, className),
-      "aria-label": ariaLabel,
-      children: [
-        asset && showText ? /* @__PURE__ */ jsx(
-          Image2,
-          {
-            src: asset.src,
-            alt: "",
-            width: asset.width,
-            height: asset.height,
-            priority: true,
-            className: cn("h-auto flex-shrink-0", inverted && "brightness-0 invert", iconClassName),
-            style: { width: Math.round(asset.width / asset.height * s.assetHeight) }
-          }
-        ) : markAsset ? /* @__PURE__ */ jsx(
-          Image2,
-          {
-            src: markAsset.src,
-            alt: "",
-            width: markAsset.width,
-            height: markAsset.height,
-            priority: true,
-            className: cn("h-auto flex-shrink-0", inverted && "brightness-0 invert", iconClassName),
-            style: { width: Math.round(markAsset.width / markAsset.height * s.icon) }
-          }
-        ) : /* @__PURE__ */ jsx(Fragment, { children: Glyph ? /* @__PURE__ */ jsx(Glyph, { size: s.icon, "aria-hidden": "true", className: iconClassName }) : /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: cn(
-              "bg-pro-fg grid shrink-0 place-items-center rounded-[5px] text-[10px] font-bold text-white",
-              iconClassName
-            ),
-            style: { width: s.icon, height: s.icon },
-            children: "A"
-          }
-        ) }),
-        showText && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: cn(
-              "font-display font-semibold tracking-[-0.025em]",
-              s.text,
-              inverted ? "text-white" : "text-fg",
-              asset && "sr-only",
-              textClassName
-            ),
-            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 })
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
+  const wrapperClassName = cn("inline-flex items-center", s.gap, className);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    asset && showText ? /* @__PURE__ */ jsx(
+      Image2,
+      {
+        src: asset.src,
+        alt: "",
+        width: asset.width,
+        height: asset.height,
+        priority: true,
+        className: cn("h-auto flex-shrink-0", inverted && "brightness-0 invert", iconClassName),
+        style: { width: Math.round(asset.width / asset.height * s.assetHeight) }
+      }
+    ) : markAsset ? /* @__PURE__ */ jsx(
+      Image2,
+      {
+        src: markAsset.src,
+        alt: "",
+        width: markAsset.width,
+        height: markAsset.height,
+        priority: true,
+        className: cn("h-auto flex-shrink-0", inverted && "brightness-0 invert", iconClassName),
+        style: { width: Math.round(markAsset.width / markAsset.height * s.icon) }
+      }
+    ) : /* @__PURE__ */ jsx(Fragment, { children: Glyph ? /* @__PURE__ */ jsx(Glyph, { size: s.icon, "aria-hidden": "true", className: iconClassName }) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "bg-pro-fg grid shrink-0 place-items-center rounded-[5px] text-[10px] font-bold text-white",
+          iconClassName
+        ),
+        style: { width: s.icon, height: s.icon },
+        children: "A"
+      }
+    ) }),
+    showText && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "font-display font-semibold tracking-[-0.025em]",
+          s.text,
+          inverted ? "text-white" : "text-fg",
+          asset && "sr-only",
+          textClassName
+        ),
+        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 })
+          ] })
+        ]
+      }
+    )
+  ] });
+  if (href === null) {
+    return /* @__PURE__ */ jsx("span", { className: wrapperClassName, children: content });
+  }
+  return /* @__PURE__ */ jsx(Link, { href, className: wrapperClassName, "aria-label": ariaLabel, children: content });
 }
 var MasterDetailLayout = forwardRef(
   function MasterDetailLayout2({
@@ -11430,17 +11428,29 @@ var Questions = forwardRef(function Questions2({
   value = "",
   values = [],
   placeholder,
+  help,
   addressValue = {},
+  nameValue = {},
+  showSuffix = true,
   tableColumns = [],
   tableRows = [],
+  labeledColumns = [],
+  labeledRows = [],
+  labeledValue = {},
   files = [],
   accept,
   maxSize,
   multiple,
   currencySymbol = "$",
+  min = 0,
+  max,
+  step = 1,
+  countLabel,
   onValueChange,
   onValuesChange,
   onAddressChange,
+  onNameChange,
+  onLabeledChange,
   onTableRowsChange,
   onFilesSelected,
   className,
@@ -11457,21 +11467,36 @@ var Questions = forwardRef(function Questions2({
   const updateAddress = (key, nextValue) => {
     onAddressChange?.({ ...addressValue, [key]: nextValue });
   };
+  const updateName = (key, nextValue) => {
+    onNameChange?.({ ...nameValue, [key]: nextValue });
+  };
+  const updateCell = (rowKey, colKey, nextValue) => {
+    onLabeledChange?.({
+      ...labeledValue,
+      [rowKey]: { ...labeledValue[rowKey] ?? {}, [colKey]: nextValue }
+    });
+  };
   const updateRow = (rowIndex, key, nextValue) => {
     onTableRowsChange?.(
       tableRows.map((row, index2) => index2 === rowIndex ? { ...row, [key]: nextValue } : row)
     );
   };
+  const emptyRow = () => tableColumns.reduce((row, column) => ({ ...row, [column.key]: "" }), {});
   const addRow = () => {
-    const emptyRow = tableColumns.reduce(
-      (row, column) => ({ ...row, [column.key]: "" }),
-      {}
-    );
-    onTableRowsChange?.([...tableRows, emptyRow]);
+    onTableRowsChange?.([...tableRows, emptyRow()]);
   };
   const removeRow = (rowIndex) => {
     onTableRowsChange?.(tableRows.filter((_, index2) => index2 !== rowIndex));
   };
+  const setRowCount = (nextCount) => {
+    const clamped = Math.max(min, max != null ? Math.min(nextCount, max) : nextCount);
+    if (clamped > tableRows.length) {
+      const added = Array.from({ length: clamped - tableRows.length }, emptyRow);
+      onTableRowsChange?.([...tableRows, ...added]);
+    } else if (clamped < tableRows.length) {
+      onTableRowsChange?.(tableRows.slice(0, clamped));
+    }
+  };
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -11505,6 +11530,7 @@ var Questions = forwardRef(function Questions2({
                   children: title
                 }
               ),
+              help && /* @__PURE__ */ jsx(HelpTip, { title: help.title ?? title, body: help.body }),
               required && /* @__PURE__ */ jsx("span", { className: "bg-pro-bg text-pro-fg rounded-full px-2 py-0.5 text-[11px] font-bold", children: "Required" })
             ] }),
             description && type !== "consent-checkbox" && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-1 text-[13px] leading-5", children: description })
@@ -11575,6 +11601,17 @@ var Questions = forwardRef(function Questions2({
             className: "h-11 rounded-[12px] text-[14px]"
           }
         ),
+        type === "number-stepper" && /* @__PURE__ */ jsx(
+          NumberStepper,
+          {
+            value: Number(value) || 0,
+            onValueChange: (next) => onValueChange?.(String(next)),
+            min,
+            max,
+            step,
+            ariaLabel: title
+          }
+        ),
         type === "currency" && /* @__PURE__ */ jsx(
           Input,
           {
@@ -11719,6 +11756,89 @@ var Questions = forwardRef(function Questions2({
             }
           )
         ] }),
+        type === "name" && /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-6", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: nameValue.first ?? "",
+              onChange: (event) => updateName("first", event.target.value),
+              placeholder: "First name",
+              "aria-label": `${title} first name`,
+              className: "h-11 rounded-[12px] text-[14px] sm:col-span-2"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: nameValue.middle ?? "",
+              onChange: (event) => updateName("middle", event.target.value),
+              placeholder: "Middle",
+              "aria-label": `${title} middle name`,
+              className: "h-11 rounded-[12px] text-[14px] sm:col-span-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: nameValue.last ?? "",
+              onChange: (event) => updateName("last", event.target.value),
+              placeholder: "Last name",
+              "aria-label": `${title} last name`,
+              className: cn(
+                "h-11 rounded-[12px] text-[14px]",
+                showSuffix ? "sm:col-span-2" : "sm:col-span-3"
+              )
+            }
+          ),
+          showSuffix && /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: nameValue.suffix ?? "",
+              onChange: (event) => updateName("suffix", event.target.value),
+              placeholder: "Suffix",
+              "aria-label": `${title} suffix`,
+              className: "h-11 rounded-[12px] text-[14px] sm:col-span-1"
+            }
+          )
+        ] }),
+        type === "labeled-table" && /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "table",
+            "aria-label": title,
+            className: "grid min-w-[560px] gap-2",
+            style: {
+              gridTemplateColumns: `minmax(120px,max-content) ${labeledColumns.map((column) => `minmax(0, ${column.width ?? 1}fr)`).join(" ")}`
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+              labeledColumns.map((column) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-fg-3 flex items-end px-1 text-[12px] font-semibold",
+                  children: column.title
+                },
+                column.key
+              )),
+              labeledRows.map((row) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-fg flex items-center text-[13px] font-semibold", children: row.title }),
+                labeledColumns.map((column) => /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: column.inputType === "date" ? "date" : "text",
+                    value: labeledValue[row.key]?.[column.key] ?? "",
+                    onChange: (event) => updateCell(row.key, column.key, event.target.value),
+                    "aria-label": `${title} ${row.title} ${column.title}`,
+                    className: "h-11 rounded-[12px] text-[14px]",
+                    inputMode: column.inputType === "number" || column.inputType === "currency" ? "decimal" : void 0,
+                    prefixIcon: column.inputType === "currency" ? /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: currencySymbol }) : void 0
+                  },
+                  column.key
+                ))
+              ] }, row.key))
+            ]
+          }
+        ) }),
         type === "file-upload" && /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
           /* @__PURE__ */ jsx(
             FileUpload,
@@ -11740,6 +11860,20 @@ var Questions = forwardRef(function Questions2({
           )) })
         ] }),
         (type === "table" || type === "repeater") && /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+          countLabel && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-fg text-[13px] font-semibold", children: countLabel }),
+            /* @__PURE__ */ jsx(
+              NumberStepper,
+              {
+                value: tableRows.length,
+                onValueChange: setRowCount,
+                min,
+                max,
+                step,
+                ariaLabel: countLabel
+              }
+            )
+          ] }),
           tableRows.map((row, rowIndex) => /* @__PURE__ */ jsxs("div", { className: "border-rule bg-surface-2 rounded-[16px] border p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [
               /* @__PURE__ */ jsxs("span", { className: "text-fg text-[13px] font-semibold", children: [
@@ -11747,7 +11881,7 @@ var Questions = forwardRef(function Questions2({
                 " ",
                 rowIndex + 1
               ] }),
-              tableRows.length > 1 && /* @__PURE__ */ jsx(
+              !countLabel && tableRows.length > 1 && /* @__PURE__ */ jsx(
                 Button,
                 {
                   type: "button",
@@ -11774,7 +11908,7 @@ var Questions = forwardRef(function Questions2({
               column.key
             )) })
           ] }, rowIndex)),
-          /* @__PURE__ */ jsxs(
+          !countLabel && /* @__PURE__ */ jsxs(
             Button,
             {
               type: "button",
@@ -11855,25 +11989,7 @@ function QuestionOptionButton({
         ),
         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
           /* @__PURE__ */ jsx("span", { className: cn("truncate font-bold", compact ? "text-[13px]" : "text-[15px]"), children: option.label }),
-          option.helpText && /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: cn("inline-flex shrink-0 cursor-help", "text-pro-fg"), children: /* @__PURE__ */ jsx(HelpCircleIcon, { size: 14, "aria-hidden": "true" }) }) }),
-            /* @__PURE__ */ jsxs(
-              TooltipContent,
-              {
-                side: "top",
-                align: "center",
-                sideOffset: 12,
-                className: cn(
-                  "border-rule bg-surface shadow-pop relative max-w-[352px] rounded-[7px] p-5 text-left",
-                  "after:border-rule after:bg-surface after:absolute after:top-full after:left-1/2 after:size-4 after:-translate-x-1/2 after:-translate-y-1/2 after:rotate-45 after:border-r after:border-b after:content-['']"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-fg text-[15px] leading-5 font-bold", children: option.label }),
-                  /* @__PURE__ */ jsx("p", { className: "text-fg-2 mt-3 text-[14px] leading-6", children: option.helpText })
-                ]
-              }
-            )
-          ] })
+          option.helpText && /* @__PURE__ */ jsx(HelpTip, { title: option.label, body: option.helpText })
         ] }),
         option.formLabel && !compact && /* @__PURE__ */ jsx(
           "span",
@@ -11894,6 +12010,90 @@ function formatBytes2(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function HelpTip({ title, body }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "text-pro-fg inline-flex shrink-0 cursor-help", children: /* @__PURE__ */ jsx(HelpCircleIcon, { size: 14, "aria-hidden": "true" }) }) }),
+    /* @__PURE__ */ jsxs(
+      TooltipContent,
+      {
+        side: "top",
+        align: "center",
+        sideOffset: 12,
+        className: cn(
+          "border-rule bg-surface shadow-pop relative max-w-[352px] rounded-[7px] p-5 text-left",
+          "after:border-rule after:bg-surface after:absolute after:top-full after:left-1/2 after:size-4 after:-translate-x-1/2 after:-translate-y-1/2 after:rotate-45 after:border-r after:border-b after:content-['']"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "text-fg text-[15px] leading-5 font-bold", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-fg-2 mt-3 text-[14px] leading-6", children: body })
+        ]
+      }
+    )
+  ] });
+}
+function NumberStepper({
+  value,
+  onValueChange,
+  min = 0,
+  max,
+  step = 1,
+  ariaLabel
+}) {
+  const clamp = (next) => Math.max(min, max != null ? Math.min(next, max) : next);
+  const current = clamp(Number.isFinite(value) ? value : min);
+  const atMin = current <= min;
+  const atMax = max != null && current >= max;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "inline-flex items-center gap-2",
+      role: "spinbutton",
+      "aria-valuenow": current,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "icon-sm",
+            onClick: () => onValueChange(clamp(current - step)),
+            disabled: atMin,
+            "aria-label": "Decrease",
+            children: /* @__PURE__ */ jsx(MinusIcon, { size: 14, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: String(current),
+            onChange: (event) => {
+              const parsed = Number(event.target.value.replace(/[^0-9-]/g, ""));
+              onValueChange(clamp(Number.isFinite(parsed) ? parsed : min));
+            },
+            inputMode: "numeric",
+            "aria-label": ariaLabel,
+            className: "h-11 w-14 rounded-[12px] text-center text-[14px] tabular-nums"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "icon-sm",
+            onClick: () => onValueChange(clamp(current + step)),
+            disabled: atMax,
+            "aria-label": "Increase",
+            children: /* @__PURE__ */ jsx(PlusIcon, { size: 14, "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
 function AiSpark({ size = 16, className }) {
   const id = useId();
   return /* @__PURE__ */ jsxs(
@@ -13802,6 +14002,8 @@ var SidebarBrandSwitcher = React38.forwardRef(
     current,
     items,
     onLaunch,
+    extras,
+    isLaunching,
     currentSectionLabel = "Currently using",
     switchSectionLabel = "Switch to",
     menuLabel = "Suite",
@@ -13811,6 +14013,7 @@ var SidebarBrandSwitcher = React38.forwardRef(
     className,
     triggerClassName,
     contentClassName,
+    rowClassName,
     trailing
   }, ref) {
     const [open, setOpen] = React38.useState(false);
@@ -13871,7 +14074,14 @@ var SidebarBrandSwitcher = React38.forwardRef(
                   children: [
                     /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "px-2 pt-1 pb-1.5", children: menuLabel }),
                     /* @__PURE__ */ jsx(SidebarBrandSwitcherSectionLabel, { children: currentSectionLabel }),
-                    /* @__PURE__ */ jsx(SidebarBrandSwitcherCurrentRow, { item: current, badge: currentBadge }),
+                    /* @__PURE__ */ jsx(
+                      SidebarBrandSwitcherCurrentRow,
+                      {
+                        item: current,
+                        badge: currentBadge,
+                        rowClassName
+                      }
+                    ),
                     /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "my-1.5" }),
                     /* @__PURE__ */ jsx(SidebarBrandSwitcherSectionLabel, { children: switchSectionLabel }),
                     others.map((p) => /* @__PURE__ */ jsx(
@@ -13879,10 +14089,13 @@ var SidebarBrandSwitcher = React38.forwardRef(
                       {
                         item: p,
                         onLaunch,
-                        unavailableBadge
+                        unavailableBadge,
+                        rowClassName,
+                        isLaunching
                       },
                       p.id
-                    ))
+                    )),
+                    extras?.map((extra) => /* @__PURE__ */ jsx(SidebarBrandSwitcherExtraRow, { extra }, extra.id))
                   ]
                 }
               )
@@ -13914,28 +14127,53 @@ function SidebarBrandSwitcherTile({ item }) {
     }
   );
 }
-function SidebarBrandSwitcherCurrentRow({
-  item,
-  badge
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "mx-0 flex cursor-default items-center gap-2.5 rounded-md bg-bg-2 px-2 py-1.5", children: [
+function SidebarBrandSwitcherIdentity({ item }) {
+  if (item.identity) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      item.identity,
+      item.tagline && /* @__PURE__ */ jsx("span", { className: "text-fg-3 text-[11px] leading-tight", children: item.tagline })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SidebarBrandSwitcherTile, { item }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsx("span", { className: "text-fg text-[13px] font-medium", children: item.name }),
       item.tagline && /* @__PURE__ */ jsx("span", { className: "text-fg-3 text-[11px]", children: item.tagline })
-    ] }),
-    badge && /* @__PURE__ */ jsx("span", { className: "rounded-sm px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase text-pro-fg ring-1 ring-pro-fg/30", children: badge })
+    ] })
   ] });
 }
+function SidebarBrandSwitcherCurrentRow({
+  item,
+  badge,
+  rowClassName
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mx-0 flex cursor-default items-center gap-2.5 rounded-md bg-bg-2 px-2 py-1.5",
+        rowClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SidebarBrandSwitcherIdentity, { item }),
+        badge && /* @__PURE__ */ jsx("span", { className: "rounded-sm px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase text-pro-fg ring-1 ring-pro-fg/30", children: badge })
+      ]
+    }
+  );
+}
 function SidebarBrandSwitcherOtherRow({
   item,
   onLaunch,
-  unavailableBadge
+  unavailableBadge,
+  rowClassName,
+  isLaunching
 }) {
   const reachable = item.available !== false;
   const [launching, setLaunching] = React38.useState(false);
+  const externalLaunching = isLaunching?.(item) ?? false;
+  const busy = launching || externalLaunching;
   const handleSelect = async () => {
-    if (!reachable || launching || !onLaunch) return;
+    if (!reachable || busy || !onLaunch) return;
     setLaunching(true);
     try {
       await onLaunch(item);
@@ -13955,15 +14193,28 @@ function SidebarBrandSwitcherOtherRow({
         void handleSelect();
       },
       "data-item": item.dataAttr ?? item.id,
+      className: cn("flex items-center gap-2.5 rounded-md px-2 py-1.5", rowClassName),
+      children: [
+        /* @__PURE__ */ jsx(SidebarBrandSwitcherIdentity, { item }),
+        !reachable && unavailableBadge && /* @__PURE__ */ jsx("span", { className: "rounded-sm bg-bg-3 px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase text-fg-4", children: unavailableBadge }),
+        reachable && busy && /* @__PURE__ */ jsx("span", { className: "rounded-sm bg-bg-3 px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase text-fg-4", children: "Opening\u2026" })
+      ]
+    }
+  );
+}
+function SidebarBrandSwitcherExtraRow({ extra }) {
+  return /* @__PURE__ */ jsxs(
+    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: [
-        /* @__PURE__ */ jsx(SidebarBrandSwitcherTile, { item }),
+        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: item.name }),
-          item.tagline && /* @__PURE__ */ jsx("span", { className: "text-fg-3 text-[11px]", children: item.tagline })
-        ] }),
-        !reachable && unavailableBadge && /* @__PURE__ */ jsx("span", { className: "rounded-sm bg-bg-3 px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase text-fg-4", children: unavailableBadge }),
-        reachable && launching && /* @__PURE__ */ jsx("span", { className: "rounded-sm bg-bg-3 px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase text-fg-4", children: "Opening\u2026" })
+          /* @__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 })
+        ] })
       ]
     }
   );