@replicated/portal-components 0.0.11 → 0.0.12

package/dist/esm/updates-card.js

@@ -6,7 +6,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * This file is generated by tsup. Do not edit manually.
  */
 
-var GlobeIcon = (props) => /* @__PURE__ */ jsxs(
+var GlobeIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14,16 +14,14 @@ var GlobeIcon = (props) => /* @__PURE__ */ jsxs(
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     "aria-hidden": "true",
     ...props,
-    children: [
-      /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 10 }),
-      /* @__PURE__ */ jsx("path", { d: "M2 12h20" }),
-      /* @__PURE__ */ jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z" })
-    ]
+    children: /* @__PURE__ */ jsx("path", { d: "M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" })
   }
 );
-var AirGapIcon = (props) => /* @__PURE__ */ jsxs(
+var AirGapIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -31,15 +29,11 @@ var AirGapIcon = (props) => /* @__PURE__ */ jsxs(
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     "aria-hidden": "true",
     ...props,
-    children: [
-      /* @__PURE__ */ jsx("path", { d: "m4 4 16 16" }),
-      /* @__PURE__ */ jsx("path", { d: "M7.5 4.5a8 8 0 0 1 9 0" }),
-      /* @__PURE__ */ jsx("path", { d: "M4.5 7.5a8 8 0 0 0 0 9" }),
-      /* @__PURE__ */ jsx("path", { d: "M16.5 19.5a8 8 0 0 0 0-9" }),
-      /* @__PURE__ */ jsx("path", { d: "M7 12a5 5 0 0 0 5 5" })
-    ]
+    children: /* @__PURE__ */ jsx("path", { d: "M13.181 8.68a4.503 4.503 0 0 1 1.903 6.405m-9.768-2.782L3.56 14.06a4.5 4.5 0 0 0 6.364 6.365l3.129-3.129m5.614-5.615 1.757-1.757a4.5 4.5 0 0 0-6.364-6.365l-4.5 4.5c-.258.26-.479.541-.661.84m1.903 6.405a4.495 4.495 0 0 1-1.242-.88 4.483 4.483 0 0 1-1.062-1.683m6.587 2.345 5.907 5.907m-5.907-5.907L8.898 8.898M2.991 2.99 8.898 8.9" })
   }
 );
 var baseCardClass = "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)]";

