@replicated/portal-components 0.0.26 → 0.0.28

package/dist/{top-nav-8f2U69MF.d.ts → top-nav-B2FVC4rl.d.ts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { a as BackgroundType } from './branding-DmsrDTNE.js';
+import { a as BackgroundType } from './branding-C5H0L6Vi.js';
 
 interface Customer {
     id: string;

package/dist/{top-nav-B2yA3PC7.d.mts → top-nav-Cf8zMq1A.d.mts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { a as BackgroundType } from './branding-DmsrDTNE.mjs';
+import { a as BackgroundType } from './branding-C5H0L6Vi.mjs';
 
 interface Customer {
     id: string;

package/dist/top-nav.d.mts

@@ -1,4 +1,4 @@
-export { c as TopNav, a as TopNavBranding, T as TopNavLink, b as TopNavProps } from './top-nav-B2yA3PC7.mjs';
+export { c as TopNav, a as TopNavBranding, T as TopNavLink, b as TopNavProps } from './top-nav-Cf8zMq1A.mjs';
 import 'react/jsx-runtime';
 import 'react';
-import './branding-DmsrDTNE.mjs';
+import './branding-C5H0L6Vi.mjs';

package/dist/top-nav.d.ts

@@ -1,4 +1,4 @@
-export { c as TopNav, a as TopNavBranding, T as TopNavLink, b as TopNavProps } from './top-nav-8f2U69MF.js';
+export { c as TopNav, a as TopNavBranding, T as TopNavLink, b as TopNavProps } from './top-nav-B2FVC4rl.js';
 import 'react/jsx-runtime';
 import 'react';
-import './branding-DmsrDTNE.js';
+import './branding-C5H0L6Vi.js';

package/dist/top-nav.js

@@ -96,14 +96,17 @@ async function handleServerError(statusCode) {
 var getApiOrigin = () => {
   return (process.env.REPLICATED_APP_ORIGIN || "https://replicated.app").replace(/\/+$/, "");
 };
-var fetchCustomBrandingImpl = async () => {
+var fetchCustomBrandingImpl = async (version) => {
   const appSlug = process.env.PORTAL_APP_SLUG;
   if (!appSlug) {
     throw new Error("PORTAL_APP_SLUG is not configured");
   }
-  const url = `${getApiOrigin()}/enterprise-portal/public/branding?app_slug=${encodeURIComponent(
+  let url = `${getApiOrigin()}/enterprise-portal/public/branding?app_slug=${encodeURIComponent(
     appSlug
   )}`;
+  if (version) {
+    url += `&version=${encodeURIComponent(version)}`;
+  }
   if (process.env.NODE_ENV !== "production") {
     console.debug(
       "[portal-components] fetching custom branding via %s (Enterprise Portal API)",
@@ -132,7 +135,14 @@ var fetchCustomBrandingImpl = async () => {
     background: payload.background,
     backgroundImage: payload.backgroundImage,
     customColor1: payload.customColor1,
-    customColor2: payload.customColor2
+    customColor2: payload.customColor2,
+    headerColor: payload.headerColor,
+    headerGradientEnd: payload.headerGradientEnd,
+    sidebarColor: payload.sidebarColor,
+    sidebarGradientEnd: payload.sidebarGradientEnd,
+    contentBackgroundColor: payload.contentBackgroundColor,
+    contentBackgroundGradientEnd: payload.contentBackgroundGradientEnd,
+    customCSS: payload.customCSS
   };
   const brandingData = buffer.Buffer.from(JSON.stringify(brandingObject)).toString("base64");
   return {
@@ -241,6 +251,13 @@ var decodeBranding = ({ brandingData }) => {
     const backgroundImage = sanitizeUrlForCss(parsed.backgroundImage);
     const backgroundGradientStart = normalizeColor(parsed.customColor1);
     const backgroundGradientEnd = normalizeColor(parsed.customColor2);
+    const headerColor = normalizeColor(parsed.headerColor);
+    const headerGradientEnd = normalizeColor(parsed.headerGradientEnd);
+    const sidebarColor = normalizeColor(parsed.sidebarColor);
+    const sidebarGradientEnd = normalizeColor(parsed.sidebarGradientEnd);
+    const contentBackgroundColor = normalizeColor(parsed.contentBackgroundColor);
+    const contentBackgroundGradientEnd = normalizeColor(parsed.contentBackgroundGradientEnd);
+    const customCSS = typeof parsed.customCSS === "string" ? parsed.customCSS : void 0;
     return {
       logo,
       title,
@@ -252,7 +269,14 @@ var decodeBranding = ({ brandingData }) => {
       background,
       backgroundImage,
       backgroundGradientStart,
-      backgroundGradientEnd
+      backgroundGradientEnd,
+      headerColor,
+      headerGradientEnd,
+      sidebarColor,
+      sidebarGradientEnd,
+      contentBackgroundColor,
+      contentBackgroundGradientEnd,
+      customCSS
     };
   } catch (error) {
     console.debug("[portal-components] unable to parse branding JSON", error);
@@ -265,10 +289,13 @@ var decodeBranding = ({ brandingData }) => {
 function UserMenuDropdown({
   displayLabel,
   children,
-  className = ""
+  className = "",
+  dark = false
 }) {
+  const summaryClass = dark ? "flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white/90 hover:bg-white/10 transition-colors list-none border border-transparent hover:border-white/20" : "flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors list-none border border-transparent hover:border-gray-200";
+  const chevronClass = dark ? "h-4 w-4 text-white/50 transition-transform group-open:rotate-180" : "h-4 w-4 text-gray-500 transition-transform group-open:rotate-180";
   return /* @__PURE__ */ jsxRuntime.jsxs("details", { className: `group relative ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors list-none border border-transparent hover:border-gray-200", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: summaryClass, children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayLabel }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -283,7 +310,7 @@ function UserMenuDropdown({
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          className: "h-4 w-4 text-gray-500 transition-transform group-open:rotate-180",
+          className: chevronClass,
           children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
         }
       )