@jarrodmedrano/ui 0.1.0

package/dist/components/tailwind/hero.cjs

@@ -0,0 +1,130 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+var hero_exports = {};
+__export(hero_exports, {
+  Hero: () => Hero
+});
+module.exports = __toCommonJS(hero_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const Hero = ({
+  title,
+  description,
+  buttonText,
+  buttonLink,
+  altButtonText,
+  altButtonLink,
+  heroButtonText,
+  heroButtonLink,
+  heroButtonAltText
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-gray-900", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative isolate overflow-hidden pt-14", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        src: "img/hero-left-dark.png",
+        alt: "",
+        "aria-hidden": "true",
+        className: "absolute inset-0 -z-10 h-full w-full object-cover"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "aspect-1155/678 bg-linear-to-tr relative left-[calc(50%-11rem)] w-[36.125rem] -translate-x-1/2 rotate-[30deg] from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]",
+            style: {
+              clipPath: "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto max-w-2xl py-32 sm:py-48 lg:py-56", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden sm:mb-8 sm:flex sm:justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative rounded-full px-3 py-1 text-sm leading-6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20", children: [
+        heroButtonText,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "a",
+          {
+            href: heroButtonLink,
+            className: "ml-2 font-semibold text-white",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute inset-0", "aria-hidden": "true" }),
+              heroButtonAltText,
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2192" })
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-4xl font-bold tracking-tight text-white sm:text-6xl dark:text-white", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-6 text-lg leading-8 text-gray-300", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-10 flex items-center justify-center gap-x-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "a",
+            {
+              href: buttonLink,
+              "data-tour": "hero-signup",
+              className: "bg-primary-500 hover:bg-primary-400 focus-visible:outline-primary-400 shadow-2xs rounded-md px-3.5 py-2.5 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+              children: buttonText
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "a",
+            {
+              href: altButtonLink,
+              className: "text-sm font-semibold leading-6 text-white",
+              children: [
+                altButtonText,
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2192" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "aspect-1155/678 bg-linear-to-tr relative left-[calc(50%+3rem)] w-[36.125rem] -translate-x-1/2 from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]",
+            style: {
+              clipPath: "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
+            }
+          }
+        )
+      }
+    )
+  ] }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Hero
+});
+//# sourceMappingURL=hero.cjs.map

