@breadcoop/ui 1.0.25 → 2.0.0

package/dist/components/buttons/button.mjs

@@ -0,0 +1,93 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-FWCSY2DS.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { LoadingIcon } from "../loading-icon.mjs";
+import { cn } from "../../utils/index.mjs";
+const getBaseClassName = (app, variant) => {
+  if (variant === "destructive") {
+    return "bg-system-red hover:bg-[#BF0A00] active:bg-system-red";
+  }
+  if (variant === "positive") {
+    return "bg-system-green hover:bg-[#2B8F00] active:bg-system-green";
+  }
+  if (variant === "light") {
+    return "bg-paper-main text-surface-ink border-surface-ink hover:bg-paper-2 active:bg-paper-main";
+  }
+  if (app === "fund") {
+    if (variant === "primary") {
+      return "bg-core-orange hover:bg-orange-1 active:bg-core-orange";
+    }
+    return "bg-[#FBDED1] text-core-orange hover:bg-[#FFF1EA] active:bg-[#FBDED1]";
+  }
+  if (app === "stacks") {
+    if (variant === "primary") {
+      return "bg-primary-blue hover:bg-blue-2 active:bg-primary-blue";
+    }
+    return "bg-[#B9D5FF] text-primary-blue hover:bg-[#99C2FF] active:bg-[#B9D5FF]";
+  }
+  if (variant === "primary") {
+    return "bg-primary-jade hover:bg-jade-2 active:bg-primary-jade";
+  }
+  return "bg-[#CBE9E5] text-primary-jade hover:bg-[#BCD9D5] active:bg-[#CBE9E5]";
+};
+const Button = (_a) => {
+  var _b = _a, {
+    as,
+    app = "fund",
+    size,
+    variant = "primary",
+    rightIcon,
+    leftIcon,
+    children,
+    disabled,
+    className,
+    isLoading,
+    showChildrenWhenLoading,
+    withBorder
+  } = _b, rest = __objRest(_b, [
+    "as",
+    "app",
+    "size",
+    "variant",
+    "rightIcon",
+    "leftIcon",
+    "children",
+    "disabled",
+    "className",
+    "isLoading",
+    "showChildrenWhenLoading",
+    "withBorder"
+  ]);
+  const Component = as != null ? as : "button";
+  return /* @__PURE__ */ jsxs(
+    Component,
+    __spreadProps(__spreadValues({}, rest), {
+      className: cn(
+        getBaseClassName(app, variant),
+        "flex items-center justify-center gap-2 active:shadow-none disabled:shadow-none disabled:bg-surface-grey disabled:cursor-not-allowed",
+        "transition-all duration-200 border disabled:border-transparent",
+        variant !== "light" && withBorder && "border-surface-ink",
+        variant !== "light" && !withBorder && "border-transparent",
+        size === "icon" ? "p-2.5" : size === "sm" ? "py-1 px-4" : "py-4 px-8",
+        size === "sm" ? "shadow-[0.125rem_0.125rem_0px_0px_#595959]" : "shadow-[0.25rem_0.25rem_0px_0px_#595959]",
+        className
+      ),
+      disabled: disabled || isLoading,
+      children: [
+        (!isLoading || isLoading && showChildrenWhenLoading) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          leftIcon,
+          children,
+          rightIcon
+        ] }),
+        isLoading && /* @__PURE__ */ jsx(LoadingIcon, { app })
+      ]
+    })
+  );
+};
+var button_default = Button;
+export {
+  button_default as default
+};

package/dist/components/buttons/copy-icon.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes } from 'react';
+import { UseCopyToClipboardPayload } from '../../hooks/use-copy-to-clipboard.mjs';
+
+interface CopyButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, UseCopyToClipboardPayload {
+    checkedIconSize?: number;
+}
+declare const CopyButtonIcon: ({ children, textToCopy, checkedIconSize, ...buttonProps }: CopyButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { CopyButtonIcon as default };

package/dist/components/buttons/copy-icon.mjs

@@ -0,0 +1,44 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-FWCSY2DS.mjs";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
+import {
+  useCopyToClipboard
+} from "../../hooks/use-copy-to-clipboard.mjs";
+import { cn } from "../../utils/index.mjs";
+import { useBreadUIKitContext } from "../../context/lib.mjs";
+import { appsConfig } from "../../utils/app.mjs";
+const CopyButtonIcon = (_a) => {
+  var _b = _a, {
+    children,
+    textToCopy,
+    checkedIconSize = 24
+  } = _b, buttonProps = __objRest(_b, [
+    "children",
+    "textToCopy",
+    "checkedIconSize"
+  ]);
+  const { copied, copy } = useCopyToClipboard({
+    textToCopy
+  });
+  const app = useBreadUIKitContext().app;
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({}, buttonProps), {
+      onClick: copy,
+      className: cn(
+        buttonProps.className,
+        copied ? "text-system-green!" : appsConfig[app].text
+      ),
+      children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: checkedIconSize, className: "" }) : /* @__PURE__ */ jsx(CopyIcon, { size: 24, className: "fill-current" })
+    })
+  );
+};
+var copy_icon_default = CopyButtonIcon;
+export {
+  copy_icon_default as default
+};

