@replicated/portal-components 0.0.19 → 0.0.21

package/dist/esm/team-selection.js

@@ -7,6 +7,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * This file is generated by tsup. Do not edit manually.
  */
 
+
+// src/utils/constants.ts
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
 var SearchIcon = () => /* @__PURE__ */ jsxs(
   "svg",
   {
@@ -102,7 +105,8 @@ var TeamSelection = ({
             type: "button",
             onClick: handleContinue,
             disabled: !selectedTeamId || isSubmitting,
-            className: "rounded-xl bg-indigo-600 px-12 py-3 text-base font-semibold text-white shadow-sm transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50",
+            className: "rounded-xl px-12 py-3 text-base font-semibold text-white shadow-sm transition-opacity duration-200 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+            style: { backgroundColor: brandingColors?.primary || `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})` },
             children: isSubmitting ? "Loading..." : "Continue"
           }
         ) })

package/dist/esm/team-selection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/team-selection.tsx"],"names":[],"mappings":"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","file":"team-selection.js","sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\n\nexport interface Team {\n  id: string;\n  name: string;\n}\n\nexport interface TeamSelectionProps {\n  teams: Team[];\n  defaultTeamId?: string;\n  onContinue: (teamId: string) => void | Promise<void>;\n  isSubmitting?: boolean;\n  logo?: React.ReactNode;\n  brandingColors?: {\n    primary?: string;\n    secondary?: string;\n  };\n}\n\nconst SearchIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"h-5 w-5 text-gray-400\"\n  >\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <path d=\"m21 21-4.35-4.35\" />\n  </svg>\n);\n\nconst UsersIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"h-6 w-6 text-blue-600\"\n  >\n    <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" />\n    <circle cx=\"9\" cy=\"7\" r=\"4\" />\n    <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\" />\n    <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\n  </svg>\n);\n\nexport const TeamSelection = ({\n  teams,\n  defaultTeamId,\n  onContinue,\n  isSubmitting = false,\n  logo,\n  brandingColors\n}: TeamSelectionProps) => {\n  const [selectedTeamId, setSelectedTeamId] = useState<string>(\n    defaultTeamId || teams[0]?.id || \"\"\n  );\n  const [searchQuery, setSearchQuery] = useState(\"\");\n\n  const filteredTeams = teams.filter((team) =>\n    team.name.toLowerCase().includes(searchQuery.toLowerCase())\n  );\n\n  const handleContinue = async () => {\n    if (!selectedTeamId) return;\n    await onContinue(selectedTeamId);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-gray-50\">\n      {/* Header */}\n      <header className=\"border-b border-gray-200 bg-white px-8 py-6\">\n        <div className=\"mx-auto flex max-w-7xl items-center\">\n          {logo || (\n            <div className=\"flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-500 text-lg font-semibold text-white\">\n              EP\n            </div>\n          )}\n        </div>\n      </header>\n\n      {/* Main Content */}\n      <main className=\"mx-auto max-w-7xl px-8 py-16\">\n        <div className=\"mx-auto max-w-2xl\">\n          <div className=\"mb-12 text-center\">\n            <h1 className=\"text-4xl font-semibold text-gray-900\">Select Team</h1>\n            <p className=\"mt-2 text-base text-gray-600\">\n              Choose which team you'd like to access\n            </p>\n          </div>\n\n          <div className=\"space-y-6\">\n            {/* Search Input */}\n            {teams.length > 3 && (\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4\">\n                  <SearchIcon />\n                </div>\n                <input\n                  type=\"text\"\n                  value={searchQuery}\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  placeholder=\"Search teams...\"\n                  className=\"portal-input w-full py-4 pl-12 pr-4 text-base\"\n                />\n              </div>\n            )}\n\n            {/* Team List */}\n            <div className=\"space-y-3\">\n              {filteredTeams.map((team) => (\n                <button\n                  key={team.id}\n                  type=\"button\"\n                  onClick={() => setSelectedTeamId(team.id)}\n                  className={`flex w-full items-center gap-4 rounded-xl border-2 p-6 text-left transition ${\n                    selectedTeamId === team.id\n                      ? \"border-blue-500 bg-blue-50\"\n                      : \"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm\"\n                  }`}\n                >\n                  <UsersIcon />\n                  <span className=\"text-lg font-medium text-gray-900\">{team.name}</span>\n                </button>\n              ))}\n            </div>\n\n            {/* Continue Button */}\n            <div className=\"flex justify-center pt-6\">\n              <button\n                type=\"button\"\n                onClick={handleContinue}\n                disabled={!selectedTeamId || isSubmitting}\n                className=\"rounded-xl bg-indigo-600 px-12 py-3 text-base font-semibold text-white shadow-sm transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                {isSubmitting ? \"Loading...\" : \"Continue\"}\n              </button>\n            </div>\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n};\n\nTeamSelection.displayName = \"TeamSelection\";\n"]}
+{"version":3,"sources":["../../src/utils/constants.ts","../../src/components/team-selection.tsx"],"names":[],"mappings":"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","file":"team-selection.js","sourcesContent":["/**\n * Default globe favicon matching the CiGlobe icon (Circum Icons)\n * Used as fallback when custom branding doesn't provide a favicon\n */\nexport const DEFAULT_FAVICON = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E\";\n\n/**\n * Default primary brand color\n */\nexport const DEFAULT_PRIMARY_COLOR = \"#4f46e5\";\n\n/**\n * Default secondary brand color\n */\nexport const DEFAULT_SECONDARY_COLOR = \"#6366f1\";\n\n/**\n * Check if the API origin is HTTP (used for repldev environments)\n * This determines cookie security settings for cross-origin iframes\n * @returns true if the API origin starts with http:// (not https://)\n */\nexport const isHttpApiOrigin = (): boolean => {\n  return process.env.REPLICATED_APP_ORIGIN?.startsWith('http://') || false;\n};\n","\"use client\";\n\nimport { useState } from \"react\";\nimport { DEFAULT_SECONDARY_COLOR } from \"../utils/constants\";\n\nexport interface Team {\n  id: string;\n  name: string;\n}\n\nexport interface TeamSelectionProps {\n  teams: Team[];\n  defaultTeamId?: string;\n  onContinue: (teamId: string) => void | Promise<void>;\n  isSubmitting?: boolean;\n  logo?: React.ReactNode;\n  brandingColors?: {\n    primary?: string;\n    secondary?: string;\n  };\n}\n\nconst SearchIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"h-5 w-5 text-gray-400\"\n  >\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <path d=\"m21 21-4.35-4.35\" />\n  </svg>\n);\n\nconst UsersIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"h-6 w-6 text-blue-600\"\n  >\n    <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" />\n    <circle cx=\"9\" cy=\"7\" r=\"4\" />\n    <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\" />\n    <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\n  </svg>\n);\n\nexport const TeamSelection = ({\n  teams,\n  defaultTeamId,\n  onContinue,\n  isSubmitting = false,\n  logo,\n  brandingColors\n}: TeamSelectionProps) => {\n  const [selectedTeamId, setSelectedTeamId] = useState<string>(\n    defaultTeamId || teams[0]?.id || \"\"\n  );\n  const [searchQuery, setSearchQuery] = useState(\"\");\n\n  const filteredTeams = teams.filter((team) =>\n    team.name.toLowerCase().includes(searchQuery.toLowerCase())\n  );\n\n  const handleContinue = async () => {\n    if (!selectedTeamId) return;\n    await onContinue(selectedTeamId);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-gray-50\">\n      {/* Header */}\n      <header className=\"border-b border-gray-200 bg-white px-8 py-6\">\n        <div className=\"mx-auto flex max-w-7xl items-center\">\n          {logo || (\n            <div className=\"flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-500 text-lg font-semibold text-white\">\n              EP\n            </div>\n          )}\n        </div>\n      </header>\n\n      {/* Main Content */}\n      <main className=\"mx-auto max-w-7xl px-8 py-16\">\n        <div className=\"mx-auto max-w-2xl\">\n          <div className=\"mb-12 text-center\">\n            <h1 className=\"text-4xl font-semibold text-gray-900\">Select Team</h1>\n            <p className=\"mt-2 text-base text-gray-600\">\n              Choose which team you'd like to access\n            </p>\n          </div>\n\n          <div className=\"space-y-6\">\n            {/* Search Input */}\n            {teams.length > 3 && (\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4\">\n                  <SearchIcon />\n                </div>\n                <input\n                  type=\"text\"\n                  value={searchQuery}\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  placeholder=\"Search teams...\"\n                  className=\"portal-input w-full py-4 pl-12 pr-4 text-base\"\n                />\n              </div>\n            )}\n\n            {/* Team List */}\n            <div className=\"space-y-3\">\n              {filteredTeams.map((team) => (\n                <button\n                  key={team.id}\n                  type=\"button\"\n                  onClick={() => setSelectedTeamId(team.id)}\n                  className={`flex w-full items-center gap-4 rounded-xl border-2 p-6 text-left transition ${\n                    selectedTeamId === team.id\n                      ? \"border-blue-500 bg-blue-50\"\n                      : \"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm\"\n                  }`}\n                >\n                  <UsersIcon />\n                  <span className=\"text-lg font-medium text-gray-900\">{team.name}</span>\n                </button>\n              ))}\n            </div>\n\n            {/* Continue Button */}\n            <div className=\"flex justify-center pt-6\">\n              <button\n                type=\"button\"\n                onClick={handleContinue}\n                disabled={!selectedTeamId || isSubmitting}\n                className=\"rounded-xl px-12 py-3 text-base font-semibold text-white shadow-sm transition-opacity duration-200 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50\"\n                style={{ backgroundColor: brandingColors?.primary || `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})` }}\n              >\n                {isSubmitting ? \"Loading...\" : \"Continue\"}\n              </button>\n            </div>\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n};\n\nTeamSelection.displayName = \"TeamSelection\";\n"]}

