@yatoday/astro-ui 0.18.2 → 0.18.4

package/components/Analytics/AnalyticsGTM.astro

@@ -10,7 +10,7 @@ const { id = 'GTM-XXXXXXX', defer = false } = Astro.props;
     {/* Google Tag Manager */}
     <script is:inline define:vars={{ id }}>
       (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0],
       j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
       'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
       })(window,document,'script','dataLayer',id);
@@ -23,7 +23,7 @@ const { id = 'GTM-XXXXXXX', defer = false } = Astro.props;
 {defer && (
   <script is:inline define:vars={{ id }}>
     (function() {
-      var gtmLoaded = false;
+      let gtmLoaded = false;
 
       function loadGTM() {
         if (gtmLoaded) return;
@@ -37,7 +37,7 @@ const { id = 'GTM-XXXXXXX', defer = false } = Astro.props;
 
         // Load GTM
         (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+        new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0],
         j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
         })(window,document,'script','dataLayer',id);

package/components/Analytics/AnalyticsGTMBody.astro

@@ -4,15 +4,19 @@ import { ANALYTICS } from 'vendor:config';
 const gtmId = ANALYTICS?.vendors?.googleTagManager?.id;
 ---
 
-{gtmId && (
-  <!-- Google Tag Manager (noscript) -->
-  <noscript>
-    <iframe
-      src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
-      height="0"
-      width="0"
-      style="display:none;visibility:hidden"
-    ></iframe>
-  </noscript>
-  <!-- End Google Tag Manager (noscript) -->
-)}
+{
+  gtmId && (
+    <Fragment>
+      {/* Google Tag Manager (noscript) */}
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
+          height="0"
+          width="0"
+          style="display:none;visibility:hidden"
+        />
+      </noscript>
+      {/* End Google Tag Manager (noscript) */}
+    </Fragment>
+  )
+}

package/components/Analytics/AnalyticsGoogle.astro

@@ -86,7 +86,9 @@ const attrs = partytown ? { type: 'text/partytown' } : {};
           const consent = JSON.parse(data);
           return consent.status === 'accepted';
         }
-      } catch (e) {}
+      } catch {
+        // Ignore malformed or inaccessible consent data
+      }
       return false;
     }
 

package/components/BreadcrumbsItem/BreadcrumbsItem.astro

@@ -1,7 +1,14 @@
 ---
 import type { BreadcrumbsItemProps as Props } from './types';
 
-const { href = '#', label = 'Breadcrumb', currentPage = false, hasIcon = false, class: classNames, position } = Astro.props;
+const {
+  href = '#',
+  label = 'Breadcrumb',
+  currentPage = false,
+  hasIcon = false,
+  class: classNames,
+  position,
+} = Astro.props;
 ---
 
 <li class:list={['item', classNames]} itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

package/components/Button/types.ts

@@ -10,7 +10,8 @@ export type ButtonProps = {
   icon?: string;
   class?: string;
   type?: 'button' | 'submit' | 'reset';
-} & Partial<HTMLAttributes<'a'>> & Partial<HTMLAttributes<'button'>>;
+} & Partial<HTMLAttributes<'a'>> &
+  Partial<HTMLAttributes<'button'>>;
 
 export type SvelteButtonProps = WithElementRef<HTMLButtonAttributes> &
   WithElementRef<HTMLAnchorAttributes> & {

package/components/CallToAction/CallToAction.astro

@@ -51,7 +51,7 @@ const {
                 <Fragment set:html={callToAction} />
               ) : (
                 <div class="flex w-auto">
-                  <Button {...(callToAction as Object)} class="w-full sm:mb-0" />
+                  <Button {...(callToAction as object)} class="w-full sm:mb-0" />
                 </div>
               )}
             </Fragment>

package/components/Card0/Card0.astro

@@ -1,23 +1,12 @@
 ---
