@replicated/portal-components 0.0.19 → 0.0.21

package/dist/install-card.d.mts

@@ -1,9 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { j as FetchInstallOptionsResult } from './index-BAiVrSSR.mjs';
-import './actions/change-team.mjs';
+import { L as License } from './fetch-license-iTyF7_GY.mjs';
 
 interface InstallCardProps {
-    fetchInstallOptionsAction: () => Promise<FetchInstallOptionsResult>;
+    fetchInstallOptionsAction: () => Promise<License>;
     initialShowLinux?: boolean;
     initialShowHelm?: boolean;
     pollIntervalMs?: number;

package/dist/install-card.d.ts

@@ -1,9 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { j as FetchInstallOptionsResult } from './index-DWt-N5od.js';
-import './actions/change-team.js';
+import { L as License } from './fetch-license-iTyF7_GY.js';
 
 interface InstallCardProps {
-    fetchInstallOptionsAction: () => Promise<FetchInstallOptionsResult>;
+    fetchInstallOptionsAction: () => Promise<License>;
     initialShowLinux?: boolean;
     initialShowHelm?: boolean;
     pollIntervalMs?: number;

package/dist/install-card.js

@@ -14,6 +14,9 @@ var Link__default = /*#__PURE__*/_interopDefault(Link);
  * This file is generated by tsup. Do not edit manually.
  */
 
+
+// src/utils/constants.ts
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
 var LinuxIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -49,7 +52,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 InstallCard = ({
   fetchInstallOptionsAction,
   initialShowLinux = true,
@@ -64,11 +67,11 @@ var InstallCard = ({
         return;
       }
       try {
-        const result = await fetchInstallOptionsAction();
-        setShowLinux(result.showLinux);
-        setShowHelm(result.showHelm);
+        const license = await fetchInstallOptionsAction();
+        setShowLinux(license.isEmbeddedClusterDownloadEnabled || false);
+        setShowHelm(license.isHelmInstallEnabled || false);
       } catch (error) {
-        console.error("[install-card] Failed to fetch install options", error);
+        console.error("[install-card] Failed to fetch license for install options", error);
       }
     };
     fetchOptions();
@@ -99,7 +102,7 @@ var InstallCard = ({
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Deploy via Helm" })
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("footer", { className: footerClass, children: /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/install", children: "View install guide \u2192" }) })
+    /* @__PURE__ */ jsxRuntime.jsx("footer", { className: footerClass, children: /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/install", style: { color: `var(--portal-branding-secondary, ${DEFAULT_SECONDARY_COLOR})` }, children: "View install guide \u2192" }) })
   ] });
 };
 InstallCard.displayName = "InstallCard";

package/dist/install-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/install-card.tsx"],"names":["jsx","useState","useEffect","jsxs","Link"],"mappings":"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","file":"install-card.js","sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { SVGProps } from \"react\";\nimport Link from \"next/link\";\nimport type { FetchInstallOptionsResult } from \"../actions\";\n\nconst LinuxIcon = (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=\"M21.75 17.25v-.228a4.5 4.5 0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375 3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3 0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5 0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z\" />\n  </svg>\n);\n\nconst HelmIcon = (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=\"M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.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 InstallCardProps {\n  fetchInstallOptionsAction: () => Promise<FetchInstallOptionsResult>;\n  initialShowLinux?: boolean;\n  initialShowHelm?: boolean;\n  pollIntervalMs?: number;\n}\n\nexport const InstallCard = ({ \n  fetchInstallOptionsAction,\n  initialShowLinux = true, \n  initialShowHelm = true,\n  pollIntervalMs = 2000\n}: InstallCardProps) => {\n  const [showLinux, setShowLinux] = useState(initialShowLinux);\n  const [showHelm, setShowHelm] = useState(initialShowHelm);\n\n  useEffect(() => {\n    const fetchOptions = async () => {\n      // Skip if tab is not visible\n      if (document.hidden) {\n        return;\n      }\n      \n      try {\n        const result = await fetchInstallOptionsAction();\n        setShowLinux(result.showLinux);\n        setShowHelm(result.showHelm);\n      } catch (error) {\n        console.error(\"[install-card] Failed to fetch install options\", error);\n      }\n    };\n\n    // Fetch immediately\n    fetchOptions();\n\n    // Set up polling interval\n    const intervalId = setInterval(fetchOptions, pollIntervalMs);\n\n    // Also fetch when tab becomes visible again\n    const handleVisibilityChange = () => {\n      if (!document.hidden) {\n        fetchOptions();\n      }\n    };\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n\n    // Cleanup on unmount\n    return () => {\n      clearInterval(intervalId);\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n    };\n  }, [fetchInstallOptionsAction, pollIntervalMs]);\n\n  // If neither option is enabled, don't render anything\n  if (!showLinux && !showHelm) {\n    return null;\n  }\n\n  return (\n    <section className={baseCardClass} aria-labelledby=\"install-card-heading\">\n      <header>\n        <h2 id=\"install-card-heading\" className={headingClass}>\n          Install\n        </h2>\n      </header>\n      <div className={contentClass}>\n        {showLinux ? (\n          <div className={itemClass}>\n            <LinuxIcon className={iconClass} />\n            <span>Deploy to Linux</span>\n          </div>\n        ) : null}\n        {showHelm ? (\n          <div className={itemClass}>\n            <HelmIcon className={iconClass} />\n            <span>Deploy via Helm</span>\n          </div>\n        ) : null}\n      </div>\n      <footer className={footerClass}>\n        <Link href=\"/install\">\n          View install guide →\n        </Link>\n      </footer>\n    </section>\n  );\n};\n\nInstallCard.displayName = \"InstallCard\";\n"]}
+{"version":3,"sources":["../src/utils/constants.ts","../src/components/install-card.tsx"],"names":["jsx","useState","useEffect","jsxs","Link"],"mappings":"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","file":"install-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","\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { SVGProps } from \"react\";\nimport Link from \"next/link\";\nimport type { License } from \"../actions\";\nimport { DEFAULT_SECONDARY_COLOR } from \"../utils/constants\";\n\nconst LinuxIcon = (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=\"M21.75 17.25v-.228a4.5 4.5 0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375 3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3 0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5 0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z\" />\n  </svg>\n);\n\nconst HelmIcon = (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=\"M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.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 InstallCardProps {\n  fetchInstallOptionsAction: () => Promise<License>;\n  initialShowLinux?: boolean;\n  initialShowHelm?: boolean;\n  pollIntervalMs?: number;\n}\n\nexport const InstallCard = ({ \n  fetchInstallOptionsAction,\n  initialShowLinux = true, \n  initialShowHelm = true,\n  pollIntervalMs = 2000\n}: InstallCardProps) => {\n  const [showLinux, setShowLinux] = useState(initialShowLinux);\n  const [showHelm, setShowHelm] = useState(initialShowHelm);\n\n  useEffect(() => {\n    const fetchOptions = async () => {\n      // Skip if tab is not visible\n      if (document.hidden) {\n        return;\n      }\n      \n      try {\n        const license = await fetchInstallOptionsAction();\n        setShowLinux(license.isEmbeddedClusterDownloadEnabled || false);\n        setShowHelm(license.isHelmInstallEnabled || false);\n      } catch (error) {\n        console.error(\"[install-card] Failed to fetch license for install options\", error);\n      }\n    };\n\n    // Fetch immediately\n    fetchOptions();\n\n    // Set up polling interval\n    const intervalId = setInterval(fetchOptions, pollIntervalMs);\n\n    // Also fetch when tab becomes visible again\n    const handleVisibilityChange = () => {\n      if (!document.hidden) {\n        fetchOptions();\n      }\n    };\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n\n    // Cleanup on unmount\n    return () => {\n      clearInterval(intervalId);\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n    };\n  }, [fetchInstallOptionsAction, pollIntervalMs]);\n\n  // If neither option is enabled, don't render anything\n  if (!showLinux && !showHelm) {\n    return null;\n  }\n\n  return (\n    <section className={baseCardClass} aria-labelledby=\"install-card-heading\">\n      <header>\n        <h2 id=\"install-card-heading\" className={headingClass}>\n          Install\n        </h2>\n      </header>\n      <div className={contentClass}>\n        {showLinux ? (\n          <div className={itemClass}>\n            <LinuxIcon className={iconClass} />\n            <span>Deploy to Linux</span>\n          </div>\n        ) : null}\n        {showHelm ? (\n          <div className={itemClass}>\n            <HelmIcon className={iconClass} />\n            <span>Deploy via Helm</span>\n          </div>\n        ) : null}\n      </div>\n      <footer className={footerClass}>\n        <Link href=\"/install\" style={{ color: `var(--portal-branding-secondary, ${DEFAULT_SECONDARY_COLOR})` }}>\n          View install guide →\n        </Link>\n      </footer>\n    </section>\n  );\n};\n\nInstallCard.displayName = \"InstallCard\";\n"]}

package/dist/install-targets.js

@@ -8,6 +8,9 @@ var jsxRuntime = require('react/jsx-runtime');
  * This file is generated by tsup. Do not edit manually.
  */
 
+
+// src/utils/constants.ts
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
 var targetButtonBase = "flex w-full items-center justify-between rounded-2xl px-4 py-3 text-left text-sm font-medium transition";
 var InstallTargets = ({
   options,
@@ -33,10 +36,14 @@ var InstallTargets = ({
       {
         type: "button",
         onClick: () => handleSelect(option.id),
-        className: `${targetButtonBase} ${isActive ? "bg-indigo-100 text-indigo-600" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+        className: `${targetButtonBase} ${isActive ? "bg-white text-gray-600" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+        style: isActive ? {
+          backgroundColor: `var(--portal-branding-primary-light, ${DEFAULT_SECONDARY_COLOR}20)`,
+          color: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})`
+        } : void 0,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label }),
-          isActive ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-indigo-500", children: "Selected" }) : option.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: option.description }) : null
+          isActive ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})` }, children: "Selected" }) : option.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: option.description }) : null
         ]
       },
       option.id

package/dist/install-targets.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/install-targets.tsx"],"names":["useState","jsx","jsxs"],"mappings":";;;;;;;;;;AAIA,IAAM,gBAAA,GACJ,yGAAA;AAeK,IAAM,iBAAiB,CAAC;AAAA,EAC7B,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,MAAM,CAAC,YAAY,aAAa,CAAA,GAAIA,eAAS,OAAA,CAAQ,CAAC,GAAG,EAAE,CAAA;AAE3D,EAAA,MAAM,aAAa,QAAA,IAAY,UAAA;AAE/B,EAAA,MAAM,YAAA,GAAe,CAAC,EAAA,KAAe;AACnC,IAAA,IAAI,CAAC,QAAQ,IAAA,CAAK,CAAC,WAAW,MAAA,CAAO,EAAA,KAAO,EAAE,CAAA,EAAG;AAC/C,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA,aAAA,CAAc,EAAE,CAAA;AAAA,IAClB;AAEA,IAAA,QAAA,GAAW,EAAE,CAAA;AAAA,EACf,CAAA;AAEA,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EACH,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,qBAAA,EACZ,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AACvB,IAAA,MAAM,QAAA,GAAW,OAAO,EAAA,KAAO,UAAA;AAC/B,IAAA,uBACEC,eAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,MAAM,YAAA,CAAa,MAAA,CAAO,EAAE,CAAA;AAAA,QACrC,WAAW,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAC5B,QAAA,GACI,kCACA,yCACN,CAAA,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAD,cAAA,CAAC,MAAA,EAAA,EAAM,iBAAO,KAAA,EAAM,CAAA;AAAA,UACnB,QAAA,mBACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2BAA0B,QAAA,EAAA,UAAA,EAAQ,CAAA,GAChD,MAAA,CAAO,WAAA,kCACR,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAyB,QAAA,EAAA,MAAA,CAAO,aAAY,CAAA,GAC1D;AAAA;AAAA,OAAA;AAAA,MAdC,MAAA,CAAO;AAAA,KAed;AAAA,EAEJ,CAAC,GACH,CAAA,EACF,CAAA;AAEJ;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"install-targets.js","sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\n\nconst targetButtonBase =\n  \"flex w-full items-center justify-between rounded-2xl px-4 py-3 text-left text-sm font-medium transition\";\n\nexport interface InstallTargetOption {\n  id: string;\n  label: string;\n  description?: string;\n}\n\nexport interface InstallTargetsProps {\n  options: InstallTargetOption[];\n  activeId?: string;\n  onChange?: (targetId: string) => void;\n  className?: string;\n}\n\nexport const InstallTargets = ({\n  options,\n  activeId,\n  onChange,\n  className\n}: InstallTargetsProps) => {\n  const [internalId, setInternalId] = useState(options[0]?.id);\n\n  const selectedId = activeId ?? internalId;\n\n  const handleSelect = (id: string) => {\n    if (!options.find((option) => option.id === id)) {\n      return;\n    }\n\n    if (!activeId) {\n      setInternalId(id);\n    }\n\n    onChange?.(id);\n  };\n\n  return (\n    <div className={className}>\n      <div className=\"flex flex-col gap-2\">\n        {options.map((option) => {\n          const isActive = option.id === selectedId;\n          return (\n            <button\n              key={option.id}\n              type=\"button\"\n              onClick={() => handleSelect(option.id)}\n              className={`${targetButtonBase} ${\n                isActive\n                  ? \"bg-indigo-100 text-indigo-600\"\n                  : \"bg-white text-gray-600 hover:bg-gray-50\"\n              }`}\n            >\n              <span>{option.label}</span>\n              {isActive ? (\n                <span className=\"text-xs text-indigo-500\">Selected</span>\n              ) : option.description ? (\n                <span className=\"text-xs text-gray-400\">{option.description}</span>\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nInstallTargets.displayName = \"InstallTargets\";\n"]}
+{"version":3,"sources":["../src/utils/constants.ts","../src/components/install-targets.tsx"],"names":["useState","jsx","jsxs"],"mappings":";;;;;;;;;;;;AAcO,IAAM,uBAAA,GAA0B,SAAA;ACTvC,IAAM,gBAAA,GACJ,yGAAA;AAeK,IAAM,iBAAiB,CAAC;AAAA,EAC7B,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,MAAM,CAAC,YAAY,aAAa,CAAA,GAAIA,eAAS,OAAA,CAAQ,CAAC,GAAG,EAAE,CAAA;AAE3D,EAAA,MAAM,aAAa,QAAA,IAAY,UAAA;AAE/B,EAAA,MAAM,YAAA,GAAe,CAAC,EAAA,KAAe;AACnC,IAAA,IAAI,CAAC,QAAQ,IAAA,CAAK,CAAC,WAAW,MAAA,CAAO,EAAA,KAAO,EAAE,CAAA,EAAG;AAC/C,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA,aAAA,CAAc,EAAE,CAAA;AAAA,IAClB;AAEA,IAAA,QAAA,GAAW,EAAE,CAAA;AAAA,EACf,CAAA;AAEA,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EACH,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,qBAAA,EACZ,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AACvB,IAAA,MAAM,QAAA,GAAW,OAAO,EAAA,KAAO,UAAA;AAC/B,IAAA,uBACEC,eAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,MAAM,YAAA,CAAa,MAAA,CAAO,EAAE,CAAA;AAAA,QACrC,WAAW,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAC5B,QAAA,GACI,2BACA,yCACN,CAAA,CAAA;AAAA,QACA,OAAO,QAAA,GAAW;AAAA,UAChB,eAAA,EAAiB,wCAAwC,uBAAuB,CAAA,GAAA,CAAA;AAAA,UAChF,KAAA,EAAO,kCAAkC,uBAAuB,CAAA,CAAA;AAAA,SAClE,GAAI,MAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAD,cAAA,CAAC,MAAA,EAAA,EAAM,iBAAO,KAAA,EAAM,CAAA;AAAA,UACnB,QAAA,kCACE,MAAA,EAAA,EAAK,SAAA,EAAU,WAAU,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,+BAAA,EAAkC,uBAAuB,CAAA,CAAA,CAAA,IAAO,QAAA,EAAA,UAAA,EAAQ,CAAA,GAChH,OAAO,WAAA,mBACTA,cAAA,CAAC,UAAK,SAAA,EAAU,uBAAA,EAAyB,QAAA,EAAA,MAAA,CAAO,WAAA,EAAY,CAAA,GAC1D;AAAA;AAAA,OAAA;AAAA,MAlBC,MAAA,CAAO;AAAA,KAmBd;AAAA,EAEJ,CAAC,GACH,CAAA,EACF,CAAA;AAEJ;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"install-targets.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\nconst targetButtonBase =\n  \"flex w-full items-center justify-between rounded-2xl px-4 py-3 text-left text-sm font-medium transition\";\n\nexport interface InstallTargetOption {\n  id: string;\n  label: string;\n  description?: string;\n}\n\nexport interface InstallTargetsProps {\n  options: InstallTargetOption[];\n  activeId?: string;\n  onChange?: (targetId: string) => void;\n  className?: string;\n}\n\nexport const InstallTargets = ({\n  options,\n  activeId,\n  onChange,\n  className\n}: InstallTargetsProps) => {\n  const [internalId, setInternalId] = useState(options[0]?.id);\n\n  const selectedId = activeId ?? internalId;\n\n  const handleSelect = (id: string) => {\n    if (!options.find((option) => option.id === id)) {\n      return;\n    }\n\n    if (!activeId) {\n      setInternalId(id);\n    }\n\n    onChange?.(id);\n  };\n\n  return (\n    <div className={className}>\n      <div className=\"flex flex-col gap-2\">\n        {options.map((option) => {\n          const isActive = option.id === selectedId;\n          return (\n            <button\n              key={option.id}\n              type=\"button\"\n              onClick={() => handleSelect(option.id)}\n              className={`${targetButtonBase} ${\n                isActive\n                  ? \"bg-white text-gray-600\"\n                  : \"bg-white text-gray-600 hover:bg-gray-50\"\n              }`}\n              style={isActive ? {\n                backgroundColor: `var(--portal-branding-primary-light, ${DEFAULT_SECONDARY_COLOR}20)`,\n                color: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})`\n              } : undefined}\n            >\n              <span>{option.label}</span>\n              {isActive ? (\n                <span className=\"text-xs\" style={{ color: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})` }}>Selected</span>\n              ) : option.description ? (\n                <span className=\"text-xs text-gray-400\">{option.description}</span>\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nInstallTargets.displayName = \"InstallTargets\";\n"]}