package/dist/components/buttons/index.d.mts

@@ -0,0 +1,6 @@
+export { default as CopyButtonIcon } from './copy-icon.mjs';
+export { default as Button } from './button.mjs';
+import 'react/jsx-runtime';
+import 'react';
+import '../../hooks/use-copy-to-clipboard.mjs';
+import '../../interface/app.mjs';

package/dist/components/buttons/index.mjs

@@ -0,0 +1,7 @@
+import "../../chunk-FWCSY2DS.mjs";
+import { default as default2 } from "./copy-icon.mjs";
+import { default as default3 } from "./button.mjs";
+export {
+  default3 as Button,
+  default2 as CopyButtonIcon
+};

package/dist/components/chip/chip.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ChipProps {
+    size?: "small" | "regular";
+    children: ReactNode;
+    icon?: boolean;
+    className?: string;
+}
+declare const Chip: ({ size, icon, className, children, }: ChipProps) => react_jsx_runtime.JSX.Element;
+
+export { Chip as default };

package/dist/components/chip/chip.mjs

@@ -0,0 +1,34 @@
+import "../../chunk-FWCSY2DS.mjs";
+import { jsx } from "react/jsx-runtime";
+const Chip = ({
+  size = "small",
+  icon,
+  className = "",
+  children
+}) => {
+  let extraClass = "";
+  if (size === "small") {
+    if (icon) {
+      extraClass = "p-2";
+    } else {
+      extraClass = "py-1 px-4";
+    }
+  } else {
+    if (icon) {
+      extraClass = "p-3";
+    } else {
+      extraClass = "py-3 px-6";
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `border border-surface-ink hover:border-[#EA5817] disabled:border-surface-grey disabled:border-2 flex items-center justify-center gap-2.5 bg-paper-main ${extraClass} ${className}`,
+      children
+    }
+  );
+};
+var chip_default = Chip;
+export {
+  chip_default as default
+};

package/dist/components/connected-user/context.d.mts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { TConnectedUserState } from './interface.mjs';
+import 'viem';
+
+declare const ConnectedUserContext: React.Context<{
+    user: TConnectedUserState;
+    isSafe: boolean;
+}>;
+declare const useConnectedUser: () => {
+    user: TConnectedUserState;
+    isSafe: boolean;
+};
+
+export { ConnectedUserContext, useConnectedUser };

package/dist/components/connected-user/context.mjs

@@ -0,0 +1,22 @@
+"use client";
+import "../../chunk-FWCSY2DS.mjs";
+import { createContext, useContext } from "react";
+const ConnectedUserContext = createContext({
+  user: {
+    status: "LOADING"
+  },
+  isSafe: false
+});
+const useConnectedUser = () => {
+  const context = useContext(ConnectedUserContext);
+  if (context === void 0) {
+    throw new Error(
+      "useConnectedUser must be used within a ConnectedUserProvider"
+    );
+  }
+  return context;
+};
+export {
+  ConnectedUserContext,
+  useConnectedUser
+};

package/dist/components/connected-user/index.d.mts

@@ -0,0 +1,6 @@
+export { useConnectedUser } from './context.mjs';
+export { ConnectedUserProvider } from './provider.mjs';
+export { TConnectedUserState, TUserConnected, TUserLoading, TUserNotConnected } from './interface.mjs';
+import 'react';
+import 'react/jsx-runtime';
+import 'viem';

package/dist/components/connected-user/index.mjs

@@ -0,0 +1,7 @@
+import "../../chunk-FWCSY2DS.mjs";
+import { useConnectedUser } from "./context.mjs";
+import { ConnectedUserProvider } from "./provider.mjs";
+export {
+  ConnectedUserProvider,
+  useConnectedUser
+};

package/dist/components/connected-user/interface.d.mts