package/dist/esm/team-settings-card.js

@@ -6,6 +6,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * This file is generated by tsup. Do not edit manually.
  */
 
+
+// src/utils/constants.ts
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
 var UsersIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -41,7 +44,7 @@ var headingClass = "text-lg font-semibold text-gray-900";
 var contentClass = "mt-4 flex-1 space-y-3";
 var itemClass = "flex items-center gap-3 text-sm text-gray-600";
 var iconClass = "h-5 w-5 text-gray-500";
-var footerClass = "mt-6 flex justify-end text-sm font-semibold text-primary hover:text-primary/80";
+var footerClass = "mt-6 flex justify-end text-sm font-semibold hover:opacity-80";
 var TeamSettingsCard = ({
   userCount = 0,
   serviceAccountCount = 0
@@ -65,7 +68,7 @@ var TeamSettingsCard = ({
       ] })
     ] })
   ] }),
-  /* @__PURE__ */ jsx("footer", { className: footerClass, children: /* @__PURE__ */ jsx(Link, { href: "/team-settings", children: "View team settings \u2192" }) })
+  /* @__PURE__ */ jsx("footer", { className: footerClass, children: /* @__PURE__ */ jsx(Link, { href: "/team-settings", style: { color: `var(--portal-branding-secondary, ${DEFAULT_SECONDARY_COLOR})` }, children: "View team settings \u2192" }) })
 ] });
 TeamSettingsCard.displayName = "TeamSettingsCard";
 

