From 9494ecb8e7d82d560e1e8836dc9de79b3ad4a1f4 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <98550729+Cata1989@users.noreply.github.com>
Date: Fri, 21 Jun 2024 09:31:22 +0300
Subject: [PATCH] refactor(Empty State): use CSS logical properties instead of
 physical values (#1112)

---
 .../components/empty-state/bq-empty-state.tsx  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/beeq/src/components/empty-state/bq-empty-state.tsx b/packages/beeq/src/components/empty-state/bq-empty-state.tsx
index ac4f5a77a..5a71e4900 100644
--- a/packages/beeq/src/components/empty-state/bq-empty-state.tsx
+++ b/packages/beeq/src/components/empty-state/bq-empty-state.tsx
@@ -98,9 +98,9 @@ export class BqEmptyState {
       <div class="inline-flex flex-col items-center" part="wrapper">
         <div
           class={{
-            'mb-m': this.size === 'small',
-            'mb-xl': this.size === 'medium',
-            'mb-xxl': this.size === 'large',
+            'm-be-m': this.size === 'small',
+            'm-be-xl': this.size === 'medium',
+            'm-be-xxl': this.size === 'large',
           }}
           part="thumbnail"
         >
@@ -114,9 +114,9 @@ export class BqEmptyState {
             'text-m': this.size === 'small',
             'text-l': this.size === 'medium',
             'text-xxl2': this.size === 'large',
-            'mb-xs': this.size === 'small' && this.hasBody,
-            'mb-m': this.size === 'medium' && this.hasBody,
-            'mb-l': this.size === 'large' && this.hasBody,
+            'm-be-xs': this.size === 'small' && this.hasBody,
+            'm-be-m': this.size === 'medium' && this.hasBody,
+            'm-be-l': this.size === 'large' && this.hasBody,
           }}
           part="title"
         >
@@ -128,9 +128,9 @@ export class BqEmptyState {
             'text-s': this.size === 'small',
             'text-m': this.size === 'medium',
             'text-l': this.size === 'large',
-            'mb-m': this.size === 'small' && this.hasFooter,
-            'mb-l': this.size === 'medium' && this.hasFooter,
-            'mb-xl': this.size === 'large' && this.hasFooter,
+            'm-be-m': this.size === 'small' && this.hasFooter,
+            'm-be-l': this.size === 'medium' && this.hasFooter,
+            'm-be-xl': this.size === 'large' && this.hasFooter,
           }}
           ref={(div) => (this.bodyElem = div)}
           part="body"