@@ -0,0 +1,16 @@
+import { Hex, Chain } from 'viem';
+
+type TUserLoading = {
+    status: "LOADING";
+};
+type TUserNotConnected = {
+    status: "NOT_CONNECTED";
+};
+type TUserConnected = {
+    status: "CONNECTED" | "UNSUPPORTED_CHAIN";
+    address: Hex;
+    chain: Chain;
+};
+type TConnectedUserState = TUserLoading | TUserNotConnected | TUserConnected;
+
+export type { TConnectedUserState, TUserConnected, TUserLoading, TUserNotConnected };

package/dist/components/connected-user/privy-provider.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface IConnectedUserProviderPrivyProps {
+    children: ReactNode;
+    chainId: number;
+}
+declare function ConnectedUserProviderPrivy({ chainId, children, }: IConnectedUserProviderPrivyProps): react_jsx_runtime.JSX.Element;
+
+export { ConnectedUserProviderPrivy };

package/dist/components/connected-user/privy-provider.mjs

@@ -0,0 +1,55 @@
+"use client";
+import "../../chunk-FWCSY2DS.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useChains } from "wagmi";
+import { usePrivy, useWallets } from "@privy-io/react-auth";
+import { ConnectedUserContext } from "./context.mjs";
+function ConnectedUserProviderPrivy({
+  chainId,
+  children
+}) {
+  const { ready, authenticated } = usePrivy();
+  const { wallets } = useWallets();
+  const configuredChains = useChains();
+  const defaultChain = useMemo(
+    () => {
+      var _a;
+      return (_a = configuredChains.find((c) => c.id === chainId)) != null ? _a : configuredChains[0];
+    },
+    [configuredChains, chainId]
+  );
+  const embeddedWallet = useMemo(() => {
+    return wallets.find(
+      (wallet) => {
+        var _a;
+        return wallet.walletClientType === "privy" || wallet.walletClientType === "embedded_wallet" || ((_a = wallet.walletClientType) == null ? void 0 : _a.includes("embedded"));
+      }
+    );
+  }, [wallets]);
+  const user = useMemo(() => {
+    var _a;
+    if (!ready) return { status: "LOADING" };
+    if (!authenticated || !(embeddedWallet == null ? void 0 : embeddedWallet.address)) {
+      return { status: "NOT_CONNECTED" };
+    }
+    const address = embeddedWallet.address;
+    const walletChainId = embeddedWallet.chainId;
+    const parsedChainId = walletChainId ? parseInt(walletChainId.split(":")[1]) : void 0;
+    const _status = parsedChainId === chainId ? "CONNECTED" : "UNSUPPORTED_CHAIN";
+    const chain = (_a = configuredChains.find((c) => c.id === parsedChainId)) != null ? _a : defaultChain;
+    return {
+      status: _status,
+      address,
+      chain
+    };
+  }, [ready, authenticated, embeddedWallet, chainId, configuredChains, defaultChain]);
+  const isSafe = useMemo(() => {
+    return (embeddedWallet == null ? void 0 : embeddedWallet.walletClientType) === "safe" || false;
+  }, [embeddedWallet]);
+  const value = useMemo(() => ({ user, isSafe }), [user, isSafe]);
+  return /* @__PURE__ */ jsx(ConnectedUserContext.Provider, { value, children });
+}
+export {
+  ConnectedUserProviderPrivy
+};

package/dist/components/connected-user/provider-general.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface IConnectedUserProviderGeneralProps {
+    children: ReactNode;
+    chainId: number;
+}
+declare function ConnectedUserProviderGeneral({ chainId, children }: IConnectedUserProviderGeneralProps): react_jsx_runtime.JSX.Element;
+
+export { ConnectedUserProviderGeneral };

package/dist/components/connected-user/provider-general.mjs

@@ -0,0 +1,38 @@
+"use client";
+import "../../chunk-FWCSY2DS.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useAccount, useChains } from "wagmi";
+import { useAutoConnect } from "../../hooks/use-auto-connect.mjs";
+import { ConnectedUserContext } from "./context.mjs";
+function ConnectedUserProviderGeneral({ chainId, children }) {
+  const { isConnected, connector, address, status, chain } = useAccount();
+  const { isSafe } = useAutoConnect(connector);
+  const configuredChains = useChains();
+  const defaultChain = useMemo(
+    () => {
+      var _a;
+      return (_a = configuredChains.find((c) => c.id === chainId)) != null ? _a : configuredChains[0];
+    },
+    [configuredChains, chainId]
+  );
+  const user = useMemo(() => {
+    if (status === "connecting" && !address) {
+      return { status: "LOADING" };
+    }
+    if (status === "disconnected" || !isConnected || !address) {
+      return { status: "NOT_CONNECTED" };
+    }
+    const _status = (chain == null ? void 0 : chain.id) === chainId ? "CONNECTED" : "UNSUPPORTED_CHAIN";
+    return {
+      status: _status,
+      address,
+      chain: chain != null ? chain : defaultChain
+    };
+  }, [isConnected, address, chain, status, chainId, defaultChain]);
+  const value = useMemo(() => ({ user, isSafe }), [user, isSafe]);
+  return /* @__PURE__ */ jsx(ConnectedUserContext.Provider, { value, children });
+}
+export {
+  ConnectedUserProviderGeneral
+};