package/dist/esm/team-settings-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/team-settings-card.tsx"],"names":[],"mappings":";;;;;;;;AAGA,IAAM,SAAA,GAAY,CAAC,KAAA,qBACjB,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,KAAA,EAAM,4BAAA;AAAA,IACN,OAAA,EAAQ,WAAA;AAAA,IACR,IAAA,EAAK,MAAA;AAAA,IACL,MAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,GAAA;AAAA,IACb,aAAA,EAAc,OAAA;AAAA,IACd,cAAA,EAAe,OAAA;AAAA,IACf,aAAA,EAAY,MAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,4WAAA,EAA6W;AAAA;AACvX,CAAA;AAGF,IAAM,OAAA,GAAU,CAAC,KAAA,qBACf,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,KAAA,EAAM,4BAAA;AAAA,IACN,OAAA,EAAQ,WAAA;AAAA,IACR,IAAA,EAAK,MAAA;AAAA,IACL,MAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,GAAA;AAAA,IACb,aAAA,EAAc,OAAA;AAAA,IACd,cAAA,EAAe,OAAA;AAAA,IACf,aAAA,EAAY,MAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,4MAAA,EAA6M;AAAA;AACvN,CAAA;AAGF,IAAM,aAAA,GACJ,8GAAA;AACF,IAAM,YAAA,GAAe,qCAAA;AACrB,IAAM,YAAA,GAAe,uBAAA;AACrB,IAAM,SAAA,GAAY,+CAAA;AAClB,IAAM,SAAA,GAAY,uBAAA;AAClB,IAAM,WAAA,GACJ,gFAAA;AASK,IAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA,GAAY,CAAA;AAAA,EACZ,mBAAA,GAAsB;AACxB,CAAA,qBACE,IAAA,CAAC,SAAA,EAAA,EAAQ,SAAA,EAAW,aAAA,EAAe,mBAAgB,4BAAA,EACjD,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EACC,8BAAC,IAAA,EAAA,EAAG,EAAA,EAAG,8BAA6B,SAAA,EAAW,YAAA,EAAc,2BAE7D,CAAA,EACF,CAAA;AAAA,kBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,EACd,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,SAAA,EACd,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,WAAW,SAAA,EAAW,CAAA;AAAA,2BAChC,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,QAAU,QAAA;AAAA,QAAO,SAAA,KAAc,IAAI,QAAA,GAAW;AAAA,OAAA,EACjD;AAAA,KAAA,EACF,CAAA;AAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,SAAA,EACd,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,WAAW,SAAA,EAAW,CAAA;AAAA,2BAC9B,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,mBAAA;AAAA,QAAoB,WAAA;AAAA,QAAU,mBAAA,KAAwB,IAAI,SAAA,GAAY;AAAA,OAAA,EACzE;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAAA,kBACA,GAAA,CAAC,YAAO,SAAA,EAAW,WAAA,EACjB,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAK,gBAAA,EAAiB,QAAA,EAAA,2BAAA,EAAoB,CAAA,EAClD;AAAA,CAAA,EACF;AAGF,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"team-settings-card.js","sourcesContent":["import type { SVGProps } from \"react\";\nimport Link from \"next/link\";\n\nconst UsersIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={1.5}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z\" />\n  </svg>\n);\n\nconst KeyIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={1.5}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z\" />\n  </svg>\n);\n\nconst baseCardClass =\n  \"flex h-full flex-col rounded-xl border border-gray-200 bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.05)]\";\nconst headingClass = \"text-lg font-semibold text-gray-900\";\nconst contentClass = \"mt-4 flex-1 space-y-3\";\nconst itemClass = \"flex items-center gap-3 text-sm text-gray-600\";\nconst iconClass = \"h-5 w-5 text-gray-500\";\nconst footerClass =\n  \"mt-6 flex justify-end text-sm font-semibold text-primary hover:text-primary/80\";\n\nexport interface TeamSettingsCardProps {\n  /** Number of team members */\n  userCount?: number;\n  /** Number of service accounts */\n  serviceAccountCount?: number;\n}\n\nexport const TeamSettingsCard = ({\n  userCount = 0,\n  serviceAccountCount = 0\n}: TeamSettingsCardProps) => (\n  <section className={baseCardClass} aria-labelledby=\"team-settings-card-heading\">\n    <header>\n      <h2 id=\"team-settings-card-heading\" className={headingClass}>\n        Team Settings\n      </h2>\n    </header>\n    <div className={contentClass}>\n      <div className={itemClass}>\n        <UsersIcon className={iconClass} />\n        <span>\n          {userCount} Team {userCount === 1 ? \"Member\" : \"Members\"}\n        </span>\n      </div>\n      <div className={itemClass}>\n        <KeyIcon className={iconClass} />\n        <span>\n          {serviceAccountCount} Service {serviceAccountCount === 1 ? \"Account\" : \"Accounts\"}\n        </span>\n      </div>\n    </div>\n    <footer className={footerClass}>\n      <Link href=\"/team-settings\">View team settings →</Link>\n    </footer>\n  </section>\n);\n\nTeamSettingsCard.displayName = \"TeamSettingsCard\";\n"]}
+{"version":3,"sources":["../../src/utils/constants.ts","../../src/components/team-settings-card.tsx"],"names":[],"mappings":"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","file":"team-settings-card.js","sourcesContent":["/**\n * Default globe favicon matching the CiGlobe icon (Circum Icons)\n * Used as fallback when custom branding doesn't provide a favicon\n */\nexport const DEFAULT_FAVICON = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E\";\n\n/**\n * Default primary brand color\n */\nexport const DEFAULT_PRIMARY_COLOR = \"#4f46e5\";\n\n/**\n * Default secondary brand color\n */\nexport const DEFAULT_SECONDARY_COLOR = \"#6366f1\";\n\n/**\n * Check if the API origin is HTTP (used for repldev environments)\n * This determines cookie security settings for cross-origin iframes\n * @returns true if the API origin starts with http:// (not https://)\n */\nexport const isHttpApiOrigin = (): boolean => {\n  return process.env.REPLICATED_APP_ORIGIN?.startsWith('http://') || false;\n};\n","import type { SVGProps } from \"react\";\nimport Link from \"next/link\";\nimport { DEFAULT_SECONDARY_COLOR } from \"../utils/constants\";\n\nconst UsersIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={1.5}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z\" />\n  </svg>\n);\n\nconst KeyIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={1.5}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z\" />\n  </svg>\n);\n\nconst baseCardClass =\n  \"flex h-full flex-col rounded-xl border border-gray-200 bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.05)]\";\nconst headingClass = \"text-lg font-semibold text-gray-900\";\nconst contentClass = \"mt-4 flex-1 space-y-3\";\nconst itemClass = \"flex items-center gap-3 text-sm text-gray-600\";\nconst iconClass = \"h-5 w-5 text-gray-500\";\nconst footerClass =\n  \"mt-6 flex justify-end text-sm font-semibold hover:opacity-80\";\n\nexport interface TeamSettingsCardProps {\n  /** Number of team members */\n  userCount?: number;\n  /** Number of service accounts */\n  serviceAccountCount?: number;\n}\n\nexport const TeamSettingsCard = ({\n  userCount = 0,\n  serviceAccountCount = 0\n}: TeamSettingsCardProps) => (\n  <section className={baseCardClass} aria-labelledby=\"team-settings-card-heading\">\n    <header>\n      <h2 id=\"team-settings-card-heading\" className={headingClass}>\n        Team Settings\n      </h2>\n    </header>\n    <div className={contentClass}>\n      <div className={itemClass}>\n        <UsersIcon className={iconClass} />\n        <span>\n          {userCount} Team {userCount === 1 ? \"Member\" : \"Members\"}\n        </span>\n      </div>\n      <div className={itemClass}>\n        <KeyIcon className={iconClass} />\n        <span>\n          {serviceAccountCount} Service {serviceAccountCount === 1 ? \"Account\" : \"Accounts\"}\n        </span>\n      </div>\n    </div>\n    <footer className={footerClass}>\n      <Link href=\"/team-settings\" style={{ color: `var(--portal-branding-secondary, ${DEFAULT_SECONDARY_COLOR})` }}>View team settings →</Link>\n    </footer>\n  </section>\n);\n\nTeamSettingsCard.displayName = \"TeamSettingsCard\";\n"]}