package/dist/components/tailwind/hero.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/tailwind/hero.tsx"],"sourcesContent":["'use client'\n\nexport interface HeroProps {\n  title: string\n  description: string\n  buttonText: string\n  buttonLink: string\n  altButtonText: string\n  altButtonLink: string\n  image?: string\n  imageAlt?: string\n  navigation: {\n    name: string\n    href: string\n  }[]\n  heroButtonText: string\n  heroButtonLink: string\n  heroButtonAltText: string\n  companyName: string\n  companyLink: string\n  companyLogo: React.ReactElement\n}\n\nexport const Hero = ({\n  title,\n  description,\n  buttonText,\n  buttonLink,\n  altButtonText,\n  altButtonLink,\n  heroButtonText,\n  heroButtonLink,\n  heroButtonAltText,\n}: HeroProps) => {\n  return (\n    <div className=\"bg-gray-900\">\n      <div className=\"relative isolate overflow-hidden pt-14\">\n        <img\n          src=\"img/hero-left-dark.png\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 -z-10 h-full w-full object-cover\"\n        />\n        <div\n          className=\"absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"aspect-1155/678 bg-linear-to-tr relative left-[calc(50%-11rem)] w-[36.125rem] -translate-x-1/2 rotate-[30deg] from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]\"\n            style={{\n              clipPath:\n                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',\n            }}\n          />\n        </div>\n        <div className=\"mx-auto max-w-2xl py-32 sm:py-48 lg:py-56\">\n          <div className=\"hidden sm:mb-8 sm:flex sm:justify-center\">\n            <div className=\"relative rounded-full px-3 py-1 text-sm leading-6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20\">\n              {heroButtonText}\n              <a\n                href={heroButtonLink}\n                className=\"ml-2 font-semibold text-white\"\n              >\n                <span className=\"absolute inset-0\" aria-hidden=\"true\" />\n                {heroButtonAltText} <span aria-hidden=\"true\">&rarr;</span>\n              </a>\n            </div>\n          </div>\n          <div className=\"text-center\">\n            <h1 className=\"text-4xl font-bold tracking-tight text-white sm:text-6xl dark:text-white\">\n              {title}\n            </h1>\n            <p className=\"mt-6 text-lg leading-8 text-gray-300\">\n              {description}\n            </p>\n            <div className=\"mt-10 flex items-center justify-center gap-x-6\">\n              <a\n                href={buttonLink}\n                data-tour=\"hero-signup\"\n                className=\"bg-primary-500 hover:bg-primary-400 focus-visible:outline-primary-400 shadow-2xs rounded-md px-3.5 py-2.5 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2\"\n              >\n                {buttonText}\n              </a>\n              <a\n                href={altButtonLink}\n                className=\"text-sm font-semibold leading-6 text-white\"\n              >\n                {altButtonText} <span aria-hidden=\"true\">→</span>\n              </a>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"aspect-1155/678 bg-linear-to-tr relative left-[calc(50%+3rem)] w-[36.125rem] -translate-x-1/2 from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]\"\n            style={{\n              clipPath:\n                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCQ;AAdD,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACf,SACE,4CAAC,SAAI,WAAU,eACb,uDAAC,SAAI,WAAU,0CACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ,KAAI;AAAA,QACJ,eAAY;AAAA,QACZ,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UACE;AAAA,YACJ;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA,6CAAC,SAAI,WAAU,6CACb;AAAA,kDAAC,SAAI,WAAU,4CACb,uDAAC,SAAI,WAAU,4GACZ;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YAEV;AAAA,0DAAC,UAAK,WAAU,oBAAmB,eAAY,QAAO;AAAA,cACrD;AAAA,cAAkB;AAAA,cAAC,4CAAC,UAAK,eAAY,QAAO,oBAAM;AAAA;AAAA;AAAA,QACrD;AAAA,SACF,GACF;AAAA,MACA,6CAAC,SAAI,WAAU,eACb;AAAA,oDAAC,QAAG,WAAU,4EACX,iBACH;AAAA,QACA,4CAAC,OAAE,WAAU,wCACV,uBACH;AAAA,QACA,6CAAC,SAAI,WAAU,kDACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,aAAU;AAAA,cACV,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAU;AAAA,cAET;AAAA;AAAA,gBAAc;AAAA,gBAAC,4CAAC,UAAK,eAAY,QAAO,oBAAC;AAAA;AAAA;AAAA,UAC5C;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UACE;AAAA,YACJ;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/tailwind/hero.d.ts

@@ -0,0 +1,22 @@
+export interface HeroProps {
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonLink: string;
+    altButtonText: string;
+    altButtonLink: string;
+    image?: string;
+    imageAlt?: string;
+    navigation: {
+        name: string;
+        href: string;
+    }[];
+    heroButtonText: string;
+    heroButtonLink: string;
+    heroButtonAltText: string;
+    companyName: string;
+    companyLink: string;
+    companyLogo: React.ReactElement;
+}
+export declare const Hero: ({ title, description, buttonText, buttonLink, altButtonText, altButtonLink, heroButtonText, heroButtonLink, heroButtonAltText, }: HeroProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=hero.d.ts.map

package/dist/components/tailwind/hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../components/tailwind/hero.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,EAAE,MAAM,CAAA;KACb,EAAE,CAAA;IACH,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,KAAK,CAAC,YAAY,CAAA;CAChC;AAED,eAAO,MAAM,IAAI,qIAUd,SAAS,4CA0EX,CAAA"}

package/dist/components/tailwind/hero.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Hero = ({
+  title,
+  description,
+  buttonText,
+  buttonLink,
+  altButtonText,
+  altButtonLink,
+  heroButtonText,
+  heroButtonLink,
+  heroButtonAltText
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "bg-gray-900", children: /* @__PURE__ */ jsxs("div", { className: "relative isolate overflow-hidden pt-14", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: "img/hero-left-dark.png",
+        alt: "",
+        "aria-hidden": "true",
+        className: "absolute inset-0 -z-10 h-full w-full object-cover"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "aspect-1155/678 bg-linear-to-tr relative left-[calc(50%-11rem)] w-[36.125rem] -translate-x-1/2 rotate-[30deg] from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]",
+            style: {
+              clipPath: "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl py-32 sm:py-48 lg:py-56", children: [
+      /* @__PURE__ */ jsx("div", { className: "hidden sm:mb-8 sm:flex sm:justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative rounded-full px-3 py-1 text-sm leading-6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20", children: [
+        heroButtonText,
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: heroButtonLink,
+            className: "ml-2 font-semibold text-white",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "absolute inset-0", "aria-hidden": "true" }),
+              heroButtonAltText,
+              " ",
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2192" })
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight text-white sm:text-6xl dark:text-white", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-6 text-lg leading-8 text-gray-300", children: description }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-10 flex items-center justify-center gap-x-6", children: [
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: buttonLink,
+              "data-tour": "hero-signup",
+              className: "bg-primary-500 hover:bg-primary-400 focus-visible:outline-primary-400 shadow-2xs rounded-md px-3.5 py-2.5 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+              children: buttonText
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: altButtonLink,
+              className: "text-sm font-semibold leading-6 text-white",
+              children: [
+                altButtonText,
+                " ",
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2192" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "aspect-1155/678 bg-linear-to-tr relative left-[calc(50%+3rem)] w-[36.125rem] -translate-x-1/2 from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]",
+            style: {
+              clipPath: "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
+            }
+          }
+        )
+      }
+    )
+  ] }) });
+};
+export {
+  Hero
+};
+//# sourceMappingURL=hero.js.map

