@replicated/portal-components 0.0.19 → 0.0.21

package/dist/esm/trial-signup.js

@@ -0,0 +1,256 @@
+"use client";
+import { useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+function TrialSignup({
+  appSlug,
+  branding,
+  trialExpirationDays,
+  licenseType,
+  termsAndConditionsUrl,
+  defaultTitle = "Enterprise Portal",
+  createTrialSignup,
+  verifyTrialSignup
+}) {
+  const [companyName, setCompanyName] = useState("");
+  const [email, setEmail] = useState("");
+  const [isCodeSent, setIsCodeSent] = useState(false);
+  const [validationCode, setValidationCode] = useState("");
+  const [termsAccepted, setTermsAccepted] = useState(false);
+  const [showTermsError, setShowTermsError] = useState(false);
+  const [error, setError] = useState("");
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
+  const primaryColor = branding?.primaryColor || "#6366f1";
+  const secondaryColor = branding?.secondaryColor || "#6366f1";
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setShowTermsError(false);
+    if (termsAndConditionsUrl && !termsAccepted) {
+      setShowTermsError(true);
+      return;
+    }
+    startTransition(async () => {
+      const result = await createTrialSignup({
+        appSlug,
+        company: companyName,
+        email
+      });
+      if (result.success) {
+        setIsCodeSent(true);
+      } else {
+        setError(result.error || "An error occurred. Please try again.");
+      }
+    });
+  };
+  const handleValidateCode = async (e) => {
+    e.preventDefault();
+    setError("");
+    startTransition(async () => {
+      const result = await verifyTrialSignup(validationCode);
+      if (result.success && result.redirectUrl) {
+        router.push(result.redirectUrl);
+        router.refresh();
+      } else {
+        setError(result.error || "Verification failed. Please try again.");
+      }
+    });
+  };
+  const handleUseDifferentEmail = () => {
+    setIsCodeSent(false);
+    setCompanyName("");
+    setEmail("");
+    setValidationCode("");
+    setError("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-[480px] rounded-lg border-2 border-solid p-8", style: { borderColor: secondaryColor, minHeight: branding?.logo ? "342px" : "242px" }, children: [
+    branding?.logo && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: branding.logo,
+        alt: branding?.title || "Logo",
+        className: "max-w-[360px] max-h-[48px]"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-center mb-2", children: branding?.title || defaultTitle }),
+    /* @__PURE__ */ jsx("p", { className: "text-center text-gray-600 mb-6", children: licenseType === "community" ? "Get your community license" : `Start your ${trialExpirationDays} day trial` }),
+    !isCodeSent && /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "company-name", className: "block mb-2 text-gray-600", children: "Company name" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "absolute w-5 h-5 text-gray-400 pointer-events-none",
+              style: { left: "12px", top: "50%", transform: "translateY(-50%)" },
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "company-name",
+              type: "text",
+              placeholder: "Your company",
+              className: "portal-input w-full py-2.5",
+              style: { paddingLeft: "44px" },
+              value: companyName,
+              onChange: (e) => setCompanyName(e.target.value),
+              required: true,
+              disabled: isPending
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "email", className: "block mb-2 text-gray-600", children: "Work email address" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "absolute w-5 h-5 text-gray-400 pointer-events-none",
+              style: { left: "12px", top: "50%", transform: "translateY(-50%)" },
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "email",
+              type: "email",
+              placeholder: "you@company.com",
+              className: "portal-input w-full py-2.5",
+              style: { paddingLeft: "44px" },
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              required: true,
+              disabled: isPending
+            }
+          )
+        ] })
+      ] }),
+      termsAndConditionsUrl && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            id: "terms-checkbox",
+            checked: termsAccepted,
+            onChange: (e) => {
+              setTermsAccepted(e.target.checked);
+              if (e.target.checked) {
+                setShowTermsError(false);
+              }
+            },
+            className: "mt-1 min-w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500",
+            required: true,
+            disabled: isPending
+          }
+        ),
+        /* @__PURE__ */ jsxs("label", { htmlFor: "terms-checkbox", className: "text-sm text-gray-600 leading-relaxed", children: [
+          "I agree to the",
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: termsAndConditionsUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-blue-600 hover:underline font-medium",
+              style: { color: primaryColor },
+              children: "Terms and Conditions"
+            }
+          )
+        ] })
+      ] }) }),
+      showTermsError && /* @__PURE__ */ jsx("div", { className: "text-red-600 mb-4 text-center text-sm", children: "Please accept the Terms and Conditions to continue." }),
+      error && /* @__PURE__ */ jsx("div", { className: "text-red-600 mb-4 text-center text-sm", children: error }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          className: "w-full flex justify-center items-center bg-blue-600 hover:bg-blue-700 text-white py-2 rounded font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+          style: { background: primaryColor, borderColor: primaryColor },
+          disabled: !companyName.trim() || !email.trim() || isPending || !!termsAndConditionsUrl && !termsAccepted,
+          children: isPending ? "Creating account..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Create account",
+            /* @__PURE__ */ jsx("svg", { className: "ml-2 h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 5l7 7m0 0l-7 7m7-7H3" }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "/login",
+          className: "hover:underline font-semibold mt-4 text-center cursor-pointer block",
+          style: { color: secondaryColor },
+          children: "Already have an account? Sign in"
+        }
+      )
+    ] }),
+    isCodeSent && /* @__PURE__ */ jsxs("form", { onSubmit: handleValidateCode, className: "w-full", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "code", className: "block text-sm font-medium text-gray-700", children: "Verification code" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleUseDifferentEmail,
+              className: "text-sm text-blue-600 hover:text-blue-700 hover:underline",
+              style: { color: primaryColor },
+              children: "Use different email"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "code",
+            name: "code",
+            type: "text",
+            value: validationCode,
+            onChange: (e) => setValidationCode(e.target.value),
+            className: "portal-input w-full",
+            placeholder: "Enter 12-digit code",
+            required: true,
+            disabled: isPending
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-gray-600 mb-4 text-pretty", children: [
+          "A verification code has been sent to ",
+          email,
+          ". Please check your inbox."
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("div", { className: "text-red-600 mb-4 text-center text-sm", children: error }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          className: "w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+          style: { background: primaryColor, borderColor: primaryColor },
+          disabled: !validationCode.trim() || isPending,
+          children: isPending ? "Verifying..." : licenseType === "community" ? "Verify code and get license" : "Verify code and start trial"
+        }
+      )
+    ] })
+  ] });
+}
+
+export { TrialSignup };
+//# sourceMappingURL=trial-signup.js.map
+//# sourceMappingURL=trial-signup.js.map

