@tribe-nest/forge 3.58.0 → 3.60.0

package/src/ui/styled/communities/CommunityUpgradeSheet.tsx

@@ -0,0 +1,137 @@
+import { useEffect } from "react";
+import { useCommunityUpgrade, type UseCommunityUpgradeOptions } from "../../headless/communities/useCommunityUpgrade";
+import { useSiteConfig } from "../../../data/queries/useWebsite";
+import { useForgeT } from "../../../i18n";
+import { usePaymentRenderer } from "../../payment/ForgePaymentProvider";
+import { formatCurrency } from "../../format/useFormatCurrency";
+import { Loading } from "../Loading";
+import { PaystackPayButton } from "../PaystackPayButton";
+import { CommunitySheet, useCommunityStyles } from "./shared";
+
+export interface CommunityUpgradeSheetProps extends UseCommunityUpgradeOptions {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * The upgrade sheet: only the tiers above the member's current one. On Stripe
+ * one tap moves the saved subscription with a prorated charge; on Paystack the
+ * sheet says the card is collected again BEFORE the fan confirms. Every locked
+ * item's "Unlock with {tier}" opens this with that tier chosen. Built on
+ * `useCommunityUpgrade`.
+ */
+export function CommunityUpgradeSheet({ open, onOpenChange, ...options }: CommunityUpgradeSheetProps) {
+  const tr = useForgeT();
+  const { button, ghostButton, card, muted, errorText, t } = useCommunityStyles();
+  const renderPayment = usePaymentRenderer();
+  const currency = useSiteConfig().data?.currency;
+  const upgrade = useCommunityUpgrade(options);
+  const money = (amount: number | null | undefined, code?: string) => formatCurrency(amount ?? 0, code ?? currency);
+
+  // Re-opened on a different locked item: start on that item's tier.
+  useEffect(() => {
+    if (open && options.initialTierId && upgrade.selectedTierId !== options.initialTierId) upgrade.select(options.initialTierId);
+    if (!open) upgrade.reset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, options.initialTierId]);
+
+  return (
+    <CommunitySheet
+      open={open}
+      onOpenChange={onOpenChange}
+      testId="community-upgrade-sheet"
+      title={tr("forge.community_upgrade_sheet.title")}
+      closeLabel={tr("forge.community_upgrade_sheet.aria_close")}
+    >
+      {upgrade.isLoading ? (
+        <Loading />
+      ) : upgrade.step === "choose" ? (
+        upgrade.options.length === 0 ? (
+          <p style={muted}>{tr("forge.community_upgrade_sheet.none")}</p>
+        ) : (
+          <div className="fg:flex fg:flex-col fg:gap-3">
+            {upgrade.currentTierName && (
+              <p style={muted}>{tr("forge.community_upgrade_sheet.current", { tier_name: upgrade.currentTierName })}</p>
+            )}
+            {upgrade.options.map((option) => (
+              <button
+                key={option.id}
+                type="button"
+                data-testid="community-upgrade-option"
+                onClick={() => upgrade.select(option.id)}
+                className="fg:flex fg:flex-col fg:gap-1 fg:text-left"
+                style={{ ...card, padding: 14, cursor: "pointer", font: "inherit" }}
+              >
+                <span style={{ fontWeight: 700 }}>{option.name}</span>
+                <span style={{ fontSize: 13, color: t.muted }}>
+                  {option.priceMonthly
+                    ? tr("forge.community_upgrade_sheet.price_monthly", { amount: money(option.priceMonthly) })
+                    : option.priceYearly
+                      ? tr("forge.community_upgrade_sheet.price_yearly", { amount: money(option.priceYearly) })
+                      : ""}
+                </span>
+                {!!option.tier?.benefits?.length && (
+                  <span style={{ fontSize: 13 }}>{option.tier.benefits.slice(0, 3).map((benefit) => benefit.title).join(", ")}</span>
+                )}
+              </button>
+            ))}
+          </div>
+        )
+      ) : upgrade.step === "confirm" ? (
+        <div className="fg:flex fg:flex-col fg:gap-3" data-testid="community-upgrade-confirm">
+          <p style={{ fontWeight: 700 }}>
+            {tr("forge.community_upgrade_sheet.unlock_with", { tier_name: upgrade.selected?.name ?? "" })}
+          </p>
+          {upgrade.previewLoading ? (
+            <Loading />
+          ) : upgrade.preview ? (
+            <p>
+              {upgrade.prorated
+                ? tr("forge.community_upgrade_sheet.charge_prorated", { amount: money(upgrade.preview.amount, upgrade.preview.currency) })
+                : tr("forge.community_upgrade_sheet.charge_now", { amount: money(upgrade.preview.amount, upgrade.preview.currency) })}
+            </p>
+          ) : null}
+          {/* What confirming will do to the card is a warning about the action, so it stays visible. */}
+          {upgrade.requiresCard && (
+            <p role="alert" data-testid="community-upgrade-requires-card" style={{ fontWeight: 600 }}>
+              {tr("forge.community_upgrade_sheet.requires_card")}
+            </p>
+          )}
+          {upgrade.error && <p role="alert" style={errorText}>{upgrade.error}</p>}
+          <div className="fg:flex fg:gap-2">
+            <button type="button" style={ghostButton} onClick={upgrade.back}>
+              {tr("forge.community_upgrade_sheet.back")}
+            </button>
+            <button type="button" style={{ ...button, flex: 1 }} disabled={upgrade.isSubmitting} onClick={() => void upgrade.upgrade()}>
+              {upgrade.requiresCard ? tr("forge.community_upgrade_sheet.continue_to_card") : tr("forge.community_upgrade_sheet.confirm")}
+            </button>
+          </div>
+        </div>
+      ) : upgrade.step === "payment" ? (
+        <div className="fg:flex fg:flex-col fg:gap-3" data-testid="community-upgrade-payment">
+          {upgrade.isPaystack ? (
+            <PaystackPayButton onPay={upgrade.openPaystackCheckout} label={tr("forge.community_upgrade_sheet.pay")} />
+          ) : (
+            upgrade.clientSecret &&
+            renderPayment({
+              clientSecret: upgrade.clientSecret,
+              returnUrl: upgrade.returnUrl,
+              amount: upgrade.preview?.amount ?? 0,
+              currency: upgrade.preview?.currency ?? currency,
+              mode: "manual",
+              onSucceeded: upgrade.onPaymentSucceeded,
+              onFailed: () => {},
+            })
+          )}
+          {upgrade.error && <p role="alert" style={errorText}>{upgrade.error}</p>}
+        </div>
+      ) : upgrade.step === "submitting" ? (
+        <Loading />
+      ) : (
+        <p data-testid="community-upgrade-done" style={{ fontWeight: 700 }}>
+          {tr("forge.community_upgrade_sheet.done")}
+        </p>
+      )}
+    </CommunitySheet>
+  );
+}

package/src/ui/styled/communities/MyMembershipsList.tsx

@@ -0,0 +1,89 @@
+import type { CSSProperties } from "react";
+import { useMyMemberships } from "../../headless/communities/useMyMemberships";
+import { getMembershipStatusMessage } from "../../../utils/membershipAccess";
+import { useForgeLocale, useForgeT } from "../../../i18n";
+import { useAmountFormatter } from "../../format/useFormatCurrency";
+import { Loading } from "../Loading";
+import { Pill, shortDate, useCommunityStyles } from "./shared";
+
+export interface MyMembershipsListProps {
+  /** SPA navigation adapter for "Open community". Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  /** Format an amount in a currency. Defaults to the runtime currency formatter. */
+  formatAmount?: (amount: number, currencyCode?: string) => string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Every membership the fan holds with this creator, one card per community,
+ * for the account page. Managing one (billing, cancel, downgrade) happens
+ * inside its community, so each card links there. Built on `useMyMemberships`.
+ */
+export function MyMembershipsList({ navigate, formatAmount, className, style }: MyMembershipsListProps) {
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const { t, card, ghostButton, muted } = useCommunityStyles();
+  const fmt = useAmountFormatter(formatAmount);
+  const { memberships, isLoading } = useMyMemberships();
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+
+  if (isLoading) return <Loading />;
+  if (memberships.length === 0) {
+    return (
+      <p className={className} data-testid="my-memberships-empty" style={{ ...muted, ...style }}>
+        {tr("forge.my_memberships_list.empty")}
+      </p>
+    );
+  }
+
+  return (
+    <ul
+      className={className}
+      data-testid="my-memberships"
+      style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12, ...style }}
+    >
+      {memberships.map((membership) => {
+        const message = getMembershipStatusMessage(membership.access);
+        const periodEnd = shortDate(membership.periodEnd, locale);
+        return (
+          <li key={membership.id} data-testid="my-membership" className="fg:flex fg:flex-col fg:gap-2 fg:sm:flex-row fg:sm:items-center fg:sm:justify-between" style={card}>
+            <div className="fg:min-w-0">
+              <p style={{ fontWeight: 700 }}>{membership.community.name}</p>
+              <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2" style={{ marginTop: 4 }}>
+                {membership.tierName && <Pill>{membership.tierName}</Pill>}
+                <span style={{ fontSize: 13, fontWeight: message.tone === "warning" ? 700 : 400, color: message.tone === "warning" ? t.primary : t.muted }}>
+                  {message.label}
+                </span>
+              </div>
+              {!!membership.amount && (
+                <p style={{ ...muted, marginTop: 4 }}>
+                  {tr("forge.my_memberships_list.price", {
+                    amount: fmt(membership.amount, membership.currency ?? undefined),
+                    cycle: membership.billingCycle === "year" ? tr("forge.my_memberships_list.cycle_year") : tr("forge.my_memberships_list.cycle_month"),
+                  })}
+                </p>
+              )}
+              {membership.inTrial && membership.trialEndsAt ? (
+                <p data-testid="my-membership-trial" style={{ ...muted, fontWeight: 600 }}>
+                  {tr("forge.my_memberships_list.trial_until", { date: shortDate(membership.trialEndsAt, locale) })}
+                </p>
+              ) : (
+                periodEnd && (
+                  <p style={muted}>
+                    {membership.cancelAtPeriodEnd
+                      ? tr("forge.my_memberships_list.ends_on", { date: periodEnd })
+                      : tr("forge.my_memberships_list.renews_on", { date: periodEnd })}
+                  </p>
+                )
+              )}
+            </div>
+            <button type="button" style={{ ...ghostButton, flexShrink: 0 }} onClick={() => go(membership.homePath)}>
+              {tr("forge.my_memberships_list.open")}
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/ui/styled/communities/_tests/CommunityPages.spec.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import { CommunityAbout } from "../CommunityAbout";
+import { CommunityHome } from "../CommunityHome";
+import { CommunitiesList } from "../CommunitiesList";
+import {
+  COMMUNITY,
+  account,
+  detailRoute,
+  get,
+  installAdapter,
+  meRoute,
+  restoreAdapter,
+  tier,
+  viewer,
+  wrapper,
+} from "../../../headless/_tests/communityHarness";
+
+/**
+ * The styled community pages are their headless hooks plus markup. These pin
+ * the markup's side of the contract: the About page's one button and the
+ * in-place sheet, the home header (tier badge, Upgrade, Membership), and the
+ * list linking to About pages.
+ */
+
+afterEach(restoreAdapter);
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function mount(node: React.ReactNode, opts: Parameters<typeof wrapper>[0] = {}) {
+  const Wrapper = wrapper(opts);
+  return render(
+    <Wrapper>
+      <ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>
+    </Wrapper>,
+  );
+}
+
+const free = tier({ id: "tier-free", name: "Free", benefits: [{ id: "b1", title: "The feed" }] as never });
+
+describe("CommunityAbout", () => {
+  it("shows the community, its tiers, and Join free that opens the sheet in place", async () => {
+    installAdapter([detailRoute(() => ({ tiers: [free], viewer: viewer({ state: "anonymous" }) }))]);
+    mount(<CommunityAbout />);
+    expect(await screen.findByRole("heading", { name: "Fan Club" })).toBeTruthy();
+    expect((await screen.findAllByTestId("community-about-tier"))[0].textContent).toContain("The feed");
+    const join = await screen.findByTestId("community-about-primary");
+    await waitFor(() => expect(join.textContent).toBe("Join free"));
+    fireEvent.click(join);
+    expect(await screen.findByTestId("community-join-sheet")).toBeTruthy();
+    expect(window.location.pathname).not.toContain("/i/account");
+  });
+
+  it("opens the sheet straight away on an invite", async () => {
+    installAdapter([
+      get("/public/communities/fan-club/invite", () => ({ kind: "email", state: "expired", invitedEmail: null, tier: null })),
+      detailRoute(() => ({ tiers: [free] })),
+    ]);
+    mount(<CommunityAbout invite="tok" />);
+    const sheet = await screen.findByTestId("community-join-sheet");
+    expect((await within(sheet).findByTestId("community-join-invite-problem")).textContent).toContain("expired");
+  });
+});
+
+describe("CommunityHome", () => {
+  it("renders the header with the tier badge, Upgrade and Membership, then the body", async () => {
+    installAdapter([
+      meRoute(() =>
+        viewer({
+          state: "member",
+          membership: { id: "m-1", tierId: "tier-free", tierName: "Free", status: "active", cancelAtPeriodEnd: false, currentPeriodEnd: null, pendingDowngradeTierId: null },
+          upgradeTiers: [{ id: "tier-gold", name: "Gold", priceMonthly: 20, priceYearly: null }],
+        }),
+      ),
+      detailRoute(() => ({ tiers: [free] })),
+    ]);
+    mount(
+      <CommunityHome tab="posts">
+        <p data-testid="body">feed</p>
+      </CommunityHome>,
+      { user: account() },
+    );
+    expect((await screen.findByTestId("community-home-tier-badge")).textContent).toBe("Free");
+    expect(await screen.findByTestId("community-home-upgrade")).toBeTruthy();
+    expect(screen.getByTestId("community-home-membership")).toBeTruthy();
+    expect(screen.getByTestId("body").textContent).toBe("feed");
+    fireEvent.click(screen.getByTestId("community-home-upgrade"));
+    expect(await screen.findByTestId("community-upgrade-sheet")).toBeTruthy();
+  });
+});
+
+describe("CommunitiesList", () => {
+  it("links each community to its About page", async () => {
+    installAdapter([get("/public/communities", () => [COMMUNITY])]);
+    const went: string[] = [];
+    mount(<CommunitiesList navigate={(href) => went.push(href)} />, { community: null });
+    fireEvent.click(await screen.findByTestId("community-card"));
+    expect(went).toEqual(["/i/communities/fan-club"]);
+  });
+});

package/src/ui/styled/communities/index.ts

@@ -0,0 +1,10 @@
+// Communities styled blocks. Each is a headless hook from
+// `ui/headless/communities` plus markup, and nothing else.
+export { CommunitiesList, type CommunitiesListProps } from "./CommunitiesList";
+export { CommunityAbout, type CommunityAboutProps } from "./CommunityAbout";
+export { CommunityJoinSheet, type CommunityJoinSheetProps } from "./CommunityJoinSheet";
+export { CommunityPending, type CommunityPendingProps } from "./CommunityPending";
+export { CommunityHome, type CommunityHomeProps, type CommunityHomeTab } from "./CommunityHome";
+export { CommunityUpgradeSheet, type CommunityUpgradeSheetProps } from "./CommunityUpgradeSheet";
+export { CommunityMembershipMenu, type CommunityMembershipMenuProps } from "./CommunityMembershipMenu";
+export { MyMembershipsList, type MyMembershipsListProps } from "./MyMembershipsList";

package/src/ui/styled/communities/shared.tsx

@@ -0,0 +1,149 @@
+import type { CSSProperties, ReactNode } from "react";
+import { X } from "lucide-react";
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "../../headless/dialog";
+import { useThemeTokens, type ResolvedThemeTokens } from "../../theme/ForgeThemeProvider";
+
+/** The styles every community block shares, from the theme only. */
+export function useCommunityStyles() {
+  const t = useThemeTokens();
+  const card: CSSProperties = {
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    padding: 20,
+    color: t.text,
+  };
+  const button: CSSProperties = {
+    padding: "10px 16px",
+    borderRadius: t.cornerRadius,
+    background: t.primary,
+    color: t.textPrimary,
+    border: "none",
+    fontWeight: 600,
+    cursor: "pointer",
+    fontFamily: t.fontFamily,
+  };
+  const ghostButton: CSSProperties = {
+    ...button,
+    background: "transparent",
+    color: t.text,
+    border: `1px solid ${t.border}`,
+  };
+  const input: CSSProperties = {
+    width: "100%",
+    height: 40,
+    padding: "8px 12px",
+    borderRadius: t.cornerRadius,
+    border: `1px solid ${t.border}`,
+    background: "transparent",
+    color: t.text,
+    outline: "none",
+    boxSizing: "border-box",
+    fontFamily: t.fontFamily,
+  };
+  const muted: CSSProperties = { fontSize: 13, color: t.muted };
+  const errorText: CSSProperties = { fontSize: 13, color: "#ef4444", marginTop: 8 };
+  return { t, card, button, ghostButton, input, muted, errorText };
+}
+
+/**
+ * A modal sheet on the shared dialog primitives, so it stands down while a
+ * Paystack popup is open (see `DialogRoot`). The hook that owns the flow must
+ * live in the COMPONENT that renders this, not inside `children`: a Paystack
+ * stand-down remounts the content.
+ */
+export function CommunitySheet({
+  open,
+  onOpenChange,
+  title,
+  closeLabel,
+  children,
+  testId,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  closeLabel: string;
+  children: ReactNode;
+  testId?: string;
+}) {
+  const t = useThemeTokens();
+  return (
+    <DialogRoot open={open} onOpenChange={onOpenChange}>
+      <DialogPortal>
+        <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
+        <DialogContent
+          data-testid={testId}
+          aria-describedby={undefined}
+          style={sheetStyle(t)}
+        >
+          <div className="fg:flex fg:items-center fg:justify-between fg:gap-3" style={{ marginBottom: 12 }}>
+            <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0, fontFamily: t.headingFontFamily }}>
+              {title}
+            </DialogTitle>
+            <DialogClose asChild>
+              <button
+                type="button"
+                aria-label={closeLabel}
+                style={{ background: "transparent", border: "none", color: t.text, cursor: "pointer", padding: 4 }}
+              >
+                <X size={18} />
+              </button>
+            </DialogClose>
+          </div>
+          {children}
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  );
+}
+
+function sheetStyle(t: ResolvedThemeTokens): CSSProperties {
+  return {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "min(560px, calc(100vw - 32px))",
+    maxHeight: "88vh",
+    overflowY: "auto",
+    background: t.background,
+    color: t.text,
+    borderRadius: t.cornerRadius,
+    padding: 24,
+    zIndex: 51,
+    fontFamily: t.fontFamily,
+    boxSizing: "border-box",
+  };
+}
+
+/** A small pill, e.g. the member's tier badge. */
+export function Pill({ children, testId }: { children: ReactNode; testId?: string }) {
+  const t = useThemeTokens();
+  return (
+    <span
+      data-testid={testId}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "2px 10px",
+        borderRadius: 999,
+        fontSize: 12,
+        fontWeight: 700,
+        border: `1px solid ${t.primary}`,
+        color: t.primary,
+        whiteSpace: "nowrap",
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+/** A locale-aware short date. */
+export function shortDate(value: string | null | undefined, locale: string): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleDateString(locale, { year: "numeric", month: "short", day: "numeric" });
+}

package/src/ui/styled/community/_tests/CommunityComposer.spec.tsx

@@ -7,6 +7,7 @@ import type { ReactNode } from "react";
 import { CommunityComposer, type CommunityComposerProps } from "../CommunityComposer";
 import { ForgeClientProvider } from "../../../../provider/ForgeProvider";
 import { ForgeThemeProvider, defaultForgeTheme } from "../../../theme/ForgeThemeProvider";
+import { InCommunity } from "../../../../_tests/testCommunity";
 
 /**
  * The composer's open/close behaviour, rendered for real.
@@ -40,7 +41,9 @@ function wrap(children: ReactNode) {
   return (
     <QueryClientProvider client={client}>
       <ForgeClientProvider apiUrl="http://localhost/api">
-        <ForgeThemeProvider theme={defaultForgeTheme}>{children}</ForgeThemeProvider>
+        <ForgeThemeProvider theme={defaultForgeTheme}>
+          <InCommunity>{children}</InCommunity>
+        </ForgeThemeProvider>
       </ForgeClientProvider>
     </QueryClientProvider>
   );

package/src/ui/styled/community/_tests/CommunityPostDetail.spec.tsx

@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { CommunityPostDetail } from "../CommunityPostDetail";
 import { ForgeClientProvider } from "../../../../provider/ForgeProvider";
 import { ForgeThemeProvider, defaultForgeTheme } from "../../../theme/ForgeThemeProvider";
+import { InCommunity } from "../../../../_tests/testCommunity";
 
 /**
  * The thread view has TWO composers with opposite requirements, and this file
@@ -91,7 +92,9 @@ function mountThread({ isLocked = false } = {}) {
     <QueryClientProvider client={client}>
       <ForgeClientProvider apiUrl="http://localhost/api">
         <ForgeThemeProvider theme={defaultForgeTheme}>
-          <CommunityPostDetail postId="post-1" />
+          <InCommunity>
+            <CommunityPostDetail postId="post-1" />
+          </InCommunity>
         </ForgeThemeProvider>
       </ForgeClientProvider>
     </QueryClientProvider>,

package/src/ui/styled/forge-utilities.css

@@ -161,6 +161,12 @@
   .fg\:ml-2 {
     margin-left: calc(var(--fg-spacing) * 2);
   }
+  .fg\:line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .fg\:block {
     display: block;
   }
@@ -366,6 +372,11 @@
   .fg\:gap-y-2 {
     row-gap: calc(var(--fg-spacing) * 2);
   }
+  .fg\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .fg\:overflow-hidden {
     overflow: hidden;
   }
@@ -523,6 +534,9 @@
   .fg\:text-center {
     text-align: center;
   }
+  .fg\:text-left {
+    text-align: left;
+  }
   .fg\:text-right {
     text-align: right;
   }
@@ -760,6 +774,11 @@
       width: 300px;
     }
   }
+  .fg\:md\:w-\[320px\] {
+    @media (width >= 48rem) {
+      width: 320px;
+    }
+  }
   .fg\:md\:w-\[360px\] {
     @media (width >= 48rem) {
       width: 360px;