From 0e9cb20e4970acb728eaa4bd4949e3b5b7c0c0b4 Mon Sep 17 00:00:00 2001
From: Felix Habib <fhabib@seek.com.au>
Date: Wed, 11 Dec 2024 09:28:47 +1100
Subject: [PATCH] Tiles: Prevent hydration error

---
 .changeset/clever-seahorses-yell.md                    | 10 ++++++++++
 .../src/lib/components/Tiles/Tiles.tsx                 |  8 ++++----
 2 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/clever-seahorses-yell.md

diff --git a/.changeset/clever-seahorses-yell.md b/.changeset/clever-seahorses-yell.md
new file mode 100644
index 00000000000..886695c421c
--- /dev/null
+++ b/.changeset/clever-seahorses-yell.md
@@ -0,0 +1,10 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Tiles
+---
+
+**Tiles**: Optimise layout implementation to prevent hydration error.
diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx b/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx
index af3119da8cd..b36eedfcfdc 100644
--- a/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx
+++ b/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx
@@ -46,10 +46,10 @@ export const Tiles = ({
       gap={space}
       className={styles.tiles}
       style={assignInlineVars({
-        [styles.mobileColumnsVar]: String(mobileColumns),
-        [styles.tabletColumnsVar]: String(tabletColumns),
-        [styles.desktopColumnsVar]: String(desktopColumns),
-        [styles.wideColumnsVar]: String(wideColumns),
+        [styles.mobileColumnsVar]: String(mobileColumns) || undefined,
+        [styles.tabletColumnsVar]: String(tabletColumns) || undefined,
+        [styles.desktopColumnsVar]: String(desktopColumns) || undefined,
+        [styles.wideColumnsVar]: String(wideColumns) || undefined,
       })}
       {...buildDataAttributes({ data, validateRestProps: restProps })}
     >