package/dist/esm/updates-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/updates-card.tsx"],"names":[],"mappings":";;;;;;;;AAGA,IAAM,SAAA,GAAY,CAAC,KAAA,qBACjB,IAAA;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,EAAY,MAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAO,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,GAAG,EAAA,EAAI,CAAA;AAAA,sBAC/B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,sBACnB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,4FAAA,EAA6F;AAAA;AAAA;AACvG,CAAA;AAGF,IAAM,UAAA,GAAa,CAAC,KAAA,qBAClB,IAAA;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,EAAY,MAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,YAAA,EAAa,CAAA;AAAA,sBACrB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,wBAAA,EAAyB,CAAA;AAAA,sBACjC,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,wBAAA,EAAyB,CAAA;AAAA,sBACjC,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,0BAAA,EAA2B,CAAA;AAAA,sBACnC,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,qBAAA,EAAsB;AAAA;AAAA;AAChC,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;AACF,IAAM,UAAA,GACJ,8HAAA;AAaF,IAAM,KAAA,GAAQ,CAAC,EAAE,KAAA,EAAM,qBACrB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,UAAA,EAAY,YAAA,EAAY,CAAA,EAAG,KAAK,sBAC9C,QAAA,EAAA,KAAA,EACH,CAAA;AAGK,IAAM,cAAc,CAAC;AAAA,EAC1B,iBAAA,GAAoB,CAAA;AAAA,EACpB,WAAA,GAAc,CAAA;AAAA,EACd,aAAA,GAAgB,CAAA;AAAA,EAChB,aAAA,GAAgB;AAClB,CAAA,qBACE,IAAA,CAAC,SAAA,EAAA,EAAQ,SAAA,EAAW,aAAA,EAAe,mBAAgB,sBAAA,EACjD,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EACC,8BAAC,IAAA,EAAA,EAAG,EAAA,EAAG,wBAAuB,SAAA,EAAW,YAAA,EAAc,qBAEvD,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,iBAAA;AAAA,QAAkB,iBAAA;AAAA,QAAgB,iBAAA,KAAsB,IAAI,UAAA,GAAa;AAAA,OAAA,EAC5E,CAAA;AAAA,MACC,aAAA,GAAgB,CAAA,oBAAK,GAAA,CAAC,KAAA,EAAA,EAAM,OAAO,aAAA,EAAe;AAAA,KAAA,EACrD,CAAA;AAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,SAAA,EACd,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,WAAW,SAAA,EAAW,CAAA;AAAA,2BACjC,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,QAAY,WAAA;AAAA,QAAU,WAAA,KAAgB,IAAI,UAAA,GAAa;AAAA,OAAA,EAC1D,CAAA;AAAA,MACC,aAAA,GAAgB,CAAA,oBAAK,GAAA,CAAC,KAAA,EAAA,EAAM,OAAO,aAAA,EAAe;AAAA,KAAA,EACrD;AAAA,GAAA,EACF,CAAA;AAAA,kBACA,GAAA,CAAC,YAAO,SAAA,EAAW,WAAA,EACjB,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EAAU,QAAA,EAAA,qBAAA,EAAc,CAAA,EACrC;AAAA,CAAA,EACF;AAGF,WAAA,CAAY,WAAA,GAAc,aAAA","file":"updates-card.js","sourcesContent":["import type { SVGProps } from \"react\";\nimport Link from \"next/link\";\n\nconst GlobeIcon = (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    aria-hidden=\"true\"\n    {...props}\n  >\n    <circle cx={12} cy={12} r={10} />\n    <path d=\"M2 12h20\" />\n    <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z\" />\n  </svg>\n);\n\nconst AirGapIcon = (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    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"m4 4 16 16\" />\n    <path d=\"M7.5 4.5a8 8 0 0 1 9 0\" />\n    <path d=\"M4.5 7.5a8 8 0 0 0 0 9\" />\n    <path d=\"M16.5 19.5a8 8 0 0 0 0-9\" />\n    <path d=\"M7 12a5 5 0 0 0 5 5\" />\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\";\nconst badgeClass =\n  \"ml-2 inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-blue-500 px-1.5 text-xs font-medium text-white\";\n\nexport interface UpdatesCardProps {\n  /** Number of active online instances (checked in within 24 hours) */\n  onlineActiveCount?: number;\n  /** Number of air gap instances */\n  airgapCount?: number;\n  /** Number of updates available for online instances */\n  onlineUpdates?: number;\n  /** Number of updates available for airgap instances */\n  airgapUpdates?: number;\n}\n\nconst Badge = ({ count }: { count: number }) => (\n  <span className={badgeClass} aria-label={`${count} updates available`}>\n    {count}\n  </span>\n);\n\nexport const UpdatesCard = ({\n  onlineActiveCount = 0,\n  airgapCount = 0,\n  onlineUpdates = 0,\n  airgapUpdates = 0\n}: UpdatesCardProps) => (\n  <section className={baseCardClass} aria-labelledby=\"updates-card-heading\">\n    <header>\n      <h2 id=\"updates-card-heading\" className={headingClass}>\n        Updates\n      </h2>\n    </header>\n    <div className={contentClass}>\n      <div className={itemClass}>\n        <GlobeIcon className={iconClass} />\n        <span>\n          {onlineActiveCount} Active Online {onlineActiveCount === 1 ? \"instance\" : \"instances\"}\n        </span>\n        {onlineUpdates > 0 && <Badge count={onlineUpdates} />}\n      </div>\n      <div className={itemClass}>\n        <AirGapIcon className={iconClass} />\n        <span>\n          {airgapCount} Air gap {airgapCount === 1 ? \"instance\" : \"instances\"}\n        </span>\n        {airgapUpdates > 0 && <Badge count={airgapUpdates} />}\n      </div>\n    </div>\n    <footer className={footerClass}>\n      <Link href=\"/update\">View updates →</Link>\n    </footer>\n  </section>\n);\n\nUpdatesCard.displayName = \"UpdatesCard\";\n"]}
+{"version":3,"sources":["../../src/components/updates-card.tsx"],"names":[],"mappings":"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","file":"updates-card.js","sourcesContent":["import type { SVGProps } from \"react\";\nimport Link from \"next/link\";\n\nconst GlobeIcon = (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=\"M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418\" />\n  </svg>\n);\n\nconst AirGapIcon = (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=\"M13.181 8.68a4.503 4.503 0 0 1 1.903 6.405m-9.768-2.782L3.56 14.06a4.5 4.5 0 0 0 6.364 6.365l3.129-3.129m5.614-5.615 1.757-1.757a4.5 4.5 0 0 0-6.364-6.365l-4.5 4.5c-.258.26-.479.541-.661.84m1.903 6.405a4.495 4.495 0 0 1-1.242-.88 4.483 4.483 0 0 1-1.062-1.683m6.587 2.345 5.907 5.907m-5.907-5.907L8.898 8.898M2.991 2.99 8.898 8.9\" />\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\";\nconst badgeClass =\n  \"ml-2 inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-blue-500 px-1.5 text-xs font-medium text-white\";\n\nexport interface UpdatesCardProps {\n  /** Number of active online instances (checked in within 24 hours) */\n  onlineActiveCount?: number;\n  /** Number of air gap instances */\n  airgapCount?: number;\n  /** Number of updates available for online instances */\n  onlineUpdates?: number;\n  /** Number of updates available for airgap instances */\n  airgapUpdates?: number;\n}\n\nconst Badge = ({ count }: { count: number }) => (\n  <span className={badgeClass} aria-label={`${count} updates available`}>\n    {count}\n  </span>\n);\n\nexport const UpdatesCard = ({\n  onlineActiveCount = 0,\n  airgapCount = 0,\n  onlineUpdates = 0,\n  airgapUpdates = 0\n}: UpdatesCardProps) => (\n  <section className={baseCardClass} aria-labelledby=\"updates-card-heading\">\n    <header>\n      <h2 id=\"updates-card-heading\" className={headingClass}>\n        Updates\n      </h2>\n    </header>\n    <div className={contentClass}>\n      <div className={itemClass}>\n        <GlobeIcon className={iconClass} />\n        <span>\n          {onlineActiveCount} Active Online {onlineActiveCount === 1 ? \"instance\" : \"instances\"}\n        </span>\n        {onlineUpdates > 0 && <Badge count={onlineUpdates} />}\n      </div>\n      <div className={itemClass}>\n        <AirGapIcon className={iconClass} />\n        <span>\n          {airgapCount} Air gap {airgapCount === 1 ? \"instance\" : \"instances\"}\n        </span>\n        {airgapUpdates > 0 && <Badge count={airgapUpdates} />}\n      </div>\n    </div>\n    <footer className={footerClass}>\n      <Link href=\"/update\">View updates →</Link>\n    </footer>\n  </section>\n);\n\nUpdatesCard.displayName = \"UpdatesCard\";\n"]}