-import type {Card0Props as Props} from './types';
-import {twMerge} from 'tailwind-merge';
+import type { Card0Props as Props } from './types';
+import { twMerge } from 'tailwind-merge';
 
-const {
-  badge,
-  badgeTopRight,
-  badgeBottomRight,
-  badgeBottomLeft,
-  as = 'article',
-  classes = {}
-} = Astro.props;
+const { badge, badgeTopRight, badgeBottomRight, badgeBottomLeft, as = 'article', classes = {} } = Astro.props;
 
 const WrapperTag = as;
 
-const {
-  container: containerClass = '',
-  badge: badgeClass = '',
-  badgeTopRight: badgeTopRightClass = '',
-} = classes;
+const { container: containerClass = '', badge: badgeClass = '', badgeTopRight: badgeTopRightClass = '' } = classes;
 ---
 
 <WrapperTag
@@ -27,24 +16,23 @@ const {
   )}
 >
   <!-- Default badge -->
-  {(Astro.slots.has('badge') || badge) && (
-    <div class={twMerge('absolute z-10 top-2 left-2', badgeClass)}>
-      <slot name="badge">
-        {badge && <span set:html={badge}/>}
-      </slot>
-    </div>
-  )}
+  {
+    (Astro.slots.has('badge') || badge) && (
+      <div class={twMerge('absolute z-10 top-2 left-2', badgeClass)}>
+        <slot name="badge">{badge && <span set:html={badge} />}</slot>
+      </div>
+    )
+  }
 
-  {(Astro.slots.has('badgeTopRight') || badgeTopRight) && (
-    <div class={twMerge('absolute z-10 top-2 right-2', badgeTopRightClass)}>
-      <slot name="badgeTopRight">
-        {badgeTopRight && <span set:html={badgeTopRight}/>}
-      </slot>
-    </div>
-  )}
-  
+  {
+    (Astro.slots.has('badgeTopRight') || badgeTopRight) && (
+      <div class={twMerge('absolute z-10 top-2 right-2', badgeTopRightClass)}>
+        <slot name="badgeTopRight">{badgeTopRight && <span set:html={badgeTopRight} />}</slot>
+      </div>
+    )
+  }
 
-  <slot name="image"/>
+  <slot name="image" />
 
-  <slot/>
+  <slot />
 </WrapperTag>

package/components/Card1/Card1.astro

@@ -85,18 +85,14 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
                   {(Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
                     <Fragment slot="badgeBottomRight">
                       <div class={twMerge('', classes?.badgeBottomRight)}>
-                        <slot name="badgeBottomRight">
-                          {badgeBottomRight && <span set:html={badgeBottomRight}/>}
-                        </slot>
+                        <slot name="badgeBottomRight">{badgeBottomRight && <span set:html={badgeBottomRight} />}</slot>
                       </div>
                     </Fragment>
                   )}
                   {(Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
                     <Fragment slot="badgeBottomLeft">
                       <div class={twMerge('', classes?.badgeBottomLeft)}>
-                        <slot name="badgeBottomLeft">
-                          {badgeBottomLeft && <span set:html={badgeBottomLeft}/>}
-                        </slot>
+                        <slot name="badgeBottomLeft">{badgeBottomLeft && <span set:html={badgeBottomLeft} />}</slot>
                       </div>
                     </Fragment>
                   )}
@@ -121,18 +117,14 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
                   {(Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
                     <Fragment slot="badgeBottomRight">
                       <div class={twMerge('', classes?.badgeBottomRight)}>
-                        <slot name="badgeBottomRight">
-                          {badgeBottomRight && <span set:html={badgeBottomRight}/>}
-                        </slot>
+                        <slot name="badgeBottomRight">{badgeBottomRight && <span set:html={badgeBottomRight} />}</slot>
                       </div>
                     </Fragment>
                   )}
                   {(Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
                     <Fragment slot="badgeBottomLeft">
                       <div class={twMerge('', classes?.badgeBottomLeft)}>
-                        <slot name="badgeBottomLeft">
-                          {badgeBottomLeft && <span set:html={badgeBottomLeft}/>}
-                        </slot>
+                        <slot name="badgeBottomLeft">{badgeBottomLeft && <span set:html={badgeBottomLeft} />}</slot>
                       </div>
                     </Fragment>
                   )}