package/dist/components/connected-user/provider.d.mts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface IConnectedUserProviderProps {
+    children: ReactNode;
+}
+declare function ConnectedUserProvider({ children }: IConnectedUserProviderProps): react_jsx_runtime.JSX.Element;
+
+export { ConnectedUserProvider };

package/dist/components/connected-user/provider.mjs

@@ -0,0 +1,15 @@
+"use client";
+import "../../chunk-FWCSY2DS.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useAuthProvider, useBreadUIKitContext } from "../../context/lib.mjs";
+import { ConnectedUserProviderPrivy } from "./privy-provider.mjs";
+import { ConnectedUserProviderGeneral } from "./provider-general.mjs";
+function ConnectedUserProvider({ children }) {
+  const authProvider = useAuthProvider();
+  const { chainId } = useBreadUIKitContext();
+  const Provider = authProvider === "privy" ? ConnectedUserProviderPrivy : ConnectedUserProviderGeneral;
+  return /* @__PURE__ */ jsx(Provider, { chainId, children });
+}
+export {
+  ConnectedUserProvider
+};

package/dist/components/footer/footer.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface FooterProps {
+    className?: string;
+    topClassName?: string;
+    infoClassName?: string;
+    mode?: "colored" | "transparent";
+}
+declare function Footer({ className, topClassName, infoClassName, mode, }: FooterProps): react_jsx_runtime.JSX.Element;
+
+export { Footer as default };

package/dist/components/footer/footer.mjs