package/dist/esm/trial-signup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/trial-signup.tsx"],"names":[],"mappings":"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","file":"trial-signup.js","sourcesContent":["\"use client\";\n\nimport { useState, useTransition, FormEvent } from \"react\";\nimport { useRouter } from \"next/navigation\";\n\nexport interface TrialSignupProps {\n  appSlug: string;\n  branding: {\n    logo?: string;\n    title?: string;\n    primaryColor?: string;\n    secondaryColor?: string;\n  } | null;\n  trialExpirationDays: number;\n  licenseType: string;\n  termsAndConditionsUrl: string;\n  defaultTitle?: string;\n  createTrialSignup: (payload: {\n    appSlug: string;\n    company: string;\n    email: string;\n  }) => Promise<{ success: boolean; error?: string }>;\n  verifyTrialSignup: (code: string) => Promise<{\n    success: boolean;\n    error?: string;\n    redirectUrl?: string;\n  }>;\n}\n\nexport function TrialSignup({\n  appSlug,\n  branding,\n  trialExpirationDays,\n  licenseType,\n  termsAndConditionsUrl,\n  defaultTitle = \"Enterprise Portal\",\n  createTrialSignup,\n  verifyTrialSignup,\n}: TrialSignupProps) {\n  const [companyName, setCompanyName] = useState(\"\");\n  const [email, setEmail] = useState(\"\");\n  const [isCodeSent, setIsCodeSent] = useState(false);\n  const [validationCode, setValidationCode] = useState(\"\");\n  const [termsAccepted, setTermsAccepted] = useState(false);\n  const [showTermsError, setShowTermsError] = useState(false);\n  const [error, setError] = useState(\"\");\n  const [isPending, startTransition] = useTransition();\n  const router = useRouter();\n\n  const primaryColor = branding?.primaryColor || \"#6366f1\";\n  const secondaryColor = branding?.secondaryColor || \"#6366f1\";\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(\"\");\n    setShowTermsError(false);\n\n    // Validate terms acceptance if required\n    if (termsAndConditionsUrl && !termsAccepted) {\n      setShowTermsError(true);\n      return;\n    }\n\n    startTransition(async () => {\n      const result = await createTrialSignup({\n        appSlug,\n        company: companyName,\n        email,\n      });\n\n      if (result.success) {\n        setIsCodeSent(true);\n      } else {\n        setError(result.error || \"An error occurred. Please try again.\");\n      }\n    });\n  };\n\n  const handleValidateCode = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(\"\");\n\n    startTransition(async () => {\n      const result = await verifyTrialSignup(validationCode);\n\n      if (result.success && result.redirectUrl) {\n        // Redirect to dashboard\n        router.push(result.redirectUrl);\n        router.refresh();\n      } else {\n        setError(result.error || \"Verification failed. Please try again.\");\n      }\n    });\n  };\n\n  const handleUseDifferentEmail = () => {\n    setIsCodeSent(false);\n    setCompanyName(\"\");\n    setEmail(\"\");\n    setValidationCode(\"\");\n    setError(\"\");\n  };\n\n  return (\n    <div className=\"w-[480px] rounded-lg border-2 border-solid p-8\" style={{ borderColor: secondaryColor, minHeight: branding?.logo ? \"342px\" : \"242px\" }}>\n      {/* Logo */}\n      {branding?.logo && (\n        <div className=\"flex justify-center mb-4\">\n          <img\n            src={branding.logo}\n            alt={branding?.title || \"Logo\"}\n            className=\"max-w-[360px] max-h-[48px]\"\n          />\n        </div>\n      )}\n\n      {/* Title */}\n      <h1 className=\"text-2xl font-bold text-center mb-2\">\n        {branding?.title || defaultTitle}\n      </h1>\n\n      {/* Subtitle */}\n      <p className=\"text-center text-gray-600 mb-6\">\n        {licenseType === \"community\"\n          ? \"Get your community license\"\n          : `Start your ${trialExpirationDays} day trial`}\n      </p>\n\n      {/* Step 1: Company and Email Form */}\n      {!isCodeSent && (\n        <form onSubmit={handleSubmit} className=\"w-full\">\n          {/* Company Name */}\n          <div className=\"mb-4\">\n            <label htmlFor=\"company-name\" className=\"block mb-2 text-gray-600\">\n              Company name\n            </label>\n            <div className=\"relative\">\n              <svg \n                className=\"absolute w-5 h-5 text-gray-400 pointer-events-none\" \n                style={{ left: \"12px\", top: \"50%\", transform: \"translateY(-50%)\" }}\n                fill=\"none\" \n                stroke=\"currentColor\" \n                viewBox=\"0 0 24 24\"\n              >\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\" />\n              </svg>\n              <input\n                id=\"company-name\"\n                type=\"text\"\n                placeholder=\"Your company\"\n                className=\"portal-input w-full py-2.5\"\n                style={{ paddingLeft: \"44px\" }}\n                value={companyName}\n                onChange={(e) => setCompanyName(e.target.value)}\n                required\n                disabled={isPending}\n              />\n            </div>\n          </div>\n\n          {/* Email */}\n          <div className=\"mb-4\">\n            <label htmlFor=\"email\" className=\"block mb-2 text-gray-600\">\n              Work email address\n            </label>\n            <div className=\"relative\">\n              <svg \n                className=\"absolute w-5 h-5 text-gray-400 pointer-events-none\" \n                style={{ left: \"12px\", top: \"50%\", transform: \"translateY(-50%)\" }}\n                fill=\"none\" \n                stroke=\"currentColor\" \n                viewBox=\"0 0 24 24\"\n              >\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" />\n              </svg>\n              <input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"you@company.com\"\n                className=\"portal-input w-full py-2.5\"\n                style={{ paddingLeft: \"44px\" }}\n                value={email}\n                onChange={(e) => setEmail(e.target.value)}\n                required\n                disabled={isPending}\n              />\n            </div>\n          </div>\n\n          {/* Terms and Conditions */}\n          {termsAndConditionsUrl && (\n            <div className=\"mb-4\">\n              <div className=\"flex items-start gap-3\">\n                <input\n                  type=\"checkbox\"\n                  id=\"terms-checkbox\"\n                  checked={termsAccepted}\n                  onChange={(e) => {\n                    setTermsAccepted(e.target.checked);\n                    if (e.target.checked) {\n                      setShowTermsError(false);\n                    }\n                  }}\n                  className=\"mt-1 min-w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500\"\n                  required\n                  disabled={isPending}\n                />\n                <label htmlFor=\"terms-checkbox\" className=\"text-sm text-gray-600 leading-relaxed\">\n                  I agree to the{\" \"}\n                  <a\n                    href={termsAndConditionsUrl}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"text-blue-600 hover:underline font-medium\"\n                    style={{ color: primaryColor }}\n                  >\n                    Terms and Conditions\n                  </a>\n                </label>\n              </div>\n            </div>\n          )}\n\n          {/* Terms Error */}\n          {showTermsError && (\n            <div className=\"text-red-600 mb-4 text-center text-sm\">\n              Please accept the Terms and Conditions to continue.\n            </div>\n          )}\n\n          {/* API Error */}\n          {error && (\n            <div className=\"text-red-600 mb-4 text-center text-sm\">\n              {error}\n            </div>\n          )}\n\n          {/* Submit Button */}\n          <button\n            type=\"submit\"\n            className=\"w-full flex justify-center items-center bg-blue-600 hover:bg-blue-700 text-white py-2 rounded font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n            style={{ background: primaryColor, borderColor: primaryColor }}\n            disabled={\n              !companyName.trim() ||\n              !email.trim() ||\n              isPending ||\n              (!!termsAndConditionsUrl && !termsAccepted)\n            }\n          >\n            {isPending ? (\n              \"Creating account...\"\n            ) : (\n              <>\n                Create account\n                <svg className=\"ml-2 h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M14 5l7 7m0 0l-7 7m7-7H3\" />\n                </svg>\n              </>\n            )}\n          </button>\n\n          {/* Login Link */}\n          <a\n            href=\"/login\"\n            className=\"hover:underline font-semibold mt-4 text-center cursor-pointer block\"\n            style={{ color: secondaryColor }}\n          >\n            Already have an account? Sign in\n          </a>\n        </form>\n      )}\n\n      {/* Step 2: Verification Code Form */}\n      {isCodeSent && (\n        <form onSubmit={handleValidateCode} className=\"w-full\">\n          <div>\n            <div className=\"flex items-center justify-between mb-1\">\n              <label htmlFor=\"code\" className=\"block text-sm font-medium text-gray-700\">\n                Verification code\n              </label>\n              <button\n                type=\"button\"\n                onClick={handleUseDifferentEmail}\n                className=\"text-sm text-blue-600 hover:text-blue-700 hover:underline\"\n                style={{ color: primaryColor }}\n              >\n                Use different email\n              </button>\n            </div>\n            <div className=\"mt-1\">\n              <input\n                id=\"code\"\n                name=\"code\"\n                type=\"text\"\n                value={validationCode}\n                onChange={(e) => setValidationCode(e.target.value)}\n                className=\"portal-input w-full\"\n                placeholder=\"Enter 12-digit code\"\n                required\n                disabled={isPending}\n              />\n            </div>\n            <p className=\"mt-2 text-sm text-gray-600 mb-4 text-pretty\">\n              A verification code has been sent to {email}. Please check your inbox.\n            </p>\n          </div>\n\n          {/* Verification Error */}\n          {error && (\n            <div className=\"text-red-600 mb-4 text-center text-sm\">\n              {error}\n            </div>\n          )}\n\n          {/* Verify Button */}\n          <button\n            type=\"submit\"\n            className=\"w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n            style={{ background: primaryColor, borderColor: primaryColor }}\n            disabled={!validationCode.trim() || isPending}\n          >\n            {isPending\n              ? \"Verifying...\"\n              : licenseType === \"community\"\n                ? \"Verify code and get license\"\n                : \"Verify code and start trial\"}\n          </button>\n        </form>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/esm/update-layout.js