@@ -156,11 +148,11 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
   <div class={twMerge('px-6 space-y-6')}>
     <!-- Title & Description -->
     <div>
-      {title && (
-        <WrapperHeaderTag class={twMerge('text-base/5 md:text-xl font-bold', titleClass)}>
-          {title}
-        </WrapperHeaderTag>
-      )}
+      {
+        title && (
+          <WrapperHeaderTag class={twMerge('text-base/5 md:text-xl font-bold', titleClass)}>{title}</WrapperHeaderTag>
+        )
+      }
 
       <div class={twMerge(title ? 'mt-1' : '', descriptionClass)}>
         <slot />
@@ -203,7 +195,7 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
           <div class={cn('flex gap-2', actionClass)}>
             {callToAction.map((action) => (
               <Fragment>
-                {typeof action === 'string' ? <Fragment set:html={action} /> : <Button {...(action as any || {})} />}
+                {typeof action === 'string' ? <Fragment set:html={action} /> : <Button {...((action as any) || {})} />}
               </Fragment>
             ))}
           </div>
@@ -213,7 +205,7 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
               <Fragment set:html={callToAction} />
             ) : (
               <div class={cn('', actionClass)}>
-                <Button {...(callToAction as Object)} />
+                <Button {...(callToAction as object)} />
               </div>
             )}
           </Fragment>

package/components/Card2/Card2.astro

@@ -77,18 +77,14 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
               {(Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
                 <Fragment slot="badgeBottomRight">
                   <div class={twMerge('', classes?.badgeBottomRight)}>
-                    <slot name="badgeBottomRight">
-                      {badgeBottomRight && <span set:html={badgeBottomRight}/>}
-                    </slot>
+                    <slot name="badgeBottomRight">{badgeBottomRight && <span set:html={badgeBottomRight} />}</slot>
                   </div>
                 </Fragment>
               )}
               {(Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
                 <Fragment slot="badgeBottomLeft">
                   <div class={twMerge('', classes?.badgeBottomLeft)}>
-                    <slot name="badgeBottomLeft">
-                      {badgeBottomLeft && <span set:html={badgeBottomLeft}/>}
-                    </slot>
+                    <slot name="badgeBottomLeft">{badgeBottomLeft && <span set:html={badgeBottomLeft} />}</slot>
                   </div>
                 </Fragment>
               )}
@@ -118,19 +114,19 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
   <!-- Content -->
   <div class={twMerge('px-6 space-y-6')}>
     <div>
-      {title && (
-        <WrapperHeaderTag class={twMerge('text-xl font-bold', titleClass)}>
-          {
-            url || callToAction?.href ? (
+      {
+        title && (
+          <WrapperHeaderTag class={twMerge('text-xl font-bold', titleClass)}>
+            {url || callToAction?.href ? (
               <a href={url || callToAction?.href || '/'} class="after:content-[''] after:inset-0 after:absolute">
                 {title}
               </a>
             ) : (
               title
-            )
-          }
-        </WrapperHeaderTag>
-      )}
+            )}
+          </WrapperHeaderTag>
+        )
+      }
 
       <div class={twMerge(title ? 'mt-2' : '', contentClass)}>
         <slot />

package/components/Card3/Card3.astro