@@ -0,0 +1,222 @@
+import "../../chunk-FWCSY2DS.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  GithubLogoIcon,
+  LinkedinLogoIcon,
+  YoutubeLogoIcon,
+  DiscordLogoIcon,
+  XLogoIcon,
+  EnvelopeSimpleIcon,
+  ArrowUpRightIcon
+} from "@phosphor-icons/react/dist/ssr";
+import { LINKS } from "../../constansts/links.mjs";
+import { Body } from "../typography/Typography.mjs";
+import { Logo } from "../Logo/index.mjs";
+import { SOLIDARITY_TOOLS } from "../../constansts/tools.mjs";
+function SocialIcons({ className = "" }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-center justify-center md:justify-start gap-5 pb-6 md:pb-0 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("a", { href: LINKS.youtube, className: "block", children: /* @__PURE__ */ jsx(YoutubeLogoIcon, { className: "w-6 h-6 text-surface-ink" }) }),
+        /* @__PURE__ */ jsx("a", { href: LINKS.linkedin, className: "block", children: /* @__PURE__ */ jsx(LinkedinLogoIcon, { className: "w-6 h-6 text-surface-ink" }) }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: LINKS.github,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "block",
+            children: /* @__PURE__ */ jsx(GithubLogoIcon, { className: "w-6 h-6 text-surface-ink" })
+          }
+        ),
+        /* @__PURE__ */ jsx("a", { href: LINKS.discord, className: "block", children: /* @__PURE__ */ jsx(DiscordLogoIcon, { className: "w-6 h-6 text-surface-ink" }) }),
+        /* @__PURE__ */ jsx("a", { href: LINKS.twitter, className: "block", children: /* @__PURE__ */ jsx(XLogoIcon, { className: "w-6 h-6 text-surface-ink" }) }),
+        /* @__PURE__ */ jsx("a", { href: LINKS.newsletter, className: "block", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: "/paragraph.png",
+            alt: "Paragraph icon",
+            width: 24,
+            height: 24,
+            className: "p-0.75 w-5 h-5 text-surface-ink"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("a", { href: LINKS.farcaster, className: "block", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: "/farcaster-icon.png",
+            alt: "Farcaser icon",
+            width: 24,
+            height: 24,
+            className: "p-0.75 w-5 h-5 text-surface-ink"
+          }
+        ) })
+      ]
+    }
+  );
+}
+function FooterLink({
+  href,
+  children,
+  isExternal = false,
+  mode
+}) {
+  const isDisabled = !href || href.trim() === "";
+  if (isDisabled) {
+    return /* @__PURE__ */ jsx(Body, { className: "text-surface-ink font-breadBody flex items-center gap-2 opacity-50 ", children });
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: isExternal ? "_blank" : "_self",
+      rel: isExternal ? "noopener noreferrer" : "",
+      className: `font-breadBody flex items-center gap-2 ${mode === "colored" ? "text-surface-ink hover:text-paper-0" : ""}`,
+      children: [
+        children,
+        isExternal && /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "w-6 h-6 text-orange-0" })
+      ]
+    }
+  );
+}
+function Footer({
+  className = "",
+  topClassName = "",
+  infoClassName = "",
+  mode = "colored"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "footer",
+    {
+      className: `px-4 py-12 ${mode === "colored" ? "bg-primary-orange text-white" : "bg-transparent text-surface-ink"} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `mb-8 max-w-79.5 mx-auto md:max-w-7xl xl:flex xl:gap-4 ${topClassName}`,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `md:flex md:items-center md:justify-between md:mb-8 xl:flex-col xl:w-full xl:max-w-max ${infoClassName}`,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center md:items-start mb-4 md:mb-0 xl:mb-6", children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex uppercase text-2xl  items-center gap-3 mb-2", children: /* @__PURE__ */ jsx(
+                        Logo,
+                        {
+                          text: "Bread Cooperative",
+                          size: 23,
+                          color: mode === "colored" ? "white" : void 0
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("p", { className: "font-breadBody text-center md:text-left", children: "Solidarity forever." })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "mb-4 xl:w-full", children: /* @__PURE__ */ jsx(SocialIcons, { className: "xl:gap-4" }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:justify-between xl:w-full xl:max-w-212 xl:ml-auto", children: [
+                /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+                  /* @__PURE__ */ jsx(
+                    Body,
+                    {
+                      className: `text-lg mb-4 ${mode === "transparent" ? "text-core-orange" : ""}`,
+                      children: "Cooperative"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("ul", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(FooterLink, { mode, href: LINKS.docs, children: "Documentation" }) }),
+                    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(FooterLink, { mode, href: LINKS.newsletter, children: "Blog" }) }),
+                    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                      FooterLink,
+                      {
+                        mode,
+                        href: LINKS.contributorForm,
+                        children: "Contribute"
+                      }
+                    ) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+                  /* @__PURE__ */ jsx(
+                    Body,
+                    {
+                      className: `text-lg mb-4 ${mode === "transparent" ? "text-core-orange" : ""}`,
+                      children: "Solidarity tools"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: SOLIDARITY_TOOLS.map((tool) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                    FooterLink,
+                    {
+                      href: tool.webLink || "",
+                      isExternal: !tool.comingSoon,
+                      children: tool.title
+                    }
+                  ) }, tool.id)) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+                  /* @__PURE__ */ jsx(
+                    Body,
+                    {
+                      className: `text-lg mb-4 ${mode === "transparent" ? "text-core-orange" : ""}`,
+                      children: "Reach out"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: "mailto:contact@bread.coop",
+                      className: `font-breadBody flex items-center gap-2 ${mode === "colored" ? "text-surface-ink hover:text-paper-0" : ""}`,
+                      children: [
+                        /* @__PURE__ */ jsx(EnvelopeSimpleIcon, { className: "w-6 h-6 text-orange-0" }),
+                        "contact@bread.coop"
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+                  /* @__PURE__ */ jsx(
+                    Body,
+                    {
+                      className: `text-lg mb-4 ${mode === "transparent" ? "text-core-orange" : ""}`,
+                      children: "Support us"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("ul", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                      FooterLink,
+                      {
+                        mode,
+                        href: LINKS.giveth,
+                        isExternal: true,
+                        children: "Donate in crypto"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                      FooterLink,
+                      {
+                        mode,
+                        href: LINKS.openCollective,
+                        isExternal: true,
+                        children: "Donate in fiat"
+                      }
+                    ) })
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "border-t border-orange-0 pt-6 flex flex-col justify-between items-center gap-4 md:flex-row md:mx-auto md:max-w-7xl", children: [
+          /* @__PURE__ */ jsx(Body, { className: "text-sm", children: "Creative Commons \xA9BREAD Cooperative" }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx(Body, { className: "text-sm", children: "All Rights Reserved" }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Footer as default
+};