package/dist/esm/utils/observability/index.js

@@ -0,0 +1,193 @@
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// datadog/tracer.ts
+var tracer_exports = {};
+__export(tracer_exports, {
+  default: () => tracer_default
+});
+var rawFlag, isEnabled, tracer, getRoutePattern, tracer_default;
+var init_tracer = __esm({
+  "datadog/tracer.ts"() {
+    rawFlag = String(process.env.USE_DATADOG_APM || "").toLowerCase();
+    isEnabled = rawFlag === "true";
+    process.env.DD_TRACE_ENABLED = isEnabled ? "1" : "0";
+    tracer = null;
+    if (isEnabled) {
+      const serviceName = process.env.DD_SERVICE || "enterprise-portal";
+      const environment = process.env.DD_ENV || process.env.NODE_ENV || "development";
+      const version = process.env.DD_VERSION || process.env.NEXT_PUBLIC_VERSION || "0.0.0-dev";
+      const agentHost = process.env.DD_AGENT_HOST || process.env.DATADOG_AGENT_HOST || "127.0.0.1";
+      const agentPort = process.env.DD_TRACE_AGENT_PORT || "8126";
+      process.env.DD_SERVICE = serviceName;
+      process.env.DD_ENV = environment;
+      {
+        process.env.DD_VERSION = version;
+      }
+      process.env.DD_AGENT_HOST = agentHost;
+      process.env.DD_TRACE_AGENT_PORT = agentPort;
+      const dbmPropagationMode = process.env.DD_DBM_PROPAGATION_MODE || "full";
+      process.env.DD_DBM_PROPAGATION_MODE = dbmPropagationMode;
+      try {
+        const ddTrace = __require("dd-trace");
+        tracer = ddTrace.init({
+          service: serviceName,
+          env: environment,
+          version,
+          logInjection: true,
+          runtimeMetrics: true,
+          appsec: false,
+          profiling: false,
+          startupLogs: true
+          // Enable for debugging
+        });
+        console.log(`[datadog] Tracer initialized: service=${serviceName}, env=${environment}, version=${version}, agent=${agentHost}:${agentPort}`);
+        tracer.use("dns", false);
+        tracer.use("net", false);
+        tracer.use("http", {
+          server: {
+            hooks: {
+              request: (span, req) => {
+                if (!span) return;
+                const url = req?.url || "";
+                const method = req?.method || "GET";
+                const path = url.split("?")[0];
+                if (path.startsWith("/_next/")) {
+                  span.context()._trace.isRecording = false;
+                  return;
+                }
+                const routePattern = getRoutePattern(path);
+                span.setTag("resource.name", `${method} ${routePattern}`);
+                span.setTag("http.route", routePattern);
+              }
+            }
+          }
+        });
+      } catch (err) {
+        console.error("[datadog] failed to initialize tracing", err);
+        tracer = null;
+      }
+    }
+    getRoutePattern = (path) => {
+      const routePatterns = [
+        // Update instance routes - normalize dynamic segments (capture suffix to preserve sub-routes)
+        { pattern: /^\/update\/instance\/[^/]+(.*)$/, replacement: "/update/instance/[instanceId]$1" }
+      ];
+      for (const { pattern, replacement } of routePatterns) {
+        if (pattern.test(path)) {
+          return path.replace(pattern, replacement);
+        }
+      }
+      return path;
+    };
+    tracer_default = tracer;
+  }
+});
+
+// src/utils/observability/tracing.ts
+var tracerCache = void 0;
+function getTracer() {
+  if (tracerCache !== void 0) {
+    return tracerCache;
+  }
+  const rawFlag2 = String(process.env.USE_DATADOG_APM || "").toLowerCase();
+  const isEnabled2 = rawFlag2 === "true";
+  if (!isEnabled2) {
+    tracerCache = null;
+    return null;
+  }
+  try {
+    const tracerModule = (init_tracer(), __toCommonJS(tracer_exports));
+    const tracer2 = tracerModule.default || tracerModule;
+    if (tracer2 && typeof tracer2.trace === "function") {
+      tracerCache = tracer2;
+      return tracerCache;
+    }
+  } catch (err) {
+    console.warn("Failed to load tracer:", err);
+  }
+  tracerCache = null;
+  return null;
+}
+function getActiveSpan() {
+  const activeTracer = getTracer();
+  if (!activeTracer || !activeTracer.scope) {
+    return void 0;
+  }
+  const active = activeTracer.scope().active();
+  return active || void 0;
+}
+async function withTrace(name, fn) {
+  const activeTracer = getTracer();
+  if (!activeTracer) {
+    return fn(void 0);
+  }
+  return activeTracer.trace(name, async (span) => {
+    if (span) {
+      span.setTag("component", "application");
+    }
+    try {
+      const result = await fn(span);
+      return result;
+    } catch (error) {
+      if (span) {
+        span.setTag("error", error);
+      }
+      throw error;
+    }
+  });
+}
+function traceServerAction(name, fn) {
+  const spanName = name.startsWith("server.action.") ? name : `server.action.${name}`;
+  const traced = async (...args) => {
+    return withTrace(spanName, async (span) => {
+      if (span) {
+        span.setTag("component", "server-action");
+      }
+      const result = await fn(...args);
+      return result;
+    });
+  };
+  return traced;
+}
+function traceFunction(name, fn) {
+  const traced = async (...args) => {
+    return withTrace(name, async () => {
+      const result = await fn(...args);
+      return result;
+    });
+  };
+  return traced;
+}
+
+export { getActiveSpan, traceFunction, traceServerAction, withTrace };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/utils/observability/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../datadog/tracer.ts","../../../../src/utils/observability/tracing.ts"],"names":["rawFlag","isEnabled","tracer"],"mappings":"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","file":"index.js","sourcesContent":["import type { Tracer, Span, init as ddTraceInit } from 'dd-trace';\nimport type { IncomingMessage } from 'http';\n\nconst rawFlag = String(process.env.USE_DATADOG_APM || '').toLowerCase();\nconst isEnabled = rawFlag === 'true';\n\nprocess.env.DD_TRACE_ENABLED = isEnabled ? '1' : '0';\n\nlet tracer: Tracer | null = null;\n\nif (isEnabled) {\n  const serviceName = process.env.DD_SERVICE || 'enterprise-portal';\n  const environment = process.env.DD_ENV || process.env.NODE_ENV || 'development';\n  const version = process.env.DD_VERSION || process.env.NEXT_PUBLIC_VERSION || '0.0.0-dev';\n\n  const agentHost = process.env.DD_AGENT_HOST || process.env.DATADOG_AGENT_HOST || '127.0.0.1';\n  const agentPort = process.env.DD_TRACE_AGENT_PORT || '8126';\n\n  process.env.DD_SERVICE = serviceName;\n  process.env.DD_ENV = environment;\n  if (version) {\n    process.env.DD_VERSION = version;\n  }\n  process.env.DD_AGENT_HOST = agentHost;\n  process.env.DD_TRACE_AGENT_PORT = agentPort;\n\n  const dbmPropagationMode = (process.env.DD_DBM_PROPAGATION_MODE || 'full') as 'disabled' | 'service' | 'full';\n\n  process.env.DD_DBM_PROPAGATION_MODE = dbmPropagationMode;\n\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    const ddTrace = require('dd-trace');\n    tracer = (ddTrace.init as typeof ddTraceInit)({\n      service: serviceName,\n      env: environment,\n      version,\n      logInjection: true,\n      runtimeMetrics: true,\n      appsec: false,\n      profiling: false,\n      startupLogs: true, // Enable for debugging\n    }) as Tracer;\n    \n    console.log(`[datadog] Tracer initialized: service=${serviceName}, env=${environment}, version=${version}, agent=${agentHost}:${agentPort}`);\n\n    // Disable low-level network instrumentation for localhost connections\n    tracer.use('dns', false);\n    tracer.use('net', false);\n    // Configure http plugin to normalize route patterns\n    tracer.use('http', {\n      server: {\n        hooks: {\n          request: (span?: Span, req?: IncomingMessage) => {\n            if (!span) return;\n\n            const url = req?.url || '';\n            const method = req?.method || 'GET';\n            const path = url.split('?')[0];\n\n            // Drop Next.js internal requests\n            if (path.startsWith('/_next/')) {\n              // @ts-expect-error - using internal property to drop the trace\n              span.context()._trace.isRecording = false;\n              return;\n            }\n\n            const routePattern = getRoutePattern(path);\n\n            span.setTag('resource.name', `${method} ${routePattern}`);\n            span.setTag('http.route', routePattern);\n          }\n        }\n      }\n    });\n  } catch (err) {\n    // Do not crash the app if tracing fails to initialize\n    console.error('[datadog] failed to initialize tracing', err);\n    tracer = null;\n  }\n}\n\n// Function to convert actual paths to route patterns\nconst getRoutePattern = (path: string): string => {\n  // Define route patterns for dynamic routes in enterprise portal\n  const routePatterns = [\n    // Update instance routes - normalize dynamic segments (capture suffix to preserve sub-routes)\n    { pattern: /^\\/update\\/instance\\/[^/]+(.*)$/, replacement: '/update/instance/[instanceId]$1' },\n  ];\n\n  for (const { pattern, replacement } of routePatterns) {\n    if (pattern.test(path)) {\n      return path.replace(pattern, replacement);\n    }\n  }\n\n  // Return original path if no pattern matches\n  return path;\n}\n\nexport default tracer;\n","import type { Span, Tracer } from 'dd-trace';\n\n// Type for a function that has been wrapped with tracing (always returns a Promise)\ntype TracedFunction<T extends (...args: any[]) => any> = (\n  ...args: Parameters<T>\n) => Promise<Awaited<ReturnType<T>>>;\n\n// Lazy-load tracer only when tracing is enabled\n// Using undefined to distinguish between \"not loaded yet\" and \"loaded but null\"\nlet tracerCache: Tracer | null | undefined = undefined;\n\nfunction getTracer(): Tracer | null {\n  // Return cached result if already loaded (prevents race conditions and multiple initializations)\n  if (tracerCache !== undefined) {\n    return tracerCache;\n  }\n\n  // Check if tracing is enabled at runtime (consistent with datadog/tracer.ts and instrumentation.ts)\n  const rawFlag = String(process.env.USE_DATADOG_APM || '').toLowerCase();\n  const isEnabled = rawFlag === 'true';\n\n  if (!isEnabled) {\n    tracerCache = null;\n    return null;\n  }\n\n  // Lazy load the tracer module only when needed\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    const tracerModule = require('../../../datadog/tracer');\n    const tracer = tracerModule.default || tracerModule;\n\n    if (tracer && typeof (tracer as any).trace === 'function') {\n      tracerCache = tracer as Tracer;\n      return tracerCache;\n    }\n  } catch (err) {\n    console.warn('Failed to load tracer:', err);\n  }\n\n  tracerCache = null;\n  return null;\n}\n\n/**\n * Get the currently active span from the tracer's scope.\n * This can be used to pass span context to database calls.\n */\nexport function getActiveSpan(): Span | undefined {\n  const activeTracer = getTracer();\n  if (!activeTracer || !activeTracer.scope) {\n    return undefined;\n  }\n  const active = activeTracer.scope().active();\n  return active || undefined;\n}\n\nexport async function withTrace<T>(\n  name: string,\n  fn: (span?: Span) => Promise<T> | T,\n): Promise<T> {\n  const activeTracer = getTracer();\n  if (!activeTracer) {\n    return fn(undefined);\n  }\n\n  return activeTracer.trace(name, async (span?: Span) => {\n    if (span) {\n      span.setTag('component', 'application');\n    }\n    try {\n      const result = await fn(span);\n      return result;\n    } catch (error) {\n      if (span) {\n        span.setTag('error', error as any);\n      }\n      throw error;\n    }\n  });\n}\n\nexport function traceServerAction<T extends (...args: any[]) => any>(\n  name: string,\n  fn: T,\n): TracedFunction<T> {\n  const spanName = name.startsWith('server.action.') ? name : `server.action.${name}`;\n\n  const traced: TracedFunction<T> = async (...args: Parameters<T>) => {\n    return withTrace(spanName, async (span) => {\n      if (span) {\n        span.setTag('component', 'server-action');\n      }\n      const result = await fn(...args);\n      return result;\n    });\n  };\n\n  return traced;\n}\n\nexport function traceFunction<T extends (...args: any[]) => any>(\n  name: string,\n  fn: T,\n): TracedFunction<T> {\n  const traced: TracedFunction<T> = async (...args: Parameters<T>) => {\n    return withTrace(name, async () => {\n      const result = await fn(...args);\n      return result;\n    });\n  };\n\n  return traced;\n}\n"]}

package/dist/index.js

@@ -16,7 +16,7 @@ var Link__default = /*#__PURE__*/_interopDefault(Link);
 
 // package.json
 var package_default = {
-  version: "0.0.11"};
+  version: "0.0.12"};
 
 // src/tokens/index.ts
 var baseTokens = {
@@ -1453,7 +1453,7 @@ var LicenseDetails = async ({
   console.debug("[portal-components] license response", response.raw);
   const { license } = response;
   const rows = buildPrimaryRows(license);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-3xl border border-gray-100 bg-white p-8 shadow-[0_18px_45px_rgba(17,24,39,0.08)]", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded border border-gray-100 bg-white p-8 shadow-[0_18px_45px_rgba(17,24,39,0.08)]", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-col border-b border-gray-100 pb-6", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-gray-900", children: title }),
       description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-600", children: description }) : null
@@ -1480,10 +1480,14 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 13h6V3H4z" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 21h6V3h-6z" })
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "9", x: "3", y: "3", rx: "1" }),
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "5", x: "14", y: "3", rx: "1" }),
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "9", x: "14", y: "12", rx: "1" }),
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "5", x: "3", y: "16", rx: "1" })
         ]
       }
     )