package/dist/components/tailwind/hero.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/tailwind/hero.tsx"],"sourcesContent":["'use client'\n\nexport interface HeroProps {\n  title: string\n  description: string\n  buttonText: string\n  buttonLink: string\n  altButtonText: string\n  altButtonLink: string\n  image?: string\n  imageAlt?: string\n  navigation: {\n    name: string\n    href: string\n  }[]\n  heroButtonText: string\n  heroButtonLink: string\n  heroButtonAltText: string\n  companyName: string\n  companyLink: string\n  companyLogo: React.ReactElement\n}\n\nexport const Hero = ({\n  title,\n  description,\n  buttonText,\n  buttonLink,\n  altButtonText,\n  altButtonLink,\n  heroButtonText,\n  heroButtonLink,\n  heroButtonAltText,\n}: HeroProps) => {\n  return (\n    <div className=\"bg-gray-900\">\n      <div className=\"relative isolate overflow-hidden pt-14\">\n        <img\n          src=\"img/hero-left-dark.png\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 -z-10 h-full w-full object-cover\"\n        />\n        <div\n          className=\"absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"aspect-1155/678 bg-linear-to-tr relative left-[calc(50%-11rem)] w-[36.125rem] -translate-x-1/2 rotate-[30deg] from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]\"\n            style={{\n              clipPath:\n                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',\n            }}\n          />\n        </div>\n        <div className=\"mx-auto max-w-2xl py-32 sm:py-48 lg:py-56\">\n          <div className=\"hidden sm:mb-8 sm:flex sm:justify-center\">\n            <div className=\"relative rounded-full px-3 py-1 text-sm leading-6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20\">\n              {heroButtonText}\n              <a\n                href={heroButtonLink}\n                className=\"ml-2 font-semibold text-white\"\n              >\n                <span className=\"absolute inset-0\" aria-hidden=\"true\" />\n                {heroButtonAltText} <span aria-hidden=\"true\">&rarr;</span>\n              </a>\n            </div>\n          </div>\n          <div className=\"text-center\">\n            <h1 className=\"text-4xl font-bold tracking-tight text-white sm:text-6xl dark:text-white\">\n              {title}\n            </h1>\n            <p className=\"mt-6 text-lg leading-8 text-gray-300\">\n              {description}\n            </p>\n            <div className=\"mt-10 flex items-center justify-center gap-x-6\">\n              <a\n                href={buttonLink}\n                data-tour=\"hero-signup\"\n                className=\"bg-primary-500 hover:bg-primary-400 focus-visible:outline-primary-400 shadow-2xs rounded-md px-3.5 py-2.5 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2\"\n              >\n                {buttonText}\n              </a>\n              <a\n                href={altButtonLink}\n                className=\"text-sm font-semibold leading-6 text-white\"\n              >\n                {altButtonText} <span aria-hidden=\"true\">→</span>\n              </a>\n            </div>\n          </div>\n        </div>\n        <div\n          className=\"absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"aspect-1155/678 bg-linear-to-tr relative left-[calc(50%+3rem)] w-[36.125rem] -translate-x-1/2 from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]\"\n            style={{\n              clipPath:\n                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAqCQ,cAsBM,YAtBN;AAdD,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACf,SACE,oBAAC,SAAI,WAAU,eACb,+BAAC,SAAI,WAAU,0CACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ,KAAI;AAAA,QACJ,eAAY;AAAA,QACZ,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UACE;AAAA,YACJ;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,SAAI,WAAU,6CACb;AAAA,0BAAC,SAAI,WAAU,4CACb,+BAAC,SAAI,WAAU,4GACZ;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YAEV;AAAA,kCAAC,UAAK,WAAU,oBAAmB,eAAY,QAAO;AAAA,cACrD;AAAA,cAAkB;AAAA,cAAC,oBAAC,UAAK,eAAY,QAAO,oBAAM;AAAA;AAAA;AAAA,QACrD;AAAA,SACF,GACF;AAAA,MACA,qBAAC,SAAI,WAAU,eACb;AAAA,4BAAC,QAAG,WAAU,4EACX,iBACH;AAAA,QACA,oBAAC,OAAE,WAAU,wCACV,uBACH;AAAA,QACA,qBAAC,SAAI,WAAU,kDACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,aAAU;AAAA,cACV,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAU;AAAA,cAET;AAAA;AAAA,gBAAc;AAAA,gBAAC,oBAAC,UAAK,eAAY,QAAO,oBAAC;AAAA;AAAA;AAAA,UAC5C;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UACE;AAAA,YACJ;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/tailwind/pricing.cjs

