@gardenfi/garden-book 0.3.2 → 0.3.4-beta.1

package/dist/Logo/index.js

@@ -1,78 +1,118 @@
 import { ArbitrumLogo as e } from "./ArbitrumLogo.js";
 import { BTCLogo as m } from "./BTCLogo.js";
-import { CatalogLogo as p } from "./CatalogLogo.js";
-import { Coinbase as a } from "./Coinbase.js";
+import { CatalogLogo as l } from "./CatalogLogo.js";
+import { Coinbase as f } from "./Coinbase.js";
 import { EthereumLogo as g } from "./EthereumLogo.js";
-import { GardenExplorer as L } from "./GardenExplorer.js";
-import { GardenFullLogo as G } from "./GardenFullLogo.js";
-import { GardenLogo as C } from "./GardenLogo.js";
-import { GardenLogoText as T } from "./GardenLogoText.js";
-import { GardenStrokeIcon as D } from "./GardenStrokeIcon.js";
-import { GMXLogo as I } from "./GMXLogo.js";
-import { PhantomIcon as s } from "./PhantomIcon.js";
-import { PolygonLogo as M } from "./PolygonLogo.js";
-import { RadiantLogo as b } from "./RadiantLogo.js";
-import { TrailOfBits as P } from "./TrailOfBits.js";
-import { TrustWallet as A } from "./TrustWallet.js";
-import { WalletConnect as O } from "./WalletConnect.js";
-import { SwellBTC as W } from "./SwellBTC.js";
-import { DLCBTC as v } from "./DLCBTC.js";
-import { TraderJoe as J } from "./TraderJoe.js";
-import { Debridge as V } from "./Debridge.js";
-import { Camelot as q } from "./Camelot.js";
-import { GMX as H } from "./GMX.js";
+import { GardenExplorer as n } from "./GardenExplorer.js";
+import { GardenFullLogo as i } from "./GardenFullLogo.js";
+import { GardenLogo as d } from "./GardenLogo.js";
+import { GardenLogoText as C } from "./GardenLogoText.js";
+import { GardenStrokeIcon as s } from "./GardenStrokeIcon.js";
+import { GMXLogo as h } from "./GMXLogo.js";
+import { PhantomIcon as M } from "./PhantomIcon.js";
+import { PolygonLogo as b } from "./PolygonLogo.js";
+import { RadiantLogo as D } from "./RadiantLogo.js";
+import { TrailOfBits as A } from "./TrailOfBits.js";
+import { TrustWallet as P } from "./TrustWallet.js";
+import { WalletConnect as R } from "./WalletConnect.js";
+import { SwellBTC as v } from "./SwellBTC.js";
+import { DLCBTC as J } from "./DLCBTC.js";
+import { TraderJoe as W } from "./TraderJoe.js";
+import { Debridge as H } from "./Debridge.js";
+import { Camelot as N } from "./Camelot.js";
+import { GMX as j } from "./GMX.js";
 import { Solv as Q } from "./Solv.js";
 import { PancakeSwap as Y } from "./PancakeSwap.js";
 import { Dodo as _ } from "./DODO.js";
 import { Vertex as oo } from "./Vertex.js";
 import { Radiant as eo } from "./Radiant.js";
 import { GardenIcon as mo } from "./GardenIcon.js";
-import { GardenIconOutline as po } from "./GardenIconOutline.js";
-import { NFTIcon as ao } from "./NFTIcon.js";
+import { GardenIconOutline as lo } from "./GardenIconOutline.js";
+import { NFTIcon as fo } from "./NFTIcon.js";
 import { GardenExplorerAlt as go } from "./GardenExplorerAlt.js";
-import { GardenDocs as lo } from "./GardenDocs.js";
+import { GardenDocs as no } from "./GardenDocs.js";
 import { GardenLogoMarkDark as io } from "./GardenLogoMarkDark.js";
