@opexa/portal-components 0.0.27 → 0.0.28

package/dist/components/Account/Account.jsx

@@ -0,0 +1,313 @@
+'use client';
+import { Portal } from '@ark-ui/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useShallow } from 'zustand/shallow';
+import { useAccountQuery, useGlobalStore, useLocaleInfo, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks';
+import { AlertCircleIcon, ChevronLeftIcon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, CreditCard02Icon, FileCheck02Icon, Gift01Icon, Lock01Icon, Logout01Icon, Settings02Icon, User01Icon, XIcon, } from '../../icons';
+import avatarPlaceholder from '../../images/placeholder-avatar.png';
+import { Badge, Button, Drawer, IconButton, Popover, Presence } from '../../ui';
+import { formatNumber, parseDecimal } from '../../utils';
+import { accountRecipe } from './account.recipe';
+const recipe = accountRecipe();
+export function Account(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+        accountSettings: ctx.accountSettings,
+    })));
+    return (<>
+      <Drawer.Root open={globalStore.account__mobile.open} onOpenChange={(details) => {
+            globalStore.account__mobile.setOpen(details.open);
+            globalStore.accountSettings.setCollapsed(true);
+        }} lazyMount unmountOnExit>
+        <Drawer.Trigger asChild className="lg:hidden">
+          {props.children ?? (<IconButton size="sm" colorScheme="gray">
+              {globalStore.account__mobile.open ? (<XIcon />) : (<Image src={avatarPlaceholder} alt="" width={100} height={100} className="size-10"/>)}
+            </IconButton>)}
+        </Drawer.Trigger>
+        <Portal>
+          <Drawer.Positioner>
+            <Drawer.Content className="relative top-[var(--top,0px)] flex h-[calc(100%-var(--top,0px))] w-full flex-col px-xl py-6" style={{
+            ['--top']: props.offsetTop ?? '0px',
+        }}>
+              <Profile />
+              <Wallet />
+              <Links rewardsUrl={props.rewardsUrl} betRecordsUrl={props.betRecordsUrl} transactionsUrl={props.transactionsUrl}/>
+              <AccountSettingsMenu accountInfoUrl={props.accountInfoUrl} accountSecurityUrl={props.accountSecurityUrl} accountVerificationUrl={props.accountVerificationUrl} accountPaymentMethodsUrl={props.accountPaymentMethodsUrl}/>
+            </Drawer.Content>
+          </Drawer.Positioner>
+        </Portal>
+      </Drawer.Root>
+
+      <Popover.Root open={globalStore.account.open} onOpenChange={(details) => {
+            globalStore.account.setOpen(details.open);
+            globalStore.accountSettings.setCollapsed(true);
+        }} lazyMount unmountOnExit positioning={{
+            placement: 'bottom',
+            strategy: 'fixed',
+        }}>
+        <Popover.Trigger className="hidden lg:flex" asChild>
+          {props.children ?? (<IconButton size="sm" colorScheme="gray">
+              <Image src={avatarPlaceholder} alt="" width={48} height={48} className="size-10"/>
+            </IconButton>)}
+        </Popover.Trigger>
+        <Portal>
+          <Popover.Positioner>
+            <Popover.Content className="border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out">
+              <Profile />
+              <Wallet />
+              <Links rewardsUrl={props.rewardsUrl} betRecordsUrl={props.betRecordsUrl} transactionsUrl={props.transactionsUrl}/>
+              <AccountSettingsMenu accountInfoUrl={props.accountInfoUrl} accountSecurityUrl={props.accountSecurityUrl} accountVerificationUrl={props.accountVerificationUrl} accountPaymentMethodsUrl={props.accountPaymentMethodsUrl}/>
+            </Popover.Content>
+          </Popover.Positioner>
+        </Portal>
+      </Popover.Root>
+    </>);
+}
+function Profile() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    return (<div className="flex shrink-0 items-center gap-lg">
+      <Image src={avatarPlaceholder} alt="" width={48} height={48} className="size-12"/>
+      <div className="grow">
+        <p className="text-text-secondary-700 font-semibold leading-tight">
+          {account?.name}
+        </p>
+        <p className="text-text-tertiary-600 leading-tight">
+          {account?.nickName ?? account?.emailAddress ?? account?.realName}
+        </p>
+      </div>
+
+      <Badge.Root colorScheme={account?.verified ? 'success' : 'danger'} className="self-start">
+        <Badge.Indicator />
+        <Badge.Label>
+          {account?.verified ? 'Verified' : 'Unverified'}
+        </Badge.Label>
+      </Badge.Root>
+    </div>);
+}
+function Wallet() {
+    const localeInfo = useLocaleInfo();
+    const walletQuery = useWalletQuery({
+        refetchInterval: 1000,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        profile: ctx.account,
+        mobileProfile: ctx.account__mobile,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
+    const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
+    const totalBalance = depositBalance + bonusBalance;
+    return (<div className="border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl">
+      <div className="text-text-secondary-700 text-sm">Total Balance</div>
+      <div className="text-3xl font-bold">
+        {formatNumber(totalBalance, {
+            currency: localeInfo?.currency.code,
+            minDecimalPlaces: 2,
+        })}
+      </div>
+      <div className="mt-1.5 flex gap-7xl">
+        <div>
+          <p className="text-text-secondary-700 text-2xs">Deposit Balance</p>
+          <p className="text-medium text-text-primary-brand">
+            {formatNumber(depositBalance, {
+            currency: localeInfo?.currency.code,
+            minDecimalPlaces: 2,
+        })}
+          </p>
+        </div>
+        <div>
+          <p className="text-text-secondary-700 text-2xs">Bonus Balance</p>
+          <p className="text-medium text-text-primary-brand">
+            {formatNumber(bonusBalance, {
+            currency: localeInfo?.currency.code,
+            minDecimalPlaces: 2,
+        })}
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-3 flex gap-lg">
+        <Button size="xs" variant="outline" onClick={() => {
+            globalStore.depositWithdrawal.setOpen(true);
+            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
+            globalStore.profile.setOpen(false);
+            globalStore.mobileProfile.setOpen(false);
+        }}>
+          Withdraw
+        </Button>
+        <Button size="xs" onClick={() => {
+            globalStore.depositWithdrawal.setOpen(true);
+            globalStore.depositWithdrawal.setTab('DEPOSIT');
+            globalStore.profile.setOpen(false);
+            globalStore.mobileProfile.setOpen(false);
+        }}>
+          Deposit
+        </Button>
+      </div>
+    </div>);
+}
+function Links(props) {
+    const signOutMutation = useSignOutMutation();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+        accountSettings: ctx.accountSettings,
+        messages: ctx.messages,
+    })));
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    return (<nav className={recipe.nav({ className: 'mt-xl' })}>
+      <ul>
+        <li className={recipe.navItemRoot()}>
+          <button type="button" className={recipe.navItemLink()} onClick={() => {
+            globalStore.account.setOpen(false);
+            globalStore.account__mobile.setOpen(false);
+            globalStore.messages.setOpen(true);
+        }}>
+            <Logout01Icon className={recipe.navItemIcon()}/>
+            <span className={recipe.navItemLabel()}>Notifications</span>
+            <span className={recipe.navItemBadge()} data-type="warning">
+              {unreadMessagesCountQuery.data ?? 0}
+            </span>
+            <ChevronRightIcon className={recipe.navItemIndicator()}/>
+          </button>
+        </li>
+        <li className={recipe.navItemRoot()}>
+          <Link href={props.rewardsUrl ?? '/rewards'} className={recipe.navItemLink()} onClick={() => {
+            globalStore.account.setOpen(false);
+            globalStore.account__mobile.setOpen(false);
+        }}>
+            <Gift01Icon className={recipe.navItemIcon()}/>
+            <span className={recipe.navItemLabel()}>Rewards</span>
+            <span className={recipe.navItemBadge()} data-type="warning">
+              0
+            </span>
+            <ChevronRightIcon className={recipe.navItemIndicator()}/>
+          </Link>
+        </li>
+      </ul>
+
+      <ul>
+        <li className={recipe.navItemRoot()}>
+          <button type="button" className={recipe.navItemLink()} onClick={() => {
+            globalStore.accountSettings.setCollapsed(false);
+        }}>
+            <Settings02Icon className={recipe.navItemIcon()}/>
+            <span className={recipe.navItemLabel()}>Settings</span>
+            <span className={recipe.navItemBadge()} data-type="error">
+              <AlertCircleIcon />
+            </span>
+            <ChevronRightIcon className={recipe.navItemIndicator()}/>
+          </button>
+        </li>
+      </ul>
+
+      <ul>
+        <li className={recipe.navItemRoot()}>
+          <Link href={props.betRecordsUrl ?? '/bet-records'} className={recipe.navItemLink()} onClick={() => {
+            globalStore.account.setOpen(false);
+            globalStore.account__mobile.setOpen(false);
+        }}>
+            <CoinsStacked02Icon className={recipe.navItemIcon()}/>
+            <span className={recipe.navItemLabel()}>Bet Records</span>
+            <ChevronRightIcon className={recipe.navItemIndicator()}/>
+          </Link>
+        </li>
+        <li className={recipe.navItemRoot()}>
+          <Link href={props.transactionsUrl ?? '/transactions'} className={recipe.navItemLink()} onClick={() => {
+            globalStore.account.setOpen(false);
+            globalStore.account__mobile.setOpen(false);
+        }}>
+            <CoinsSwap02Icon className={recipe.navItemIcon()}/>
+            <span className={recipe.navItemLabel()}>Transactions</span>
+            <ChevronRightIcon className={recipe.navItemIndicator()}/>
+          </Link>
+        </li>
+      </ul>
+
+      <ul>
+        <li className={recipe.navItemRoot()}>
+          <button type="button" className={recipe.navItemLink()} disabled={signOutMutation.isPending} onClick={() => {
+            signOutMutation.mutate();
+            globalStore.account.setOpen(false);
+            globalStore.account__mobile.setOpen(false);
+        }}>
+            <Logout01Icon className={recipe.navItemIcon()}/>
+            <span className={recipe.navItemLabel()}>Log Out</span>
+            <ChevronRightIcon className={recipe.navItemIndicator()}/>
+          </button>
+        </li>
+      </ul>
+    </nav>);
+}
+function AccountSettingsMenu(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+        accountSettings: ctx.accountSettings,
+    })));
+    return (<Presence present={!globalStore.accountSettings.collapsed} lazyMount className="bg-bg-primary ui-open:animate-slide-in-right ui-closed:animate-slide-out-right absolute left-0 top-0 size-full overflow-y-auto">
+      <div className="bg-bg-primary-alt flex items-center gap-xl px-xl py-md">
+        <IconButton size="2xs" variant="outline" colorScheme="gray" onClick={() => {
+            globalStore.accountSettings.setCollapsed(true);
+        }}>
+          <ChevronLeftIcon />
+        </IconButton>
+        <h2 className="text-text-primary-900 text-lg font-semibold">
+          Settings
+        </h2>
+      </div>
+      <nav className={recipe.nav({ className: 'p-4' })}>
+        <ul>
+          <li className={recipe.navItemRoot()}>
+            <Link href={props.accountInfoUrl ?? '/account'} className={recipe.navItemLink()} onClick={() => {
+            globalStore.account.setOpen(false);
+            globalStore.account__mobile.setOpen(false);
+            globalStore.accountSettings.setCollapsed(true);
+        }}>
+              <User01Icon className={recipe.navItemIcon()}/>
+              <span className={recipe.navItemLabel()}>Account Info</span>
+              <ChevronRightIcon className={recipe.navItemIndicator()}/>
+            </Link>
+          </li>
+          <li className={recipe.navItemRoot()}>
+            <Link href={props.accountSecurityUrl ?? '/account/security'} className={recipe.navItemLink()} onClick={() => {
+            globalStore.account.setOpen(false);
+            globalStore.account__mobile.setOpen(false);
+            globalStore.accountSettings.setCollapsed(true);
+        }}>
+              <Lock01Icon className={recipe.navItemIcon()}/>
+              <span className={recipe.navItemLabel()}>Security</span>
+              <ChevronRightIcon className={recipe.navItemIndicator()}/>
+            </Link>
+          </li>
+          <li className={recipe.navItemRoot()}>
+            <Link href={props.accountVerificationUrl ?? '/account/verification'} className={recipe.navItemLink()} onClick={() => {
+            globalStore.account.setOpen(false);
+            globalStore.account__mobile.setOpen(false);
+            globalStore.accountSettings.setCollapsed(true);
+        }}>
+              <FileCheck02Icon className={recipe.navItemIcon()}/>
+              <span className={recipe.navItemLabel()}>
+                Personal Verification
+              </span>
+              <ChevronRightIcon className={recipe.navItemIndicator()}/>
+            </Link>
+          </li>
+          <li className={recipe.navItemRoot()}>
+            <Link href={props.accountPaymentMethodsUrl ?? '/account/payment-methods'} className={recipe.navItemLink()} onClick={() => {
+            globalStore.account.setOpen(false);
+            globalStore.account__mobile.setOpen(false);
+            globalStore.accountSettings.setCollapsed(true);
+        }}>
+              <CreditCard02Icon className={recipe.navItemIcon()}/>
+              <span className={recipe.navItemLabel()}>Payment Methods</span>
+              <ChevronRightIcon className={recipe.navItemIndicator()}/>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </Presence>);
+}