@@ -0,0 +1,214 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var pricing_exports = {};
+__export(pricing_exports, {
+  Pricing: () => Pricing
+});
+module.exports = __toCommonJS(pricing_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+const FREE_FEATURES = [
+  "1 story",
+  "10 characters",
+  "10 locations",
+  "1 timeline",
+  "Image galleries",
+  "Public sharing"
+];
+const PRO_FEATURES = [
+  "Unlimited stories",
+  "Unlimited characters",
+  "Unlimited locations",
+  "Unlimited timelines",
+  "Image galleries",
+  "Public sharing",
+  "Priority support"
+];
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Pricing = ({ onSubscribe }) => {
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const handleSubscribe = () => __async(null, null, function* () {
+    var _a;
+    if (onSubscribe) {
+      onSubscribe();
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const response = yield fetch("/api/subscription/checkout", {
+        method: "POST"
+      });
+      if (!response.ok) {
+        if (response.status === 401) {
+          window.location.href = "/signin?redirect=/about/pricing";
+          return;
+        }
+        const data2 = yield response.json().catch(() => ({}));
+        throw new Error((_a = data2.error) != null ? _a : "Failed to create checkout session");
+      }
+      const data = yield response.json();
+      if (data.url) {
+        window.location.href = data.url;
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Something went wrong. Please try again."
+      );
+    } finally {
+      setLoading(false);
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-gray-900", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto mt-16 max-w-7xl px-6 sm:mt-32 lg:px-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto max-w-4xl text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-base font-semibold leading-7 text-indigo-400", children: "Pricing" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-2 text-4xl font-bold tracking-tight text-white sm:text-5xl", children: "Start free. Upgrade when you're ready." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-300", children: "Build your story bible for free. Subscribe for unlimited worlds, characters, and creative freedom." }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "isolate mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-3xl p-8 ring-1 ring-white/10 xl:p-10", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-x-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg font-semibold leading-8 text-white", children: "Preview" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "rounded-full bg-white/10 px-2.5 py-1 text-xs font-semibold leading-5 text-white", children: "Free forever" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-4 text-sm leading-6 text-gray-300", children: "Explore Story Bible and start building your creative world with no commitment." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "mt-6 flex items-baseline gap-x-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-4xl font-bold tracking-tight text-white", children: "$0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold leading-6 text-gray-300", children: "/month" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            href: "/signin",
+            className: "mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm font-semibold leading-6 text-white hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white",
+            children: "Get started free"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "ul",
+          {
+            role: "list",
+            className: "mt-8 space-y-3 text-sm leading-6 text-gray-300 xl:mt-10",
+            children: FREE_FEATURES.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex gap-x-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_lucide_react.Check,
+                {
+                  className: "h-6 w-5 flex-none text-white",
+                  "aria-hidden": "true"
+                }
+              ),
+              feature
+            ] }, feature))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-3xl bg-white/5 p-8 ring-2 ring-indigo-500 xl:p-10", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-x-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg font-semibold leading-8 text-white", children: "Pro" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "rounded-full bg-indigo-500 px-2.5 py-1 text-xs font-semibold leading-5 text-white", children: "Most popular" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-4 text-sm leading-6 text-gray-300", children: "Unlock unlimited stories, characters, locations, and timelines. Build entire universes." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "mt-6 flex items-baseline gap-x-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-4xl font-bold tracking-tight text-white", children: "$9.99" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold leading-6 text-gray-300", children: "/month" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            onClick: handleSubscribe,
+            disabled: loading,
+            className: classNames(
+              "mt-6 flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500",
+              loading ? "cursor-not-allowed bg-indigo-400 text-white" : "shadow-2xs bg-indigo-500 text-white hover:bg-indigo-400"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Zap, { className: "h-4 w-4", "aria-hidden": "true" }),
+              loading ? "Redirecting\u2026" : "Subscribe \u2014 $9.99/mo"
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-3 text-center text-sm text-red-400", children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "ul",
+          {
+            role: "list",
+            className: "mt-8 space-y-3 text-sm leading-6 text-gray-300 xl:mt-10",
+            children: PRO_FEATURES.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex gap-x-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_lucide_react.Check,
+                {
+                  className: "h-6 w-5 flex-none text-white",
+                  "aria-hidden": "true"
+                }
+              ),
+              feature
+            ] }, feature))
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto mt-24 max-w-2xl pb-24", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-2xl font-bold leading-10 tracking-tight text-white", children: "Frequently asked questions" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", { className: "mt-10 space-y-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { className: "text-base font-semibold leading-7 text-white", children: "Can I cancel anytime?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { className: "mt-2 text-base leading-7 text-gray-300", children: "Yes. You can cancel at any time from the subscription management page. You retain Pro access until the end of your current billing period." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { className: "text-base font-semibold leading-7 text-white", children: "What happens to my data if I downgrade?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { className: "mt-2 text-base leading-7 text-gray-300", children: "Your existing stories and characters are never deleted. You'll just be unable to create new ones beyond the preview limits until you resubscribe." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { className: "text-base font-semibold leading-7 text-white", children: "Is billing monthly or annually?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { className: "mt-2 text-base leading-7 text-gray-300", children: "Currently monthly only. Annual billing with a discount is coming soon." })
+        ] })
+      ] })
+    ] })
+  ] }) }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Pricing
+});
+//# sourceMappingURL=pricing.cjs.map