@@ -1498,11 +1502,13 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v12" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 11 5 5 5-5" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 21h14" })
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 10 12 15 17 10" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
         ]
       }
     )
@@ -1518,10 +1524,13 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" })
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 10 12 15 17 10" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
         ]
       }
     )
@@ -1537,15 +1546,34 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4v6h6" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 20v-6h-6" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 10c1.5-4 6-6 10-4m6 4c-1.5 4-6 6-10 4" })
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 3v5h-5" })
         ]
       }
     )
   },
+  {
+    label: "Security",
+    href: "/security",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        className: "h-4 w-4",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" })
+      }
+    )
+  },
   {
     label: "Release History",
     href: "/release-history",
@@ -1557,10 +1585,15 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v4l3 2" }),
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" })
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 9H8" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 13H8" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 17H8" })
         ]
       }
     )
@@ -1576,12 +1609,13 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "14", height: "18", x: "5", y: "3", rx: "2" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 7h6" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 11h6" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 15h6" })
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 2-9.6 9.6" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7.5", cy: "15.5", r: "5.5" })
         ]
       }
     )
@@ -1597,10 +1631,16 @@ var defaultTopNavLinks = [
         className: "h-4 w-4",
         fill: "none",
         stroke: "currentColor",
-        strokeWidth: "1.5",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 16a6 6 0 1 0-12 0v2h12Z" }),
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4.93 4.93 4.24 4.24" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m14.83 9.17 4.24-4.24" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m14.83 14.83 4.24 4.24" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9.17 14.83-4.24 4.24" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" })
         ]
       }
     )