package/dist/instance-card.d.mts

@@ -1,7 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Instance } from './install-actions.mjs';
-import { C as ChannelRelease, I as InstallOptions, S as SecurityReleaseImage, G as GetSecurityInfoDiffResult } from './index-BAiVrSSR.mjs';
+import { C as ChannelRelease, I as InstallOptions, S as SecurityReleaseImage, G as GetSecurityInfoDiffResult } from './index-DyzJ0yKD.mjs';
+import './fetch-license-iTyF7_GY.mjs';
 import './actions/change-team.mjs';
+import './actions/trial-signup.mjs';
 
 interface InstanceCardProps {
     instance: Instance;

package/dist/instance-card.d.ts

@@ -1,7 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Instance } from './install-actions.js';
-import { C as ChannelRelease, I as InstallOptions, S as SecurityReleaseImage, G as GetSecurityInfoDiffResult } from './index-DWt-N5od.js';
+import { C as ChannelRelease, I as InstallOptions, S as SecurityReleaseImage, G as GetSecurityInfoDiffResult } from './index-sMbq94M7.js';
+import './fetch-license-iTyF7_GY.js';
 import './actions/change-team.js';
+import './actions/trial-signup.js';
 
 interface InstanceCardProps {
     instance: Instance;

package/dist/instance-card.js

@@ -3,100 +3,43 @@
 
 var react = require('react');
 var Link = require('next/link');
+var cx = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var Link__default = /*#__PURE__*/_interopDefault(Link);
+var cx__default = /*#__PURE__*/_interopDefault(cx);
 
 /**
  * Enterprise Portal Components
  * This file is generated by tsup. Do not edit manually.
  */
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 
-// node_modules/classnames/index.js
-var require_classnames = __commonJS({
-  "node_modules/classnames/index.js"(exports$1, module) {
-    (function() {
-      var hasOwn = {}.hasOwnProperty;
-      function classNames() {
-        var classes = "";
-        for (var i = 0; i < arguments.length; i++) {
-          var arg = arguments[i];
-          if (arg) {
-            classes = appendClass(classes, parseValue(arg));
-          }
-        }
-        return classes;
-      }
-      function parseValue(arg) {
-        if (typeof arg === "string" || typeof arg === "number") {
-          return arg;
-        }
-        if (typeof arg !== "object") {
-          return "";
-        }
-        if (Array.isArray(arg)) {
-          return classNames.apply(null, arg);
-        }
-        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-          return arg.toString();
-        }
-        var classes = "";
-        for (var key in arg) {
-          if (hasOwn.call(arg, key) && arg[key]) {
-            classes = appendClass(classes, key);
-          }
-        }
-        return classes;
-      }
-      function appendClass(value, newClass) {
-        if (!newClass) {
-          return value;
-        }
-        if (value) {
-          return value + " " + newClass;
-        }
-        return value + newClass;
-      }
-      if (typeof module !== "undefined" && module.exports) {
-        classNames.default = classNames;
-        module.exports = classNames;
-      } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
-        define("classnames", [], function() {
-          return classNames;
-        });
-      } else {
-        window.classNames = classNames;
-      }
-    })();
+
+// src/utils/constants.ts
+var DEFAULT_SECONDARY_COLOR = "#6366f1";
+
+// src/utils/format.ts
+function formatDateTimeLocal(dateString) {
+  if (!dateString) return "N/A";
+  try {
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) {
+      return dateString;
+    }
+    return date.toLocaleDateString("en-US", {
+      month: "numeric",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true
+    });
+  } catch {
+    return "N/A";
   }
-});
+}
 function getInstallType(instance, installOptions) {
   const instanceHasNoInstallTypes = !instance.kotsInstallId && !instance.kurlInstallId && !instance.embeddedClusterId;
   const isManuallyCreatedAirgapInstance = instance.isAirgap && instanceHasNoInstallTypes;
@@ -140,9 +83,6 @@ function getInstanceName(instance) {
   const nameTag = instance.tags?.find((tag) => tag.key === "name");
   return nameTag?.value || instance.id.slice(0, 7);
 }
-
-// src/components/app-status-badge.tsx
-var import_classnames = __toESM(require_classnames());
 var toTitle = (value) => {
   const s = value.trim();
   if (!s) return s;
@@ -266,7 +206,7 @@ function AppStatusBadge({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: (0, import_classnames.default)(
+      className: cx__default.default(
         "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
         getClassNameForType(type),
         className
@@ -278,18 +218,6 @@ function AppStatusBadge({
     }
   );
 }
-function formatDateTime(dateString) {
-  if (!dateString) return "N/A";
-  const date = new Date(dateString);
-  return date.toLocaleDateString("en-US", {
-    month: "numeric",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    hour12: true
-  });
-}
 function UpdateBadge({ count }) {
   if (count <= 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1.5 inline-flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-xs font-medium text-white", children: count });
@@ -327,7 +255,7 @@ function InstanceCard({
   channelReleases = [],
   installOptions = [],
   onUpdateClick,
-  primaryColor = "#6366f1",
+  primaryColor = DEFAULT_SECONDARY_COLOR,
   securityData = {},
   securityDiffData = {},
   securityEnabled = false
@@ -427,18 +355,28 @@ function InstanceCard({
           instance.versionLabel || "Unknown",
           /* @__PURE__ */ jsxRuntime.jsx(UpdateBadge, { count: availableUpdates })
         ] }),
-        instance.isAirgap && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-700", children: "air gap" }),
+        instance.isAirgap && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "rounded-full px-2 py-0.5 text-xs font-medium",
+            style: {
+              backgroundColor: `var(--portal-branding-primary-light, ${DEFAULT_SECONDARY_COLOR}20)`,
+              color: `var(--portal-branding-primary, ${DEFAULT_SECONDARY_COLOR})`
+            },
+            children: "air gap"
+          }
+        ),
         installType && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600", children: installType }),
         (instance.appStatus || instance.resourceStates && instance.resourceStates.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(AppStatusBadge, { status: statusForBadge })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: "First check-in:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600", children: formatDateTime(instance.firstCheckin) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600", children: formatDateTimeLocal(instance.firstCheckin) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: "Last check-in:" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600", children: formatDateTime(instance.lastCheckin) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600", children: formatDateTimeLocal(instance.lastCheckin) })
         ] })
       ] }),
       securityEnabled && hasSecurityInfo && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -480,15 +418,6 @@ function InstanceCard({
   ] }) });
 }
 InstanceCard.displayName = "InstanceCard";
-/*! Bundled license information:
-
-classnames/index.js:
-  (*!
-  	Copyright (c) 2018 Jed Watson.
-  	Licensed under the MIT License (MIT), see
-  	http://jedwatson.github.io/classnames
-  *)
-*/
 
 exports.InstanceCard = InstanceCard;
 //# sourceMappingURL=instance-card.js.map