package/dist/components/tailwind/pricing.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/tailwind/pricing.tsx"],"sourcesContent":["'use client'\nimport { useState } from 'react'\nimport { Check, Zap } from 'lucide-react'\n\nconst FREE_FEATURES = [\n  '1 story',\n  '10 characters',\n  '10 locations',\n  '1 timeline',\n  'Image galleries',\n  'Public sharing',\n]\n\nconst PRO_FEATURES = [\n  'Unlimited stories',\n  'Unlimited characters',\n  'Unlimited locations',\n  'Unlimited timelines',\n  'Image galleries',\n  'Public sharing',\n  'Priority support',\n]\n\nfunction classNames(...classes: string[]) {\n  return classes.filter(Boolean).join(' ')\n}\n\ninterface PricingProps {\n  onSubscribe?: () => void\n}\n\nexport const Pricing = ({ onSubscribe }: PricingProps) => {\n  const [loading, setLoading] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n\n  const handleSubscribe = async () => {\n    if (onSubscribe) {\n      onSubscribe()\n      return\n    }\n    setLoading(true)\n    setError(null)\n    try {\n      const response = await fetch('/api/subscription/checkout', {\n        method: 'POST',\n      })\n      if (!response.ok) {\n        if (response.status === 401) {\n          window.location.href = '/signin?redirect=/about/pricing'\n          return\n        }\n        const data = (await response.json().catch(() => ({}))) as {\n          error?: string\n        }\n        throw new Error(data.error ?? 'Failed to create checkout session')\n      }\n      const data = (await response.json()) as { url: string }\n      if (data.url) {\n        window.location.href = data.url\n      }\n    } catch (err) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : 'Something went wrong. Please try again.',\n      )\n    } finally {\n      setLoading(false)\n    }\n  }\n\n  return (\n    <div className=\"bg-gray-900\">\n      <main>\n        {/* Header */}\n        <div className=\"mx-auto mt-16 max-w-7xl px-6 sm:mt-32 lg:px-8\">\n          <div className=\"mx-auto max-w-4xl text-center\">\n            <h1 className=\"text-base font-semibold leading-7 text-indigo-400\">\n              Pricing\n            </h1>\n            <p className=\"mt-2 text-4xl font-bold tracking-tight text-white sm:text-5xl\">\n              Start free. Upgrade when you&apos;re ready.\n            </p>\n          </div>\n          <p className=\"mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-300\">\n            Build your story bible for free. Subscribe for unlimited worlds,\n            characters, and creative freedom.\n          </p>\n\n          {/* Pricing cards */}\n          <div className=\"isolate mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-2\">\n            {/* Free tier */}\n            <div className=\"rounded-3xl p-8 ring-1 ring-white/10 xl:p-10\">\n              <div className=\"flex items-center justify-between gap-x-4\">\n                <h2 className=\"text-lg font-semibold leading-8 text-white\">\n                  Preview\n                </h2>\n                <p className=\"rounded-full bg-white/10 px-2.5 py-1 text-xs font-semibold leading-5 text-white\">\n                  Free forever\n                </p>\n              </div>\n              <p className=\"mt-4 text-sm leading-6 text-gray-300\">\n                Explore Story Bible and start building your creative world with\n                no commitment.\n              </p>\n              <p className=\"mt-6 flex items-baseline gap-x-1\">\n                <span className=\"text-4xl font-bold tracking-tight text-white\">\n                  $0\n                </span>\n                <span className=\"text-sm font-semibold leading-6 text-gray-300\">\n                  /month\n                </span>\n              </p>\n              <a\n                href=\"/signin\"\n                className=\"mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm font-semibold leading-6 text-white hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white\"\n              >\n                Get started free\n              </a>\n              <ul\n                role=\"list\"\n                className=\"mt-8 space-y-3 text-sm leading-6 text-gray-300 xl:mt-10\"\n              >\n                {FREE_FEATURES.map((feature) => (\n                  <li key={feature} className=\"flex gap-x-3\">\n                    <Check\n                      className=\"h-6 w-5 flex-none text-white\"\n                      aria-hidden=\"true\"\n                    />\n                    {feature}\n                  </li>\n                ))}\n              </ul>\n            </div>\n\n            {/* Pro tier */}\n            <div className=\"rounded-3xl bg-white/5 p-8 ring-2 ring-indigo-500 xl:p-10\">\n              <div className=\"flex items-center justify-between gap-x-4\">\n                <h2 className=\"text-lg font-semibold leading-8 text-white\">\n                  Pro\n                </h2>\n                <p className=\"rounded-full bg-indigo-500 px-2.5 py-1 text-xs font-semibold leading-5 text-white\">\n                  Most popular\n                </p>\n              </div>\n              <p className=\"mt-4 text-sm leading-6 text-gray-300\">\n                Unlock unlimited stories, characters, locations, and timelines.\n                Build entire universes.\n              </p>\n              <p className=\"mt-6 flex items-baseline gap-x-1\">\n                <span className=\"text-4xl font-bold tracking-tight text-white\">\n                  $9.99\n                </span>\n                <span className=\"text-sm font-semibold leading-6 text-gray-300\">\n                  /month\n                </span>\n              </p>\n              <button\n                onClick={handleSubscribe}\n                disabled={loading}\n                className={classNames(\n                  'mt-6 flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500',\n                  loading\n                    ? 'cursor-not-allowed bg-indigo-400 text-white'\n                    : 'shadow-2xs bg-indigo-500 text-white hover:bg-indigo-400',\n                )}\n              >\n                <Zap className=\"h-4 w-4\" aria-hidden=\"true\" />\n                {loading ? 'Redirecting…' : 'Subscribe — $9.99/mo'}\n              </button>\n              {error && (\n                <p className=\"mt-3 text-center text-sm text-red-400\">{error}</p>\n              )}\n              <ul\n                role=\"list\"\n                className=\"mt-8 space-y-3 text-sm leading-6 text-gray-300 xl:mt-10\"\n              >\n                {PRO_FEATURES.map((feature) => (\n                  <li key={feature} className=\"flex gap-x-3\">\n                    <Check\n                      className=\"h-6 w-5 flex-none text-white\"\n                      aria-hidden=\"true\"\n                    />\n                    {feature}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n\n          {/* FAQ */}\n          <div className=\"mx-auto mt-24 max-w-2xl pb-24\">\n            <h2 className=\"text-2xl font-bold leading-10 tracking-tight text-white\">\n              Frequently asked questions\n            </h2>\n            <dl className=\"mt-10 space-y-8\">\n              <div>\n                <dt className=\"text-base font-semibold leading-7 text-white\">\n                  Can I cancel anytime?\n                </dt>\n                <dd className=\"mt-2 text-base leading-7 text-gray-300\">\n                  Yes. You can cancel at any time from the subscription\n                  management page. You retain Pro access until the end of your\n                  current billing period.\n                </dd>\n              </div>\n              <div>\n                <dt className=\"text-base font-semibold leading-7 text-white\">\n                  What happens to my data if I downgrade?\n                </dt>\n                <dd className=\"mt-2 text-base leading-7 text-gray-300\">\n                  Your existing stories and characters are never deleted.\n                  You&apos;ll just be unable to create new ones beyond the\n                  preview limits until you resubscribe.\n                </dd>\n              </div>\n              <div>\n                <dt className=\"text-base font-semibold leading-7 text-white\">\n                  Is billing monthly or annually?\n                </dt>\n                <dd className=\"mt-2 text-base leading-7 text-gray-300\">\n                  Currently monthly only. Annual billing with a discount is\n                  coming soon.\n                </dd>\n              </div>\n            </dl>\n          </div>\n        </div>\n      </main>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4EU;AA3EV,mBAAyB;AACzB,0BAA2B;AAE3B,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,cAAc,SAAmB;AACxC,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAMO,MAAM,UAAU,CAAC,EAAE,YAAY,MAAoB;AACxD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB,IAAI;AAEtD,QAAM,kBAAkB,MAAY;AAnCtC;AAoCI,QAAI,aAAa;AACf,kBAAY;AACZ;AAAA,IACF;AACA,eAAW,IAAI;AACf,aAAS,IAAI;AACb,QAAI;AACF,YAAM,WAAW,MAAM,MAAM,8BAA8B;AAAA,QACzD,QAAQ;AAAA,MACV,CAAC;AACD,UAAI,CAAC,SAAS,IAAI;AAChB,YAAI,SAAS,WAAW,KAAK;AAC3B,iBAAO,SAAS,OAAO;AACvB;AAAA,QACF;AACA,cAAMA,QAAQ,MAAM,SAAS,KAAK,EAAE,MAAM,OAAO,CAAC,EAAE;AAGpD,cAAM,IAAI,OAAM,KAAAA,MAAK,UAAL,YAAc,mCAAmC;AAAA,MACnE;AACA,YAAM,OAAQ,MAAM,SAAS,KAAK;AAClC,UAAI,KAAK,KAAK;AACZ,eAAO,SAAS,OAAO,KAAK;AAAA,MAC9B;AAAA,IACF,SAAS,KAAK;AACZ;AAAA,QACE,eAAe,QACX,IAAI,UACJ;AAAA,MACN;AAAA,IACF,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,WAAU,eACb,sDAAC,UAEC,uDAAC,SAAI,WAAU,iDACb;AAAA,iDAAC,SAAI,WAAU,iCACb;AAAA,kDAAC,QAAG,WAAU,qDAAoD,qBAElE;AAAA,MACA,4CAAC,OAAE,WAAU,iEAAgE,oDAE7E;AAAA,OACF;AAAA,IACA,4CAAC,OAAE,WAAU,sEAAqE,gHAGlF;AAAA,IAGA,6CAAC,SAAI,WAAU,+FAEb;AAAA,mDAAC,SAAI,WAAU,gDACb;AAAA,qDAAC,SAAI,WAAU,6CACb;AAAA,sDAAC,QAAG,WAAU,8CAA6C,qBAE3D;AAAA,UACA,4CAAC,OAAE,WAAU,mFAAkF,0BAE/F;AAAA,WACF;AAAA,QACA,4CAAC,OAAE,WAAU,wCAAuC,4FAGpD;AAAA,QACA,6CAAC,OAAE,WAAU,oCACX;AAAA,sDAAC,UAAK,WAAU,gDAA+C,gBAE/D;AAAA,UACA,4CAAC,UAAK,WAAU,iDAAgD,oBAEhE;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YAET,wBAAc,IAAI,CAAC,YAClB,6CAAC,QAAiB,WAAU,gBAC1B;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA;AAAA,cACd;AAAA,cACC;AAAA,iBALM,OAMT,CACD;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MAGA,6CAAC,SAAI,WAAU,6DACb;AAAA,qDAAC,SAAI,WAAU,6CACb;AAAA,sDAAC,QAAG,WAAU,8CAA6C,iBAE3D;AAAA,UACA,4CAAC,OAAE,WAAU,qFAAoF,0BAEjG;AAAA,WACF;AAAA,QACA,4CAAC,OAAE,WAAU,wCAAuC,qGAGpD;AAAA,QACA,6CAAC,OAAE,WAAU,oCACX;AAAA,sDAAC,UAAK,WAAU,gDAA+C,mBAE/D;AAAA,UACA,4CAAC,UAAK,WAAU,iDAAgD,oBAEhE;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA,UACI,gDACA;AAAA,YACN;AAAA,YAEA;AAAA,0DAAC,2BAAI,WAAU,WAAU,eAAY,QAAO;AAAA,cAC3C,UAAU,sBAAiB;AAAA;AAAA;AAAA,QAC9B;AAAA,QACC,SACC,4CAAC,OAAE,WAAU,yCAAyC,iBAAM;AAAA,QAE9D;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YAET,uBAAa,IAAI,CAAC,YACjB,6CAAC,QAAiB,WAAU,gBAC1B;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA;AAAA,cACd;AAAA,cACC;AAAA,iBALM,OAMT,CACD;AAAA;AAAA,QACH;AAAA,SACF;AAAA,OACF;AAAA,IAGA,6CAAC,SAAI,WAAU,iCACb;AAAA,kDAAC,QAAG,WAAU,2DAA0D,wCAExE;AAAA,MACA,6CAAC,QAAG,WAAU,mBACZ;AAAA,qDAAC,SACC;AAAA,sDAAC,QAAG,WAAU,gDAA+C,mCAE7D;AAAA,UACA,4CAAC,QAAG,WAAU,0CAAyC,wJAIvD;AAAA,WACF;AAAA,QACA,6CAAC,SACC;AAAA,sDAAC,QAAG,WAAU,gDAA+C,qDAE7D;AAAA,UACA,4CAAC,QAAG,WAAU,0CAAyC,+JAIvD;AAAA,WACF;AAAA,QACA,6CAAC,SACC;AAAA,sDAAC,QAAG,WAAU,gDAA+C,6CAE7D;AAAA,UACA,4CAAC,QAAG,WAAU,0CAAyC,oFAGvD;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KACF,GACF,GACF;AAEJ;","names":["data"]}

package/dist/components/tailwind/pricing.d.ts

@@ -0,0 +1,6 @@
+interface PricingProps {
+    onSubscribe?: () => void;
+}
+export declare const Pricing: ({ onSubscribe }: PricingProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=pricing.d.ts.map

package/dist/components/tailwind/pricing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing.d.ts","sourceRoot":"","sources":["../../../components/tailwind/pricing.tsx"],"names":[],"mappings":"AA2BA,UAAU,YAAY;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,eAAO,MAAM,OAAO,oBAAqB,YAAY,4CAwMpD,CAAA"}