@@ -1700,7 +1740,7 @@ var TopNav = async ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "relative flex h-[165px] w-full items-start justify-center",
+      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",
@@ -1727,7 +1767,7 @@ var TopNav = async ({
             brandTitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-gray-900", children: brandTitle }) : null
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
           /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer items-center gap-2 rounded-lg bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 list-none", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                 "svg",
                 {
@@ -1799,12 +1839,12 @@ var TopNav = async ({
           const className = `flex items-center gap-2 px-4 py-1 transition text-gray-500 ${isActive ? "underline underline-offset-8 decoration-2" : ""}`;
           if (href) {
             return /* @__PURE__ */ jsxRuntime.jsxs(Link__default.default, { href, className, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: isActive ? "text-rose-600" : "text-gray-500", children: icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: isActive ? "text-gray-900" : "text-gray-500", children: icon }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
             ] }, label);
           }
           return /* @__PURE__ */ jsxRuntime.jsxs("button", { className, type: "button", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: isActive ? "text-rose-600" : "text-gray-500", children: icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: isActive ? "text-gray-900" : "text-gray-500", children: icon }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
           ] }, label);
         }) })
@@ -1812,7 +1852,7 @@ var TopNav = async ({
     }
   );
 };
-var GlobeIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+var GlobeIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1820,16 +1860,14 @@ var GlobeIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     "aria-hidden": "true",
     ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: 12, r: 10 }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h20" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z" })