@@ -63,7 +63,10 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
     {
       image && (
         <div
-          class={twMerge('relative w-full aspect-square overflow-hidden rounded-lg bg-gray-400 dark:bg-zinc-700', imageClass)}
+          class={twMerge(
+            'relative w-full aspect-square overflow-hidden rounded-lg bg-gray-400 dark:bg-zinc-700',
+            imageClass
+          )}
         >
           {urlForImage ? (
             <a href={urlForImage} class="group block w-full h-full">
@@ -83,18 +86,14 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
                   {(Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
                     <Fragment slot="badgeBottomRight">
                       <div class={twMerge('', classes?.badgeBottomRight)}>
-                        <slot name="badgeBottomRight">
-                          {badgeBottomRight && <span set:html={badgeBottomRight}/>}
-                        </slot>
+                        <slot name="badgeBottomRight">{badgeBottomRight && <span set:html={badgeBottomRight} />}</slot>
                       </div>
                     </Fragment>
                   )}
                   {(Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
                     <Fragment slot="badgeBottomLeft">
                       <div class={twMerge('', classes?.badgeBottomLeft)}>
-                        <slot name="badgeBottomLeft">
-                          {badgeBottomLeft && <span set:html={badgeBottomLeft}/>}
-                        </slot>
+                        <slot name="badgeBottomLeft">{badgeBottomLeft && <span set:html={badgeBottomLeft} />}</slot>
                       </div>
                     </Fragment>
                   )}
@@ -119,18 +118,14 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
                   {(Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
                     <Fragment slot="badgeBottomRight">
                       <div class={twMerge('', classes?.badgeBottomRight)}>
-                        <slot name="badgeBottomRight">
-                          {badgeBottomRight && <span set:html={badgeBottomRight}/>}
-                        </slot>
+                        <slot name="badgeBottomRight">{badgeBottomRight && <span set:html={badgeBottomRight} />}</slot>
                       </div>
                     </Fragment>
                   )}
                   {(Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
                     <Fragment slot="badgeBottomLeft">
                       <div class={twMerge('', classes?.badgeBottomLeft)}>
-                        <slot name="badgeBottomLeft">
-                          {badgeBottomLeft && <span set:html={badgeBottomLeft}/>}
-                        </slot>
+                        <slot name="badgeBottomLeft">{badgeBottomLeft && <span set:html={badgeBottomLeft} />}</slot>
                       </div>
                     </Fragment>
                   )}
@@ -145,11 +140,7 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
 
   <div class="flex items-start gap-2">
     <div>
-      {title && (
-        <WrapperHeaderTag class={cn('text-lg md:text-xl font-bold', titleClass)}>
-          {title}
-        </WrapperHeaderTag>
-      )}
+      {title && <WrapperHeaderTag class={cn('text-lg md:text-xl font-bold', titleClass)}>{title}</WrapperHeaderTag>}
 
       <div class={cn(title ? 'mt-2' : '', 'text-sm md:text-base leading-5 md:leading-6', descriptionClass)}>
         <slot />
@@ -166,7 +157,11 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
             <div class={cn('flex gap-2', actionClass)}>
               {callToAction.map((action) => (
                 <Fragment>
-                  {typeof action === 'string' ? <Fragment set:html={action} /> : <Button {...(action as any || {})} />}
+                  {typeof action === 'string' ? (
+                    <Fragment set:html={action} />
+                  ) : (
+                    <Button {...((action as any) || {})} />
+                  )}
                 </Fragment>
               ))}
             </div>
@@ -176,7 +171,7 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
                 <Fragment set:html={callToAction} />
               ) : (
                 <div class={cn('', actionClass)}>
-                  <Button {...(callToAction as Object)} />
+                  <Button {...(callToAction as object)} />
                 </div>
               )}
             </Fragment>

package/components/Card4/Card4.astro

@@ -61,7 +61,11 @@ const {
             <div class={cn('flex gap-2', actionClass)}>
               {callToAction.map((action) => (
                 <Fragment>
-                  {typeof action === 'string' ? <Fragment set:html={action} /> : <Button {...(action as any || {})} />}
+                  {typeof action === 'string' ? (
+                    <Fragment set:html={action} />
+                  ) : (
+                    <Button {...((action as any) || {})} />
+                  )}
                 </Fragment>
               ))}
             </div>
@@ -71,7 +75,7 @@ const {
                 <Fragment set:html={callToAction} />
               ) : (
                 <div class={cn('', actionClass)}>
-                  <Button {...(callToAction as Object)} />
+                  <Button {...(callToAction as object)} />
                 </div>
               )}
             </Fragment>

package/components/Card5/Card5.astro

@@ -93,6 +93,13 @@ const {
       </div>
     </div>
 
-    {callToAction && (typeof callToAction === 'string' ? <Fragment set:html={callToAction} /> : <Button {...(callToAction as any)} />)}
+    {
+      callToAction &&
+        (typeof callToAction === 'string' ? (
+          <Fragment set:html={callToAction} />
+        ) : (
+          <Button {...(callToAction as any)} />
+        ))
+    }
   </div>
 </Card0>

package/components/Card6/Card6.astro

@@ -1,10 +1,10 @@
 ---
-import type {Card6Props as Props} from './types';
-import {Icon} from "astro-icon/components";
-import {twMerge} from 'tailwind-merge';
+import type { Card6Props as Props } from './types';
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
 import Card0 from '../Card0/Card0.astro';
 import ImageGallery from '../ImageGallery/ImageGallery.astro';
-import {cn} from '../../utils';
+import { cn } from '../../utils';
 
 const {
   title = await Astro.slots.render('title'),
@@ -20,7 +20,7 @@ const {
   badgeBottomLeft = await Astro.slots.render('badgeBottomLeft'),
   widths = [800, 1600],
   size = 800,
-  sizes = '(max-width: 1600px) 800px, 1600px'
+  sizes = '(max-width: 1600px) 800px, 1600px',
 } = Astro.props;
 
 const WrapperHeaderTag = asHeader;
@@ -59,60 +59,75 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
   badgeBottomRight={badgeBottomRight}
   badgeBottomLeft={badgeBottomLeft}
   classes={{
-    container: cn('relative h-full bg-gray-200 dark:bg-zinc-700 border-transparent text-inherit justify-start py-0 @container', containerClass),
+    container: cn(
+      'relative h-full bg-gray-200 dark:bg-zinc-700 border-transparent text-inherit justify-start py-0 @container',
+      containerClass
+    ),
     badge: badgeClass,
     badgeTopRight: classes?.badgeTopRight,
   }}
 >
   <!-- Content & link -->
-  <LinkWrapperTag href={urlForImage} class={cn("flex flex-col gap-y-2 absolute top-0 right-0 bottom-0 left-0 z-10", image ? 'justify-end' : 'justify-center')}>
-    <div class={cn("p-6 @2xl:p-10 pt-8 @2xl:pt-12", contentClass, !image && 'bg-transparent')}>
-      {badge && (
-        <div class="" set:html={badge}></div>)}
+  <LinkWrapperTag
+    href={urlForImage}
+    class={cn(
+      'flex flex-col gap-y-2 absolute top-0 right-0 bottom-0 left-0 z-10',
+      image ? 'justify-end' : 'justify-center'
+    )}
+  >
+    <div class={cn('p-6 @2xl:p-10 pt-8 @2xl:pt-12', contentClass, !image && 'bg-transparent')}>
+      {badge && <div class="" set:html={badge} />}
 
-      {(Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
-        <div class={twMerge('absolute z-10 bottom-2 right-2', classes?.badgeBottomRight)}>
-          <slot name="badgeBottomRight">
-            {badgeBottomRight && <span set:html={badgeBottomRight}/>}
-          </slot>
-        </div>
-      )}
+      {
+        (Astro.slots.has('badgeBottomRight') || badgeBottomRight) && (
+          <div class={twMerge('absolute z-10 bottom-2 right-2', classes?.badgeBottomRight)}>
+            <slot name="badgeBottomRight">{badgeBottomRight && <span set:html={badgeBottomRight} />}</slot>
+          </div>
+        )
+      }
 
-      {(Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
-        <div class={twMerge('absolute z-10 bottom-2 left-2', classes?.badgeBottomLeft)}>
-          <slot name="badgeBottomLeft">
-            {badgeBottomLeft && <span set:html={badgeBottomLeft}/>}
-          </slot>
-        </div>
-      )}
+      {
+        (Astro.slots.has('badgeBottomLeft') || badgeBottomLeft) && (
+          <div class={twMerge('absolute z-10 bottom-2 left-2', classes?.badgeBottomLeft)}>
+            <slot name="badgeBottomLeft">{badgeBottomLeft && <span set:html={badgeBottomLeft} />}</slot>
+          </div>
+        )
+      }
 
-      {title && (
-        <WrapperHeaderTag
-          class={cn('font-bold text-lg @lg:text-xl @2xl:text-2xl ', urlForImage && 'group-hover:underline', titleClass)}>
-          {title}
-        </WrapperHeaderTag>
-      )}
+      {
+        title && (
+          <WrapperHeaderTag
+            class={cn(
+              'font-bold text-lg @lg:text-xl @2xl:text-2xl ',
+              urlForImage && 'group-hover:underline',
+              titleClass
+            )}
+          >
+            {title}
+          </WrapperHeaderTag>
+        )
+      }
 
       <div class={cn('text-sm @lg:text-base @2xl:text-lg', title ? 'mt-2' : '', descriptionClass)}>
-        <slot/>
+        <slot />
         {description}
       </div>
 
-      {urlForImage && (
-        <div class="size-6 overflow-hidden mt-4 ">
-          <div
-            class="grid grid-cols-2 w-12 gap-2 duration-400 transition-transform -translate-x-7 group-hover:translate-x-0">
-            <Icon name="tabler:arrow-right" class="size-6"/>
-            <Icon name="tabler:arrow-right" class="size-6"/>
+      {
+        urlForImage && (
+          <div class="size-6 overflow-hidden mt-4 ">
+            <div class="grid grid-cols-2 w-12 gap-2 duration-400 transition-transform -translate-x-7 group-hover:translate-x-0">
+              <Icon name="tabler:arrow-right" class="size-6" />
+              <Icon name="tabler:arrow-right" class="size-6" />
+            </div>
           </div>
-        </div>
-      )}
+        )
+      }
     </div>
   </LinkWrapperTag>
 
   <!-- Image -->
   <div class="relative flex w-full h-full overflow-hidden">
-
     <!--
       16/9: pb-[56%]
       4/3: pb-[75%]
@@ -122,25 +137,27 @@ const isHtmlImage = typeof image === 'string' && !Array.isArray(image);
       3/4: pb-[133%]
       9/16: pb-[177%]
     -->
-    <div class={cn("relative w-full h-auto min-h-full", aspectClass)}>
-      {image && (
-        <div class="absolute inset-0">
-          {isHtmlImage ? (
-            <Fragment set:html={image}/>
-          ) : (
-            <ImageGallery
-              image={image}
-              imageClass={cn('absolute left-0 top-0 p-0', imageClass)}
-              imageLayout={imageLayout}
-              widths={widths}
-              width={size}
-              height={size}
-              sizes={sizes}
-              hoverEffect={false}
-            />
-          )}
-        </div>
-      )}
+    <div class={cn('relative w-full h-auto min-h-full', aspectClass)}>
+      {
+        image && (
+          <div class="absolute inset-0">
+            {isHtmlImage ? (
+              <Fragment set:html={image} />
+            ) : (
+              <ImageGallery
+                image={image}
+                imageClass={cn('absolute left-0 top-0 p-0', imageClass)}
+                imageLayout={imageLayout}
+                widths={widths}
+                width={size}
+                height={size}
+                sizes={sizes}
+                hoverEffect={false}
+              />
+            )}
+          </div>
+        )
+      }
     </div>
   </div>
 </Card0>