package/dist/components/Account/account.recipe.d.ts

@@ -1,25 +1,25 @@
-export declare const accountRecipe: import('tailwind-variants').TVReturnType<{
+export declare const accountRecipe: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import('tailwind-variants').ClassValue | {
-            nav?: import('tailwind-variants').ClassValue;
-            navItemRoot?: import('tailwind-variants').ClassValue;
-            navItemLink?: import('tailwind-variants').ClassValue;
-            navItemIcon?: import('tailwind-variants').ClassValue;
-            navItemLabel?: import('tailwind-variants').ClassValue;
-            navItemIndicator?: import('tailwind-variants').ClassValue;
-            navItemBadge?: import('tailwind-variants').ClassValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            nav?: import("tailwind-variants").ClassValue;
+            navItemRoot?: import("tailwind-variants").ClassValue;
+            navItemLink?: import("tailwind-variants").ClassValue;
+            navItemIcon?: import("tailwind-variants").ClassValue;
+            navItemLabel?: import("tailwind-variants").ClassValue;
+            navItemIndicator?: import("tailwind-variants").ClassValue;
+            navItemBadge?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import('tailwind-variants').ClassValue | {
-            nav?: import('tailwind-variants').ClassValue;
-            navItemRoot?: import('tailwind-variants').ClassValue;
-            navItemLink?: import('tailwind-variants').ClassValue;
-            navItemIcon?: import('tailwind-variants').ClassValue;
-            navItemLabel?: import('tailwind-variants').ClassValue;
-            navItemIndicator?: import('tailwind-variants').ClassValue;
-            navItemBadge?: import('tailwind-variants').ClassValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            nav?: import("tailwind-variants").ClassValue;
+            navItemRoot?: import("tailwind-variants").ClassValue;
+            navItemLink?: import("tailwind-variants").ClassValue;
+            navItemIcon?: import("tailwind-variants").ClassValue;
+            navItemLabel?: import("tailwind-variants").ClassValue;
+            navItemIndicator?: import("tailwind-variants").ClassValue;
+            navItemBadge?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -32,14 +32,14 @@ export declare const accountRecipe: import('tailwind-variants').TVReturnType<{
     navItemBadge: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import('tailwind-variants').ClassValue | {
-            nav?: import('tailwind-variants').ClassValue;
-            navItemRoot?: import('tailwind-variants').ClassValue;
-            navItemLink?: import('tailwind-variants').ClassValue;
-            navItemIcon?: import('tailwind-variants').ClassValue;
-            navItemLabel?: import('tailwind-variants').ClassValue;
-            navItemIndicator?: import('tailwind-variants').ClassValue;
-            navItemBadge?: import('tailwind-variants').ClassValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            nav?: import("tailwind-variants").ClassValue;
+            navItemRoot?: import("tailwind-variants").ClassValue;
+            navItemLink?: import("tailwind-variants").ClassValue;
+            navItemIcon?: import("tailwind-variants").ClassValue;
+            navItemLabel?: import("tailwind-variants").ClassValue;
+            navItemIndicator?: import("tailwind-variants").ClassValue;
+            navItemBadge?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -50,7 +50,7 @@ export declare const accountRecipe: import('tailwind-variants').TVReturnType<{
     navItemLabel: string;
     navItemIndicator: string;
     navItemBadge: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnType<unknown, {
     nav: string;
     navItemRoot: string;
     navItemLink: string;

package/dist/components/Account/account.recipe.js

@@ -1 +1,32 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("tailwind-variants"),e=t.tv({slots:{nav:"space-y-xl",navItemRoot:"bg-bg-primary-alt block first:rounded-t-xl last:rounded-b-xl",navItemLink:"flex w-full items-center px-xl py-xl text-left text-sm font-semibold",navItemIcon:"text-text-nav-item-button-icon size-5",navItemLabel:"ml-lg grow",navItemIndicator:"text-gray-400 text-text-quarterary-500 size-5",navItemBadge:["mr-md","flex","items-center","justify-center","border","rounded-full","h-5.5","ui-type-[warning]:min-w-6","ui-type-[warning]:text-xs","ui-type-[warning]:font-medium","ui-type-[warning]:leading-tight","ui-type-[warning]:border-utility-brand-200","ui-type-[warning]:bg-utility-brand-50","ui-type-[warning]:text-utility-brand-700","ui-type-[error]:w-5.5","ui-type-[error]:icon:size-3","ui-type-[error]:border-utility-warning-200","ui-type-[error]:bg-utility-warning-50","ui-type-[error]:text-utility-warning-500"]}});exports.accountRecipe=e;
+import { tv } from 'tailwind-variants';
+export const accountRecipe = tv({
+    slots: {
+        nav: 'space-y-xl',
+        navItemRoot: 'bg-bg-primary-alt block first:rounded-t-xl last:rounded-b-xl',
+        navItemLink: 'flex w-full items-center px-xl py-xl text-left text-sm font-semibold',
+        navItemIcon: 'text-text-nav-item-button-icon size-5',
+        navItemLabel: 'ml-lg grow',
+        navItemIndicator: 'text-gray-400 text-text-quarterary-500 size-5',
+        navItemBadge: [
+            'mr-md',
+            'flex',
+            'items-center',
+            'justify-center',
+            'border',
+            'rounded-full',
+            'h-5.5',
+            'ui-type-[warning]:min-w-6',
+            'ui-type-[warning]:text-xs',
+            'ui-type-[warning]:font-medium',
+            'ui-type-[warning]:leading-tight',
+            'ui-type-[warning]:border-utility-brand-200',
+            'ui-type-[warning]:bg-utility-brand-50',
+            'ui-type-[warning]:text-utility-brand-700',
+            'ui-type-[error]:w-5.5',
+            'ui-type-[error]:icon:size-3',
+            'ui-type-[error]:border-utility-warning-200',
+            'ui-type-[error]:bg-utility-warning-50',
+            'ui-type-[error]:text-utility-warning-500',
+        ],
+    },
+});

package/dist/components/Account/index.js

@@ -0,0 +1 @@
+export * from './Account';

package/dist/components/AccountInfo/AccountInfo.jsx

@@ -0,0 +1,113 @@
+'use client';
+import { format } from 'date-fns';
+import { noop } from 'lodash-es';
+import Image from 'next/image';
+import { useAccountQuery, useLocaleInfo, useMobileNumberParser, } from '../../client/hooks';
+import { FacebookIcon, GoogleIcon } from '../../icons';
+import avatar from '../../images/placeholder-avatar.png';
+import { Button, Field, IconButton } from '../../ui';
+export function AccountInfo(props) {
+    const localeInfo = useLocaleInfo();
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const mobileNumberParser = useMobileNumberParser();
+    return (<div className={props.className}>
+      <h2 className="text-text-secondary-700 text-sm font-semibold">
+        Profile Info
+      </h2>
+      <div className="bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border">
+        <div className="border-border-secondary border-b px-4 py-5">
+          <div className="flex items-center gap-xl">
+            <Image src={avatar} alt="" width={80} height={80} className="size-14 shrink-0 rounded-md object-cover"/>
+            <div>
+              <h3 className="text-text-secondary-700 text-lg font-semibold leading-tight">
+                {account?.name}
+              </h3>
+              <p className="text-text-tertiary-600 leading-tight">
+                {account?.emailAddress ?? account?.nickName}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-end px-xl py-lg">
+          <Button size="sm" variant="outline" fullWidth={false}>
+            Upload New Avatar
+          </Button>
+        </div>
+      </div>
+
+      <h2 className="text-text-secondary-700 mt-6 text-sm font-semibold">
+        Contact Info
+      </h2>
+
+      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
+        <Field.Root>
+          <Field.Label>Mobile Number</Field.Label>
+          <div className="relative">
+            <localeInfo.country.flag className="pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2"/>
+            <Field.Input className="pl-10.5" value={account?.mobileNumber
+            ? mobileNumberParser.format(account?.mobileNumber)
+            : ''} readOnly onChange={noop}/>
+          </div>
+        </Field.Root>
+
+        <Field.Root className="mt-6">
+          <Field.Label>Email address</Field.Label>
+          <Field.Input defaultValue={account?.emailAddress ?? ''}/>
+        </Field.Root>
+      </div>
+
+      <h2 className="text-text-secondary-700 mt-6 text-sm font-semibold">
+        Personal Data
+      </h2>
+
+      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
+        <Field.Root>
+          <Field.Label>Real name</Field.Label>
+          <Field.Input value={account?.realName ?? ''} onChange={noop} readOnly/>
+        </Field.Root>
+
+        <Field.Root className="mt-6">
+          <Field.Label>Date of birth</Field.Label>
+          <Field.Input type="date" value={account?.birthDay ? format(account.birthDay, 'yyyy-MM-dd') : ''} readOnly/>
+        </Field.Root>
+      </div>
+
+      <h2 className="text-text-secondary-700 mt-6 text-sm font-semibold">
+        Account Connections
+      </h2>
+
+      <div className="shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5">
+        <div className="flex items-center">
+          <div className="flex grow items-center gap-sm">
+            <IconButton variant="outline" colorScheme="gray">
+              <GoogleIcon className="size-6"/>
+            </IconButton>
+            <div>
+              <p className="text-sm font-medium leading-tight">Google</p>
+              <p className="text-text-secondary-700 mt-xs text-xs leading-tight">
+                Not Connected
+              </p>
+            </div>
+          </div>
+          <Button fullWidth={false}>Connect</Button>
+        </div>
+        <div className="mt-6 flex items-center">
+          <div className="flex grow items-center gap-sm">
+            <IconButton variant="outline" colorScheme="gray">
+              <FacebookIcon className="size-6"/>
+            </IconButton>
+            <div>
+              <p className="text-sm font-medium leading-tight">Facebook</p>
+              <p className="text-text-success-primary-600 mt-xs text-xs leading-tight">
+                Connected
+              </p>
+            </div>
+          </div>
+          <button className="text-button-tertiary-error-fg text-sm font-semibold">
+            Disconnect
+          </button>
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/AccountInfo/index.js

@@ -0,0 +1 @@
+export * from './AccountInfo';

package/dist/components/AccountPaymentMethods/AccountPaymentMethods.jsx

@@ -0,0 +1,3 @@
+export function AccountPaymentMethods() {
+    return null;
+}

package/dist/components/AccountPaymentMethods/index.js

@@ -0,0 +1 @@
+export * from './AccountPaymentMethods';