-    ]
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" })
   }
 );
-var AirGapIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+var AirGapIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1837,15 +1875,11 @@ var AirGapIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     "aria-hidden": "true",
     ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4 4 16 16" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 4.5a8 8 0 0 1 9 0" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 7.5a8 8 0 0 0 0 9" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 19.5a8 8 0 0 0 0-9" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 12a5 5 0 0 0 5 5" })
-    ]
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.181 8.68a4.503 4.503 0 0 1 1.903 6.405m-9.768-2.782L3.56 14.06a4.5 4.5 0 0 0 6.364 6.365l3.129-3.129m5.614-5.615 1.757-1.757a4.5 4.5 0 0 0-6.364-6.365l-4.5 4.5c-.258.26-.479.541-.661.84m1.903 6.405a4.495 4.495 0 0 1-1.242-.88 4.483 4.483 0 0 1-1.062-1.683m6.587 2.345 5.907 5.907m-5.907-5.907L8.898 8.898M2.991 2.99 8.898 8.9" })
   }
 );
 var baseCardClass = "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)]";
@@ -1886,7 +1920,7 @@ var UpdatesCard = ({
   /* @__PURE__ */ jsxRuntime.jsx("footer", { className: footerClass, children: /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/update", children: "View updates \u2192" }) })
 ] });
 UpdatesCard.displayName = "UpdatesCard";
-var UploadIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+var UploadIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1894,13 +1928,11 @@ var UploadIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     "aria-hidden": "true",
     ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16V3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 7l4-4 4 4" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 21h14" })