@@ -1,5 +1,5 @@
-import { Buffer } from 'buffer';
 import Link from 'next/link';
+import { Buffer } from 'buffer';
 import { cache } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -7,7 +7,97 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * Enterprise Portal Components
  * This file is generated by tsup. Do not edit manually.
  */
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// datadog/tracer.ts
+var tracer_exports = {};
+__export(tracer_exports, {
+  default: () => tracer_default
+});
+var tracer_default;
 
+// src/utils/constants.ts
+var DEFAULT_PRIMARY_COLOR = "#4f46e5";
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
+
+// src/utils/branding.ts
+var normalizeColor = (color) => {
+  if (!color || typeof color !== "string") {
+    return void 0;
+  }
+  const trimmed = color.trim();
+  if (/^#?[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(trimmed)) {
+    return trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+  }
+  console.debug("[portal-components] Invalid color format rejected (only hex supported):", trimmed);
+  return void 0;
+};
+var sanitizeUrlForCss = (url) => {
+  if (!url || typeof url !== "string") {
+    return void 0;
+  }
+  const trimmed = url.trim();
+  try {
+    const urlObj = new URL(trimmed);
+    if (!["http:", "https:", "data:"].includes(urlObj.protocol)) {
+      console.debug("[portal-components] Invalid URL protocol for background image:", urlObj.protocol);
+      return void 0;
+    }
+  } catch {
+    console.debug("[portal-components] Invalid URL format for background image:", trimmed);
+    return void 0;
+  }
+  const escaped = trimmed.replace(/\\/g, "\\\\").replace(/\)/g, "\\)").replace(/"/g, '\\"').replace(/'/g, "\\'").replace(/[\x00-\x1F\x7F]/g, "");
+  return escaped;
+};
+var decodeBranding = ({ brandingData }) => {
+  if (!brandingData || typeof brandingData !== "string") {
+    return {
+      primaryColor: DEFAULT_PRIMARY_COLOR,
+      secondaryColor: DEFAULT_SECONDARY_COLOR
+    };
+  }
+  try {
+    const decoded = Buffer.from(brandingData, "base64").toString("utf-8");
+    const parsed = JSON.parse(decoded);
+    const logo = typeof parsed.logo === "string" ? parsed.logo : void 0;
+    const titleRaw = typeof parsed.title === "string" ? parsed.title.trim() : "";
+    const title = titleRaw ? titleRaw : void 0;
+    const favicon = typeof parsed.favicon === "string" ? parsed.favicon : void 0;
+    const primaryColorRaw = parsed.primaryColor ?? parsed.primary_color;
+    const secondaryColorRaw = parsed.secondaryColor ?? parsed.secondary_color;
+    const primaryColor = normalizeColor(primaryColorRaw);
+    const secondaryColor = normalizeColor(secondaryColorRaw);
+    const supportPortalLink = typeof parsed.supportPortalLink === "string" ? parsed.supportPortalLink : void 0;
+    const backgroundRaw = parsed.background;
+    const background = backgroundRaw === "minimal" || backgroundRaw === "custom" || backgroundRaw === "image" ? backgroundRaw : void 0;
+    const backgroundImage = sanitizeUrlForCss(parsed.backgroundImage);
+    const backgroundGradientStart = normalizeColor(parsed.customColor1);
+    const backgroundGradientEnd = normalizeColor(parsed.customColor2);
+    return {
+      logo,
+      title,
+      favicon,
+      primaryColor: primaryColor || DEFAULT_PRIMARY_COLOR,
+      secondaryColor: secondaryColor || DEFAULT_SECONDARY_COLOR,
+      supportPortalLink,
+      background,
+      backgroundImage,
+      backgroundGradientStart,
+      backgroundGradientEnd
+    };
+  } catch (error) {
+    console.debug("[portal-components] unable to parse branding JSON", error);
+    return {
+      primaryColor: DEFAULT_PRIMARY_COLOR,
+      secondaryColor: DEFAULT_SECONDARY_COLOR
+    };
+  }
+};
 
 // src/actions/index.ts
 var getApiOrigin = () => {
@@ -40,11 +130,15 @@ var fetchCustomBrandingImpl = async () => {
   const payload = await response.json();
   const brandingObject = {
     logo: payload.logoUrl,
-    title: payload.appName,
-    customColor1: payload.primaryColor,
-    customColor2: payload.secondaryColor,
+    title: payload.title,
+    primaryColor: payload.primaryColor,
+    secondaryColor: payload.secondaryColor,
     favicon: payload.faviconUrl,
-    supportPortalLink: payload.supportPortalLink || ""
+    supportPortalLink: payload.supportPortalLink || "",
+    background: payload.background,
+    backgroundImage: payload.backgroundImage,
+    customColor1: payload.customColor1,
+    customColor2: payload.customColor2
   };
   const brandingData = Buffer.from(JSON.stringify(brandingObject)).toString("base64");
   return {
@@ -239,57 +333,49 @@ var TopNav = async ({
   currentCustomerId,
   onChangeTeam,
   userMenuChildren,
-  logoutButton
+  logoutButton,
+  branding: brandingProp
 }) => {
   const displayLabel = userMenuLabel || (customerName ? `Team: ${customerName}` : "Team: Example");
   let logo;
   let brandTitle;
-  let customColor1;
-  let customColor2;
-  const normalizeColor = (color) => {
-    if (!color || typeof color !== "string") {
-      return void 0;
-    }
-    const trimmed = color.trim();
-    if (/^#?[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(trimmed)) {
-      return trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+  let primaryColor;
+  let secondaryColor;
+  let background;
+  let backgroundImageUrl;
+  let backgroundGradientStart;
+  let backgroundGradientEnd;
+  if (brandingProp) {
+    if (brandingProp.logo && typeof brandingProp.logo === "string") {
+      logo = brandingProp.logo;
     }
-    return trimmed;
-  };
-  try {
-    const branding = await fetchCustomBranding();
-    if (branding.brandingData) {
-      const decoded = Buffer.from(branding.brandingData, "base64").toString(
-        "utf-8"
-      );
-      try {
-        const parsed = JSON.parse(decoded);
-        if (parsed?.logo && typeof parsed.logo === "string") {
-          logo = parsed.logo;
-        }
-        if (parsed?.title && typeof parsed.title === "string") {
-          const normalizedTitle = parsed.title.trim();
-          if (normalizedTitle) {
-            brandTitle = normalizedTitle;
-          }
-        }
-        if (parsed?.customColor1 && typeof parsed.customColor1 === "string") {
-          customColor1 = normalizeColor(parsed.customColor1);
-        }
-        if (parsed?.customColor2 && typeof parsed.customColor2 === "string") {
-          customColor2 = normalizeColor(parsed.customColor2);
-        }
-      } catch (error) {
-        console.debug(
-          "[portal-components] unable to parse branding JSON",
-          error
-        );
+    if (brandingProp.title && typeof brandingProp.title === "string") {
+      const normalizedTitle = brandingProp.title.trim();
+      if (normalizedTitle) {
+        brandTitle = normalizedTitle;
       }
-    } else {
-      console.debug("[portal-components] branding", branding);
     }
-  } catch (error) {
-    console.debug("[portal-components] branding fetch failed", error);
+    primaryColor = normalizeColor(brandingProp.primaryColor);
+    secondaryColor = normalizeColor(brandingProp.secondaryColor);
+    background = brandingProp.background;
+    backgroundImageUrl = brandingProp.backgroundImage;
+    backgroundGradientStart = normalizeColor(brandingProp.backgroundGradientStart);
+    backgroundGradientEnd = normalizeColor(brandingProp.backgroundGradientEnd);
+  } else {
+    try {
+      const brandingResponse = await fetchCustomBranding();
+      const branding = decodeBranding({ brandingData: brandingResponse.brandingData });
+      logo = branding.logo;
+      brandTitle = branding.title;
+      primaryColor = branding.primaryColor;
+      secondaryColor = branding.secondaryColor;
+      background = branding.background;
+      backgroundImageUrl = branding.backgroundImage;
+      backgroundGradientStart = branding.backgroundGradientStart;
+      backgroundGradientEnd = branding.backgroundGradientEnd;
+    } catch (error) {
+      console.debug("[portal-components] branding fetch failed", error);
+    }
   }
   const baseLinks = links ?? defaultTopNavLinks;
   const hiddenSet = hiddenLabels ? new Set(hiddenLabels) : null;
@@ -300,20 +386,32 @@ var TopNav = async ({
     resolvedLinks = [...resolvedLinks, ...additionalLinks];
   }
   resolvedLinks = orderLinks(resolvedLinks, order);
-  const gradientStart = customColor1 ?? "rgb(235, 102, 88)";
-  const gradientEnd = customColor2 ?? customColor1 ?? "rgb(184, 83, 71)";
+  const getHeaderBackgroundStyle = () => {
+    if (background === "image" && backgroundImageUrl) {
+      return {
+        background: `url(${backgroundImageUrl})`,
+        backgroundImage: `linear-gradient(to top, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0)), url(${backgroundImageUrl})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat"
+      };
+    }
+    const gradientStart = background === "custom" && backgroundGradientStart ? backgroundGradientStart : primaryColor;
+    const gradientEnd = background === "custom" && backgroundGradientEnd ? backgroundGradientEnd : secondaryColor;
+    return {
+      backgroundImage: `linear-gradient(to top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 33%), linear-gradient(${gradientStart}, ${gradientEnd})`,
+      backgroundRepeat: "no-repeat",
+      backgroundSize: "100% 100%"
+    };
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: "relative flex h-[280px] w-full items-start justify-center",
-      style: {
-        backgroundImage: `linear-gradient(to top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 33%), linear-gradient(${gradientStart}, ${gradientEnd})`,
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "100% 100%"
-      },
-      children: /* @__PURE__ */ jsx("div", { className: "mx-auto mt-[30px] w-full max-w-[1248px] px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex h-[135px] flex-col justify-between space-y-4 rounded bg-[#ffffffe6] px-6 pt-6 pb-4 shadow-[0_10px_60px_rgba(16,16,16,0.35)]", children: [
+      style: getHeaderBackgroundStyle(),
+      children: /* @__PURE__ */ jsx("div", { className: "mx-auto mt-[30px] w-full max-w-[1248px] px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex h-[142px] flex-col justify-between space-y-4 rounded bg-[#ffffffe6] px-6 pt-6 pb-4 shadow-[0_10px_60px_rgba(16,16,16,0.35)]", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          logo || brandTitle ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
             logo ? (
               // eslint-disable-next-line @next/next/no-img-element
               /* @__PURE__ */ jsx(
@@ -328,9 +426,24 @@ var TopNav = async ({
                   }
                 }
               )
-            ) : null,
-            brandTitle ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-gray-900", children: brandTitle }) : null
-          ] }) : /* @__PURE__ */ jsx("div", {}),
+            ) : /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "h-8 w-8 text-gray-400",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "12", rx: "4", ry: "10" }),
+                  /* @__PURE__ */ jsx("path", { d: "M2 12h20" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xl font-bold text-gray-900", children: brandTitle || "Enterprise Portal" })
+          ] }),
           /* @__PURE__ */ jsxs("details", { className: "group relative", children: [
             /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 list-none", children: [
               /* @__PURE__ */ jsxs(
@@ -392,7 +505,7 @@ var TopNav = async ({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-3 border-b border-gray-200 pb-2 text-sm font-medium text-gray-500", children: resolvedLinks.map(({ label, icon, href }) => {
+        /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-3 pb-2 text-sm font-medium text-gray-500", children: resolvedLinks.map(({ label, icon, href }) => {
           const isActive = activeLabel === label;
           const className = `flex items-center gap-2 px-4 py-1 transition text-gray-500 ${isActive ? "underline underline-offset-8 decoration-2" : ""}`;
           if (href) {