subos-frontend 1.0.11 → 1.0.13

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React4 = require('react');
+var React9 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactRouterDom = require('react-router-dom');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
+var React9__default = /*#__PURE__*/_interopDefault(React9);
 
 // src/config/envConfig.ts
 function getEnvVar(key, fallback) {
@@ -216,10 +216,10 @@ var transactionApi = {
   getInvoice: (transactionId) => apiRequest(`${ENDPOINTS.TRANSACTIONS}/${transactionId}/invoice`)
 };
 var useSubscription = () => {
-  const [subscription, setSubscription] = React4.useState(null);
-  const [loading, setLoading] = React4.useState(false);
-  const [error, setError] = React4.useState(null);
-  const fetchSubscription = React4.useCallback(async (externalId) => {
+  const [subscription, setSubscription] = React9.useState(null);
+  const [loading, setLoading] = React9.useState(false);
+  const [error, setError] = React9.useState(null);
+  const fetchSubscription = React9.useCallback(async (externalId) => {
     if (!externalId || externalId === "undefined" || externalId.trim() === "") {
       setError("Invalid user ID. Please ensure you are properly authenticated.");
       setLoading(false);
@@ -244,7 +244,7 @@ var useSubscription = () => {
       setLoading(false);
     }
   }, [loading]);
-  const clearSubscription = React4.useCallback(() => {
+  const clearSubscription = React9.useCallback(() => {
     setSubscription(null);
     setError(null);
   }, []);
@@ -381,14 +381,14 @@ var formatDate = (dateString, format = "date") => {
 
 // src/hooks/usePlans.ts
 var usePlans = () => {
-  const [plans, setPlans] = React4.useState([]);
-  const [filteredPlans, setFilteredPlans] = React4.useState([]);
-  const [selectedPlan, setSelectedPlan] = React4.useState(null);
-  const [tierFilter, setTierFilter] = React4.useState("all");
-  const [billingCycle, setBillingCycle] = React4.useState("monthly");
-  const [loading, setLoading] = React4.useState(false);
-  const [error, setError] = React4.useState(null);
-  const fetchPlans = React4.useCallback(async () => {
+  const [plans, setPlans] = React9.useState([]);
+  const [filteredPlans, setFilteredPlans] = React9.useState([]);
+  const [selectedPlan, setSelectedPlan] = React9.useState(null);
+  const [tierFilter, setTierFilter] = React9.useState("all");
+  const [billingCycle, setBillingCycle] = React9.useState("monthly");
+  const [loading, setLoading] = React9.useState(false);
+  const [error, setError] = React9.useState(null);
+  const fetchPlans = React9.useCallback(async () => {
     if (loading) return;
     setLoading(true);
     setError(null);
@@ -410,7 +410,7 @@ var usePlans = () => {
       setLoading(false);
     }
   }, [loading]);
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     if (plans.length > 0 && tierFilter === "all") {
       const uniqueUnits = getUniqueCandidateUnits(plans);
       if (uniqueUnits.length > 0) {
@@ -418,16 +418,16 @@ var usePlans = () => {
       }
     }
   }, [plans, tierFilter]);
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     let filtered = [...plans];
     filtered = filterPlansByBillingCycle(filtered, billingCycle);
     filtered = filterPlansByTier(filtered, tierFilter);
     setFilteredPlans(filtered);
   }, [plans, tierFilter, billingCycle]);
-  const handlePlanSelect = React4.useCallback((plan) => {
+  const handlePlanSelect = React9.useCallback((plan) => {
     setSelectedPlan(plan);
   }, []);
-  const handleUpgrade = React4.useCallback(async (externalId) => {
+  const handleUpgrade = React9.useCallback(async (externalId) => {
     var _a;
     if (!selectedPlan) return;
     try {
@@ -445,14 +445,14 @@ var usePlans = () => {
       alert("An error occurred. Please try again.");
     }
   }, [selectedPlan]);
-  const clearPlans = React4.useCallback(() => {
+  const clearPlans = React9.useCallback(() => {
     setPlans([]);
     setFilteredPlans([]);
     setSelectedPlan(null);
     setError(null);
     setTierFilter("all");
   }, []);
-  const clearSelectedPlan2 = React4.useCallback(() => {
+  const clearSelectedPlan2 = React9.useCallback(() => {
     setSelectedPlan(null);
   }, []);
   const dropdownOptions = getDropdownOptions(plans);
@@ -536,18 +536,18 @@ var useTransactions = ({
   initialFilters = {},
   autoFetch = false
 }) => {
-  const [transactions, setTransactions] = React4.useState([]);
-  const [allTransactions, setAllTransactions] = React4.useState([]);
-  const [loading, setLoading] = React4.useState(false);
-  const [error, setError] = React4.useState(null);
-  const [filters, setFilters] = React4.useState({
+  const [transactions, setTransactions] = React9.useState([]);
+  const [allTransactions, setAllTransactions] = React9.useState([]);
+  const [loading, setLoading] = React9.useState(false);
+  const [error, setError] = React9.useState(null);
+  const [filters, setFilters] = React9.useState({
     ...DEFAULT_FILTERS,
     ...initialFilters
   });
-  const [meta, setMeta] = React4.useState(null);
-  const [isBackendPaginated, setIsBackendPaginated] = React4.useState(false);
-  const hasAutoFetchedRef = React4.useRef(false);
-  const fetchTransactions = React4.useCallback(async () => {
+  const [meta, setMeta] = React9.useState(null);
+  const [isBackendPaginated, setIsBackendPaginated] = React9.useState(false);
+  const hasAutoFetchedRef = React9.useRef(false);
+  const fetchTransactions = React9.useCallback(async () => {
     if (!externalId) return;
     setLoading(true);
     setError(null);
@@ -591,7 +591,7 @@ var useTransactions = ({
       setLoading(false);
     }
   }, [externalId, filters]);
-  const updateFilters = React4.useCallback((newFilters) => {
+  const updateFilters = React9.useCallback((newFilters) => {
     setFilters((prev) => ({
       ...prev,
       ...newFilters,
@@ -599,7 +599,7 @@ var useTransactions = ({
       page: newFilters.page !== void 0 ? newFilters.page : 1
     }));
   }, []);
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     if (!isBackendPaginated && allTransactions.length > 0) {
       const filteredTransactions = applyFrontendFilters(allTransactions, filters);
       const paginatedResult = applyFrontendPagination(filteredTransactions, filters);
@@ -607,19 +607,19 @@ var useTransactions = ({
       setMeta(paginatedResult.meta);
     }
   }, [filters, allTransactions, isBackendPaginated]);
-  const clearFilters = React4.useCallback(() => {
+  const clearFilters = React9.useCallback(() => {
     setFilters(DEFAULT_FILTERS);
   }, []);
-  const refetch = React4.useCallback(async () => {
+  const refetch = React9.useCallback(async () => {
     await fetchTransactions();
   }, [fetchTransactions]);
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     if (autoFetch && externalId && !hasAutoFetchedRef.current) {
       hasAutoFetchedRef.current = true;
       fetchTransactions();
     }
   }, [autoFetch, externalId, fetchTransactions]);
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     if (!autoFetch) return;
     const hasNonPaginationFilters = filters.startDate !== void 0 || filters.endDate !== void 0 || filters.status !== void 0;
     const shouldFetch = isBackendPaginated || allTransactions.length === 0 && hasNonPaginationFilters;
@@ -646,10 +646,10 @@ var usePagination = ({
   initialPage = 1,
   initialLimit = 10
 } = {}) => {
-  const [currentPage, setCurrentPage] = React4.useState(initialPage);
-  const [limit, setLimitState] = React4.useState(initialLimit);
-  const [meta, setMeta] = React4.useState(null);
-  const goToPage = React4.useCallback((page) => {
+  const [currentPage, setCurrentPage] = React9.useState(initialPage);
+  const [limit, setLimitState] = React9.useState(initialLimit);
+  const [meta, setMeta] = React9.useState(null);
+  const goToPage = React9.useCallback((page) => {
     if (meta) {
       const validPage = Math.max(1, Math.min(page, meta.totalPages));
       setCurrentPage(validPage);
@@ -657,29 +657,29 @@ var usePagination = ({
       setCurrentPage(Math.max(1, page));
     }
   }, [meta]);
-  const goToNextPage = React4.useCallback(() => {
+  const goToNextPage = React9.useCallback(() => {
     if (meta && meta.hasNextPage) {
       setCurrentPage((prev) => prev + 1);
     }
   }, [meta]);
-  const goToPreviousPage = React4.useCallback(() => {
+  const goToPreviousPage = React9.useCallback(() => {
     if (meta && meta.hasPreviousPage) {
       setCurrentPage((prev) => prev - 1);
     }
   }, [meta]);
-  const goToFirstPage = React4.useCallback(() => {
+  const goToFirstPage = React9.useCallback(() => {
     setCurrentPage(1);
   }, []);
-  const goToLastPage = React4.useCallback(() => {
+  const goToLastPage = React9.useCallback(() => {
     if (meta) {
       setCurrentPage(meta.totalPages);
     }
   }, [meta]);
-  const setLimit = React4.useCallback((newLimit) => {
+  const setLimit = React9.useCallback((newLimit) => {
     setLimitState(newLimit);
     setCurrentPage(1);
   }, []);
-  const reset = React4.useCallback(() => {
+  const reset = React9.useCallback(() => {
     setCurrentPage(initialPage);
     setLimitState(initialLimit);
     setMeta(null);
@@ -702,9 +702,9 @@ var useCancelSubscription = ({
   onSuccess,
   onError
 } = {}) => {
-  const [loading, setLoading] = React4.useState(false);
-  const [error, setError] = React4.useState(null);
-  const cancelSubscription = React4.useCallback(async (externalId, options) => {
+  const [loading, setLoading] = React9.useState(false);
+  const [error, setError] = React9.useState(null);
+  const cancelSubscription = React9.useCallback(async (externalId, options) => {
     if (!externalId) {
       const errorMsg = "External ID is required";
       setError(errorMsg);
@@ -733,7 +733,7 @@ var useCancelSubscription = ({
       setLoading(false);
     }
   }, [onSuccess, onError]);
-  const reset = React4.useCallback(() => {
+  const reset = React9.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -773,9 +773,9 @@ var useCustomerPortal = ({
   onSuccess,
   onError
 } = {}) => {
-  const [loading, setLoading] = React4.useState(false);
-  const [error, setError] = React4.useState(null);
-  const openCustomerPortal = React4.useCallback(async (externalId) => {
+  const [loading, setLoading] = React9.useState(false);
+  const [error, setError] = React9.useState(null);
+  const openCustomerPortal = React9.useCallback(async (externalId) => {
     var _a;
     if (!externalId) {
       const errorMsg = "External ID is required";
@@ -813,7 +813,7 @@ var useCustomerPortal = ({
       setLoading(false);
     }
   }, [onSuccess, onError]);
-  const reset = React4.useCallback(() => {
+  const reset = React9.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -824,9 +824,9 @@ var useCustomerPortal = ({
     reset
   };
 };
-var UpgradeContext = React4.createContext(void 0);
+var UpgradeContext = React9.createContext(void 0);
 var UpgradeProvider = ({ children }) => {
-  const [isUpgradeSummaryVisible, setIsUpgradeSummaryVisible] = React4.useState(false);
+  const [isUpgradeSummaryVisible, setIsUpgradeSummaryVisible] = React9.useState(false);
   const setUpgradeSummaryVisible = (visible) => {
     setIsUpgradeSummaryVisible(visible);
   };
@@ -846,7 +846,7 @@ var UpgradeProvider = ({ children }) => {
   );
 };
 var useUpgrade = () => {
-  const context = React4.useContext(UpgradeContext);
+  const context = React9.useContext(UpgradeContext);
   if (context === void 0) {
     throw new Error("useUpgrade must be used within an UpgradeProvider");
   }
@@ -857,24 +857,49 @@ var BillingCycleToggle = ({
   onBillingCycleChange,
   className
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex bg-gray-100 rounded-lg p-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => onBillingCycleChange("monthly"),
-        className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${billingCycle === "monthly" ? `bg-green-600 text-white shadow-sm ${className}` : "text-gray-600 hover:text-gray-900"}`,
-        children: "Monthly"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => onBillingCycleChange("yearly"),
-        className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${billingCycle === "yearly" ? `bg-green-600 text-white shadow-sm ${className}` : "text-gray-600 hover:text-gray-900"}`,
-        children: "Yearly"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex rounded-lg p-1",
+      style: { backgroundColor: "var(--subos-muted, #f8f9fa)" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onBillingCycleChange("monthly"),
+            className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${billingCycle === "monthly" ? `subos-btn-primary text-white shadow-sm ${className || ""}` : ""}`,
+            style: billingCycle !== "monthly" ? {
+              color: "var(--subos-muted-foreground, #6c757d)"
+            } : {},
+            onMouseEnter: billingCycle !== "monthly" ? (e) => {
+              e.currentTarget.style.color = "var(--subos-foreground, inherit)";
+            } : void 0,
+            onMouseLeave: billingCycle !== "monthly" ? (e) => {
+              e.currentTarget.style.color = "var(--subos-muted-foreground, #6c757d)";
+            } : void 0,
+            children: "Monthly"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onBillingCycleChange("yearly"),
+            className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${billingCycle === "yearly" ? `subos-btn-primary text-white shadow-sm ${className || ""}` : ""}`,
+            style: billingCycle !== "yearly" ? {
+              color: "var(--subos-muted-foreground, #6c757d)"
+            } : {},
+            onMouseEnter: billingCycle !== "yearly" ? (e) => {
+              e.currentTarget.style.color = "var(--subos-foreground, inherit)";
+            } : void 0,
+            onMouseLeave: billingCycle !== "yearly" ? (e) => {
+              e.currentTarget.style.color = "var(--subos-muted-foreground, #6c757d)";
+            } : void 0,
+            children: "Yearly"
+          }
+        )
+      ]
+    }
+  );
 };
 var TierFilterDropdown = ({
   isOpen,
@@ -884,8 +909,8 @@ var TierFilterDropdown = ({
   selectedValue,
   onSelect
 }) => {
-  const dropdownRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const dropdownRef = React9.useRef(null);
+  React9.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         if (isOpen) {
@@ -934,11 +959,12 @@ var TierFilterDropdown = ({
     )) })
   ] });
 };
-var CheckIcon = ({ className = "w-5 h-5" }) => {
+var CheckIcon = ({ className = "w-5 h-5", style }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
       className,
+      style,
       fill: "currentColor",
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
@@ -968,36 +994,89 @@ var PlanCard = ({
     "div",
     {
       onClick: isFree || isActive ? void 0 : () => onSelect(plan),
-      className: `relative border rounded-lg p-6 transition-all flex flex-col h-full ${!isFree && !isActive ? "cursor-pointer" : "cursor-default"} ${!isFree && isSelected && !isActive ? "border-green-500 bg-green-50" : "border-gray-200"} ${!isFree && !isActive ? "hover:border-gray-300" : ""} ${isPopular ? "border-green-500" : ""}`,
+      className: `relative border rounded-lg p-6 transition-all flex flex-col h-full font-subos ${!isFree && !isActive ? "cursor-pointer" : "cursor-default"} ${!isFree && isSelected && !isActive ? "border-primary-500 bg-primary-50" : "border-subos-border"} ${!isFree && !isActive ? "hover:border-subos-muted-foreground" : ""} ${isPopular ? "border-primary-500" : ""}`,
+      style: {
+        backgroundColor: !isFree && isSelected && !isActive ? "var(--subos-primary-50, #e8eaf6)" : "var(--subos-background, #ffffff)",
+        borderColor: !isFree && isSelected && !isActive ? "var(--subos-primary-500, #3f51b5)" : isPopular ? "var(--subos-primary-500, #3f51b5)" : "var(--subos-border, #dee2e6)",
+        color: "var(--subos-foreground, inherit)"
+      },
       children: [
-        isPopular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3 left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-green-500 text-white px-3 py-1 rounded-full text-xs font-medium", children: "Most Popular" }) }),
-        !isFree && isSelected && !isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-500 text-white rounded-full p-1", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4" }) }) }),
+        isPopular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3 left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "text-white px-3 py-1 rounded-full text-xs font-medium",
+            style: { backgroundColor: "var(--subos-primary-500, #3f51b5)" },
+            children: "Most Popular"
+          }
+        ) }),
+        !isFree && isSelected && !isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "text-white rounded-full p-1",
+            style: { backgroundColor: "var(--subos-primary-500, #3f51b5)" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4" })
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xl font-bold text-gray-900 mb-2", children: plan.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 text-sm mb-4", children: description }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: isFree ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-bold text-gray-900", children: "Free" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-3xl font-bold text-gray-900", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xl font-bold mb-2", style: { color: "var(--subos-foreground, inherit)" }, children: plan.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mb-4", style: { color: "var(--subos-muted-foreground, #6c757d)" }, children: description }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: isFree ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-bold", style: { color: "var(--subos-foreground, inherit)" }, children: "Free" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-3xl font-bold", style: { color: "var(--subos-foreground, inherit)" }, children: [
               "$",
               plan.fixedCost
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-600 ml-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1", style: { color: "var(--subos-muted-foreground, #6c757d)" }, children: [
               "per ",
               billingCycle === "yearly" ? "year" : "month"
             ] })
           ] }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2 mb-6 flex-grow", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4 text-green-500 mr-2 flex-shrink-0" }),
-          feature
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CheckIcon,
+            {
+              className: "w-4 h-4 mr-2 flex-shrink-0",
+              style: { color: "var(--subos-primary-500, #3f51b5)" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--subos-foreground, inherit)" }, children: feature })
         ] }, index)) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children: !isFree && (isActive ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: "w-full bg-gray-100 border border-gray-200 text-gray-500 py-2 px-4 rounded-md font-medium cursor-default",
+            className: "w-full border py-2 px-4 rounded-md font-medium cursor-default",
+            style: {
+              backgroundColor: "var(--subos-muted, #f8f9fa)",
+              borderColor: "var(--subos-border, #dee2e6)",
+              color: "var(--subos-muted-foreground, #6c757d)"
+            },
             disabled: true,
             children: "Active"
           }
-        ) : isSelected ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "w-full bg-primary text-white py-2 px-4 rounded-md font-medium", children: "Selected" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: "w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 rounded-md font-medium hover:bg-gray-50", children: "Select" })) })
+        ) : isSelected ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "w-full subos-btn-primary text-white py-2 px-4 rounded-md font-medium",
+            children: "Selected"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "w-full border py-2 px-4 rounded-md font-medium transition-colors",
+            style: {
+              backgroundColor: "var(--subos-background, #ffffff)",
+              borderColor: "var(--subos-border, #dee2e6)",
+              color: "var(--subos-foreground, inherit)"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "var(--subos-muted, #f8f9fa)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "var(--subos-background, #ffffff)";
+            },
+            children: "Select"
+          }
+        )) })
       ]
     }
   );
@@ -1062,7 +1141,7 @@ var PlanSelector = ({
   onBillingCycleChange,
   activePlanCode
 }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = React4.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React9.useState(false);
   const handleDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
@@ -1741,7 +1820,7 @@ var TransactionPagination = ({
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-1", children: getVisiblePages().map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React4__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm text-gray-500", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-1", children: getVisiblePages().map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React9__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm text-gray-500", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: () => onPageChange(page),
@@ -1787,7 +1866,7 @@ var TransactionModal = ({
     autoFetch: true
     // Enable auto-fetch so it works when modal opens
   });
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     if (isOpen && externalId) {
       fetchTransactions();
     }
@@ -2066,7 +2145,7 @@ var SubscriptionActionButtons = ({
   if (visibleActions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${containerClass} ${className}`, children: visibleActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(React4__default.default.Fragment, { children: action.component }, action.key)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${containerClass} ${className}`, children: visibleActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(React9__default.default.Fragment, { children: action.component }, action.key)) });
 };
 var SubscriptionCancelModal = ({
   isOpen,
@@ -2148,8 +2227,8 @@ var SubscriptionDetails = ({
   customActions = [],
   className = ""
 }) => {
-  const [isTransactionModalOpen, setIsTransactionModalOpen] = React4.useState(false);
-  const [showCancelConfirmation, setShowCancelConfirmation] = React4.useState(false);
+  const [isTransactionModalOpen, setIsTransactionModalOpen] = React9.useState(false);
+  const [showCancelConfirmation, setShowCancelConfirmation] = React9.useState(false);
   const { cancelSubscription, loading: cancelLoading } = useCancelSubscription({
     onSuccess: () => {
       setShowCancelConfirmation(false);
@@ -2260,9 +2339,9 @@ var UpgradeSummary = ({
   onUpgrade,
   isVisible = true
 }) => {
-  const [checkoutInfo, setCheckoutInfo] = React4.useState(null);
-  const [loading, setLoading] = React4.useState(false);
-  React4.useEffect(() => {
+  const [checkoutInfo, setCheckoutInfo] = React9.useState(null);
+  const [loading, setLoading] = React9.useState(false);
+  React9.useEffect(() => {
     if (!selectedPlan || !isVisible || Number(selectedPlan.fixedCost) === 0) {
       setCheckoutInfo(null);
       return;
@@ -2315,7 +2394,7 @@ var UpgradeSummary = ({
           {
             onClick: onUpgrade,
             disabled: loading,
-            className: "bg-primary text-white px-6 py-2 rounded-md font-medium hover:bg-primary-dark transition-colors text-sm disabled:opacity-50",
+            className: "btn-primary text-white px-6 py-2 rounded-md font-medium hover:bg-primary-dark transition-colors text-sm disabled:opacity-50",
             children: loading ? "Loading..." : "Upgrade Now"
           }
         )
@@ -2349,6 +2428,66 @@ var Layout = ({ children }) => {
     ] }) }) })
   ] });
 };
+var SubOSThemeContext = React9.createContext(void 0);
+var useSubOSTheme = () => {
+  const context = React9.useContext(SubOSThemeContext);
+  if (!context) {
+    throw new Error("useSubOSTheme must be used within a SubOSThemeProvider");
+  }
+  return context;
+};
+var SubOSThemeProvider = ({
+  children,
+  theme = {},
+  className = ""
+}) => {
+  const [currentTheme, setCurrentTheme] = React9__default.default.useState(theme);
+  const cssVariables = React9__default.default.useMemo(() => {
+    const vars = {};
+    if (currentTheme.primaryColors) {
+      Object.entries(currentTheme.primaryColors).forEach(([key, value]) => {
+        if (value) vars[`--subos-primary-${key}`] = value;
+      });
+    }
+    if (currentTheme.secondaryColors) {
+      Object.entries(currentTheme.secondaryColors).forEach(([key, value]) => {
+        if (value) vars[`--subos-secondary-${key}`] = value;
+      });
+    }
+    if (currentTheme.background) vars["--subos-background"] = currentTheme.background;
+    if (currentTheme.foreground) vars["--subos-foreground"] = currentTheme.foreground;
+    if (currentTheme.muted) vars["--subos-muted"] = currentTheme.muted;
+    if (currentTheme.mutedForeground) vars["--subos-muted-foreground"] = currentTheme.mutedForeground;
+    if (currentTheme.border) vars["--subos-border"] = currentTheme.border;
+    if (currentTheme.accent) vars["--subos-accent"] = currentTheme.accent;
+    if (currentTheme.accentForeground) vars["--subos-accent-foreground"] = currentTheme.accentForeground;
+    if (currentTheme.fontFamily) vars["--subos-font-family"] = currentTheme.fontFamily;
+    if (currentTheme.borderRadius) vars["--subos-border-radius"] = currentTheme.borderRadius;
+    if (currentTheme.shadowCard) vars["--subos-shadow-card"] = currentTheme.shadowCard;
+    if (currentTheme.shadowCardHover) vars["--subos-shadow-card-hover"] = currentTheme.shadowCardHover;
+    return vars;
+  }, [currentTheme]);
+  const contextValue = React9__default.default.useMemo(() => ({
+    theme: currentTheme,
+    setTheme: setCurrentTheme
+  }), [currentTheme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(SubOSThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `subos-container ${className}`,
+      style: cssVariables,
+      children
+    }
+  ) });
+};
+var useApplyHostTheme = (hostTheme) => {
+  const { setTheme } = useSubOSTheme();
+  React9__default.default.useEffect(() => {
+    if (hostTheme) {
+      setTheme(hostTheme);
+    }
+  }, [hostTheme, setTheme]);
+};
 var Pagination = ({
   meta,
   onPageChange,
@@ -2423,7 +2562,7 @@ var Pagination = ({
             children: "Previous"
           }
         ),
-        pageNumbers.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React4__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
+        pageNumbers.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React9__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => onPageChange(page),
@@ -2450,15 +2589,15 @@ var DashboardPage = ({
   var _a;
   const subscription = useSubscription();
   const plans = usePlans();
-  const lastLoadedIdRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const lastLoadedIdRef = React9.useRef(null);
+  React9.useEffect(() => {
     if (lastLoadedIdRef.current !== externalId) {
       subscription.fetchSubscription(externalId);
       plans.fetchPlans();
       lastLoadedIdRef.current = externalId;
     }
   }, [externalId]);
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     registerClearSelectedPlan(plans.clearSelectedPlan);
     return () => {
       unregisterClearSelectedPlan();
@@ -2508,7 +2647,7 @@ var DashboardPage = ({
   ] }) }) });
 };
 var usePaymentParams = () => {
-  return React4.useMemo(() => {
+  return React9.useMemo(() => {
     const params = new URLSearchParams(window.location.search);
     return {
       gateway: params.get("gateway") || void 0,
@@ -2519,9 +2658,9 @@ var usePaymentParams = () => {
   }, []);
 };
 var useProcessPaymentSuccess = (params) => {
-  const [loading, setLoading] = React4.useState(true);
-  const [error, setError] = React4.useState(null);
-  React4.useEffect(() => {
+  const [loading, setLoading] = React9.useState(true);
+  const [error, setError] = React9.useState(null);
+  React9.useEffect(() => {
     const run = async () => {
       try {
         const qs = new URLSearchParams({
@@ -2591,9 +2730,9 @@ var PaymentSuccessPage = () => {
 };
 var PaymentSuccessPage_default = PaymentSuccessPage;
 var useProcessPaymentCancel = (params) => {
-  const [loading, setLoading] = React4.useState(true);
-  const [error, setError] = React4.useState(null);
-  React4.useEffect(() => {
+  const [loading, setLoading] = React9.useState(true);
+  const [error, setError] = React9.useState(null);
+  React9.useEffect(() => {
     const run = async () => {
       try {
         const qs = new URLSearchParams({
@@ -2665,6 +2804,7 @@ exports.PlansGrid = PlansGrid;
 exports.ReceiptIcon = ReceiptIcon;
 exports.SearchIcon = SearchIcon;
 exports.StarBorderIcon = StarBorderIcon;
+exports.SubOSThemeProvider = SubOSThemeProvider;
 exports.SubscriptionActionButtons = SubscriptionActionButtons;
 exports.SubscriptionCancelButton = SubscriptionCancelButton;
 exports.SubscriptionCancelModal = SubscriptionCancelModal;
@@ -2708,10 +2848,12 @@ exports.registerClearSelectedPlan = registerClearSelectedPlan;
 exports.subscriptionApi = subscriptionApi;
 exports.transactionApi = transactionApi;
 exports.unregisterClearSelectedPlan = unregisterClearSelectedPlan;
+exports.useApplyHostTheme = useApplyHostTheme;
 exports.useCancelSubscription = useCancelSubscription;
 exports.useCustomerPortal = useCustomerPortal;
 exports.usePagination = usePagination;
 exports.usePlans = usePlans;
+exports.useSubOSTheme = useSubOSTheme;
 exports.useSubscription = useSubscription;
 exports.useTransactions = useTransactions;
 exports.useUpgrade = useUpgrade;