-import { GardenLogoMarkLight as co } from "./GardenLogoMarkLight.js";
-import { GardenLogoDark as ko } from "./GardenLogoDark.js";
-import { GardenLogoLight as uo } from "./GardenLogoLight.js";
-import { Code4renaLogo as ho } from "./Code4renaLogo.js";
+import { GardenLogoMarkLight as Go } from "./GardenLogoMarkLight.js";
+import { GardenLogoDark as co } from "./GardenLogoDark.js";
+import { GardenLogoLight as To } from "./GardenLogoLight.js";
+import { Code4renaLogo as ko } from "./Code4renaLogo.js";
+import { AmberLogoFull as So } from "./AmberLogoFull.js";
+import { ArbitrumLogoFull as Bo } from "./ArbitrumLogoFull.js";
+import { BaseLogoFull as Io } from "./BaseLogoFull.js";
+import { BnbChainLogoFull as Eo } from "./BnbChainLogoFull.js";
+import { HyperliquidLogoFull as wo } from "./HyperliquidLogoFull.js";
+import { JumperLogoFull as Xo } from "./JumperLogoFull.js";
+import { LiFiLogoFull as yo } from "./LiFiLogoFull.js";
+import { LightsparkLogoFull as Oo } from "./LightsparkLogoFull.js";
+import { LitecoinLogoFull as qo } from "./LitecoinLogoFull.js";
+import { MaestroLogoFull as Ko } from "./MaestroLogoFull.js";
+import { MegaEthLogoFull as Vo } from "./MegaEthLogoFull.js";
+import { MonadLogoFull as zo } from "./MonadLogoFull.js";
+import { MulticoinCapitalLogoFull as Uo } from "./MulticoinCapitalLogoFull.js";
+import { PhantomLogoFull as Zo } from "./PhantomLogoFull.js";
+import { RangoLogoFull as $o } from "./RangoLogoFull.js";
+import { SolanaLogoFull as rr } from "./SolanaLogoFull.js";
+import { StarknetLogoFull as tr } from "./StarknetLogoFull.js";
+import { SwapKitLogoFull as pr } from "./SwapKitLogoFull.js";
+import { XverseLogoFull as xr } from "./XverseLogoFull.js";
+import { SatsTerminalLogoFull as ar } from "./SatsTerminalLogoFull.js";
 export {
+  So as AmberLogoFull,
   e as ArbitrumLogo,
+  Bo as ArbitrumLogoFull,
   m as BTCLogo,
-  q as Camelot,
-  p as CatalogLogo,
-  ho as Code4renaLogo,
-  a as Coinbase,
-  v as DLCBTC,
-  V as Debridge,
+  Io as BaseLogoFull,
+  Eo as BnbChainLogoFull,
+  N as Camelot,
+  l as CatalogLogo,
+  ko as Code4renaLogo,
+  f as Coinbase,
+  J as DLCBTC,
+  H as Debridge,
   _ as Dodo,
   g as EthereumLogo,
-  H as GMX,
-  I as GMXLogo,
-  lo as GardenDocs,
-  L as GardenExplorer,
+  j as GMX,
+  h as GMXLogo,
+  no as GardenDocs,
+  n as GardenExplorer,
   go as GardenExplorerAlt,
-  G as GardenFullLogo,
+  i as GardenFullLogo,
   mo as GardenIcon,
-  po as GardenIconOutline,
-  C as GardenLogo,
-  ko as GardenLogoDark,
-  uo as GardenLogoLight,
+  lo as GardenIconOutline,
+  d as GardenLogo,
+  co as GardenLogoDark,
+  To as GardenLogoLight,
   io as GardenLogoMarkDark,
-  co as GardenLogoMarkLight,
-  T as GardenLogoText,
-  D as GardenStrokeIcon,
-  ao as NFTIcon,
+  Go as GardenLogoMarkLight,
+  C as GardenLogoText,
+  s as GardenStrokeIcon,
+  wo as HyperliquidLogoFull,
+  Xo as JumperLogoFull,
+  yo as LiFiLogoFull,
+  Oo as LightsparkLogoFull,
+  qo as LitecoinLogoFull,
+  Ko as MaestroLogoFull,
+  Vo as MegaEthLogoFull,
+  zo as MonadLogoFull,
+  Uo as MulticoinCapitalLogoFull,
+  fo as NFTIcon,
   Y as PancakeSwap,
-  s as PhantomIcon,
-  M as PolygonLogo,
+  M as PhantomIcon,
+  Zo as PhantomLogoFull,
+  b as PolygonLogo,
   eo as Radiant,
-  b as RadiantLogo,
+  D as RadiantLogo,
+  $o as RangoLogoFull,
+  ar as SatsTerminalLogoFull,
+  rr as SolanaLogoFull,
   Q as Solv,
-  W as SwellBTC,
-  J as TraderJoe,
-  P as TrailOfBits,
-  A as TrustWallet,
+  tr as StarknetLogoFull,
+  pr as SwapKitLogoFull,
+  v as SwellBTC,
+  W as TraderJoe,
+  A as TrailOfBits,
+  P as TrustWallet,
   oo as Vertex,
-  O as WalletConnect
+  R as WalletConnect,
+  xr as XverseLogoFull
 };