package/dist/esm/team-settings.js

@@ -8,6 +8,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * This file is generated by tsup. Do not edit manually.
  */
 
+
+// src/utils/constants.ts
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
 var mockUsers = [
   {
     email: "marc.e.campbell@gmail.com",
@@ -80,7 +83,8 @@ var TeamUsers = ({ users }) => /* @__PURE__ */ jsxs("div", { className: "space-y
       "button",
       {
         type: "button",
-        className: "rounded-lg bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-indigo-700",
+        className: "rounded-lg px-6 py-2.5 text-sm font-medium text-white transition-opacity duration-200 hover:opacity-90",
+        style: { backgroundColor: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})` },
         children: "Invite user"
       }
     )
@@ -110,7 +114,8 @@ var TeamServiceAccounts = ({ serviceAccounts }) => /* @__PURE__ */ jsxs("div", {
       "button",
       {
         type: "button",
-        className: "rounded-lg bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-indigo-700",
+        className: "rounded-lg px-6 py-2.5 text-sm font-medium text-white transition-opacity duration-200 hover:opacity-90",
+        style: { backgroundColor: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})` },
         children: "Create service account"
       }
     )

package/dist/esm/team-settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/team-settings.tsx"],"names":[],"mappings":"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","file":"team-settings.js","sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { useRouter, usePathname } from \"next/navigation\";\n\ninterface TeamUser {\n  email: string;\n  isCurrentUser: boolean;\n  firstAccessed: string;\n  lastAccessed: string;\n  views: number;\n}\n\ninterface ServiceAccount {\n  name: string;\n  createdAt: string;\n  lastUsed: string | null;\n  status: \"active\" | \"revoked\";\n}\n\nexport interface TeamSettingsProps {\n  users?: TeamUser[];\n  serviceAccounts?: ServiceAccount[];\n}\n\nconst mockUsers: TeamUser[] = [\n  {\n    email: \"marc.e.campbell@gmail.com\",\n    isCurrentUser: true,\n    firstAccessed: \"Dec 2, 2025 8:44 PM\",\n    lastAccessed: \"Nov 17, 2025 10:23 PM\",\n    views: 1266\n  }\n];\n\nconst mockServiceAccounts: ServiceAccount[] = [\n  {\n    name: \"CI/CD Pipeline\",\n    createdAt: \"Nov 15, 2025 3:20 PM\",\n    lastUsed: \"Dec 2, 2025 5:30 AM\",\n    status: \"active\"\n  },\n  {\n    name: \"Monitoring Service\",\n    createdAt: \"Oct 10, 2025 9:15 AM\",\n    lastUsed: null,\n    status: \"revoked\"\n  }\n];\n\nexport const TeamSettings = ({ \n  users = mockUsers, \n  serviceAccounts = mockServiceAccounts \n}: TeamSettingsProps) => {\n  const router = useRouter();\n  const pathname = usePathname();\n  \n  // Determine active tab from URL\n  const isUsersTab = !pathname.includes(\"/service-accounts\");\n  const [activeTab, setActiveTab] = useState<\"users\" | \"service-accounts\">(\n    isUsersTab ? \"users\" : \"service-accounts\"\n  );\n\n  const handleTabChange = (tab: \"users\" | \"service-accounts\") => {\n    setActiveTab(tab);\n    const basePath = pathname.split(\"/team-settings\")[0];\n    const newPath = tab === \"users\" \n      ? `${basePath}/team-settings/users`\n      : `${basePath}/team-settings/service-accounts`;\n    router.push(newPath);\n  };\n\n  return (\n    <div className=\"space-y-8\">\n      <header>\n        <h1 className=\"text-4xl font-semibold text-gray-900\">Team Settings</h1>\n      </header>\n\n      {/* Tabs */}\n      <div className=\"border-b border-gray-200\">\n        <nav className=\"flex gap-8\">\n          <button\n            type=\"button\"\n            onClick={() => handleTabChange(\"users\")}\n            className={`pb-4 text-base font-medium transition ${\n              activeTab === \"users\"\n                ? \"border-b-2 border-gray-900 text-gray-900\"\n                : \"text-gray-500 hover:text-gray-700\"\n            }`}\n          >\n            Users\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => handleTabChange(\"service-accounts\")}\n            className={`pb-4 text-base font-medium transition ${\n              activeTab === \"service-accounts\"\n                ? \"border-b-2 border-gray-900 text-gray-900\"\n                : \"text-gray-500 hover:text-gray-700\"\n            }`}\n          >\n            Service Accounts\n          </button>\n        </nav>\n      </div>\n\n      {/* Content */}\n      {activeTab === \"users\" ? (\n        <TeamUsers users={users} />\n      ) : (\n        <TeamServiceAccounts serviceAccounts={serviceAccounts} />\n      )}\n    </div>\n  );\n};\n\nTeamSettings.displayName = \"TeamSettings\";\n\nconst TeamUsers = ({ users }: { users: TeamUser[] }) => (\n  <div className=\"space-y-6\">\n    <div className=\"flex items-center justify-between\">\n      <p className=\"text-base text-gray-600\">\n        Manage users with access to your Enterprise Portal\n      </p>\n      <button\n        type=\"button\"\n        className=\"rounded-lg bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-indigo-700\"\n      >\n        Invite user\n      </button>\n    </div>\n\n    <div className=\"overflow-hidden rounded-lg border border-gray-200 bg-white\">\n      <table className=\"w-full\">\n        <thead className=\"bg-gray-50\">\n          <tr>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Email\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              First Accessed\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Last Accessed\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Views\n            </th>\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-gray-200\">\n          {users.map((user) => (\n            <tr key={user.email} className=\"hover:bg-gray-50\">\n              <td className=\"px-6 py-4 text-sm text-gray-900\">\n                {user.email}\n                {user.isCurrentUser && (\n                  <span className=\"ml-2 text-gray-500\">(You)</span>\n                )}\n              </td>\n              <td className=\"px-6 py-4 text-sm text-gray-600\">\n                {user.firstAccessed}\n              </td>\n              <td className=\"px-6 py-4 text-sm text-gray-600\">\n                {user.lastAccessed}\n              </td>\n              <td className=\"px-6 py-4 text-sm text-gray-600\">\n                {user.views}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  </div>\n);\n\nconst TeamServiceAccounts = ({ serviceAccounts }: { serviceAccounts: ServiceAccount[] }) => (\n  <div className=\"space-y-6\">\n    <div className=\"flex items-center justify-between\">\n      <p className=\"text-base text-gray-600\">\n        Manage service accounts for automated access to your Enterprise Portal\n      </p>\n      <button\n        type=\"button\"\n        className=\"rounded-lg bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-indigo-700\"\n      >\n        Create service account\n      </button>\n    </div>\n\n    <div className=\"overflow-hidden rounded-lg border border-gray-200 bg-white\">\n      <table className=\"w-full\">\n        <thead className=\"bg-gray-50\">\n          <tr>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Name\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Created\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Last Used\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Status\n            </th>\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-gray-200\">\n          {serviceAccounts.map((account) => (\n            <tr key={account.name} className=\"hover:bg-gray-50\">\n              <td className=\"px-6 py-4 text-sm font-medium text-gray-900\">\n                {account.name}\n              </td>\n              <td className=\"px-6 py-4 text-sm text-gray-600\">\n                {account.createdAt}\n              </td>\n              <td className=\"px-6 py-4 text-sm text-gray-600\">\n                {account.lastUsed || \"Never\"}\n              </td>\n              <td className=\"px-6 py-4 text-sm\">\n                {account.status === \"active\" ? (\n                  <span className=\"inline-flex rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800\">\n                    Active\n                  </span>\n                ) : (\n                  <span className=\"inline-flex rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-800\">\n                    Revoked\n                  </span>\n                )}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  </div>\n);\n"]}
+{"version":3,"sources":["../../src/utils/constants.ts","../../src/components/team-settings.tsx"],"names":[],"mappings":"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","file":"team-settings.js","sourcesContent":["/**\n * Default globe favicon matching the CiGlobe icon (Circum Icons)\n * Used as fallback when custom branding doesn't provide a favicon\n */\nexport const DEFAULT_FAVICON = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E\";\n\n/**\n * Default primary brand color\n */\nexport const DEFAULT_PRIMARY_COLOR = \"#4f46e5\";\n\n/**\n * Default secondary brand color\n */\nexport const DEFAULT_SECONDARY_COLOR = \"#6366f1\";\n\n/**\n * Check if the API origin is HTTP (used for repldev environments)\n * This determines cookie security settings for cross-origin iframes\n * @returns true if the API origin starts with http:// (not https://)\n */\nexport const isHttpApiOrigin = (): boolean => {\n  return process.env.REPLICATED_APP_ORIGIN?.startsWith('http://') || false;\n};\n","\"use client\";\n\nimport { useState } from \"react\";\nimport { useRouter, usePathname } from \"next/navigation\";\nimport { DEFAULT_SECONDARY_COLOR } from \"../utils/constants\";\n\ninterface TeamUser {\n  email: string;\n  isCurrentUser: boolean;\n  firstAccessed: string;\n  lastAccessed: string;\n  views: number;\n}\n\ninterface ServiceAccount {\n  name: string;\n  createdAt: string;\n  lastUsed: string | null;\n  status: \"active\" | \"revoked\";\n}\n\nexport interface TeamSettingsProps {\n  users?: TeamUser[];\n  serviceAccounts?: ServiceAccount[];\n}\n\nconst mockUsers: TeamUser[] = [\n  {\n    email: \"marc.e.campbell@gmail.com\",\n    isCurrentUser: true,\n    firstAccessed: \"Dec 2, 2025 8:44 PM\",\n    lastAccessed: \"Nov 17, 2025 10:23 PM\",\n    views: 1266\n  }\n];\n\nconst mockServiceAccounts: ServiceAccount[] = [\n  {\n    name: \"CI/CD Pipeline\",\n    createdAt: \"Nov 15, 2025 3:20 PM\",\n    lastUsed: \"Dec 2, 2025 5:30 AM\",\n    status: \"active\"\n  },\n  {\n    name: \"Monitoring Service\",\n    createdAt: \"Oct 10, 2025 9:15 AM\",\n    lastUsed: null,\n    status: \"revoked\"\n  }\n];\n\nexport const TeamSettings = ({ \n  users = mockUsers, \n  serviceAccounts = mockServiceAccounts \n}: TeamSettingsProps) => {\n  const router = useRouter();\n  const pathname = usePathname();\n  \n  // Determine active tab from URL\n  const isUsersTab = !pathname.includes(\"/service-accounts\");\n  const [activeTab, setActiveTab] = useState<\"users\" | \"service-accounts\">(\n    isUsersTab ? \"users\" : \"service-accounts\"\n  );\n\n  const handleTabChange = (tab: \"users\" | \"service-accounts\") => {\n    setActiveTab(tab);\n    const basePath = pathname.split(\"/team-settings\")[0];\n    const newPath = tab === \"users\" \n      ? `${basePath}/team-settings/users`\n      : `${basePath}/team-settings/service-accounts`;\n    router.push(newPath);\n  };\n\n  return (\n    <div className=\"space-y-8\">\n      <header>\n        <h1 className=\"text-4xl font-semibold text-gray-900\">Team Settings</h1>\n      </header>\n\n      {/* Tabs */}\n      <div className=\"border-b border-gray-200\">\n        <nav className=\"flex gap-8\">\n          <button\n            type=\"button\"\n            onClick={() => handleTabChange(\"users\")}\n            className={`pb-4 text-base font-medium transition ${\n              activeTab === \"users\"\n                ? \"border-b-2 border-gray-900 text-gray-900\"\n                : \"text-gray-500 hover:text-gray-700\"\n            }`}\n          >\n            Users\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => handleTabChange(\"service-accounts\")}\n            className={`pb-4 text-base font-medium transition ${\n              activeTab === \"service-accounts\"\n                ? \"border-b-2 border-gray-900 text-gray-900\"\n                : \"text-gray-500 hover:text-gray-700\"\n            }`}\n          >\n            Service Accounts\n          </button>\n        </nav>\n      </div>\n\n      {/* Content */}\n      {activeTab === \"users\" ? (\n        <TeamUsers users={users} />\n      ) : (\n        <TeamServiceAccounts serviceAccounts={serviceAccounts} />\n      )}\n    </div>\n  );\n};\n\nTeamSettings.displayName = \"TeamSettings\";\n\nconst TeamUsers = ({ users }: { users: TeamUser[] }) => (\n  <div className=\"space-y-6\">\n    <div className=\"flex items-center justify-between\">\n      <p className=\"text-base text-gray-600\">\n        Manage users with access to your Enterprise Portal\n      </p>\n      <button\n        type=\"button\"\n        className=\"rounded-lg px-6 py-2.5 text-sm font-medium text-white transition-opacity duration-200 hover:opacity-90\"\n        style={{ backgroundColor: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})` }}\n      >\n        Invite user\n      </button>\n    </div>\n\n    <div className=\"overflow-hidden rounded-lg border border-gray-200 bg-white\">\n      <table className=\"w-full\">\n        <thead className=\"bg-gray-50\">\n          <tr>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Email\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              First Accessed\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Last Accessed\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Views\n            </th>\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-gray-200\">\n          {users.map((user) => (\n            <tr key={user.email} className=\"hover:bg-gray-50\">\n              <td className=\"px-6 py-4 text-sm text-gray-900\">\n                {user.email}\n                {user.isCurrentUser && (\n                  <span className=\"ml-2 text-gray-500\">(You)</span>\n                )}\n              </td>\n              <td className=\"px-6 py-4 text-sm text-gray-600\">\n                {user.firstAccessed}\n              </td>\n              <td className=\"px-6 py-4 text-sm text-gray-600\">\n                {user.lastAccessed}\n              </td>\n              <td className=\"px-6 py-4 text-sm text-gray-600\">\n                {user.views}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  </div>\n);\n\nconst TeamServiceAccounts = ({ serviceAccounts }: { serviceAccounts: ServiceAccount[] }) => (\n  <div className=\"space-y-6\">\n    <div className=\"flex items-center justify-between\">\n      <p className=\"text-base text-gray-600\">\n        Manage service accounts for automated access to your Enterprise Portal\n      </p>\n      <button\n        type=\"button\"\n        className=\"rounded-lg px-6 py-2.5 text-sm font-medium text-white transition-opacity duration-200 hover:opacity-90\"\n        style={{ backgroundColor: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})` }}\n      >\n        Create service account\n      </button>\n    </div>\n\n    <div className=\"overflow-hidden rounded-lg border border-gray-200 bg-white\">\n      <table className=\"w-full\">\n        <thead className=\"bg-gray-50\">\n          <tr>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Name\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Created\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Last Used\n            </th>\n            <th className=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500\">\n              Status\n            </th>\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-gray-200\">\n          {serviceAccounts.map((account) => (\n            <tr key={account.name} className=\"hover:bg-gray-50\">\n              <td className=\"px-6 py-4 text-sm font-medium text-gray-900\">\n                {account.name}\n              </td>\n              <td className=\"px-6 py-4 text-sm text-gray-600\">\n                {account.createdAt}\n              </td>\n              <td className=\"px-6 py-4 text-sm text-gray-600\">\n                {account.lastUsed || \"Never\"}\n              </td>\n              <td className=\"px-6 py-4 text-sm\">\n                {account.status === \"active\" ? (\n                  <span className=\"inline-flex rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800\">\n                    Active\n                  </span>\n                ) : (\n                  <span className=\"inline-flex rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-800\">\n                    Revoked\n                  </span>\n                )}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  </div>\n);\n"]}

