{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-table-two",
  "title": "Pricing Table Two",
  "description": "A pricing table component with a feature table",
  "dependencies": ["lucide-react", "class-variance-authority", "motion"],
  "registryDependencies": ["button", "table", "switch", "utils"],
  "files": [
    {
      "path": "src/registry/billingsdk/pricing-table-two.tsx",
      "content": "\"use client\";\n\nimport { Check, Minus, Zap } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\nimport { type Plan } from \"@/lib/billingsdk-config\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport { Button } from \"@/components/ui/button\";\nimport { Switch } from \"@/components/ui/switch\";\n\nconst sectionVariants = cva(\"py-32\", {\n  variants: {\n    size: {\n      small: \"py-12\",\n      medium: \"py-20\",\n      large: \"py-32\",\n    },\n    theme: {\n      minimal: \"\",\n      classic:\n        \"bg-gradient-to-b from-background to-muted/20 relative overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    size: \"medium\",\n    theme: \"minimal\",\n  },\n});\n\nconst titleVariants = cva(\"mb-2 font-semibold\", {\n  variants: {\n    size: {\n      small: \"text-2xl lg:text-3xl\",\n      medium: \"text-3xl lg:text-4xl\",\n      large: \"text-3xl lg:text-5xl\",\n    },\n    theme: {\n      minimal: \"\",\n      classic:\n        \"bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent font-bold\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst descriptionVariants = cva(\"text-muted-foreground\", {\n  variants: {\n    size: {\n      small: \"text-sm lg:text-base\",\n      medium: \"text-base lg:text-lg\",\n      large: \"lg:text-lg\",\n    },\n    theme: {\n      minimal: \"\",\n      classic: \"text-center max-w-2xl mx-auto\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst toggleWrapperVariants = cva(\"flex justify-center items-center gap-3\", {\n  variants: {\n    size: {\n      small: \"mt-6\",\n      medium: \"mt-7\",\n      large: \"mt-8\",\n    },\n    theme: {\n      minimal: \"\",\n      classic: \"mt-10\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst toggleLabelVariants = cva(\"font-medium text-sm transition-all\", {\n  variants: {\n    size: {\n      small: \"text-xs\",\n      medium: \"text-sm\",\n      large: \"text-sm\",\n    },\n    theme: {\n      minimal: \"\",\n      classic: \"font-semibold\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst switchScaleVariants = cva(\"transition-all\", {\n  variants: {\n    size: {\n      small: \"scale-90\",\n      medium: \"scale-95\",\n      large: \"\",\n    },\n    theme: {\n      minimal: \"\",\n      classic: \"data-[state=checked]:bg-primary\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst plansWrapperVariants = cva(\"flex\", {\n  variants: {\n    size: {\n      small: \"mt-6\",\n      medium: \"mt-8\",\n      large: \"mt-10\",\n    },\n    theme: {\n      minimal: \"\",\n      classic: \"mt-12\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst cardVariants = cva(\n  \"bg-card text-card-foreground border shadow-sm flex w-full flex-col justify-between text-center rounded-xl md:rounded-none transition-all duration-300\",\n  {\n    variants: {\n      size: {\n        small: \"py-4 gap-6\",\n        medium: \"py-5 gap-7\",\n        large: \"py-6 gap-8\",\n      },\n      theme: {\n        minimal: \"\",\n        classic: \"hover:shadow-xl backdrop-blur-sm bg-card/50 border-border/50\",\n      },\n      highlight: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        theme: \"classic\",\n        highlight: true,\n        className:\n          \"bg-gradient-to-b from-primary/5 to-transparent relative overflow-hidden shadow-2xl\",\n      },\n      {\n        theme: \"minimal\",\n        highlight: true,\n        className: \"bg-muted/30 shadow-lg\",\n      },\n    ],\n    defaultVariants: {\n      size: \"large\",\n      theme: \"minimal\",\n      highlight: false,\n    },\n  },\n);\n\nconst priceTextVariants = cva(\"font-bold\", {\n  variants: {\n    size: {\n      small: \"text-3xl\",\n      medium: \"text-4xl\",\n      large: \"text-5xl\",\n    },\n    theme: {\n      minimal: \"\",\n      classic:\n        \"text-6xl font-extrabold bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst priceSubTextVariants = cva(\"text-muted-foreground\", {\n  variants: {\n    size: {\n      small: \"mt-2\",\n      medium: \"mt-3\",\n      large: \"mt-3\",\n    },\n    theme: {\n      minimal: \"\",\n      classic: \"font-medium\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst tableWrapperVariants = cva(\"relative w-full overflow-x-auto\", {\n  variants: {\n    size: {\n      small: \"mt-6\",\n      medium: \"mt-8\",\n      large: \"mt-10\",\n    },\n    theme: {\n      minimal: \"\",\n      classic:\n        \"mt-16 bg-card/30 backdrop-blur-sm rounded-xl border border-border/50 shadow-sm\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst featureIconVariants = cva(\"mx-auto\", {\n  variants: {\n    size: {\n      small: \"size-4\",\n      medium: \"size-5\",\n      large: \"size-5\",\n    },\n    theme: {\n      minimal: \"\",\n      classic: \"text-emerald-500\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    theme: \"minimal\",\n  },\n});\n\nconst firstColWidthVariants = cva(\"\", {\n  variants: {\n    size: {\n      small: \"w-[140px]\",\n      medium: \"w-[180px]\",\n      large: \"w-[200px]\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n  },\n});\n\nconst buttonVariants = cva(\n  \"w-full hover:cursor-pointer transition-all duration-300\",\n  {\n    variants: {\n      theme: {\n        minimal: \"\",\n        classic: \"hover:shadow-xl active:scale-95\",\n      },\n    },\n    defaultVariants: {\n      theme: \"minimal\",\n    },\n  },\n);\n\n// Internal component for the checkout button - not exported\ninterface DefaultCheckoutButtonProps {\n  plan: Plan;\n  theme: \"minimal\" | \"classic\" | null | undefined;\n  onPlanSelect?: (planId: string) => void;\n}\n\nfunction DefaultCheckoutButton({\n  plan,\n  theme,\n  onPlanSelect,\n}: DefaultCheckoutButtonProps) {\n  return (\n    <Button\n      className={cn(\n        buttonVariants({ theme }),\n        plan.highlight &&\n          theme === \"minimal\" &&\n          \"focus-visible:ring-ring hover:bg-primary/90 group bg-primary text-primary-foreground ring-primary before:from-primary-foreground/20 after:from-primary-foreground/10 relative isolate inline-flex h-9 w-full items-center justify-center gap-2 overflow-hidden rounded-md px-3 py-2 text-left text-sm font-medium whitespace-nowrap shadow ring-1 transition duration-300 ease-[cubic-bezier(0.4,0.36,0,1)] before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-md before:bg-gradient-to-b before:opacity-80 before:transition-opacity before:duration-300 before:ease-[cubic-bezier(0.4,0.36,0,1)] after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-md after:bg-gradient-to-b after:to-transparent after:mix-blend-overlay focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n        plan.highlight &&\n          theme === \"classic\" &&\n          \"from-primary to-primary/80 text-primary-foreground border-primary/20 relative overflow-hidden rounded-lg border bg-gradient-to-r px-6 py-3 font-semibold\",\n      )}\n      variant={plan.highlight ? \"default\" : \"secondary\"}\n      onClick={() => onPlanSelect?.(plan.id)}\n    >\n      {theme === \"classic\" && plan.highlight && (\n        <Zap className=\"mr-1 h-4 w-4\" />\n      )}\n      {plan.buttonText}\n      {theme === \"classic\" && plan.highlight && (\n        <div className=\"absolute inset-0 translate-x-[-100%] bg-gradient-to-r from-white/0 via-white/10 to-white/0 transition-transform duration-700 hover:translate-x-[100%]\" />\n      )}\n    </Button>\n  );\n}\n\nexport interface PricingTableTwoProps extends VariantProps<\n  typeof sectionVariants\n> {\n  className?: string;\n  plans: Plan[];\n  title?: string;\n  description?: string;\n  onPlanSelect?: (planId: string) => void;\n}\n\nexport function PricingTableTwo({\n  className,\n  plans,\n  title,\n  description,\n  onPlanSelect,\n  size,\n  theme = \"minimal\",\n}: PricingTableTwoProps) {\n  const [isAnnually, setIsAnnually] = useState(false);\n\n  function calculateDiscount(\n    monthlyPrice: string,\n    yearlyPrice: string,\n  ): number {\n    const monthly = parseFloat(monthlyPrice);\n    const yearly = parseFloat(yearlyPrice);\n\n    if (\n      monthlyPrice.toLowerCase() === \"custom\" ||\n      yearlyPrice.toLowerCase() === \"custom\" ||\n      isNaN(monthly) ||\n      isNaN(yearly) ||\n      monthly === 0\n    ) {\n      return 0;\n    }\n\n    const discount = ((monthly * 12 - yearly) / (monthly * 12)) * 100;\n    return Math.round(discount);\n  }\n\n  const yearlyPriceDiscount = plans.length\n    ? Math.max(\n        ...plans.map((plan) =>\n          calculateDiscount(plan.monthlyPrice, plan.yearlyPrice),\n        ),\n      )\n    : 0;\n\n  return (\n    <section className={cn(sectionVariants({ size, theme }), className)}>\n      {/* Classic theme background elements */}\n      {theme === \"classic\" && (\n        <>\n          <div className=\"bg-grid-pattern absolute inset-0 opacity-5\" />\n          <div className=\"bg-primary/5 absolute top-1/2 left-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl\" />\n          <div className=\"bg-secondary/5 absolute top-1/4 right-1/4 h-64 w-64 rounded-full blur-2xl\" />\n        </>\n      )}\n\n      <div className=\"relative container max-w-5xl\">\n        <motion.div\n          className={cn(\n            \"flex flex-col items-center gap-4\",\n            theme === \"classic\" ? \"text-center\" : \"\",\n          )}\n          initial={{ opacity: 0 }}\n          whileInView={{ opacity: 1 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.6, ease: \"easeOut\" }}\n        >\n          <h2 className={cn(titleVariants({ size, theme }))}>\n            {title || \"We offer 3 plans\"}\n          </h2>\n\n          <p className={cn(descriptionVariants({ size, theme }))}>\n            {description ||\n              \"Lorem ipsum dolor sit amet consectetur adipisicing.\"}\n          </p>\n        </motion.div>\n\n        {/* Monthly/Yearly Toggle */}\n        <div className={cn(toggleWrapperVariants({ size, theme }))}>\n          <span\n            className={cn(\n              toggleLabelVariants({ size, theme }),\n              !isAnnually ? \"text-foreground\" : \"text-muted-foreground\",\n            )}\n          >\n            Monthly\n          </span>\n          <Switch\n            checked={isAnnually}\n            onCheckedChange={setIsAnnually}\n            className={cn(switchScaleVariants({ size, theme }))}\n          />\n          <span\n            className={cn(\n              toggleLabelVariants({ size, theme }),\n              isAnnually ? \"text-foreground\" : \"text-muted-foreground\",\n            )}\n          >\n            Yearly\n          </span>\n        </div>\n\n        <div className=\"flex justify-center\">\n          {yearlyPriceDiscount > 0 && (\n            <motion.span\n              className={cn(\n                \"text-muted-foreground mt-2 text-xs\",\n                theme === \"classic\" && \"font-medium text-emerald-500\",\n              )}\n              initial={{ opacity: 0 }}\n              whileInView={{ opacity: 1 }}\n              viewport={{ once: true }}\n              transition={{ duration: 0.5, delay: 0.2 }}\n            >\n              Save upto {yearlyPriceDiscount}% with yearly plan\n            </motion.span>\n          )}\n        </div>\n\n        <div\n          className={cn(\n            plansWrapperVariants({ size, theme }),\n            \"gap-4 md:gap-0\",\n            plans.length === 1 && \"mx-auto max-w-md flex-col\",\n            plans.length === 2 && \"mx-auto max-w-4xl flex-col md:flex-row\",\n            plans.length >= 3 && \"mx-auto max-w-7xl flex-col lg:flex-row\",\n          )}\n        >\n          {plans.map((plan: Plan, index: number) => (\n            <motion.div\n              key={plan.id}\n              className={cn(\n                cardVariants({\n                  size,\n                  theme,\n                  highlight: plan.highlight,\n                }),\n                index === 0 && \"md:rounded-l-xl md:border-r-0\",\n                index === plans.length - 1 && \"md:rounded-r-xl md:border-l-0\",\n                index > 0 &&\n                  index < plans.length - 1 &&\n                  \"md:border-r-0 md:border-l-0\",\n                plans.length === 1 && \"rounded-xl\",\n              )}\n              initial={{ opacity: 0 }}\n              whileInView={{ opacity: 1 }}\n              viewport={{ once: true }}\n              transition={{\n                duration: 0.6,\n                ease: \"easeOut\",\n                delay: index * 0.15,\n              }}\n            >\n              <div className=\"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6\">\n                <div className=\"flex items-center justify-center gap-2\">\n                  <div\n                    className={cn(\n                      \"leading-none font-semibold\",\n                      theme === \"classic\" && \"text-lg font-bold\",\n                    )}\n                  >\n                    {plan.title}\n                  </div>\n                </div>\n                <p\n                  className={cn(\n                    \"text-muted-foreground text-center\",\n                    theme === \"classic\" && \"text-foreground/80\",\n                  )}\n                >\n                  {plan.description}\n                </p>\n              </div>\n\n              <div className=\"px-6\">\n                <AnimatePresence mode=\"wait\">\n                  {isAnnually ? (\n                    <motion.div\n                      key=\"yearly\"\n                      initial={{ opacity: 0, y: 10 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -10 }}\n                      transition={{ duration: 0.3 }}\n                    >\n                      <span className={cn(priceTextVariants({ size, theme }))}>\n                        {parseFloat(plan.yearlyPrice) >= 0 && (\n                          <>{plan.currency}</>\n                        )}\n                        {plan.yearlyPrice}\n                        {calculateDiscount(\n                          plan.monthlyPrice,\n                          plan.yearlyPrice,\n                        ) > 0 && (\n                          <span\n                            className={cn(\n                              \"ml-2 text-xs\",\n                              theme === \"classic\"\n                                ? \"font-semibold text-emerald-500\"\n                                : \"underline\",\n                            )}\n                          >\n                            {calculateDiscount(\n                              plan.monthlyPrice,\n                              plan.yearlyPrice,\n                            )}\n                            % off\n                          </span>\n                        )}\n                      </span>\n                      <p className={cn(priceSubTextVariants({ size, theme }))}>\n                        per year\n                      </p>\n                    </motion.div>\n                  ) : (\n                    <motion.div\n                      key=\"monthly\"\n                      initial={{ opacity: 0, y: 10 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -10 }}\n                      transition={{ duration: 0.3 }}\n                    >\n                      <span className={cn(priceTextVariants({ size, theme }))}>\n                        {parseFloat(plan.monthlyPrice) >= 0 && (\n                          <>{plan.currency}</>\n                        )}\n                        {plan.monthlyPrice}\n                      </span>\n                      <p className={cn(priceSubTextVariants({ size, theme }))}>\n                        per month\n                      </p>\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              <div className=\"flex items-center px-6\">\n                <DefaultCheckoutButton\n                  plan={plan}\n                  theme={theme}\n                  onPlanSelect={onPlanSelect}\n                />\n              </div>\n            </motion.div>\n          ))}\n        </div>\n\n        <motion.div\n          className={cn(tableWrapperVariants({ size, theme }))}\n          initial={{ opacity: 0 }}\n          whileInView={{ opacity: 1 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.7, ease: \"easeOut\" }}\n        >\n          <Table className={cn(theme === \"classic\" && \"bg-transparent\")}>\n            <TableHeader>\n              <TableRow\n                className={cn(theme === \"classic\" && \"border-border/30\")}\n              >\n                <TableHead\n                  className={firstColWidthVariants({ size })}\n                ></TableHead>\n                {plans.map((plan: Plan) => (\n                  <TableHead\n                    key={plan.id}\n                    className={cn(\n                      \"text-primary text-center font-bold\",\n                      theme === \"classic\" && \"text-lg\",\n                    )}\n                  >\n                    {plan.title}\n                  </TableHead>\n                ))}\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {(() => {\n                const allFeatures = new Set<string>();\n                plans.forEach((plan) => {\n                  plan.features.forEach((feature) => {\n                    allFeatures.add(feature.name);\n                  });\n                });\n                return Array.from(allFeatures).map(\n                  (featureName, featureIndex) => (\n                    <TableRow\n                      key={featureIndex}\n                      className={cn(\n                        theme === \"classic\" &&\n                          \"border-border/20 hover:bg-muted/30\",\n                      )}\n                    >\n                      <TableCell\n                        className={cn(\n                          \"text-left font-medium\",\n                          theme === \"classic\" &&\n                            \"text-foreground/90 font-semibold\",\n                        )}\n                      >\n                        {featureName}\n                      </TableCell>\n                      {plans.map((plan: Plan) => {\n                        const feature = plan.features.find(\n                          (f) => f.name === featureName,\n                        );\n                        return (\n                          <TableCell key={plan.id} className=\"text-center\">\n                            {feature ? (\n                              feature.icon === \"check\" ? (\n                                <Check\n                                  className={cn(\n                                    featureIconVariants({ size, theme }),\n                                  )}\n                                />\n                              ) : feature.icon === \"minus\" ? (\n                                <Minus\n                                  className={cn(\n                                    featureIconVariants({ size, theme }),\n                                  )}\n                                />\n                              ) : (\n                                <span\n                                  className={cn(\n                                    \"text-muted-foreground text-sm\",\n                                    theme === \"classic\" &&\n                                      \"text-foreground/70 font-medium\",\n                                  )}\n                                >\n                                  {feature.name}\n                                </span>\n                              )\n                            ) : (\n                              <Minus\n                                className={cn(\n                                  featureIconVariants({ size, theme }),\n                                )}\n                              />\n                            )}\n                          </TableCell>\n                        );\n                      })}\n                    </TableRow>\n                  ),\n                );\n              })()}\n            </TableBody>\n          </Table>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/billingsdk/pricing-table-two.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/pricing-table-two-demo.tsx",
      "content": "\"use client\";\n\nimport { plans } from \"@/lib/billingsdk-config\";\nimport { PricingTableTwo } from \"@/components/billingsdk/pricing-table-two\";\n\nexport function PricingTableTwoDemo() {\n  return (\n    <PricingTableTwo\n      plans={plans}\n      className=\"mx-auto w-full max-w-4xl\"\n      title={`We offer ${plans.length} plans`}\n      description=\"Choose the plan that's right for you\"\n      onPlanSelect={(planId) => console.log(\"Selected plan:\", planId)}\n      size=\"small\" // small, medium, large\n      theme=\"classic\" // minimal or classic\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pricing-table-two-demo.tsx"
    },
    {
      "path": "src/registry/lib/billingsdk-config.ts",
      "content": "export interface Plan {\n  id: string;\n  title: string;\n  description: string;\n  highlight?: boolean;\n  type?: \"monthly\" | \"yearly\";\n  currency?: string;\n  monthlyPrice: string;\n  yearlyPrice: string;\n  buttonText: string;\n  badge?: string;\n  features: {\n    name: string;\n    icon: string;\n    iconColor?: string;\n  }[];\n}\n\nexport interface CurrentPlan {\n  plan: Plan;\n  type: \"monthly\" | \"yearly\" | \"custom\";\n  price?: string;\n  nextBillingDate: string;\n  paymentMethod: string;\n  status: \"active\" | \"inactive\" | \"past_due\" | \"cancelled\";\n}\n\nexport const plans: Plan[] = [\n  {\n    id: \"starter\",\n    title: \"Starter\",\n    description: \"For developers testing out Liveblocks locally.\",\n    currency: \"$\",\n    monthlyPrice: \"0\",\n    yearlyPrice: \"0\",\n    buttonText: \"Start today for free\",\n    features: [\n      {\n        name: \"Presence\",\n        icon: \"check\",\n        iconColor: \"text-green-500\",\n      },\n      {\n        name: \"Comments\",\n        icon: \"check\",\n        iconColor: \"text-orange-500\",\n      },\n      {\n        name: \"Notifications\",\n        icon: \"check\",\n        iconColor: \"text-teal-500\",\n      },\n      {\n        name: \"Text Editor\",\n        icon: \"check\",\n        iconColor: \"text-blue-500\",\n      },\n      {\n        name: \"Sync Datastore\",\n        icon: \"check\",\n        iconColor: \"text-zinc-500\",\n      },\n    ],\n  },\n  {\n    id: \"pro\",\n    title: \"Pro\",\n    description: \"For companies adding collaboration in production.\",\n    currency: \"$\",\n    monthlyPrice: \"20\",\n    yearlyPrice: \"199\",\n    buttonText: \"Sign up\",\n    badge: \"Most popular\",\n    highlight: true,\n    features: [\n      {\n        name: \"Presence\",\n        icon: \"check\",\n        iconColor: \"text-green-500\",\n      },\n      {\n        name: \"Comments\",\n        icon: \"check\",\n        iconColor: \"text-orange-500\",\n      },\n      {\n        name: \"Notifications\",\n        icon: \"check\",\n        iconColor: \"text-teal-500\",\n      },\n      {\n        name: \"Text Editor\",\n        icon: \"check\",\n        iconColor: \"text-blue-500\",\n      },\n      {\n        name: \"Sync Datastore\",\n        icon: \"check\",\n        iconColor: \"text-zinc-500\",\n      },\n    ],\n  },\n  {\n    id: \"enterprise\",\n    title: \"Enterprise\",\n    description:\n      \"For organizations that need more support and compliance features.\",\n    currency: \"$\",\n    monthlyPrice: \"Custom\",\n    yearlyPrice: \"Custom\",\n    buttonText: \"Contact sales\",\n    features: [\n      {\n        name: \"Presence\",\n        icon: \"check\",\n        iconColor: \"text-green-500\",\n      },\n      {\n        name: \"Comments\",\n        icon: \"check\",\n        iconColor: \"text-orange-500\",\n      },\n      {\n        name: \"Notifications\",\n        icon: \"check\",\n        iconColor: \"text-teal-500\",\n      },\n      {\n        name: \"Text Editor\",\n        icon: \"check\",\n        iconColor: \"text-blue-500\",\n      },\n      {\n        name: \"Sync Datastore\",\n        icon: \"check\",\n        iconColor: \"text-zinc-500\",\n      },\n    ],\n  },\n];\n",
      "type": "registry:lib",
      "target": "lib/billingsdk-config.ts"
    }
  ],
  "type": "registry:block"
}