@gardenfi/garden-book 0.2.3-beta.10 → 0.2.3-beta.11

package/dist/components/Modal/Modal.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+import { useState, useEffect } from "react";
+import { Opacity } from "../Opacity/Opacity.js";
+import ReactRemoveScroll from "../../node_modules/react-remove-scroll/dist/es2015/Combination.js";
+import { ClientOnly } from "../ClientOnly/ClientOnly.js";
+const modalStyles = cva(
+  [
+    "gf-fixed gf-inset-0 gf-z-50 gf-flex gf-items-center gf-justify-center gf-min-h-screen gf-transition-all"
+  ],
+  {
+    variants: {
+      open: {
+        true: "gf-bg-black",
+        false: "gf-opacity-0 gf-pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      open: false
+    }
+  }
+);
+const Modal = ({ open, onClose, disableScrollLock, children }) => {
+  const [hasOpened, setHasOpened] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setHasOpened(true);
+    }
+  }, [open]);
+  const handleOverlayClick = (e) => {
+    if (onClose) {
+      e.stopPropagation();
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(ReactRemoveScroll, { removeScrollBar: false, enabled: !!open && !disableScrollLock, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `gf-bg-dark-grey gf-bg-opacity-40 ${modalStyles({
+        open
+      })} ${hasOpened ? open ? "gf-animate-fade-in " : "gf-animate-fade-out" : ""}`,
+      onClick: handleOverlayClick,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `gf-transform gf-transition-transform ${open ? "gf-animate-scale-in" : "gf-animate-scale-out"}`,
+          children
+        }
+      )
+    }
+  ) }) });
+};
+const Children = ({
+  children,
+  className,
+  opacityLevel,
+  ...props
+}) => {
+  const handleStopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx(
+    Opacity,
+    {
+      level: opacityLevel,
+      onClick: handleStopPropagation,
+      className: `gf-mx-auto gf-backdrop-blur-md gf-overscroll-contain ${className ? className : ""}`,
+      ...props,
+      children
+    }
+  );
+};
+Modal.Children = Children;
+export {
+  Modal
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport React, { useEffect, useState } from \"react\";\nimport { Opacity, OpacityProps } from \"../Opacity/Opacity\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { ClientOnly } from \"../ClientOnly/ClientOnly\";\n\nconst modalStyles = cva(\n  [\n    \"gf-fixed gf-inset-0 gf-z-50 gf-flex gf-items-center gf-justify-center gf-min-h-screen gf-transition-all\",\n  ],\n  {\n    variants: {\n      open: {\n        true: \"gf-bg-black\",\n        false: \"gf-opacity-0 gf-pointer-events-none\",\n      },\n    },\n    defaultVariants: {\n      open: false,\n    },\n  }\n);\n\ntype ModalProps = VariantProps<typeof modalStyles> & {\n  onClose?: () => void;\n  children: React.ReactNode;\n  disableScrollLock?: boolean;\n};\n\nconst Modal: React.FC<ModalProps> & {\n  Children: React.FC<ChildrenProps>;\n} = ({ open, onClose, disableScrollLock, children }) => {\n  //INFO: This is a workaround to prevent the modal from animating out when it first mounts\n  const [hasOpened, setHasOpened] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      setHasOpened(true);\n    }\n  }, [open]);\n\n  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (onClose) {\n      e.stopPropagation();\n      onClose();\n    }\n  };\n\n  return (\n    <ClientOnly>\n      <RemoveScroll removeScrollBar={false} enabled={!!open && !disableScrollLock}>\n        <div\n          className={`gf-bg-dark-grey gf-bg-opacity-40 ${modalStyles({\n            open,\n          })} ${\n            hasOpened\n              ? open\n                ? \"gf-animate-fade-in \"\n                : \"gf-animate-fade-out\"\n              : \"\"\n          }`}\n          onClick={handleOverlayClick}\n        >\n          <div\n            className={`gf-transform gf-transition-transform ${\n              open ? \"gf-animate-scale-in\" : \"gf-animate-scale-out\"\n            }`}\n          >\n            {children}\n          </div>\n        </div>\n      </RemoveScroll>\n    </ClientOnly>\n  );\n};\n\ntype ChildrenProps = {\n  children: React.ReactNode;\n  opacityLevel: OpacityProps[\"level\"];\n  className?: string;\n};\n\nconst Children: React.FC<ChildrenProps> = ({\n  children,\n  className,\n  opacityLevel,\n  ...props\n}) => {\n  const handleStopPropagation = (e: React.MouseEvent<HTMLDivElement>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <Opacity\n      level={opacityLevel}\n      onClick={handleStopPropagation}\n      className={`gf-mx-auto gf-backdrop-blur-md gf-overscroll-contain ${\n        className ? className : \"\"\n      }`}\n      {...props}\n    >\n      {children}\n    </Opacity>\n  );\n};\n\nModal.Children = Children;\n\nexport { Modal };\n"],"names":["RemoveScroll"],"mappings":";;;;;;AAMA,MAAM,cAAc;AAAA,EAClB;AAAA,IACE;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAQA,MAAM,QAEF,CAAC,EAAE,MAAM,SAAS,mBAAmB,eAAe;AAEtD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACd,QAAI,MAAM;AACR,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,qBAAqB,CAAC,MAAwC;AAClE,QAAI,SAAS;AACX,QAAE,gBAAA;AACF,cAAA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,YAAA,EACC,UAAA,oBAACA,mBAAA,EAAa,iBAAiB,OAAO,SAAS,CAAC,CAAC,QAAQ,CAAC,mBACxD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,oCAAoC,YAAY;AAAA,QACzD;AAAA,MAAA,CACD,CAAC,IACA,YACI,OACE,wBACA,wBACF,EACN;AAAA,MACA,SAAS;AAAA,MAET,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,wCACT,OAAO,wBAAwB,sBACjC;AAAA,UAEC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,GAEJ,EAAA,CACF;AAEJ;AAQA,MAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,wBAAwB,CAAC,MAAwC;AACrE,MAAE,gBAAA;AAAA,EACJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW,wDACT,YAAY,YAAY,EAC1B;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,WAAW;"}