package/dist/ResponsiveModal/ResponsiveModal.d.ts

@@ -1,23 +1,41 @@
 import { FC, ReactNode } from 'react';
 
 type OpacityVariants = "extra-light" | "light" | "medium" | "semi-dark" | "full";
+/** Desktop Modal config. Defaults: dimmed overlay, closes on outside
+ * click, X shown, page scroll-locked. */
+export type DesktopModalConfig = {
+    /** Classes for the modal card. */
+    className?: string;
+    /** Classes for the full-screen overlay */
+    overlayClassName?: string;
+    /** When `true`, force a choice — hide the close (X) button AND don't close on
+     * outside click. */
+    preventClose?: boolean;
+    /** When `true`, the page is NOT scroll-locked while open. */
+    disableScrollLock?: boolean;
+};
+/** Mobile BottomSheet config. Defaults: dim backdrop, dismissible
+ * by tap-outside / drag, page behind blocked, scroll-locked. */
+export type MobileBottomSheetConfig = {
+    /** Classes for the sheet content panel. */
+    className?: string;
+    /** Classes for the backdrop */
+    overlayClassName?: string;
+    /** When `true`, the sheet can't be dismissed by tap-outside / drag — force a choice. */
+    preventClose?: boolean;
+    /** When `true`, the page behind the sheet stays interactive. */
+    allowBackgroundInteraction?: boolean;
+    /** When `true`, the page is NOT scroll-locked while open. */
+    disableScrollLock?: boolean;
+};
 export type ResponsiveModalProps = {
     open: boolean;
     onClose: () => void;
     label?: string;
     children: ReactNode;
     opacityLevel?: OpacityVariants;
-    className?: string;
-    /** Hide the close (X) button — for modals that must force a choice. Also makes
-     * the mobile BottomSheet non-dismissible (no tap-outside / drag-to-close). */
-    hideCloseBtn?: boolean;
-    /** Extra classes for the overlay/backdrop — desktop Modal and mobile
-     * BottomSheet alike */
-    overlayClassName?: string;
-    /** Mobile BottomSheet only. When `true`, the page behind stays interactive. Default `false`. */
-    bottomSheetAllowBackgroundInteraction?: boolean;
-    /** When `true`, the page is NOT scroll-locked while open. */
-    disableScrollLock?: boolean;
+    desktopModal?: DesktopModalConfig;
+    mobileBottomSheet?: MobileBottomSheetConfig;
 };
 /** Modal on desktop, vaul BottomSheet on mobile. Reads viewport from `ViewportProvider`. Portals into `document.body`. */
 export declare const ResponsiveModal: FC<ResponsiveModalProps>;

package/dist/ResponsiveModal/index.js

