@kompasid/lit-web-components 0.9.43 → 0.9.45

package/src/components/kompasid-paywall-body/KompasPaywallBody.ts

@@ -667,7 +667,7 @@ export class KompasIdPaywallBody extends LitElement {
       buttonContent = nothing
     }
 
-    const headerClass = `text-base flex justify-center self-center md:block md:text-xl ${buttonTextColorClass} text-center font-lora font-bold tracking-wide md:tracking-normal max-w-xs sm:max-w-lg md:w-full md:max-w-full ${
+    const headerClass = `text-base flex justify-center self-center md:block md:text-xl ${buttonTextColorClass} text-center font-lora font-bold tracking-normal max-w-xs sm:max-w-lg md:w-full md:max-w-[492px] ${
       type === 'audio' && 'sm:px-16 md:px-20'
     }`
 
@@ -684,7 +684,7 @@ export class KompasIdPaywallBody extends LitElement {
       ? html` <p
           class="text-sm md:text-base ${this.isDark
             ? 'text-white'
-            : 'text-grey-600'} font-sans mt-2 md:mt-4  text-center"
+            : 'text-grey-600'} font-sans mt-2 md:mt-4 max-w-[492px] text-center"
         >
           ${excerpt}
         </p>`
@@ -705,7 +705,7 @@ export class KompasIdPaywallBody extends LitElement {
         >
           <div>
             <div
-              class="font-bold font-sans ${buttonTextColorClass} w-full text-left"
+              class="text-sm md:text-base font-bold font-sans ${buttonTextColorClass} w-full text-left leading-tight md:leading-5"
             >
               Keuntungan Eksklusif yang Anda Dapatkan:
             </div>
@@ -857,7 +857,7 @@ export class KompasIdPaywallBody extends LitElement {
 
     const containerClass = `px-4 flex flex-wrap items-center justify-between rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 min-h-[68px]
       ${isDark ? ' bg-grey-600' : ' bg-white'}
-      ${isHighlight ? 'border border-yellow-400 mt-2' : ''} relative`
+      ${isHighlight ? 'border-2 border-yellow-400 mt-2' : ''} relative`
     const textColorClass = isDark ? 'text-dark-7' : 'text-grey-600'
 
     let buttonBgColorClass = ''
@@ -886,10 +886,10 @@ export class KompasIdPaywallBody extends LitElement {
       <div class="${containerClass}">
         <div class="flex flex-col gap-1">
           <div class="flex items-baseline">
-            <h5 class="text-base font-bold text-orange-400">
+            <h5 class="text-base font-bold text-orange-400 leading-none">
               ${formatRupiah(product.price)}
             </h5>
-            <h6 class="text-xs font-bold pl-1 ${textColorClass}">
+            <h6 class="text-xs font-bold pl-1 ${textColorClass} leading-none">
               / ${product.periode}
             </h6>
           </div>
@@ -902,7 +902,7 @@ export class KompasIdPaywallBody extends LitElement {
                           <span
                             class="${isDark
                               ? 'text-white'
-                              : 'text-grey-400'} line-through"
+                              : 'text-grey-400'} line-through leading-none"
                             >${formatRupiah(product.priceSlice)}</span
                           >
                         </div>
@@ -913,7 +913,9 @@ export class KompasIdPaywallBody extends LitElement {
                         <div
                           class="flex font-bold items-center text-xs font-sans bg-red-100 rounded p-1"
                         >
-                          <span class="text-red-500">${product.saveLabel}</span>
+                          <span class="text-red-500 leading-none"
+                            >${product.saveLabel}</span
+                          >
                         </div>
                       `
                     : nothing}
@@ -938,7 +940,7 @@ export class KompasIdPaywallBody extends LitElement {
           ? html`
               <div class="absolute -top-2 left-4">
                 <div
-                  class="rounded bg-yellow-300 px-2 h-4 items-center text-xs"
+                  class="rounded bg-yellow-300 px-2 h-4 items-center text-xs leading-none flex"
                 >
                   <b class="text-grey-600">Harga Terbaik</b>
                 </div>
@@ -1048,18 +1050,18 @@ export class KompasIdPaywallBody extends LitElement {
       class="flex md:flex-col gap-1 items-center md:items-start md:w-1/2 md:justify-center"
     >
       <div class="flex items-center gap-1 shrink-0">
-        <h5 class="text-base font-bold text-orange-400">
+        <h5 class="text-base font-bold text-orange-400 leading-none">
           ${this.packages.swgContent.introductory.price}
         </h5>
         ${this.packages.swgContent.introductory.duration
           ? html`
-              <h6 class="text-xs font-bold ${textColorClass}">
+              <h6 class="text-xs font-bold ${textColorClass} leading-none">
                 ${this.packages.swgContent.introductory.duration}
               </h6>
             `
           : nothing}
       </div>
-      <p class="text-xs flex ${textColorClass}">
+      <p class="text-xs flex ${textColorClass} leading-none">
         ${this.packages.swgContent.introductory.description}
       </p>
     </div>`

package/tailwind/tailwind.css

@@ -1113,6 +1113,10 @@ video {
   max-width: 460px;
 }
 
+.max-w-\[492px\] {
+  max-width: 492px;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
@@ -1975,6 +1979,10 @@ video {
   line-height: 1.25;
 }
 
+.tracking-normal {
+  letter-spacing: 0em;
+}
+
 .tracking-wide {
   letter-spacing: 0.025em;
 }
@@ -2366,10 +2374,6 @@ video {
     max-width: 737px;
   }
 
-  .md\:max-w-full {
-    max-width: 100%;
-  }
-
   .md\:max-w-sm {
     max-width: 24rem;
   }
@@ -2575,8 +2579,8 @@ video {
     line-height: 1.5rem;
   }
 
-  .md\:tracking-normal {
-    letter-spacing: 0em;
+  .md\:leading-5 {
+    line-height: 1.25rem;
   }
 }
 

package/tailwind/tailwind.ts

@@ -1120,6 +1120,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     max-width: 460px;
   }
 
+  .max-w-\\[492px\\] {
+    max-width: 492px;
+  }
+
   .max-w-screen-md {
     max-width: 768px;
   }
@@ -1986,6 +1990,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     line-height: 1.25;
   }
 
+  .tracking-normal {
+    letter-spacing: 0em;
+  }
+
   .tracking-wide {
     letter-spacing: 0.025em;
   }
@@ -2389,10 +2397,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       max-width: 737px;
     }
 
-    .md\\:max-w-full {
-      max-width: 100%;
-    }
-
     .md\\:max-w-sm {
       max-width: 24rem;
     }
@@ -2598,8 +2602,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       line-height: 1.5rem;
     }
 
-    .md\\:tracking-normal {
-      letter-spacing: 0em;
+    .md\\:leading-5 {
+      line-height: 1.25rem;
     }
   }