From 337045784d708e8d1b997b134f3501ee9a1f1989 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 25 Apr 2025 20:54:28 +0300
Subject: [PATCH] fix(clerk-js,types): Exclude matrix variant from the public
 api

---
 .changeset/clean-doodles-thank.md                         | 6 ++++++
 .../src/ui/components/PricingTable/PricingTable.tsx       | 4 ++--
 .../ui/components/PricingTable/PricingTableDefault.tsx    | 5 ++---
 packages/types/src/clerk.ts                               | 8 +-------
 4 files changed, 11 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/clean-doodles-thank.md

diff --git a/.changeset/clean-doodles-thank.md b/.changeset/clean-doodles-thank.md
new file mode 100644
index 00000000000..cc1e971e5c9
--- /dev/null
+++ b/.changeset/clean-doodles-thank.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Exclude matrix variant of `<PricingTable />`.
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx
index 5e62ebc2345..5aa819423b3 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx
@@ -43,13 +43,13 @@ const PricingTable = (props: __experimental_PricingTableProps) => {
 
   return (
     <>
-      {mode !== 'modal' && props.layout === 'matrix' ? (
+      {mode !== 'modal' && (props as any).layout === 'matrix' ? (
         <PricingTableMatrix
           plans={plans || []}
           planPeriod={planPeriod}
           setPlanPeriod={setPlanPeriod}
           onSelect={selectPlan}
-          highlightedPlan={props.highlightPlan}
+          highlightedPlan={(props as any).highlightPlan}
         />
       ) : (
         <PricingTableDefault
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 21609a6d3f1..7b7841bae06 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -100,9 +100,8 @@ interface CardProps {
 
 function Card(props: CardProps) {
   const { plan, planPeriod, setPlanPeriod, onSelect, props: pricingTableProps, isCompact = false } = props;
-  const isDefaultLayout = pricingTableProps.layout === 'default';
-  const ctaPosition = (isDefaultLayout && pricingTableProps.ctaPosition) || 'top';
-  const collapseFeatures = (isDefaultLayout && pricingTableProps.collapseFeatures) || false;
+  const ctaPosition = pricingTableProps.ctaPosition || 'top';
+  const collapseFeatures = pricingTableProps.collapseFeatures || false;
   const { id, slug, isDefault, features } = plan;
   const totalFeatures = features.length;
   const hasFeatures = totalFeatures > 0;
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index 6affedb10d5..0a35cc77a05 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -1561,23 +1561,17 @@ export type WaitlistProps = {
 export type WaitlistModalProps = WaitlistProps;
 
 type __experimental_PricingTableDefaultProps = {
-  layout?: 'default';
   ctaPosition?: 'top' | 'bottom';
   collapseFeatures?: boolean;
 };
 
-type __experimental_PricingTableMatrixProps = {
-  layout?: 'matrix';
-  highlightPlan?: string;
-};
-
 type __experimental_PricingTableBaseProps = {
   appearance?: PricingTableTheme;
   checkoutProps?: Pick<__experimental_CheckoutProps, 'appearance'>;
 };
 
 export type __experimental_PricingTableProps = __experimental_PricingTableBaseProps &
-  (__experimental_PricingTableDefaultProps | __experimental_PricingTableMatrixProps);
+  __experimental_PricingTableDefaultProps;
 
 export type __experimental_CheckoutProps = {
   appearance?: CheckoutTheme;