@@ -1,77 +1,76 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { useState as x, useEffect as b } from "react";
-import { createPortal as g } from "react-dom";
-import { Modal as n } from "../Modal/index.js";
-import { BottomSheet as v } from "../BottomSheet/index.js";
-import { Typography as y } from "../Typography/index.js";
-import { CloseIcon as l } from "../Icons/CloseIcon.js";
-import { useViewport as M } from "../Viewport/index.js";
-import { cn as N } from "../utils/index.js";
-const V = ({
-  open: t,
-  onClose: r,
-  label: o,
-  children: f,
-  opacityLevel: c = "medium",
-  className: a,
-  hideCloseBtn: i,
-  overlayClassName: m,
-  bottomSheetAllowBackgroundInteraction: p,
-  disableScrollLock: u
+import { jsx as c, jsxs as u } from "react/jsx-runtime";
+import { useState as l, useEffect as L } from "react";
+import { createPortal as a } from "react-dom";
+import { Modal as v } from "../Modal/index.js";
+import { BottomSheet as j } from "../BottomSheet/index.js";
+import { Typography as I } from "../Typography/index.js";
+import { CloseIcon as C } from "../Icons/CloseIcon.js";
+import { useViewport as z } from "../Viewport/index.js";
+import { cn as E } from "../utils/index.js";
+const H = ({
+  open: i,
+  onClose: n,
+  label: s,
+  children: g,
+  opacityLevel: N = "medium",
+  desktopModal: r,
+  mobileBottomSheet: f
 }) => {
-  const d = M() === "mobile", [h, w] = x(!1);
-  return b(() => {
-    w(!0);
-  }, []), h ? d ? t ? g(
-    /* @__PURE__ */ e(
-      v,
+  const w = z() === "mobile", [x, y] = l(!1);
+  return L(() => {
+    y(!0);
+  }, []), x ? w ? i ? a(
+    /* @__PURE__ */ c(
+      j,
       {
-        open: t,
-        onOpenChange: r,
-        overlayClassName: m,
-        dismissible: !i,
-        modal: !p,
-        children: f
+        open: i,
+        onOpenChange: n,
+        className: f == null ? void 0 : f.className,
+        overlayClassName: f == null ? void 0 : f.overlayClassName,
+        dismissible: !(f != null && f.preventClose),
+        modal: !(f != null && f.allowBackgroundInteraction),
+        disableScrollLock: f == null ? void 0 : f.disableScrollLock,
+        children: g
       }
     ),
     document.body
-  ) : null : g(
-    /* @__PURE__ */ e(
-      n,
+  ) : null : a(
+    /* @__PURE__ */ c(
+      v,
       {
-        open: t,
-        onClose: r,
-        overlayClassName: m,
-        disableScrollLock: u,
-        children: /* @__PURE__ */ s(
-          n.Children,
+        open: i,
+        onClose: r != null && r.preventClose ? void 0 : n,
+        overlayClassName: r == null ? void 0 : r.overlayClassName,
+        disableScrollLock: r == null ? void 0 : r.disableScrollLock,
+        children: /* @__PURE__ */ u(
+          v.Children,
           {
-            opacityLevel: c,
-            className: N(
+            opacityLevel: N,
+            className: E(
               "gf-relative gf-flex gf-w-[500px] gf-flex-col gf-gap-4 gf-rounded-2xl gf-p-4",
-              a
+              r == null ? void 0 : r.className
             ),
             children: [
-              o && /* @__PURE__ */ s("div", { className: "gf-flex gf-items-center gf-justify-between", children: [
-                /* @__PURE__ */ e(y, { size: "h4", weight: "medium", children: o }),
-                !i && /* @__PURE__ */ e(
-                  l,
+              s && /* @__PURE__ */ u("div", { className: "gf-flex gf-items-center gf-justify-between", children: [
+                /* @__PURE__ */ c(I, { size: "h4", weight: "medium", children: s }),
+                !(r != null && r.preventClose) && /* @__PURE__ */ c(
+                  C,
                   {
                     className: "gf-h-3 gf-w-3 gf-fill-primaryIris gf-cursor-pointer",
-                    onClick: r
+                    onClick: n
                   }
                 )
               ] }),
-              !o && !i && /* @__PURE__ */ e(
+              !s && !(r != null && r.preventClose) && /* @__PURE__ */ c(
                 "button",
                 {
-                  onClick: r,
+                  onClick: n,
                   className: "gf-absolute gf-right-4 gf-top-4 gf-cursor-pointer gf-text-white/50 gf-transition-colors hover:gf-text-white",
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ e(l, { className: "gf-h-4 gf-w-4" })
+                  children: /* @__PURE__ */ c(C, { className: "gf-h-4 gf-w-4" })
                 }
               ),
-              f
+              g
             ]
           }
         )
@@ -81,5 +80,5 @@ const V = ({
   ) : null;
 };
 export {
-  V as ResponsiveModal
+  H as ResponsiveModal
 };

package/dist/Typography/Typography.d.ts

@@ -1,12 +1,14 @@
 export type SizeVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type WeightVariants = "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black";
-type breakpointVariants = "xs" | "sm" | "md" | "lg" | "xl";
+export type ColorVariants = "near-black" | "graphite" | "neutral-grey" | "mist" | "rose" | "white";
+type BreakpointVariants = "xs" | "sm" | "md" | "lg" | "xl";
 type Breakpoints = {
-    [K in breakpointVariants]?: SizeVariants;
+    [K in BreakpointVariants]?: SizeVariants;
 };
 type BaseTypographyProps = {
     size?: SizeVariants;
     weight?: WeightVariants;
+    color?: ColorVariants;
     breakpoints?: Breakpoints;
     as?: "div" | "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "a" | "cite";
 };
@@ -25,11 +27,12 @@ type TypographyProps = BaseTypographyProps & ((React.HTMLAttributes<HTMLDivEleme
 }));
 /**
  * Typography component
- * @param size - default size of the text => "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+ * @param size - size of the text => "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
  * @param weight - weight of the text => "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"
- * @param breakpoints - Breakpoints for the text size => { [key in ["xs","sm","md","lg","xl"]]: SizeVariants }
- * @param as -HTML element to render as => "div" | "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "a" | "cite"
- * @default size - "h3"  weight - "medium" as - "span"
+ * @param color - text color token => "near-black" | "graphite" | "neutral-grey" | "mist" | "rose" | "white"
+ * @param breakpoints - per-breakpoint size overrides => { [key in "xs" | "sm" | "md" | "lg" | "xl"]?: SizeVariants }
+ * @param as - HTML element to render as => "div" | "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "a" | "cite"
+ * @default size - "h3"  weight - "regular"  color - "near-black"  as - "span"
  */
 export declare const Typography: React.FC<TypographyProps>;
 export {};

package/dist/Typography/index.js

@@ -1,8 +1,16 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import { cva as m } from "class-variance-authority";
 import { cn as h } from "../utils/index.js";
-const e = m(["gf-font-haffer gf-text-dark-grey not-italic"], {
+const p = m(["gf-font-haffer gf-not-italic"], {
   variants: {
+    color: {
+      "near-black": "gf-text-near-black",
+      graphite: "gf-text-graphite",
+      "neutral-grey": "gf-text-neutral-grey",
+      mist: "gf-text-mist",
+      rose: "gf-text-rose",
+      white: "gf-text-white"
+    },
     size: {
       h1: "gf-text-[32px] gf-leading-[40px]",
       h2: "gf-text-xl gf-leading-[20px]",
@@ -20,70 +28,72 @@ const e = m(["gf-font-haffer gf-text-dark-grey not-italic"], {
       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"
     }
+  },
+  defaultVariants: {
+    size: "h3",
+    weight: "regular",
+    color: "near-black"
   }
-}), b = ({
+}), o = {
+  "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"
+}, u = ({
   as: t = "span",
-  size: f,
-  weight: l = "regular",
-  breakpoints: x,
-  className: s,
-  ...a
+  size: e,
+  weight: x,
+  color: f,
+  breakpoints: g,
+  className: l,
+  ...s
 }) => {
-  const d = x ? Object.entries(x).map(([g, i]) => `${g}:${i}`).map(
-    (g) => e({ breakpointSize: g })
+  const a = g ? Object.entries(g).map(
+    ([i, n]) => o[`${i}:${n}`]
   ).join(" ") : "";
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ d(
     t,
     {
       className: h(
-        e({
-          size: f,
-          weight: l,
-          className: s
+        p({
+          size: e,
+          weight: x,
+          color: f,
+          className: l
         }),
-        d
+        a
       ),
-      ...a
+      ...s
     }
   );
 };
 export {
-  b as Typography
+  u as Typography
 };

package/dist/index.d.ts

@@ -1,46 +1,46 @@
 
 export * from './animations';
-export * from './components/atoms/Typography';
-export * from './components/atoms/Button';
-export * from './components/atoms/Checkbox';
-export * from './components/atoms/BottomSheet';
-export * from './components/atoms/Container';
-export * from './components/atoms/Icons';
-export * from './components/atoms/Logo';
-export * from './components/atoms/Modal';
-export * from './components/atoms/Opacity';
-export * from './components/atoms/Sidebar';
-export * from './components/atoms/ClientOnly';
-export * from './components/atoms/Input';
-export * from './components/atoms/Field';
-export * from './components/atoms/StatCard';
-export * from './components/atoms/ToggleGroup';
-export * from './components/atoms/Pagination';
-export * from './components/atoms/HamburgerIcon';
-export * from './components/atoms/BulletList';
-export * from './components/atoms/Portal';
-export * from './components/atoms/Viewport';
-export * from './components/molecules/Chip';
-export * from './components/molecules/GradientScroll';
-export * from './components/molecules/InfoBadge';
-export * from './components/molecules/TokenInfo';
-export * from './components/molecules/TokenNetworkLogos';
-export * from './components/molecules/StatusChip';
-export * from './components/molecules/StateContainer';
-export * from './components/molecules/EmptyState';
-export * from './components/molecules/ErrorState';
-export * from './components/molecules/InfoTooltip';
-export * from './components/molecules/SelectDropdown';
-export * from './components/molecules/ResponsiveModal';
-export * from './components/molecules/Toast';
-export * from './components/organisms/BlogCard';
-export * from './components/organisms/Footer';
-export * from './components/organisms/QuestCard';
-export * from './components/organisms/DataTable';
-export * from './components/organisms/CardList';
-export * from './components/organisms/DashboardLayout';
-export * from './components/organisms/CookieConsent';
-export * from './components/atoms/OTPInput';
-export * from './components/atoms/DirectionalIconHover';
-export * from './components/atoms/Skeleton';
-export * from './components/atoms/Switch';
+export * from './Typography';
+export * from './Button';
+export * from './Checkbox';
+export * from './BottomSheet';
+export * from './Container';
+export * from './Icons';
+export * from './Logo';
+export * from './Modal';
+export * from './Opacity';
+export * from './Sidebar';
+export * from './ClientOnly';
+export * from './Input';
+export * from './Field';
+export * from './StatCard';
+export * from './ToggleGroup';
+export * from './Pagination';
+export * from './HamburgerIcon';
+export * from './BulletList';
+export * from './Portal';
+export * from './Viewport';
+export * from './Chip';
+export * from './GradientScroll';
+export * from './InfoBadge';
+export * from './TokenInfo';
+export * from './TokenNetworkLogos';
+export * from './StatusChip';
+export * from './StateContainer';
+export * from './EmptyState';
+export * from './ErrorState';
+export * from './InfoTooltip';
+export * from './SelectDropdown';
+export * from './ResponsiveModal';
+export * from './Toast';
+export * from './BlogCard';
+export * from './Footer';
+export * from './QuestCard';
+export * from './DataTable';
+export * from './CardList';
+export * from './DashboardLayout';
+export * from './CookieConsent';
+export * from './OTPInput';
+export * from './DirectionalIconHover';
+export * from './Skeleton';
+export * from './Switch';