-    ]
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" })
   }
 );
 var baseCardClass2 = "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)]";
@@ -2307,7 +2339,7 @@ var UserSettingsCard = () => /* @__PURE__ */ jsxRuntime.jsxs("section", { classN
   /* @__PURE__ */ jsxRuntime.jsx("footer", { className: footerClass3, children: /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/user-settings", children: "View user settings \u2192" }) })
 ] });
 UserSettingsCard.displayName = "UserSettingsCard";
-var UsersIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+var UsersIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2315,17 +2347,14 @@ var UsersIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     "aria-hidden": "true",
     ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 10, cy: 8, r: 4 }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 21v-2a4 4 0 0 0-3-3.87" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 3a4 4 0 0 1 0 8" })
-    ]
+    children: /* @__PURE__ */ jsxRuntime.jsx("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" })
   }
 );
-var KeyIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+var KeyIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2333,13 +2362,11 @@ var KeyIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     "aria-hidden": "true",
     ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 7, cy: 15, r: 4 }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m10.85 12.15 4.3-4.3a2 2 0 0 1 2.83 0l.47.47a2 2 0 0 1 0 2.83l-4.3 4.3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 11l1.5 1.5" })
-    ]
+    children: /* @__PURE__ */ jsxRuntime.jsx("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" })
   }
 );
 var baseCardClass4 = "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)]";