@ttoss/react-billing 0.5.12 → 0.5.13

package/dist/index.mjs

@@ -0,0 +1,801 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Box, Button, Card, Flex, Heading, SegmentedControl, Spinner, Stack, Text, keyframes } from "@ttoss/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@ttoss/react-icons";
+import * as React from "react";
+import { EnhancedTitle } from "@ttoss/components/EnhancedTitle";
+import { MetricCard } from "@ttoss/components/MetricCard";
+
+//#region src/components/planCard/PlanCardCtaSlot.tsx
+const PlanCardCtaSlot = ({
+  buttonProps
+}) => {
+  const {
+    label: ctaLabel = "Assine agora",
+    sx: buttonSx,
+    leftIcon,
+    variant: buttonVariant,
+    ...restButtonProps
+  } = buttonProps ?? {};
+  return /* @__PURE__ */jsx(Flex, {
+    sx: {
+      marginTop: "auto",
+      paddingY: "2",
+      paddingX: "6",
+      width: "full",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */jsx(Button, {
+      ...restButtonProps,
+      variant: buttonVariant ?? "accent",
+      leftIcon,
+      sx: {
+        width: "full",
+        justifyContent: "center",
+        fontWeight: "semibold",
+        ...buttonSx
+      },
+      children: ctaLabel
+    })
+  });
+};
+
+//#endregion
+//#region src/components/planCard/PlanCardVariants.ts
+const normalizeVariant = variantType => {
+  if (variantType === "default") return "primary";
+  if (variantType === "enterprise") return "secondary";
+  return variantType ?? "primary";
+};
+/**
+* PlanCard variants follow the same pattern as `Tooltip` variants:
+* a simple mapping from `variantType` to a small set of style tokens.
+*/
+const getPlanCardVariantStyles = variantType => {
+  const variant = normalizeVariant(variantType);
+  const variants = {
+    primary: {
+      backgroundColor: "display.background.primary.default",
+      color: "display.text.primary.default",
+      secondaryColor: "display.text.secondary.default",
+      borderColor: "display.border.muted.default",
+      positiveColor: "feedback.text.positive.default"
+    },
+    secondary: {
+      backgroundColor: "display.background.primary.active",
+      color: "action.text.primary.default",
+      secondaryColor: "action.text.primary.default",
+      borderColor: "display.border.muted.default",
+      positiveColor: "action.text.primary.default"
+    }
+  };
+  return variants[variant] ?? variants.primary;
+};
+
+//#endregion
+//#region src/components/planCard/PlanCardFeaturesSlot.tsx
+const featuresTitle = "RECURSOS";
+const PlanCardFeaturesSlot = ({
+  features,
+  variant = "primary"
+}) => {
+  const variantStyles = getPlanCardVariantStyles(variant);
+  const featurePositiveColor = variantStyles.positiveColor;
+  return /* @__PURE__ */jsx(Box, {
+    sx: {
+      paddingY: "4",
+      paddingX: "6",
+      width: "full",
+      borderTop: "md",
+      borderBottom: "md",
+      borderColor: "display.border.muted.default"
+    },
+    children: /* @__PURE__ */jsxs(Stack, {
+      sx: {
+        gap: "5",
+        paddingY: "3"
+      },
+      children: [/* @__PURE__ */jsx(Flex, {
+        sx: {
+          letterSpacing: "widest",
+          color: variantStyles.color
+        },
+        children: featuresTitle
+      }), /* @__PURE__ */jsx(Flex, {
+        sx: {
+          flexDirection: "column",
+          gap: "3"
+        },
+        children: features.map((feature, index) => {
+          if (React.isValidElement(feature)) return /* @__PURE__ */jsx(React.Fragment, {
+            children: feature
+          }, index);
+          return /* @__PURE__ */jsxs(Flex, {
+            sx: {
+              fontSize: "sm",
+              color: featurePositiveColor,
+              alignItems: "center",
+              gap: "3"
+            },
+            children: [/* @__PURE__ */jsx(Icon, {
+              icon: "fluent:checkmark-24-filled"
+            }), /* @__PURE__ */jsx(Text, {
+              sx: {
+                fontSize: "sm",
+                color: featurePositiveColor,
+                alignItems: "center"
+              },
+              children: String(feature)
+            })]
+          }, index);
+        })
+      })]
+    })
+  });
+};
+
+//#endregion
+//#region src/components/planCard/PlanCardHeaderSlot.tsx
+const PlanCardHeaderSlot = ({
+  title,
+  subtitle,
+  hasTopTag,
+  variant = "primary"
+}) => {
+  const variantStyles = getPlanCardVariantStyles(variant);
+  return /* @__PURE__ */jsx(Box, {
+    sx: {
+      paddingY: hasTopTag ? "4" : "8",
+      paddingX: "8",
+      width: "full"
+    },
+    children: /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        flexDirection: "column",
+        gap: "2",
+        width: "full",
+        alignItems: "center"
+      },
+      children: [/* @__PURE__ */jsx(Heading, {
+        sx: {
+          fontSize: "3xl",
+          color: variantStyles.color
+        },
+        children: title
+      }), subtitle && /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          color: variantStyles.secondaryColor
+        },
+        children: subtitle
+      })]
+    })
+  });
+};
+
+//#endregion
+//#region src/components/planCard/PlanCardMetadataSlot.tsx
+const PlanCardMetadataSlot = ({
+  metadata,
+  variant = "primary"
+}) => {
+  const variantStyles = getPlanCardVariantStyles(variant);
+  return /* @__PURE__ */jsx(Stack, {
+    sx: {
+      width: "full",
+      gap: "6"
+    },
+    children: metadata.map(service => {
+      const serviceKey = service.id ?? service.key ?? service.label;
+      return /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          gap: "3",
+          flexDirection: "column",
+          width: "full"
+        },
+        children: [/* @__PURE__ */jsxs(Flex, {
+          sx: {
+            gap: "4",
+            alignItems: "center",
+            color: variantStyles.secondaryColor,
+            width: "full"
+          },
+          children: [service.icon && /* @__PURE__ */jsx(Icon, {
+            icon: service.icon
+          }), /* @__PURE__ */jsx(Text, {
+            sx: {
+              color: variantStyles.secondaryColor
+            },
+            children: service.label + String.fromCharCode(58)
+          })]
+        }), service.parameters.map(parameter => {
+          return /* @__PURE__ */jsx(Flex, {
+            sx: {
+              paddingX: "6",
+              paddingY: "4",
+              backgroundColor: "display.background.muted.default",
+              borderRadius: "lg",
+              width: "full"
+            },
+            children: /* @__PURE__ */jsxs(Flex, {
+              sx: {
+                width: "full",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: "2"
+              },
+              children: [/* @__PURE__ */jsx(Text, {
+                sx: {
+                  fontSize: "sm",
+                  textAlign: "center"
+                },
+                children: parameter.name
+              }), /* @__PURE__ */jsx(Text, {
+                sx: {
+                  fontWeight: "semibold",
+                  fontSize: "lg"
+                },
+                children: parameter.value
+              })]
+            })
+          }, parameter.name);
+        })]
+      }, serviceKey);
+    })
+  });
+};
+
+//#endregion
+//#region src/components/planCard/PlanCardPriceSlot.tsx
+const PlanCardPriceSlot = ({
+  price,
+  variant = "primary"
+}) => {
+  const variantStyles = getPlanCardVariantStyles(variant);
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      paddingY: "6",
+      paddingX: "8",
+      width: "full",
+      alignItems: "center",
+      flexDirection: "column",
+      gap: "3"
+    },
+    children: [/* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "baseline",
+        gap: "4",
+        justifyContent: "center"
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "4xl",
+          fontWeight: "bold",
+          color: variantStyles.color
+        },
+        children: price.value
+      }), /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          color: variantStyles.secondaryColor
+        },
+        children: price.interval
+      })]
+    }), price.description && /* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "md",
+        color: variantStyles.secondaryColor
+      },
+      children: price.description
+    })]
+  });
+};
+
+//#endregion
+//#region src/components/planCard/PlanCardTopTagSlot.tsx
+const PlanCardTopTagSlot = ({
+  children
+}) => {
+  return /* @__PURE__ */jsx(Box, {
+    sx: {
+      padding: "4"
+    },
+    children
+  });
+};
+
+//#endregion
+//#region src/components/planCard/PlanCard.tsx
+const PlanCard = props => {
+  const {
+    variant = "primary",
+    topTag,
+    title,
+    subtitle,
+    metadata = [],
+    metadataVariant,
+    price,
+    features = [],
+    buttonProps,
+    ...cardProps
+  } = props;
+  const effectiveMetadataVariant = metadataVariant ?? variant;
+  const variantStyles = getPlanCardVariantStyles(variant);
+  return /* @__PURE__ */jsxs(Card, {
+    ...cardProps,
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      width: "full",
+      maxWidth: "410px",
+      backgroundColor: variantStyles.backgroundColor,
+      borderColor: variantStyles.borderColor,
+      ...cardProps.sx
+    },
+    children: [topTag && /* @__PURE__ */jsx(PlanCardTopTagSlot, {
+      variant,
+      children: topTag
+    }), /* @__PURE__ */jsx(PlanCardHeaderSlot, {
+      title,
+      subtitle,
+      hasTopTag: Boolean(topTag),
+      variant
+    }), metadata.length > 0 && /* @__PURE__ */jsx(Box, {
+      sx: {
+        paddingY: "4",
+        paddingX: "8",
+        width: "full"
+      },
+      children: /* @__PURE__ */jsx(PlanCardMetadataSlot, {
+        metadata,
+        variant: effectiveMetadataVariant
+      })
+    }), /* @__PURE__ */jsx(PlanCardPriceSlot, {
+      price,
+      variant
+    }), features.length > 0 && /* @__PURE__ */jsx(PlanCardFeaturesSlot, {
+      features,
+      variant
+    }), /* @__PURE__ */jsx(PlanCardCtaSlot, {
+      buttonProps,
+      variant
+    })]
+  });
+};
+
+//#endregion
+//#region src/components/plansPanel/PlansPanel.tsx
+/**
+* PlansPanel renders a grid of PlanCard components with optional multi-dimensional
+* SegmentedControl filters above them.
+*
+* Each filter dimension independently narrows the visible set of plan cards.
+* The component supports both uncontrolled mode (internal state from `defaultValue`)
+* and controlled mode (via `filterValues` + `onFilterChange`).
+*
+* @example
+* ```tsx
+* // Uncontrolled — component manages filter state internally
+* <PlansPanel
+*   filters={[
+*     {
+*       id: 'interval',
+*       label: 'Billing Frequency',
+*       options: [
+*         { label: 'Monthly', value: 'monthly' },
+*         { label: 'Yearly',  value: 'yearly' },
+*       ],
+*       defaultValue: 'monthly',
+*     },
+*   ]}
+*   plans={plans}
+*   activePlanId="plan_basic_monthly"
+*   onSelectPlan={(planId) => console.log(planId)}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // Controlled — consumer owns filter state
+* <PlansPanel
+*   filters={filters}
+*   filterValues={{ interval: 'yearly' }}
+*   onFilterChange={(id, value) =>
+*     setFilterValues((prev) => ({ ...prev, [id]: value }))
+*   }
+*   plans={plans}
+*   onSelectPlan={(planId) => checkout(planId)}
+* />
+* ```
+*/
+const PlansPanel = ({
+  filters = [],
+  plans,
+  activePlanId,
+  onSelectPlan,
+  filterValues: controlledFilterValues,
+  onFilterChange
+}) => {
+  const [internalFilterValues, setInternalFilterValues] = React.useState(() => {
+    const initial = {};
+    for (const filter of filters) if (filter.defaultValue !== void 0) initial[filter.id] = filter.defaultValue;
+    return initial;
+  });
+  const isControlled = controlledFilterValues !== void 0;
+  const activeFilterValues = isControlled ? controlledFilterValues : internalFilterValues;
+  const handleFilterChange = (id, value) => {
+    const strValue = String(value);
+    if (isControlled) onFilterChange?.(id, strValue);else setInternalFilterValues(prev => {
+      return {
+        ...prev,
+        [id]: strValue
+      };
+    });
+  };
+  const visiblePlans = plans.filter(plan => {
+    if (!plan.filterValues || Object.keys(plan.filterValues).length === 0) return true;
+    return Object.entries(activeFilterValues).every(([filterId, filterValue]) => {
+      if (!plan.filterValues || !(filterId in plan.filterValues)) return true;
+      return plan.filterValues[filterId] === filterValue;
+    });
+  });
+  return /* @__PURE__ */jsxs(Stack, {
+    sx: {
+      gap: "6",
+      width: "full",
+      alignItems: "center"
+    },
+    children: [filters.length > 0 && /* @__PURE__ */jsx(Stack, {
+      sx: {
+        gap: "4",
+        alignItems: "center"
+      },
+      children: filters.map(filter => {
+        return /* @__PURE__ */jsxs(Stack, {
+          sx: {
+            gap: "2",
+            alignItems: "center"
+          },
+          children: [filter.label && /* @__PURE__ */jsx(Text, {
+            sx: {
+              fontWeight: "semibold",
+              color: "display.text.primary.default"
+            },
+            children: filter.label
+          }), /* @__PURE__ */jsx(SegmentedControl, {
+            options: filter.options,
+            value: isControlled ? controlledFilterValues[filter.id] ?? filter.defaultValue : activeFilterValues[filter.id],
+            defaultValue: isControlled ? void 0 : filter.defaultValue,
+            onChange: value => {
+              return handleFilterChange(filter.id, value);
+            }
+          })]
+        }, filter.id);
+      })
+    }), /* @__PURE__ */jsx(Flex, {
+      sx: {
+        flexWrap: "wrap",
+        gap: "4",
+        width: "full",
+        justifyContent: "center"
+      },
+      children: visiblePlans.map(plan => {
+        const effectiveVariant = plan.id === activePlanId ? "secondary" : plan.variant ?? "primary";
+        return /* @__PURE__ */jsx(PlanCard, {
+          title: plan.title,
+          subtitle: plan.subtitle,
+          price: plan.price,
+          features: plan.features,
+          metadata: plan.metadata,
+          variant: effectiveVariant,
+          topTag: plan.topTag,
+          buttonProps: {
+            ...plan.buttonProps,
+            onClick: e => {
+              onSelectPlan?.(plan.id);
+              plan.buttonProps?.onClick?.(e);
+            }
+          }
+        }, plan.id);
+      })
+    })]
+  });
+};
+
+//#endregion
+//#region src/components/subscriptionPanel/SubscriptionPanel.styles.ts
+const gradientFlow = keyframes({
+  "0%": {
+    backgroundPosition: "0% 50%"
+  },
+  "50%": {
+    backgroundPosition: "100% 50%"
+  },
+  "100%": {
+    backgroundPosition: "0% 50%"
+  }
+});
+const getAccentGradientBackground = t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.accent?.default || theme.colors?.input?.background?.accent?.default;
+  if (!start) return void 0;
+  return `linear-gradient(270deg, ${start}, ${theme.colors?.action?.background?.accent?.active || theme.colors?.input?.background?.accent?.active || start}, ${start})`;
+};
+const getPrimaryGradientBackground = t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.primary?.default;
+  if (!start) return void 0;
+  return `linear-gradient(270deg, ${start}, ${theme.colors?.action?.background?.secondary?.default || start}, ${start})`;
+};
+const getVariantStyles = variantType => {
+  const variants = {
+    "spotlight-accent": {
+      backgroundColor: "input.background.accent.default",
+      color: "action.text.accent.default",
+      borderColor: "display.border.muted.default",
+      gradientBackground: getAccentGradientBackground
+    },
+    "spotlight-primary": {
+      backgroundColor: "action.background.primary.default",
+      color: "display.text.accent.default",
+      borderColor: "display.border.muted.default",
+      gradientBackground: getPrimaryGradientBackground
+    },
+    primary: {
+      backgroundColor: "action.background.primary.default",
+      color: "action.text.primary.default",
+      borderColor: "display.border.muted.default",
+      gradientBackground: void 0
+    },
+    secondary: {
+      backgroundColor: "action.background.secondary.default",
+      color: "action.text.primary.default",
+      borderColor: "display.border.muted.default",
+      gradientBackground: void 0
+    },
+    accent: {
+      backgroundColor: "action.background.accent.default",
+      color: "action.text.accent.default",
+      borderColor: "display.border.muted.default",
+      gradientBackground: void 0
+    }
+  };
+  return variants[variantType] || variants["spotlight-accent"];
+};
+const getSubscriptionPanelAccentBarSx = (variant = "spotlight-accent") => {
+  const variantStyles = getVariantStyles(variant);
+  const isSpotlight = variant.startsWith("spotlight-");
+  const gradientBg = variant === "spotlight-accent" ? getAccentGradientBackground : getPrimaryGradientBackground;
+  return {
+    height: "12px",
+    width: "full",
+    borderTopLeftRadius: "lg",
+    borderTopRightRadius: "lg",
+    backgroundColor: variantStyles.backgroundColor,
+    color: variantStyles.color,
+    borderColor: variantStyles.borderColor,
+    ...(isSpotlight ? {
+      background: gradientBg,
+      backgroundSize: "400% 400%",
+      animation: `${gradientFlow} 6s ease infinite`
+    } : {})
+  };
+};
+const SubscriptionPanelAccentBarSx = getSubscriptionPanelAccentBarSx("spotlight-accent");
+
+//#endregion
+//#region src/components/subscriptionPanel/SubscriptionPanelActionsSlot.tsx
+/**
+* Renders action buttons for the subscription card.
+*/
+const SubscriptionPanelActionsSlot = ({
+  actions
+}) => {
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */jsx(Flex, {
+    sx: {
+      gap: "3",
+      flexDirection: ["column", "row"],
+      flexShrink: 0,
+      paddingX: "6",
+      paddingBottom: "6"
+    },
+    children: actions.map((action, index) => {
+      const {
+        label,
+        onClick,
+        leftIcon,
+        isLoading,
+        variant = "secondary",
+        disabled,
+        ...buttonProps
+      } = action;
+      return /* @__PURE__ */jsx(Button, {
+        onClick,
+        variant,
+        disabled: disabled || isLoading,
+        leftIcon: isLoading ? void 0 : leftIcon,
+        sx: {
+          gap: "2",
+          justifyContent: "center",
+          minWidth: "fit-content"
+        },
+        ...buttonProps,
+        children: isLoading ? /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(Icon, {
+            icon: "fluent:spinner-ios-20-regular"
+          }), "Processando..."]
+        }) : label
+      }, index);
+    })
+  });
+};
+
+//#endregion
+//#region src/components/subscriptionPanel/SubscriptionPanel.tsx
+/**
+* Renders a metric card based on its type.
+*/
+const renderMetricCard = params => {
+  const {
+    metric,
+    index,
+    isLoading
+  } = params;
+  return /* @__PURE__ */jsx(MetricCard, {
+    metric,
+    isLoading
+  }, index);
+};
+/**
+* SubscriptionPanel displays comprehensive subscription information including
+* plan details, status, actions, and various metrics.
+*
+* It supports three types of metrics:
+* - **Date**: For displaying dates like expiration or renewal
+* - **Percentage**: For usage-based metrics with progress bars
+* - **Number**: For count-based metrics
+*
+* @example
+* ```tsx
+* <SubscriptionPanel
+*   planName="Premium Plan"
+*   price={{ value: "R$ 99,00", interval: "mês" }}
+*   status={{ status: "active", interval: "Mensal" }}
+*   features={[{ label: "Feature 1" }, { label: "Feature 2" }]}
+*   actions={[
+*     { label: "Upgrade", onClick: () => {}, variant: "accent" },
+*     { label: "Cancel", onClick: () => {}, variant: "danger" },
+*   ]}
+*   metrics={[
+*     { type: "date", label: "Expira em", date: "15/01/2025", icon: "fluent:calendar-24-regular" },
+*     { type: "percentage", label: "Uso", current: 75, max: 100, icon: "fluent:data-usage-24-regular" },
+*   ]}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // Compact mode for smaller spaces
+* <SubscriptionPanel
+*   planName="Basic Plan"
+*   price={{ value: "R$ 29,00", interval: "mês" }}
+*   status={{ status: "active" }}
+*   compact
+* />
+* ```
+*/
+const SubscriptionPanel = ({
+  variant = "accent",
+  icon,
+  planName,
+  price,
+  status,
+  features = [],
+  actions = [],
+  metrics = [],
+  isLoading = false
+}) => {
+  if (isLoading)
+    /**
+    * use skeleton loader in the future here
+    */
+    return /* @__PURE__ */jsx(Card, {
+      sx: {
+        width: "full",
+        height: "400px",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */jsx(Spinner, {})
+    });
+  return /* @__PURE__ */jsxs(Card, {
+    sx: {
+      width: "full"
+    },
+    children: [/* @__PURE__ */jsx(Flex, {
+      sx: getSubscriptionPanelAccentBarSx(variant)
+    }), /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        width: "full",
+        paddingX: "6",
+        paddingY: "6",
+        flexDirection: "column"
+      },
+      children: [/* @__PURE__ */jsxs(Flex, {
+        sx: {
+          paddingY: "10",
+          paddingX: "3",
+          width: "full",
+          flexDirection: ["column", "column", "row"],
+          alignItems: ["stretch", "stretch", "center"],
+          justifyContent: "space-between",
+          gap: "6",
+          borderBottom: "sm",
+          borderBottomColor: "display.border.muted.default"
+        },
+        children: [/* @__PURE__ */jsx(EnhancedTitle, {
+          variant,
+          icon,
+          title: planName,
+          frontTitle: price.interval ? `${price.value}/${price.interval}` : price.value,
+          topBadges: [...(status.status === "active" ? [{
+            label: "Ativo",
+            variant: "positive",
+            icon: "fluent:checkmark-circle-24-filled"
+          }] : status.status === "inactive" ? [{
+            label: "Inativo",
+            variant: "muted",
+            icon: "fluent:dismiss-circle-24-filled"
+          }] : [{
+            label: "Cancelado",
+            variant: "negative",
+            icon: "fluent:error-circle-24-filled"
+          }]), ...(status.interval ? [{
+            label: status.interval,
+            variant: "informative"
+          }] : []), ...(status.hasScheduledUpdate ? [{
+            label: "Alteração Agendada",
+            variant: "informative",
+            icon: "fluent:clock-24-regular"
+          }] : []), ...(status.hasCancellation ? [{
+            label: "Renovação Cancelada",
+            variant: "negative",
+            icon: "fluent:dismiss-circle-24-regular"
+          }] : [])],
+          bottomBadges: features.map(feature => {
+            return {
+              label: feature.label,
+              icon: typeof feature.icon === "string" ? feature.icon : "fluent:checkmark-24-filled",
+              variant: "muted"
+            };
+          })
+        }), actions.length > 0 && /* @__PURE__ */jsx(SubscriptionPanelActionsSlot, {
+          actions
+        })]
+      }), metrics.length > 0 && /* @__PURE__ */jsx(Fragment, {
+        children: /* @__PURE__ */jsx(Flex, {
+          sx: {
+            paddingY: "10",
+            paddingX: "3",
+            width: "full",
+            flexWrap: "wrap",
+            gap: "10",
+            justifyContent: "center"
+          },
+          children: metrics.map((metric, index) => {
+            return renderMetricCard({
+              metric,
+              index,
+              isLoading
+            });
+          })
+        })
+      })]
+    })]
+  });
+};
+
+//#endregion
+export { PlanCard, PlansPanel, SubscriptionPanel };