package/dist/components/Modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/dist/components/Modal/index.js

@@ -0,0 +1,5 @@
+import { Modal } from "./Modal.js";
+export {
+  Modal
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Opacity/Opacity.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/utils.js";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+const OpacityStyles = cva("gf-bg-white", {
+  variants: {
+    level: {
+      "extra-light": "gf-bg-opacity-10",
+      light: "gf-bg-opacity-25",
+      medium: "gf-bg-opacity-50",
+      "semi-dark": "gf-bg-opacity-75",
+      full: "gf-bg-opacity-100"
+    }
+  },
+  defaultVariants: {
+    level: "full"
+  }
+});
+const Opacity = ({
+  level,
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(OpacityStyles({ level }), className), children });
+};
+export {
+  Opacity
+};
+//# sourceMappingURL=Opacity.js.map

package/dist/components/Opacity/Opacity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Opacity.js","sources":["../../../src/components/Opacity/Opacity.tsx"],"sourcesContent":["import { cn } from \"../../utils/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nexport type OpacityVariants = \"extra-light\" | \"light\" | \"medium\" | \"semi-dark\" | \"full\";\n\nconst OpacityStyles = cva(\"gf-bg-white\", {\n  variants: {\n    level: {\n      \"extra-light\": \"gf-bg-opacity-10\",\n      light: \"gf-bg-opacity-25\",\n      medium: \"gf-bg-opacity-50\",\n      \"semi-dark\": \"gf-bg-opacity-75\",\n      full: \"gf-bg-opacity-100\",\n    },\n  },\n  defaultVariants: {\n    level: \"full\",\n  },\n});\n\nexport type OpacityProps = React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof OpacityStyles> & {\n    children: React.ReactNode;\n  };\n\nexport const Opacity: React.FC<OpacityProps> = ({\n  level,\n  className,\n  children,\n  ...props\n}) => {\n  return (\n    <div {...props} className={cn(OpacityStyles({ level }), className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAMA,MAAM,gBAAgB,IAAI,eAAe;AAAA,EACvC,UAAU;AAAA,IACR,OAAO;AAAA,MACL,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAEX,CAAC;AAOM,MAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,OAAA,EAAK,GAAG,OAAO,WAAW,GAAG,cAAc,EAAE,MAAA,CAAO,GAAG,SAAS,GAC9D,SAAA,CACH;AAEJ;"}

package/dist/components/Opacity/index.d.ts

@@ -0,0 +1,2 @@
+export { Opacity } from './Opacity';
+export type { OpacityVariants } from './Opacity';

package/dist/components/Opacity/index.js