package/dist/esm/top-nav-user-menu.js

@@ -7,6 +7,9 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
  * This file is generated by tsup. Do not edit manually.
  */
 
+
+// src/utils/constants.ts
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
 var TopNavChangeTeamButton = ({
   displayLabel,
   customers = [],
@@ -159,7 +162,8 @@ var TopNavChangeTeamButton = ({
               type: "button",
               onClick: handleChangeTeam,
               disabled: !selectedTeamId || isChanging || selectedTeamId === currentCustomerId,
-              className: "rounded-xl bg-indigo-600 px-6 py-3 text-base font-semibold text-white shadow-sm transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50",
+              className: "rounded-xl px-6 py-3 text-base font-semibold text-white shadow-sm transition-opacity duration-200 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+              style: { backgroundColor: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})` },
               children: isChanging ? "Changing..." : "Change team"
             }
           )

package/dist/esm/top-nav-user-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/top-nav-user-menu.tsx"],"names":[],"mappings":"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","file":"top-nav-user-menu.js","sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\n\nexport interface Customer {\n  id: string;\n  name: string;\n}\n\nexport interface TopNavChangeTeamButtonProps {\n  displayLabel: string;\n  customers?: Customer[];\n  currentCustomerId?: string;\n  onChangeTeam?: (customerId: string) => Promise<void>;\n  appName?: string;\n  channelName?: string;\n}\n\nexport const TopNavChangeTeamButton = ({\n  displayLabel,\n  customers = [],\n  currentCustomerId,\n  onChangeTeam,\n  appName = \"Application\",\n  channelName = \"\"\n}: TopNavChangeTeamButtonProps) => {\n  const [showChangeTeamModal, setShowChangeTeamModal] = useState(false);\n  const [selectedTeamId, setSelectedTeamId] = useState(currentCustomerId || \"\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [isChanging, setIsChanging] = useState(false);\n\n  const filteredCustomers = customers.filter((customer) =>\n    customer.name.toLowerCase().includes(searchQuery.toLowerCase())\n  );\n\n  const handleChangeTeam = async () => {\n    if (!selectedTeamId || !onChangeTeam) return;\n    \n    setIsChanging(true);\n    try {\n      await onChangeTeam(selectedTeamId);\n      setShowChangeTeamModal(false);\n      // Force a full page reload to ensure new JWT is used everywhere\n      window.location.href = \"/\";\n    } catch (error) {\n      console.error(\"[top-nav-user-menu] Failed to change team:\", error);\n      setIsChanging(false);\n    }\n  };\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        onClick={() => setShowChangeTeamModal(true)}\n        className=\"block w-full px-4 py-2 text-left hover:bg-gray-100\"\n      >\n        Change team\n      </button>\n\n      {/* Change Team Modal */}\n      {showChangeTeamModal && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4\">\n          <div className=\"w-full max-w-2xl rounded-3xl bg-white p-8 shadow-xl\">\n            <div className=\"mb-6 flex items-center justify-between\">\n              <h2 className=\"text-3xl font-semibold text-gray-900\">Change team</h2>\n              <button\n                type=\"button\"\n                onClick={() => setShowChangeTeamModal(false)}\n                className=\"text-gray-400 hover:text-gray-600\"\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"24\"\n                  height=\"24\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                </svg>\n              </button>\n            </div>\n\n            <div className=\"space-y-6\">\n              {customers.length > 3 && (\n                <div className=\"relative\">\n                  <div className=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"20\"\n                      height=\"20\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      className=\"text-gray-400\"\n                    >\n                      <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                      <path d=\"m21 21-4.35-4.35\"></path>\n                    </svg>\n                  </div>\n                  <input\n                    type=\"text\"\n                    value={searchQuery}\n                    onChange={(e) => setSearchQuery(e.target.value)}\n                    placeholder=\"Search teams...\"\n                    className=\"portal-input w-full py-4 pl-12 pr-4 text-base\"\n                  />\n                </div>\n              )}\n\n              <div>\n                <p className=\"mb-4 text-sm text-gray-600\">{channelName ? `${appName} ${channelName}` : appName}</p>\n                <div className=\"space-y-3\">\n                  {filteredCustomers.map((customer) => (\n                    <button\n                      key={customer.id}\n                      type=\"button\"\n                      onClick={() => setSelectedTeamId(customer.id)}\n                      className={`flex w-full items-center gap-4 rounded-xl border-2 p-6 text-left transition ${\n                        selectedTeamId === customer.id\n                          ? \"border-blue-500 bg-blue-50\"\n                          : \"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm\"\n                      }`}\n                    >\n                      <div className=\"flex h-12 w-12 items-center justify-center rounded-full bg-blue-100\">\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          width=\"24\"\n                          height=\"24\"\n                          viewBox=\"0 0 24 24\"\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"2\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          className=\"text-blue-600\"\n                        >\n                          <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"></path>\n                          <circle cx=\"9\" cy=\"7\" r=\"4\"></circle>\n                          <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"></path>\n                          <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path>\n                        </svg>\n                      </div>\n                      <span className=\"text-lg font-medium text-gray-900\">{customer.name}</span>\n                    </button>\n                  ))}\n                </div>\n              </div>\n\n              <div className=\"flex justify-end gap-3 pt-4\">\n                <button\n                  type=\"button\"\n                  onClick={() => setShowChangeTeamModal(false)}\n                  className=\"rounded-xl border border-gray-300 px-6 py-3 text-base font-semibold text-gray-700 transition hover:bg-gray-50\"\n                  disabled={isChanging}\n                >\n                  Cancel\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={handleChangeTeam}\n                  disabled={!selectedTeamId || isChanging || selectedTeamId === currentCustomerId}\n                  className=\"rounded-xl bg-indigo-600 px-6 py-3 text-base font-semibold text-white shadow-sm transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50\"\n                >\n                  {isChanging ? \"Changing...\" : \"Change team\"}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nTopNavChangeTeamButton.displayName = \"TopNavChangeTeamButton\";\n"]}
+{"version":3,"sources":["../../src/utils/constants.ts","../../src/components/top-nav-user-menu.tsx"],"names":[],"mappings":"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","file":"top-nav-user-menu.js","sourcesContent":["/**\n * Default globe favicon matching the CiGlobe icon (Circum Icons)\n * Used as fallback when custom branding doesn't provide a favicon\n */\nexport const DEFAULT_FAVICON = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E\";\n\n/**\n * Default primary brand color\n */\nexport const DEFAULT_PRIMARY_COLOR = \"#4f46e5\";\n\n/**\n * Default secondary brand color\n */\nexport const DEFAULT_SECONDARY_COLOR = \"#6366f1\";\n\n/**\n * Check if the API origin is HTTP (used for repldev environments)\n * This determines cookie security settings for cross-origin iframes\n * @returns true if the API origin starts with http:// (not https://)\n */\nexport const isHttpApiOrigin = (): boolean => {\n  return process.env.REPLICATED_APP_ORIGIN?.startsWith('http://') || false;\n};\n","\"use client\";\n\nimport { useState } from \"react\";\nimport { DEFAULT_SECONDARY_COLOR } from \"../utils/constants\";\n\nexport interface Customer {\n  id: string;\n  name: string;\n}\n\nexport interface TopNavChangeTeamButtonProps {\n  displayLabel: string;\n  customers?: Customer[];\n  currentCustomerId?: string;\n  onChangeTeam?: (customerId: string) => Promise<void>;\n  appName?: string;\n  channelName?: string;\n}\n\nexport const TopNavChangeTeamButton = ({\n  displayLabel,\n  customers = [],\n  currentCustomerId,\n  onChangeTeam,\n  appName = \"Application\",\n  channelName = \"\"\n}: TopNavChangeTeamButtonProps) => {\n  const [showChangeTeamModal, setShowChangeTeamModal] = useState(false);\n  const [selectedTeamId, setSelectedTeamId] = useState(currentCustomerId || \"\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [isChanging, setIsChanging] = useState(false);\n\n  const filteredCustomers = customers.filter((customer) =>\n    customer.name.toLowerCase().includes(searchQuery.toLowerCase())\n  );\n\n  const handleChangeTeam = async () => {\n    if (!selectedTeamId || !onChangeTeam) return;\n    \n    setIsChanging(true);\n    try {\n      await onChangeTeam(selectedTeamId);\n      setShowChangeTeamModal(false);\n      // Force a full page reload to ensure new JWT is used everywhere\n      window.location.href = \"/\";\n    } catch (error) {\n      console.error(\"[top-nav-user-menu] Failed to change team:\", error);\n      setIsChanging(false);\n    }\n  };\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        onClick={() => setShowChangeTeamModal(true)}\n        className=\"block w-full px-4 py-2 text-left hover:bg-gray-100\"\n      >\n        Change team\n      </button>\n\n      {/* Change Team Modal */}\n      {showChangeTeamModal && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4\">\n          <div className=\"w-full max-w-2xl rounded-3xl bg-white p-8 shadow-xl\">\n            <div className=\"mb-6 flex items-center justify-between\">\n              <h2 className=\"text-3xl font-semibold text-gray-900\">Change team</h2>\n              <button\n                type=\"button\"\n                onClick={() => setShowChangeTeamModal(false)}\n                className=\"text-gray-400 hover:text-gray-600\"\n              >\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"24\"\n                  height=\"24\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                </svg>\n              </button>\n            </div>\n\n            <div className=\"space-y-6\">\n              {customers.length > 3 && (\n                <div className=\"relative\">\n                  <div className=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"20\"\n                      height=\"20\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      className=\"text-gray-400\"\n                    >\n                      <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                      <path d=\"m21 21-4.35-4.35\"></path>\n                    </svg>\n                  </div>\n                  <input\n                    type=\"text\"\n                    value={searchQuery}\n                    onChange={(e) => setSearchQuery(e.target.value)}\n                    placeholder=\"Search teams...\"\n                    className=\"portal-input w-full py-4 pl-12 pr-4 text-base\"\n                  />\n                </div>\n              )}\n\n              <div>\n                <p className=\"mb-4 text-sm text-gray-600\">{channelName ? `${appName} ${channelName}` : appName}</p>\n                <div className=\"space-y-3\">\n                  {filteredCustomers.map((customer) => (\n                    <button\n                      key={customer.id}\n                      type=\"button\"\n                      onClick={() => setSelectedTeamId(customer.id)}\n                      className={`flex w-full items-center gap-4 rounded-xl border-2 p-6 text-left transition ${\n                        selectedTeamId === customer.id\n                          ? \"border-blue-500 bg-blue-50\"\n                          : \"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm\"\n                      }`}\n                    >\n                      <div className=\"flex h-12 w-12 items-center justify-center rounded-full bg-blue-100\">\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          width=\"24\"\n                          height=\"24\"\n                          viewBox=\"0 0 24 24\"\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"2\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          className=\"text-blue-600\"\n                        >\n                          <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"></path>\n                          <circle cx=\"9\" cy=\"7\" r=\"4\"></circle>\n                          <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"></path>\n                          <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path>\n                        </svg>\n                      </div>\n                      <span className=\"text-lg font-medium text-gray-900\">{customer.name}</span>\n                    </button>\n                  ))}\n                </div>\n              </div>\n\n              <div className=\"flex justify-end gap-3 pt-4\">\n                <button\n                  type=\"button\"\n                  onClick={() => setShowChangeTeamModal(false)}\n                  className=\"rounded-xl border border-gray-300 px-6 py-3 text-base font-semibold text-gray-700 transition hover:bg-gray-50\"\n                  disabled={isChanging}\n                >\n                  Cancel\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={handleChangeTeam}\n                  disabled={!selectedTeamId || isChanging || selectedTeamId === currentCustomerId}\n                  className=\"rounded-xl px-6 py-3 text-base font-semibold text-white shadow-sm transition-opacity duration-200 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50\"\n                  style={{ backgroundColor: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})` }}\n                >\n                  {isChanging ? \"Changing...\" : \"Change team\"}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nTopNavChangeTeamButton.displayName = \"TopNavChangeTeamButton\";\n"]}

package/dist/esm/top-nav.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) {