@faststore/core 4.6.1-dev.0 → 4.7.0-dev.1

package/@generated/schema.graphql

@@ -78,6 +78,16 @@ type BusinessHour {
   closingTime: String
 }
 
+"""
+Whether a saved card is personally owned by the buyer or shared by their
+Organization/Contract. Resolved server-side by the Saved-cards service from
+the buyer's `useAdHocCard` role — never inferred client-side.
+"""
+enum CardOrigin {
+  personal
+  shared
+}
+
 """Commercial Authorization dimension status."""
 type CommercialAuthorizationDimensionStatus {
   """Dimension status ID."""
@@ -928,6 +938,17 @@ type Query {
     """Identifier for the order."""
     orderId: String!
   ): UserOrderResult @auth @cacheControl(scope: "private", sMaxAge: 300, staleWhileRevalidate: 3600)
+  """Returns the list of saved credit cards for the current user."""
+  listCreditCards: SavedCardListResult @auth @cacheControl(scope: "private", sMaxAge: 300, staleWhileRevalidate: 3600)
+  """
+  Whether the current user holds the ad-hoc card platform permission, which
+  gates personal card management for Unit/Contract-affiliated buyers.
+  
+  Resolved from the user's roles by License Manager — it is not a session token
+  claim. Fails open (`true`) when the permission service is unreachable, so an
+  outage never locks buyers out of their own cards.
+  """
+  hasAdHocCardAccess: Boolean! @auth @cacheControl(scope: "private", sMaxAge: 60, staleWhileRevalidate: 300)
   """Returns the list of Orders that the User can view."""
   listUserOrders(
     """Page number of the list of orders."""
@@ -1025,6 +1046,41 @@ type SKUSpecificationValue {
   originalName: String
 }
 
+"""A saved payment card returned by the Saved-cards service."""
+type SavedCard {
+  """Account identifier that owns the card."""
+  accountId: String
+  """First digits of the card (BIN)."""
+  bin: String
+  """Masked card number, per PCI display rules."""
+  cardNumber: String
+  """
+  Buyer- or admin-assigned nickname for the card (e.g. "Team lunch card"), when
+  the Saved-cards service has one on file. Absent for most cards — callers
+  should fall back to `paymentSystemName` for display.
+  """
+  cardLabel: String
+  """Numeric payment system identifier."""
+  paymentSystem: String
+  """Human-readable payment system name (e.g. Visa, Mastercard)."""
+  paymentSystemName: String
+  """Whether this card is the account default."""
+  isDefault: Boolean
+  """Whether this card is active."""
+  isActive: Boolean
+  """
+  Whether this card is personally owned by the buyer or shared by their
+  Organization/Contract.
+  """
+  origin: CardOrigin!
+}
+
+"""Result of listing the current user's saved credit cards."""
+type SavedCardListResult {
+  """The list of saved credit cards."""
+  list: [SavedCard!]
+}
+
 """Search result."""
 type SearchMetadata {
   """Indicates if the search term was misspelled."""

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.7.0-dev.1](https://github.com/vtex/faststore/compare/v4.7.0-dev.0...v4.7.0-dev.1) (2026-08-24)
+
+**Note:** Version bump only for package @faststore/core
+
+# [4.7.0-dev.0](https://github.com/vtex/faststore/compare/v4.6.1-dev.0...v4.7.0-dev.0) (2026-08-24)
+
+### Features
+
+- My Account Cards — Personal + Shared listing ([#3443](https://github.com/vtex/faststore/issues/3443)) ([6dded69](https://github.com/vtex/faststore/commit/6dded6905ed5bbf5c7fe71cfc106abf95c816888)), closes [vtex/faststore-dx-spec-kit#24](https://github.com/vtex/faststore-dx-spec-kit/issues/24)
+
 ## [4.6.1-dev.0](https://github.com/vtex/faststore/compare/v4.6.0...v4.6.1-dev.0) (2026-08-18)
 
 **Note:** Version bump only for package @faststore/core

package/cms/faststore/my-account/components/cms_component__accountlistcards.jsonc

@@ -0,0 +1,90 @@
+{
+  "$extends": ["#/$defs/base-component"],
+  "$componentKey": "AccountListCards",
+  "$componentTitle": "Account List Cards",
+  "title": "Account List Cards",
+  "description": "Cards list section for My Account (Personal + Shared)",
+  "type": "object",
+  "properties": {
+    "pageTitle": {
+      "type": "string",
+      "title": "Page Title",
+      "default": "Cards"
+    },
+    "personalTabLabel": {
+      "type": "string",
+      "title": "Personal Tab Label",
+      "default": "Personal"
+    },
+    "sharedTabLabel": {
+      "type": "string",
+      "title": "Shared Tab Label",
+      "default": "Shared"
+    },
+    "searchPlaceholder": {
+      "type": "string",
+      "title": "Search Placeholder",
+      "default": "Search"
+    },
+    "paginationOfLabel": {
+      "type": "string",
+      "title": "Pagination Of Label",
+      "default": "of"
+    },
+    "previousPageLabel": {
+      "type": "string",
+      "title": "Previous Page Label",
+      "default": "Previous Page"
+    },
+    "nextPageLabel": {
+      "type": "string",
+      "title": "Next Page Label",
+      "default": "Next Page"
+    },
+    "noPersonalCardsLabel": {
+      "type": "string",
+      "title": "No Personal Cards Label",
+      "default": "You don't have any cards"
+    },
+    "noSharedCardsLabel": {
+      "type": "string",
+      "title": "No Shared Cards Label",
+      "default": "Your organization has no shared cards"
+    },
+    "noResultsLabel": {
+      "type": "string",
+      "title": "No Results Label",
+      "default": "No results found"
+    },
+    "errorTitleLabel": {
+      "type": "string",
+      "title": "Error Title Label",
+      "default": "We couldn't load your cards"
+    },
+    "tryAgainLabel": {
+      "type": "string",
+      "title": "Try Again Label",
+      "default": "Try again"
+    },
+    "sharedCardsTooltipLabel": {
+      "type": "string",
+      "title": "Shared Cards Tooltip Label",
+      "default": "These cards are shared by the organization you belong to. Changes can only be made by the administrator."
+    },
+    "defaultCardLabel": {
+      "type": "string",
+      "title": "Default Card Label",
+      "default": "Default"
+    },
+    "genericCardLabel": {
+      "type": "string",
+      "title": "Generic Card Label",
+      "description": "Shown in place of the brand name when the service doesn't return one.",
+      "default": "Card"
+    }
+  },
+  "readOnly": false,
+  "writeOnly": false,
+  "deprecated": false,
+  "$abstract": false
+}

package/cms/faststore/my-account/pages/cms_content_type__myaccountcards.jsonc

@@ -0,0 +1,18 @@
+{
+  "myAccountCards": {
+    "$extends": ["#/components/base-page-template"],
+    "$singleton": true,
+    "type": "object",
+    "title": "My Account — Cards",
+    "properties": {
+      "sections": {
+        "$ref": "#/$defs/$ALLOW_ALL_COMPONENTS"
+      }
+    },
+    "readOnly": false,
+    "writeOnly": false,
+    "deprecated": false,
+    "$abstract": false,
+    "identifierKeys": []
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "4.6.1-dev.0",
+  "version": "4.7.0-dev.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -71,11 +71,11 @@
     "style-loader": "^3.3.1",
     "swr": "^2.2.5",
     "use-sync-external-store": "^1.6.0",
-    "@faststore/api": "4.6.1-dev.0",
-    "@faststore/diagnostics": "4.6.1-dev.0",
-    "@faststore/lighthouse": "4.6.1-dev.0",
-    "@faststore/sdk": "4.6.1-dev.0",
-    "@faststore/ui": "4.6.1-dev.0"
+    "@faststore/api": "4.7.0-dev.1",
+    "@faststore/diagnostics": "4.7.0-dev.1",
+    "@faststore/lighthouse": "4.7.0-dev.1",
+    "@faststore/sdk": "4.7.0-dev.1",
+    "@faststore/ui": "4.7.0-dev.1"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",

package/public/icons.svg

@@ -85,7 +85,7 @@
 
   <symbol id="House" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M151.99414,207.99263v-48.001a8,8,0,0,0-8-8h-32a8,8,0,0,0-8,8v48.001a8,8,0,0,1-7.999,8l-47.99414.00632a8,8,0,0,1-8.001-8v-92.4604a8,8,0,0,1,2.61811-5.91906l79.9945-72.73477a8,8,0,0,1,10.76339-.00036l80.0055,72.73509A8,8,0,0,1,216,115.53887V207.999a8,8,0,0,1-8.001,8l-48.00586-.00632A8,8,0,0,1,151.99414,207.99263Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
 
-  <symbol id="Info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5ZM2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.25-.75a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75V12a.75.75 0 0 1-.75-.75Zm2.438-3.375a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Z" fill="currentColor"/></symbol>
+  <symbol id="Info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5ZM2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.25-.75a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75V12a.75.75 0 0 1-.75-.75Zm2.438-3.375a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Z" fill="currentColor"/></symbol>
 
   <symbol id="List" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="128" x2="216" y2="128" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="40" y1="64" x2="216" y2="64" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="40" y1="192" x2="216" y2="192" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></symbol>
 

package/src/components/account/Layout/Layout.tsx

@@ -35,6 +35,10 @@ const Layout = ({
       })
     : menuRoutes
 
+  // Cards is never route-gated here: `useAdHocCard` only affects the
+  // Personal-tab rendering inside the page itself (spec
+  // my-account-cards-gating-plan), so it never joins
+  // ROUTES_ONLY_FOR_B2B_MEMBERS — the sidebar entry always stays visible.
   const routes = (
     isRepresentative
       ? menuItems

package/src/components/account/cards/MyAccountListCards/MyAccountListCards.tsx

@@ -0,0 +1,409 @@
+import { useRouter } from 'next/router'
+import type { KeyboardEvent, Ref } from 'react'
+import { useMemo, useRef, useState } from 'react'
+
+import {
+  Button,
+  EmptyState,
+  Icon,
+  IconButton,
+  SearchInputField,
+  Tooltip,
+} from '@faststore/ui'
+
+import AccountHeader from '../../components/Header'
+import type { MyAccountListCardsSectionLabels } from './myAccountListCardsLabels'
+import { resolveMyAccountListCardsLabels } from './myAccountListCardsLabels'
+import styles from './styles.module.scss'
+
+export type SavedCardItem = {
+  accountId?: string | null
+  bin?: string | null
+  cardNumber?: string | null
+  cardLabel?: string | null
+  paymentSystem?: string | null
+  paymentSystemName?: string | null
+  isDefault?: boolean | null
+  isActive?: boolean | null
+}
+
+export type CardsTabVariant = 'personal' | 'shared'
+
+export type MyAccountListCardsProps = {
+  personalCards: SavedCardItem[]
+  sharedCards: SavedCardItem[]
+  /** Whether the buyer has an Organizational Unit association — gates the Shared tab (FR-5). */
+  hasOrgAssociation: boolean
+  /**
+   * Whether the buyer can view/manage personal cards — gates the Personal tab
+   * (spec my-account-cards-gating-plan). Independent of route access, which
+   * is never gated.
+   */
+  canViewPersonalCards: boolean
+  /** Whether either list failed to load — renders the error state instead of the grid (US-5). */
+  hasError?: boolean
+  labels?: MyAccountListCardsSectionLabels
+}
+
+const PAGE_SIZE = 25
+const PERSONAL_TAB_ID = 'fs-list-cards-tab-personal'
+const SHARED_TAB_ID = 'fs-list-cards-tab-shared'
+const PANEL_ID = 'fs-list-cards-panel'
+
+function cardKey(card: SavedCardItem, index: number) {
+  return card.accountId ? `${card.accountId}-${index}` : `card-${index}`
+}
+
+function matchesSearch(card: SavedCardItem, search: string) {
+  if (!search) return true
+
+  const needle = search.trim().toLowerCase()
+
+  return (
+    card.cardLabel?.toLowerCase().includes(needle) ||
+    card.paymentSystemName?.toLowerCase().includes(needle) ||
+    card.cardNumber?.toLowerCase().includes(needle) ||
+    false
+  )
+}
+
+// The buyer's own nickname for the card takes precedence over the brand name
+// — it's the whole point of setting one. Falls back to the brand name, then
+// a generic label when the service has neither on file.
+function getCardLabel(card: SavedCardItem, genericLabel: string) {
+  return card.cardLabel ?? card.paymentSystemName ?? genericLabel
+}
+
+// Maps the payment system name from the Saved-cards service to one of the
+// brand icons available in this app's icon sprite (public/icons.svg). Falls
+// back to a generic "Bag" icon for brands without a dedicated symbol.
+const BRAND_ICON_BY_NAME: Record<string, string> = {
+  visa: 'Visa',
+  mastercard: 'Mastercard',
+  amex: 'Amex',
+  'american express': 'Amex',
+  elo: 'EloCard',
+  diners: 'Diners',
+  'diners club': 'Diners',
+  hipercard: 'Hipercard',
+}
+
+function getBrandIconName(card: SavedCardItem) {
+  const name = card.paymentSystemName?.toLowerCase().trim() ?? ''
+  return BRAND_ICON_BY_NAME[name] ?? 'Bag'
+}
+
+type TabsHeaderProps = {
+  sharedOnly: boolean
+  isShared: boolean
+  hasOrgAssociation: boolean
+  labels: Required<MyAccountListCardsSectionLabels>
+  personalTabRef: Ref<HTMLButtonElement>
+  sharedTabRef: Ref<HTMLButtonElement>
+  onTabChange: (tab: CardsTabVariant) => void
+  onTabKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void
+}
+
+// Extracted so the tab-vs-shared-only branching doesn't add to the main
+// component's cognitive complexity budget.
+function TabsHeader({
+  sharedOnly,
+  isShared,
+  hasOrgAssociation,
+  labels,
+  personalTabRef,
+  sharedTabRef,
+  onTabChange,
+  onTabKeyDown,
+}: Readonly<TabsHeaderProps>) {
+  if (sharedOnly) {
+    return (
+      <div data-fs-list-cards-tabs-shared-only>
+        <span data-fs-list-cards-tab-label>{labels.sharedTabLabel}</span>
+        <Tooltip
+          content={labels.sharedCardsTooltipLabel}
+          placement="bottom-start"
+        >
+          <Icon name="Info" width={24} height={24} />
+        </Tooltip>
+      </div>
+    )
+  }
+
+  return (
+    <div data-fs-list-cards-tabs-row>
+      <div data-fs-list-cards-tabs role="tablist">
+        <button
+          ref={personalTabRef}
+          id={PERSONAL_TAB_ID}
+          type="button"
+          role="tab"
+          aria-selected={!isShared}
+          aria-controls={PANEL_ID}
+          tabIndex={isShared ? -1 : 0}
+          data-fs-list-cards-tab
+          data-fs-list-cards-tab-active={!isShared}
+          onClick={() => onTabChange('personal')}
+          onKeyDown={onTabKeyDown}
+        >
+          {labels.personalTabLabel}
+        </button>
+        {hasOrgAssociation && (
+          <button
+            ref={sharedTabRef}
+            id={SHARED_TAB_ID}
+            type="button"
+            role="tab"
+            aria-selected={isShared}
+            aria-controls={PANEL_ID}
+            tabIndex={isShared ? 0 : -1}
+            data-fs-list-cards-tab
+            data-fs-list-cards-tab-active={isShared}
+            onClick={() => onTabChange('shared')}
+            onKeyDown={onTabKeyDown}
+          >
+            {labels.sharedTabLabel}
+          </button>
+        )}
+      </div>
+      {isShared && hasOrgAssociation && (
+        <Tooltip
+          content={labels.sharedCardsTooltipLabel}
+          placement="bottom-start"
+        >
+          <Icon name="Info" width={24} height={24} />
+        </Tooltip>
+      )}
+    </div>
+  )
+}
+
+type CardsGridProps = {
+  cards: SavedCardItem[]
+  labels: Required<MyAccountListCardsSectionLabels>
+}
+
+// Extracted so the .map callback's branching doesn't nest inside the main
+// component's cognitive complexity budget.
+function CardsGrid({ cards, labels }: Readonly<CardsGridProps>) {
+  return (
+    <div data-fs-list-cards-grid>
+      {cards.map((card, index) => (
+        <div key={cardKey(card, index)} data-fs-list-cards-item>
+          <div data-fs-list-cards-item-brand>
+            <Icon name={getBrandIconName(card)} width={32} height={32} />
+          </div>
+          <div data-fs-list-cards-item-label>
+            {getCardLabel(card, labels.genericCardLabel)}
+            {card.isDefault && (
+              <span data-fs-list-cards-item-default-badge>
+                {labels.defaultCardLabel}
+              </span>
+            )}
+          </div>
+          <div data-fs-list-cards-item-number>{card.cardNumber}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+type PanelBodyProps = {
+  hasError: boolean
+  total: number
+  search: string
+  noCardsLabel: string
+  pageCards: SavedCardItem[]
+  labels: Required<MyAccountListCardsSectionLabels>
+  onRetry: () => void
+}
+
+// Extracted so the error/empty/grid three-way branching doesn't nest inside
+// the main component's cognitive complexity budget.
+function PanelBody({
+  hasError,
+  total,
+  search,
+  noCardsLabel,
+  pageCards,
+  labels,
+  onRetry,
+}: Readonly<PanelBodyProps>) {
+  if (hasError) {
+    return (
+      <EmptyState
+        testId="fs-list-cards-error"
+        titleIcon={<Icon name="Warning" width={56} height={56} weight="thin" />}
+        title={labels.errorTitleLabel}
+        bkgColor="light"
+      >
+        <Button data-fs-list-cards-retry variant="secondary" onClick={onRetry}>
+          {labels.tryAgainLabel}
+        </Button>
+      </EmptyState>
+    )
+  }
+
+  if (total === 0) {
+    return (
+      <EmptyState
+        testId="fs-list-cards-empty"
+        titleIcon={
+          <Icon
+            name={search ? 'MagnifyingGlass' : 'Bag2'}
+            width={56}
+            height={56}
+            weight="thin"
+          />
+        }
+        title={search ? labels.noResultsLabel : noCardsLabel}
+        bkgColor="light"
+      />
+    )
+  }
+
+  return <CardsGrid cards={pageCards} labels={labels} />
+}
+
+export default function MyAccountListCards({
+  personalCards,
+  sharedCards,
+  hasOrgAssociation,
+  canViewPersonalCards,
+  hasError = false,
+  labels: labelsProp,
+}: Readonly<MyAccountListCardsProps>) {
+  const router = useRouter()
+  const labels = resolveMyAccountListCardsLabels(labelsProp)
+
+  // Confirmed row (spec my-account-cards-gating-plan, O1): when Personal isn't
+  // available but Shared is, no tab chrome renders — the shared list is shown
+  // directly. The other two combinations (Personal only; neither) are
+  // unconfirmed and keep the pre-existing tab-bar rendering unchanged.
+  const sharedOnly = !canViewPersonalCards && hasOrgAssociation
+
+  const [activeTab, setActiveTab] = useState<CardsTabVariant>(
+    sharedOnly ? 'shared' : 'personal'
+  )
+  const [search, setSearch] = useState('')
+  const [page, setPage] = useState(1)
+  const personalTabRef = useRef<HTMLButtonElement>(null)
+  const sharedTabRef = useRef<HTMLButtonElement>(null)
+
+  const isShared = activeTab === 'shared'
+  const allCards = isShared ? sharedCards : personalCards
+
+  const filteredCards = useMemo(
+    () => allCards.filter((card) => matchesSearch(card, search)),
+    [allCards, search]
+  )
+
+  const total = filteredCards.length
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+  const currentPage = Math.min(page, totalPages)
+  const pageCards = filteredCards.slice(
+    (currentPage - 1) * PAGE_SIZE,
+    currentPage * PAGE_SIZE
+  )
+
+  const firstIndexLabel = total === 0 ? 0 : (currentPage - 1) * PAGE_SIZE + 1
+  const lastIndexLabel = Math.min(currentPage * PAGE_SIZE, total)
+
+  const handleTabChange = (tab: CardsTabVariant) => {
+    setActiveTab(tab)
+    setSearch('')
+    setPage(1)
+  }
+
+  // Arrow-key navigation between tabs, per the WAI-ARIA tabs pattern. Only
+  // meaningful when both tabs are rendered (hasOrgAssociation); a single tab
+  // has nothing to move to.
+  const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (!hasOrgAssociation) return
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+
+    event.preventDefault()
+    const nextTab: CardsTabVariant = isShared ? 'personal' : 'shared'
+    handleTabChange(nextTab)
+    ;(nextTab === 'personal' ? personalTabRef : sharedTabRef).current?.focus()
+  }
+
+  const noCardsLabel = isShared
+    ? labels.noSharedCardsLabel
+    : labels.noPersonalCardsLabel
+
+  const activeTabId = isShared ? SHARED_TAB_ID : PERSONAL_TAB_ID
+
+  return (
+    <div className={styles.page} data-fs-list-cards>
+      <AccountHeader pageTitle={labels.pageTitle} />
+
+      <TabsHeader
+        sharedOnly={sharedOnly}
+        isShared={isShared}
+        hasOrgAssociation={hasOrgAssociation}
+        labels={labels}
+        personalTabRef={personalTabRef}
+        sharedTabRef={sharedTabRef}
+        onTabChange={handleTabChange}
+        onTabKeyDown={handleTabKeyDown}
+      />
+
+      <div
+        role={sharedOnly ? undefined : 'tabpanel'}
+        id={sharedOnly ? undefined : PANEL_ID}
+        aria-labelledby={sharedOnly ? undefined : activeTabId}
+      >
+        {!hasError && (
+          <div data-fs-list-cards-controls>
+            <div data-fs-list-cards-search-wrapper>
+              <SearchInputField
+                data-fs-list-cards-search
+                placeholder={labels.searchPlaceholder}
+                value={search}
+                onChange={(event) => {
+                  setSearch(event.target.value)
+                  setPage(1)
+                }}
+                onSubmit={() => {
+                  setPage(1)
+                }}
+              />
+            </div>
+            {total > 0 && (
+              <div data-fs-list-cards-pagination>
+                <p>{`${firstIndexLabel} — ${lastIndexLabel} ${labels.paginationOfLabel} ${total}`}</p>
+                <IconButton
+                  size="small"
+                  variant="tertiary"
+                  disabled={currentPage === 1}
+                  onClick={() => setPage((current) => current - 1)}
+                  icon={<Icon name="CaretLeft" />}
+                  aria-label={labels.previousPageLabel}
+                />
+                <IconButton
+                  size="small"
+                  variant="tertiary"
+                  disabled={currentPage === totalPages}
+                  onClick={() => setPage((current) => current + 1)}
+                  icon={<Icon name="CaretRight" />}
+                  aria-label={labels.nextPageLabel}
+                />
+              </div>
+            )}
+          </div>
+        )}
+
+        <PanelBody
+          hasError={hasError}
+          total={total}
+          search={search}
+          noCardsLabel={noCardsLabel}
+          pageCards={pageCards}
+          labels={labels}
+          onRetry={() => router.reload()}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/account/cards/MyAccountListCards/index.ts

@@ -0,0 +1,11 @@
+export { default as MyAccountListCards } from './MyAccountListCards'
+export type {
+  MyAccountListCardsProps,
+  SavedCardItem,
+  CardsTabVariant,
+} from './MyAccountListCards'
+export {
+  defaultMyAccountListCardsLabels,
+  resolveMyAccountListCardsLabels,
+} from './myAccountListCardsLabels'
+export type { MyAccountListCardsSectionLabels } from './myAccountListCardsLabels'