@@ -0,0 +1,5 @@
+import { Opacity } from "./Opacity.js";
+export {
+  Opacity
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Opacity/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/QuestCard/QuestCard.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn } from "../../utils/utils.js";
+import { Chip } from "../Chip/Chip.js";
+import { OpenInFullIcon } from "../Icons/OpenInFullIcon/OpenInFullIcon.js";
+import { LockIcon } from "../Icons/LockIcon/LockIcon.js";
+import { Typography } from "../Typography/Typography.js";
+const questCardStyles = cva(
+  ["gf-w-full gf-max-w-96 gf-p-4 gf-pb-5 md:gf-p-6 md:gf-pb-8 gf-rounded-2xl"],
+  {
+    variants: {
+      variant: {
+        locked: "gf-bg-white gf-bg-opacity-25",
+        default: "gf-bg-white gf-bg-opacity-50"
+      }
+    },
+    defaultVariants: {
+      variant: "locked"
+    }
+  }
+);
+const QuestCard = ({
+  variant,
+  title,
+  description,
+  chipContent,
+  logo
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: cn(questCardStyles({ variant })), children: [
+    /* @__PURE__ */ jsxs("div", { className: "gf-flex gf-justify-between gf-items-center gf-mb-4", children: [
+      /* @__PURE__ */ jsxs(Chip, { className: "gf-cursor-pointer gf-px-2 gf-py-1", children: [
+        /* @__PURE__ */ jsx(Chip.Logo, { children: logo }),
+        title,
+        /* @__PURE__ */ jsx(Chip.CheckBox, { checked: false })
+      ] }),
+      variant === "default" ? /* @__PURE__ */ jsx(
+        OpenInFullIcon,
+        {
+          className: "gf-cursor-pointer",
+          height: "20px",
+          width: "20px"
+        }
+      ) : /* @__PURE__ */ jsx(LockIcon, { className: "gf-cursor-pointer", height: "20px", width: "20px" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "gf-mb-3 md:gf-mb-8", children: /* @__PURE__ */ jsx(Typography, { size: "h3", weight: "medium", children: description }) }),
+    /* @__PURE__ */ jsxs("div", { className: "gf-flex gf-justify-end gf-space-x-2", children: [
+      /* @__PURE__ */ jsxs(Chip, { className: "gf-pl-3 gf-pr-2 gf-py-1", children: [
+        /* @__PURE__ */ jsx(Typography, { size: "h4", weight: "medium", children: "Quest Access" }),
+        /* @__PURE__ */ jsx(Chip.CheckBox, { checked: false })
+      ] }),
+      /* @__PURE__ */ jsxs(Chip, { className: "gf-pl-3 gf-pr-2 gf-py-1", children: [
+        /* @__PURE__ */ jsx(Typography, { size: "h4", weight: "medium", children: chipContent }),
+        /* @__PURE__ */ jsx(Chip.CheckBox, { checked: false })
+      ] })
+    ] })
+  ] });
+};
+export {
+  QuestCard
+};
+//# sourceMappingURL=QuestCard.js.map

package/dist/components/QuestCard/QuestCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestCard.js","sources":["../../../src/components/QuestCard/QuestCard.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/utils\";\nimport { Chip } from \"../Chip/Chip\";\nimport { LockIcon, OpenInFullIcon, Typography } from \"../\";\n\nconst questCardStyles = cva(\n  [\"gf-w-full gf-max-w-96 gf-p-4 gf-pb-5 md:gf-p-6 md:gf-pb-8 gf-rounded-2xl\"],\n  {\n    variants: {\n      variant: {\n        locked: \"gf-bg-white gf-bg-opacity-25\",\n        default: \"gf-bg-white gf-bg-opacity-50\",\n      },\n    },\n    defaultVariants: {\n      variant: \"locked\",\n    },\n  }\n);\n\ntype QuestCardProps = VariantProps<typeof questCardStyles> & {\n  title: string;\n  description: string;\n  chipContent: string;\n  logo: ReactNode;\n};\n\n/**\n * QuestCard organism\n * @param variant default or locked\n * @param title partner name\n * @param description describing partnership\n * @param chipContent usually SEED reward amount\n * @returns QuestCard component\n */\nexport const QuestCard: React.FC<QuestCardProps> = ({\n  variant,\n  title,\n  description,\n  chipContent,\n  logo,\n}) => {\n  return (\n    <div className={cn(questCardStyles({ variant }))}>\n      <div className=\"gf-flex gf-justify-between gf-items-center gf-mb-4\">\n        <Chip className=\"gf-cursor-pointer gf-px-2 gf-py-1\">\n          <Chip.Logo>{logo}</Chip.Logo>\n          {title}\n          <Chip.CheckBox checked={false} />\n        </Chip>\n        {variant === \"default\" ? (\n          <OpenInFullIcon\n            className=\"gf-cursor-pointer\"\n            height=\"20px\"\n            width=\"20px\"\n          />\n        ) : (\n          <LockIcon className=\"gf-cursor-pointer\" height=\"20px\" width=\"20px\" />\n        )}\n      </div>\n      <div className=\"gf-mb-3 md:gf-mb-8\">\n        <Typography size=\"h3\" weight=\"medium\">\n          {description}\n        </Typography>\n      </div>\n      <div className=\"gf-flex gf-justify-end gf-space-x-2\">\n        <Chip className=\"gf-pl-3 gf-pr-2 gf-py-1\">\n          <Typography size=\"h4\" weight=\"medium\">\n            Quest Access\n          </Typography>\n          <Chip.CheckBox checked={false} />\n        </Chip>\n        <Chip className=\"gf-pl-3 gf-pr-2 gf-py-1\">\n          <Typography size=\"h4\" weight=\"medium\">\n            {chipContent}\n          </Typography>\n          <Chip.CheckBox checked={false} />\n        </Chip>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAMA,MAAM,kBAAkB;AAAA,EACtB,CAAC,0EAA0E;AAAA,EAC3E;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAiBO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE,qBAAC,SAAI,WAAW,GAAG,gBAAgB,EAAE,QAAA,CAAS,CAAC,GAC7C,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,sDACb,UAAA;AAAA,MAAA,qBAAC,MAAA,EAAK,WAAU,qCACd,UAAA;AAAA,QAAA,oBAAC,KAAK,MAAL,EAAW,UAAA,KAAA,CAAK;AAAA,QAChB;AAAA,QACD,oBAAC,KAAK,UAAL,EAAc,SAAS,MAAA,CAAO;AAAA,MAAA,GACjC;AAAA,MACC,YAAY,YACX;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,QAAO;AAAA,UACP,OAAM;AAAA,QAAA;AAAA,MAAA,wBAGP,UAAA,EAAS,WAAU,qBAAoB,QAAO,QAAO,OAAM,OAAA,CAAO;AAAA,IAAA,GAEvE;AAAA,IACA,oBAAC,OAAA,EAAI,WAAU,sBACb,UAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,QAAO,UAC1B,UAAA,YAAA,CACH,GACF;AAAA,IACA,qBAAC,OAAA,EAAI,WAAU,uCACb,UAAA;AAAA,MAAA,qBAAC,MAAA,EAAK,WAAU,2BACd,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,QAAO,UAAS,UAAA,gBAEtC;AAAA,QACA,oBAAC,KAAK,UAAL,EAAc,SAAS,MAAA,CAAO;AAAA,MAAA,GACjC;AAAA,MACA,qBAAC,MAAA,EAAK,WAAU,2BACd,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,QAAO,UAC1B,UAAA,aACH;AAAA,QACA,oBAAC,KAAK,UAAL,EAAc,SAAS,MAAA,CAAO;AAAA,MAAA,EAAA,CACjC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/QuestCard/index.d.ts

@@ -0,0 +1 @@
+export { QuestCard } from './QuestCard';

package/dist/components/QuestCard/index.js

@@ -0,0 +1,5 @@
+import { QuestCard } from "./QuestCard.js";
+export {
+  QuestCard
+};
+//# sourceMappingURL=index.js.map

package/dist/components/QuestCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Sidebar/Sidebar.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/utils.js";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+import { Opacity } from "../Opacity/Opacity.js";
+import ReactRemoveScroll from "../../node_modules/react-remove-scroll/dist/es2015/Combination.js";
+import { ClientOnly } from "../ClientOnly/ClientOnly.js";
+const sidebarStyles = cva(
+  "gf-fixed gf-inset-y-0 gf-right-0 gf-transition-transform gf-duration-200 gf-bg-white gf-backdrop-blur-sm gf-p-4",
+  {
+    variants: {
+      open: {
+        true: "gf-translate-x-0",
+        false: "gf-translate-x-full"
+      },
+      size: {
+        small: "gf-w-full md:gf-w-[360px]",
+        large: "gf-w-full md:gf-w-[480px]"
+      }
+    },
+    defaultVariants: {
+      open: false
+    }
+  }
+);
+const Sidebar = ({
+  open,
+  size,
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(ReactRemoveScroll, { removeScrollBar: false, enabled: !!open, children: /* @__PURE__ */ jsx(
+    Opacity,
+    {
+      level: "medium",
+      className: cn(sidebarStyles({ open, size, className })),
+      ...props,
+      children
+    }
+  ) }) });
+};
+export {
+  Sidebar
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import { FC, HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { Opacity } from \"../Opacity/Opacity\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { ClientOnly } from \"../ClientOnly/ClientOnly\";\n\nconst sidebarStyles = cva(\n  \"gf-fixed gf-inset-y-0 gf-right-0 gf-transition-transform gf-duration-200 gf-bg-white gf-backdrop-blur-sm gf-p-4\",\n  {\n    variants: {\n      open: {\n        true: \"gf-translate-x-0\",\n        false: \"gf-translate-x-full\",\n      },\n      size: {\n        small: \"gf-w-full md:gf-w-[360px]\",\n        large: \"gf-w-full md:gf-w-[480px]\",\n      },\n    },\n    defaultVariants: {\n      open: false,\n    },\n  }\n);\n\nexport type SidebarProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof sidebarStyles>;\n\nexport const Sidebar: FC<SidebarProps> = ({\n  open,\n  size,\n  children,\n  className,\n  ...props\n}) => {\n  return (\n    <ClientOnly>\n      <RemoveScroll removeScrollBar={false} enabled={!!open}>\n        <Opacity\n          level={\"medium\"}\n          className={cn(sidebarStyles({ open, size, className }))}\n          {...props}\n        >\n          {children}\n        </Opacity>\n      </RemoveScroll>\n    </ClientOnly>\n  );\n};\n"],"names":["RemoveScroll"],"mappings":";;;;;;AAOA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAKO,MAAM,UAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,cACC,UAAA,oBAACA,mBAAA,EAAa,iBAAiB,OAAO,SAAS,CAAC,CAAC,MAC/C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW,GAAG,cAAc,EAAE,MAAM,MAAM,UAAA,CAAW,CAAC;AAAA,MACrD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;"}

package/dist/components/Sidebar/index.d.ts

@@ -0,0 +1 @@
+export { Sidebar } from './Sidebar';

package/dist/components/Sidebar/index.js

@@ -0,0 +1,5 @@
+import { Sidebar } from "./Sidebar.js";
+export {
+  Sidebar
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/{molecules/TokenInfo → TokenInfo}/TokenInfo.d.ts

@@ -4,6 +4,7 @@ type TokenInfoProps = {
     symbol: string;
     tokenLogo: string;
     chainLogo?: string;
+    hideDropdown?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const TokenInfo: React.FC<TokenInfoProps>;
 export {};

package/dist/components/TokenInfo/TokenInfo.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/utils.js";
+import { TokenNetworkLogos } from "../TokenNetworkLogos/TokenNetworkLogos.js";
+import { Typography } from "../Typography/Typography.js";
+import { KeyboardDownIcon } from "../Icons/KeyboardDownIcon/KeyboardDownIcon.js";
+const TokenInfo = ({
+  symbol,
+  tokenLogo,
+  chainLogo,
+  className,
+  hideDropdown = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "gf-flex gf-text-left gf-cursor-pointer gf-w-max",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("button", { className: "gf-flex gf-flex-row gf-justify-center gf-items-center gf-gap-2 gf-w-full focus:gf-outline-none", children: [
+        /* @__PURE__ */ jsx(Typography, { size: "h2", weight: "regular", children: symbol }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `gf-flex gf-items-center gf-gap-1`,
+            children: [
+              /* @__PURE__ */ jsx(
+                TokenNetworkLogos,
+                {
+                  tokenLogo: tokenLogo || "",
+                  chainLogo: chainLogo || ""
+                }
+              ),
+              !hideDropdown && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(KeyboardDownIcon, {}) })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  TokenInfo
+};
+//# sourceMappingURL=TokenInfo.js.map

package/dist/components/TokenInfo/TokenInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenInfo.js","sources":["../../../src/components/TokenInfo/TokenInfo.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../utils/utils\";\nimport { Typography, KeyboardDownIcon } from \"../\";\nimport { TokenNetworkLogos } from \"../TokenNetworkLogos/TokenNetworkLogos\";\n\ntype TokenInfoProps = {\n  symbol: string;\n  tokenLogo: string;\n  chainLogo?: string;\n  hideDropdown?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const TokenInfo: React.FC<TokenInfoProps> = ({\n  symbol,\n  tokenLogo,\n  chainLogo,\n  className,\n  hideDropdown = false,\n  ...props\n}) => {\n  return (\n    <div\n      className={cn(\n        \"gf-flex gf-text-left gf-cursor-pointer gf-w-max\",\n        className\n      )}\n      {...props}\n    >\n      <button className=\"gf-flex gf-flex-row gf-justify-center gf-items-center gf-gap-2 gf-w-full focus:gf-outline-none\">\n        <Typography size=\"h2\" weight=\"regular\">\n          {symbol}\n        </Typography>\n        <div\n          className={`gf-flex gf-items-center gf-gap-1`}\n        >\n          <TokenNetworkLogos\n            tokenLogo={tokenLogo || \"\"}\n            chainLogo={chainLogo || \"\"}\n          />\n          {!hideDropdown && (\n            <span>\n              <KeyboardDownIcon />\n            </span>\n          )}\n        </div>\n      </button>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAYO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA,qBAAC,UAAA,EAAO,WAAU,kGAChB,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,QAAO,WAC1B,UAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,YAEX,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,aAAa;AAAA,kBACxB,WAAW,aAAa;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEzB,CAAC,gBACA,oBAAC,QAAA,EACC,UAAA,oBAAC,oBAAiB,EAAA,CACpB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/TokenInfo/index.d.ts

@@ -0,0 +1 @@
+export { TokenInfo } from './TokenInfo';

package/dist/components/TokenInfo/index.js

@@ -0,0 +1,5 @@
+import { TokenInfo } from "./TokenInfo.js";
+export {
+  TokenInfo
+};
+//# sourceMappingURL=index.js.map

package/dist/components/TokenInfo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/{molecules/TokenNetworkLogos → TokenNetworkLogos}/TokenNetworkLogos.d.ts

@@ -5,6 +5,7 @@ type TokenNetworkLogosProps = HTMLAttributes<HTMLDivElement> & {
     chainLogo?: string;
     className?: string;
     iconStyle?: string;
+    iconSize?: number;
 };
 export declare const TokenNetworkLogos: FC<TokenNetworkLogosProps>;
 export {};

package/dist/components/TokenNetworkLogos/TokenNetworkLogos.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/utils.js";
+const TokenNetworkLogos = ({
+  tokenLogo,
+  chainLogo,
+  className,
+  iconStyle,
+  iconSize = 20,
+  ...props
+}) => {
+  const hasDualLogos = chainLogo && chainLogo !== tokenLogo;
+  const containerWidth = hasDualLogos ? Math.round(iconSize * 1.9) : iconSize;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `gf-relative gf-flex gf-items-center ${className}`,
+      style: { width: containerWidth },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: tokenLogo,
+            className: cn(`gf-absolute gf-left-0 gf-z-30 !gf-h-[${iconSize}px] !gf-w-[${iconSize}px]`, iconStyle)
+          }
+        ),
+        chainLogo && chainLogo !== tokenLogo && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: chainLogo,
+            className: cn(`gf-absolute gf-right-0 gf-z-20 !gf-h-[${iconSize}px] !gf-w-[${iconSize}px]`, iconStyle)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  TokenNetworkLogos
+};
+//# sourceMappingURL=TokenNetworkLogos.js.map

package/dist/components/TokenNetworkLogos/TokenNetworkLogos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenNetworkLogos.js","sources":["../../../src/components/TokenNetworkLogos/TokenNetworkLogos.tsx"],"sourcesContent":["import { FC, HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils/utils\";\n\ntype TokenNetworkLogosProps = HTMLAttributes<HTMLDivElement> & {\n  tokenLogo?: string;\n  chainLogo?: string;\n  className?: string;\n  iconStyle?: string;\n  iconSize?: number;\n};\n\nexport const TokenNetworkLogos: FC<TokenNetworkLogosProps> = ({\n  tokenLogo,\n  chainLogo,\n  className,\n  iconStyle,\n  iconSize = 20,\n  ...props\n}) => {\n  const hasDualLogos = chainLogo && chainLogo !== tokenLogo;\n  const containerWidth = hasDualLogos ? Math.round(iconSize * 1.9) : iconSize;\n\n  return (\n    <div\n      className={`gf-relative gf-flex gf-items-center ${className}`}\n      style={{ width: containerWidth }}\n      {...props}\n    >\n      <img\n        src={tokenLogo}\n        className={cn(`gf-absolute gf-left-0 gf-z-30 !gf-h-[${iconSize}px] !gf-w-[${iconSize}px]`, iconStyle)}\n      />\n      {chainLogo && chainLogo !== tokenLogo && (\n        <img\n          src={chainLogo}\n          className={cn(`gf-absolute gf-right-0 gf-z-20 !gf-h-[${iconSize}px] !gf-w-[${iconSize}px]`, iconStyle)}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;AAWO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,MAAM;AACJ,QAAM,eAAe,aAAa,cAAc;AAChD,QAAM,iBAAiB,eAAe,KAAK,MAAM,WAAW,GAAG,IAAI;AAEnE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,uCAAuC,SAAS;AAAA,MAC3D,OAAO,EAAE,OAAO,eAAA;AAAA,MACf,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW,GAAG,wCAAwC,QAAQ,cAAc,QAAQ,OAAO,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAErG,aAAa,cAAc,aAC1B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW,GAAG,yCAAyC,QAAQ,cAAc,QAAQ,OAAO,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACvG;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/TokenNetworkLogos/index.d.ts

@@ -0,0 +1 @@
+export { TokenNetworkLogos } from './TokenNetworkLogos';

package/dist/components/TokenNetworkLogos/index.js

@@ -0,0 +1,5 @@
+import { TokenNetworkLogos } from "./TokenNetworkLogos.js";
+export {
+  TokenNetworkLogos
+};
+//# sourceMappingURL=index.js.map

package/dist/components/TokenNetworkLogos/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Typography/Typography.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn } from "../../utils/utils.js";
+const typographyStyles = cva(["gf-font-haffer gf-text-dark-grey"], {
+  variants: {
+    size: {
+      h1: "gf-text-[32px] gf-leading-[40px]",
+      h2: "gf-text-xl gf-leading-[20px]",
+      h3: "gf-text-base gf-leading-[20px]",
+      h4: "gf-text-sm gf-leading-[20px]",
+      h5: "gf-text-xs gf-leading-[16px]",
+      h6: "gf-text-[10px] gf-leading-[12px]"
+    },
+    weight: {
+      thin: "gf-font-thin",
+      light: "gf-font-light",
+      regular: "gf-font-regular",
+      medium: "gf-font-medium",
+      semibold: "gf-font-semibold",
+      bold: "gf-font-bold",
+      heavy: "gf-font-heavy",
+      black: "gf-font-black"
+    },
+    breakpointSize: {
+      "xs:h1": "xs:gf-text-[32px] xs:gf-leading-[48px]",
+      "xs:h2": "xs:gf-text-xl xs:gf-leading-7",
+      "xs:h3": "xs:gf-text-base xs:gf-leading-6",
+      "xs:h4": "xs:gf-text-sm xs:gf-leading-5",
+      "xs:h5": "xs:gf-text-xs xs:gf-leading-4",
+      "xs:h6": "xs:gf-text-[10px] xs:gf-leading-3",
+      "sm:h1": "sm:gf-text-[32px] sm:gf-leading-[48px]",
+      "sm:h2": "sm:gf-text-xl sm:gf-leading-7",
+      "sm:h3": "sm:gf-text-base sm:gf-leading-6",
+      "sm:h4": "sm:gf-text-sm sm:gf-leading-5",
+      "sm:h5": "sm:gf-text-xs sm:gf-leading-4",
+      "sm:h6": "sm:gf-text-[10px] sm:gf-leading-3",
+      "md:h1": "md:gf-text-[32px] md:gf-leading-[48px]",
+      "md:h2": "md:gf-text-xl md:gf-leading-7",
+      "md:h3": "md:gf-text-base md:gf-leading-6",
+      "md:h4": "md:gf-text-sm md:gf-leading-5",
+      "md:h5": "md:gf-text-xs md:gf-leading-4",
+      "md:h6": "md:gf-text-[10px] md:gf-leading-3",
+      "lg:h1": "lg:gf-text-[32px] lg:gf-leading-[48px]",
+      "lg:h2": "lg:gf-text-xl lg:gf-leading-7",
+      "lg:h3": "lg:gf-text-base lg:gf-leading-6",
+      "lg:h4": "lg:gf-text-sm lg:gf-leading-5",
+      "lg:h5": "lg:gf-text-xs lg:gf-leading-4",
+      "lg:h6": "lg:gf-text-[10px] lg:gf-leading-3",
+      "xl:h1": "xl:gf-text-[32px] xl:gf-leading-[48px]",
+      "xl:h2": "xl:gf-text-xl xl:gf-leading-7",
+      "xl:h3": "xl:gf-text-base xl:gf-leading-6",
+      "xl:h4": "xl:gf-text-sm xl:gf-leading-5",
+      "xl:h5": "xl:gf-text-xs xl:gf-leading-4",
+      "xl:h6": "xl:gf-text-[10px] xl:gf-leading-3"
+    },
+    defaultVariants: {
+      size: "h3",
+      weight: "medium"
+    }
+  }
+});
+const Typography = ({
+  as: Component = "span",
+  size,
+  weight = "regular",
+  breakpoints,
+  className,
+  ...props
+}) => {
+  const breakpointClasses = breakpoints ? Object.entries(breakpoints).map(([breakpoint, size2]) => `${breakpoint}:${size2}`).map(
+    (key) => typographyStyles({ breakpointSize: key })
+  ).join(" ") : "";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(
+        typographyStyles({
+          size,
+          weight,
+          className
+        }),
+        breakpointClasses
+      ),
+      ...props
+    }
+  );
+};
+export {
+  Typography
+};
+//# sourceMappingURL=Typography.js.map

package/dist/components/Typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sources":["../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { cn } from \"../../utils/utils\";\n\ntype SizeVariants = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\ntype WeightVariants =\n  | \"thin\"\n  | \"light\"\n  | \"regular\"\n  | \"medium\"\n  | \"semibold\"\n  | \"bold\"\n  | \"heavy\"\n  | \"black\";\ntype breakpointVariants = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\ntype Breakpoints = {\n  [K in breakpointVariants]?: SizeVariants;\n};\n\nconst typographyStyles = cva([\"gf-font-haffer gf-text-dark-grey\"], {\n  variants: {\n    size: {\n      h1: \"gf-text-[32px] gf-leading-[40px]\",\n      h2: \"gf-text-xl gf-leading-[20px]\",\n      h3: \"gf-text-base gf-leading-[20px]\",\n      h4: \"gf-text-sm gf-leading-[20px]\",\n      h5: \"gf-text-xs gf-leading-[16px]\",\n      h6: \"gf-text-[10px] gf-leading-[12px]\",\n    },\n    weight: {\n      thin: \"gf-font-thin\",\n      light: \"gf-font-light\",\n      regular: \"gf-font-regular\",\n      medium: \"gf-font-medium\",\n      semibold: \"gf-font-semibold\",\n      bold: \"gf-font-bold\",\n      heavy: \"gf-font-heavy\",\n      black: \"gf-font-black\",\n    },\n    breakpointSize: {\n      \"xs:h1\": \"xs:gf-text-[32px] xs:gf-leading-[48px]\",\n      \"xs:h2\": \"xs:gf-text-xl xs:gf-leading-7\",\n      \"xs:h3\": \"xs:gf-text-base xs:gf-leading-6\",\n      \"xs:h4\": \"xs:gf-text-sm xs:gf-leading-5\",\n      \"xs:h5\": \"xs:gf-text-xs xs:gf-leading-4\",\n      \"xs:h6\": \"xs:gf-text-[10px] xs:gf-leading-3\",\n      \"sm:h1\": \"sm:gf-text-[32px] sm:gf-leading-[48px]\",\n      \"sm:h2\": \"sm:gf-text-xl sm:gf-leading-7\",\n      \"sm:h3\": \"sm:gf-text-base sm:gf-leading-6\",\n      \"sm:h4\": \"sm:gf-text-sm sm:gf-leading-5\",\n      \"sm:h5\": \"sm:gf-text-xs sm:gf-leading-4\",\n      \"sm:h6\": \"sm:gf-text-[10px] sm:gf-leading-3\",\n      \"md:h1\": \"md:gf-text-[32px] md:gf-leading-[48px]\",\n      \"md:h2\": \"md:gf-text-xl md:gf-leading-7\",\n      \"md:h3\": \"md:gf-text-base md:gf-leading-6\",\n      \"md:h4\": \"md:gf-text-sm md:gf-leading-5\",\n      \"md:h5\": \"md:gf-text-xs md:gf-leading-4\",\n      \"md:h6\": \"md:gf-text-[10px] md:gf-leading-3\",\n      \"lg:h1\": \"lg:gf-text-[32px] lg:gf-leading-[48px]\",\n      \"lg:h2\": \"lg:gf-text-xl lg:gf-leading-7\",\n      \"lg:h3\": \"lg:gf-text-base lg:gf-leading-6\",\n      \"lg:h4\": \"lg:gf-text-sm lg:gf-leading-5\",\n      \"lg:h5\": \"lg:gf-text-xs lg:gf-leading-4\",\n      \"lg:h6\": \"lg:gf-text-[10px] lg:gf-leading-3\",\n      \"xl:h1\": \"xl:gf-text-[32px] xl:gf-leading-[48px]\",\n      \"xl:h2\": \"xl:gf-text-xl xl:gf-leading-7\",\n      \"xl:h3\": \"xl:gf-text-base xl:gf-leading-6\",\n      \"xl:h4\": \"xl:gf-text-sm xl:gf-leading-5\",\n      \"xl:h5\": \"xl:gf-text-xs xl:gf-leading-4\",\n      \"xl:h6\": \"xl:gf-text-[10px] xl:gf-leading-3\",\n    },\n    defaultVariants: {\n      size: \"h3\",\n      weight: \"medium\",\n    },\n  },\n});\n\ntype breakpointSizeKey = `${breakpointVariants}:${SizeVariants}`;\n\ntype BaseTypographyProps = {\n  size?: SizeVariants;\n  weight?: WeightVariants;\n  breakpoints?: Breakpoints;\n  as?: \"div\" | \"span\" | \"p\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"a\";\n};\n\ntype TypographyProps = BaseTypographyProps &\n  (\n    | (React.HTMLAttributes<HTMLDivElement> & { as?: \"div\" })\n    | (React.HTMLAttributes<HTMLSpanElement> & { as?: \"span\" })\n    | (React.HTMLAttributes<HTMLParagraphElement> & { as?: \"p\" })\n    | (React.HTMLAttributes<HTMLHeadingElement> & {\n        as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n      })\n    | (React.AnchorHTMLAttributes<HTMLAnchorElement> & { as: \"a\" })\n  );\n\n/**\n * Typography component\n * @param size - default size of the text => \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"\n * @param weight - weight of the text => \"thin\" | \"light\" | \"regular\" | \"medium\" | \"semibold\" | \"bold\" | \"heavy\" | \"black\"\n * @param breakpoints - Breakpoints for the text size => { [key in [\"xs\",\"sm\",\"md\",\"lg\",\"xl\"]]: SizeVariants }\n * @param as -HTML element to render as => \"div\" | \"span\" | \"p\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"a\"\n * @default size - \"h3\"  weight - \"medium\" as - \"span\"\n */\nexport const Typography: React.FC<TypographyProps> = ({\n  as: Component = \"span\",\n  size,\n  weight = \"regular\",\n  breakpoints,\n  className,\n  ...props\n}) => {\n  const breakpointClasses = breakpoints\n    ? Object.entries(breakpoints)\n        .map(([breakpoint, size]) => `${breakpoint}:${size}`)\n        .map((key) =>\n          typographyStyles({ breakpointSize: key as breakpointSizeKey })\n        )\n        .join(\" \")\n    : \"\";\n\n  return (\n    <Component\n      className={cn(\n        typographyStyles({\n          size,\n          weight,\n          className,\n        }),\n        breakpointClasses\n      )}\n      {...(props as React.HTMLAttributes<HTMLElement>)}\n    />\n  );\n};\n"],"names":["size"],"mappings":";;;AAkBA,MAAM,mBAAmB,IAAI,CAAC,kCAAkC,GAAG;AAAA,EACjE,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,IAEN,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC;AA8BM,MAAM,aAAwC,CAAC;AAAA,EACpD,IAAI,YAAY;AAAA,EAChB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,cACtB,OAAO,QAAQ,WAAW,EACvB,IAAI,CAAC,CAAC,YAAYA,KAAI,MAAM,GAAG,UAAU,IAAIA,KAAI,EAAE,EACnD;AAAA,IAAI,CAAC,QACJ,iBAAiB,EAAE,gBAAgB,KAA0B;AAAA,EAAA,EAE9D,KAAK,GAAG,IACX;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,iBAAiB;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MAAA;AAAA,MAED,GAAI;AAAA,IAAA;AAAA,EAAA;AAGX;"}

package/dist/components/Typography/index.d.ts

@@ -0,0 +1 @@
+export { Typography } from './Typography';

package/dist/components/Typography/index.js

@@ -0,0 +1,5 @@
+import { Typography } from "./Typography.js";
+export {
+  Typography
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/index.d.ts

@@ -1,3 +1,20 @@
-export * from './atoms';
-export * from './molecules';
-export * from './organisms';
+export type { OpacityVariants } from './Opacity/Opacity';
+export { Button } from './Button';
+export { Typography } from './Typography';
+export { Opacity } from './Opacity';
+export { Sidebar } from './Sidebar';
+export { Modal } from './Modal';
+export { BottomSheet } from './BottomSheet';
+export { Container } from './Container';
+export { ClientOnly } from './ClientOnly';
+export { CheckBox } from './Checkbox';
+export { Chip } from './Chip';
+export { InfoBadge } from './InfoBadge';
+export { TokenInfo } from './TokenInfo';
+export { TokenNetworkLogos } from './TokenNetworkLogos';
+export { GradientScroll } from './GradientScroll';
+export { Footer } from './Footer';
+export { BlogCard } from './BlogCard';
+export { QuestCard } from './QuestCard';
+export * from './Icons';
+export * from './Logo';

package/dist/hooks/useClientOnly.js

@@ -0,0 +1,12 @@
+import { useState, useEffect } from "react";
+const useClientOnly = () => {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  return isClient;
+};
+export {
+  useClientOnly
+};
+//# sourceMappingURL=useClientOnly.js.map

package/dist/hooks/useClientOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClientOnly.js","sources":["../../src/hooks/useClientOnly.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Custom hook that returns true only on the client side\n * Useful for components that need to avoid SSR hydration issues\n */\nexport const useClientOnly = (): boolean => {\n  const [isClient, setIsClient] = useState(false);\n\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  return isClient;\n};\n"],"names":[],"mappings":";AAMO,MAAM,gBAAgB,MAAe;AAC1C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}