@kompasid/lit-web-components 0.9.52 → 0.9.54

package/src/components/kompasid-grace-period/KompasGracePeriod.ts

@@ -36,6 +36,9 @@ export class KompasGracePeriod extends LitElement {
    * property isColumn = changes how the component looks on different screen sizes
    * property isShowButton = shows or hides a subscription button
    * property isEpaper = is paywall opened in epaper page
+   * property memberhsip_channel_id = the ID of the subscription package by platform
+   * property payment_method = the payment method used by user
+   * property offering = the offering product
    * property paywall_location = the location where user encounter the paywall
    * property paywall_subscription_package = the name of the subscription package viewed by user
    * property paywall_subscription_id = the ID of the subscription package viewed by user
@@ -55,13 +58,16 @@ export class KompasGracePeriod extends LitElement {
    */
 
   @property({ type: Number }) totalGracePeriod = 0
+  @property({ type: Number }) memberhsip_channel_id = 0 // [2 5 8] itu autorenewal
+  @property({ type: String }) payment_method = '' // xendit_shopeepay, midtrans_gopay, xendit_ovo , midtrans_cc
+  @property({ type: String }) offering = '' // Q1 ... Q5, [Q5 default]
   @property({ type: Boolean }) isColumn = false
   @property({ type: Boolean }) isShowButton = true
   @property({ type: Boolean }) isEpaper = false
   @property({ type: Boolean }) isBackgroundOnContentOnly = false
   @property({ type: String }) source = 'article'
   @property({ type: String }) paywall_location = ''
-  @property({ type: String }) paywall_subscription_package = ''
+  @property({ type: String }) paywall_subscription_package = '' // kdp, kompas-one, kdp-koran
   @property({ type: Number }) paywall_subscription_id = 0
   @property({ type: Number }) paywall_subscription_price = 0
   @property({ type: Number }) paywall_position = 0
@@ -84,6 +90,9 @@ export class KompasGracePeriod extends LitElement {
   @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'
   @state() private checkoutPage = 'https://checkoutv2.kompas.id'
   @state() private tempTextEachDay = []
+  @state() private basketSize: { [key: string]: string } = {}
+  @state() private messages: { [key: string]: string } = {}
+  @state() private templateCheckout: string = ''
   @state() private tempButtonA: {
     url: string
     text: string
@@ -99,19 +108,75 @@ export class KompasGracePeriod extends LitElement {
     text: '',
   }
 
+  private isAutoRenewal() {
+    const { memberhsip_channel_id: checkAutoRenewal } = this
+    if (
+      checkAutoRenewal === 2 ||
+      checkAutoRenewal === 5 ||
+      checkAutoRenewal === 8
+    ) {
+      return true
+    }
+    return false
+  }
+
+  private isWallet() {
+    const {
+      payment_method: paymentMethod,
+      memberhsip_channel_id: checkAutoRenewal,
+    } = this
+    const isMobile = checkAutoRenewal === 5 || checkAutoRenewal === 2
+    if (paymentMethod.includes('cc')) {
+      return false
+    }
+
+    if (isMobile) {
+      return false
+    }
+
+    return true
+  }
+
   private getCountdownGracePeriod() {
-    const { totalGracePeriod } = this
-    const { maxGracePeriod } = this
-    return html`
-      <p
-        class="message-gp"
-        .innerHTML=${this.tempTextEachDay[
-          totalGracePeriod > maxGracePeriod
-            ? maxGracePeriod - 1
-            : totalGracePeriod - 1 // template maksimal 7 hari
-        ]}
-      ></p>
-    `
+    const { messages, memberhsip_channel_id: checkAutoRenewal } = this
+
+    if (!this.isAutoRenewal()) {
+      return messages.default
+    }
+
+    // 8=Autorenewal
+    // 5=Apple
+    // 2=Google
+    const isRenewal =
+      checkAutoRenewal === 8 || checkAutoRenewal === 5 || checkAutoRenewal === 2
+    const isMobile = checkAutoRenewal === 5 || checkAutoRenewal === 2
+    if (!isRenewal) {
+      return messages.default
+    }
+
+    if (isMobile) {
+      return messages.default
+    }
+
+    // if string contains cc
+    if (this.payment_method.includes('cc')) {
+      return messages.credit_card
+    }
+    return messages.ewallet
+
+    // Comment old
+    // const { totalGracePeriod } = this
+    // const { maxGracePeriod } = this
+    // return html`
+    //   <p
+    //     class="message-gp"
+    //     .innerHTML=${this.tempTextEachDay[
+    //       totalGracePeriod > maxGracePeriod
+    //         ? maxGracePeriod - 1
+    //         : totalGracePeriod - 1 // template maksimal 7 hari
+    //     ]}
+    //   ></p>
+    // `
     // comment old html
     // if (totalGracePeriod === 7) {
     //   return html`
@@ -151,27 +216,56 @@ export class KompasGracePeriod extends LitElement {
     )
   }
 
-  private redirectToBerlangganan(): void {
-    const { url = '' } = this.tempButtonB
-    this.dataLayeronPerbaruiLanggananButton()
-    this.sendGtmEvent('subscribe_button_clicked', true)
-
-    const urlComputed = url || `${this.subscriptionPage}?open_from=Grace_Period`
+  private redirectCekSaldo(): void {
+    // this.dataLayeronPerbaruiLanggananButton()
+    // this.sendGtmEvent('subscribe_button_clicked', true)
+    const urlComputed =
+      'https://kb.kompas.id/baca/berlangganan-kompas-id/langganan-kompas-id/mengapa-perpanjangan-pembaruan-langganan-otomatis-melalui-e-wallet-belum-berhasil/'
     window.open(urlComputed)
   }
 
   private redirectToCheckout(): void {
-    const { url = '' } = this.tempButtonA
-    this.dataLayeronPerbaruiLanggananButton()
-    const originHost: string = encodeURIComponent(window.location.href)
+    const {
+      paywall_subscription_package: paywallSubscriptionPackage,
+      paywall_subscription_id: paywallSubscriptionId,
+      basketSize,
+      templateCheckout,
+      offering,
+    } = this
+    const tempOffering = offering || 'Q5'
+    const tempPackageSlug = paywallSubscriptionPackage.toLowerCase()
 
+    this.dataLayeronPerbaruiLanggananButton()
     this.sendGtmEvent('subscribe_button_clicked')
 
-    const defaultPath =
-      url ||
-      `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1`
+    if (!paywallSubscriptionId) {
+      window.open(basketSize[tempOffering])
+      return
+    }
+
+    if (tempPackageSlug.includes('kdp') && !tempPackageSlug.includes('koran')) {
+      window.open(basketSize[tempOffering])
+    } else {
+      window.open(
+        templateCheckout.replace(
+          '_productid_',
+          paywallSubscriptionId.toString()
+        )
+      )
+    }
+
+    // comment old
+    // const { url = '' } = this.tempButtonA
+    // this.dataLayeronPerbaruiLanggananButton()
+    // const originHost: string = encodeURIComponent(window.location.href)
+
+    // this.sendGtmEvent('subscribe_button_clicked')
+
+    // const defaultPath =
+    //   url ||
+    //   `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1`
 
-    window.open(`${defaultPath}&referrer=${originHost}&source=${this.source}`)
+    // window.open(`${defaultPath}&referrer=${originHost}&source=${this.source}`)
   }
 
   private getGtmParams(
@@ -251,56 +345,52 @@ export class KompasGracePeriod extends LitElement {
 
     const { text: textA = '' } = this.tempButtonA
 
-    const { text: textB = '' } = this.tempButtonB
+    // const { text: textB = '' } = this.tempButtonB
 
     const wrapperColumnClass = isColumn
       ? 'rounded-lg'
-      : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'
-    const buttonColumnClass = isColumn
-      ? ''
-      : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'
+      : 'md:flex-row lg:px-8 px-4 py-4'
+    const buttonColumnClass = isColumn ? '' : 'justify-end md:flex-row'
     const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'
     const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''
     const contentBgClass = isBackgroundOnContentOnly
-      ? 'bg-orange-100 p-4 rounded-lg mb-4'
+      ? 'bg-orange-100 p-4 rounded-lg'
       : ''
 
     return html`
       <div
-        class="bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}"
+        class="bottom-0 mx-auto flex gap-4 w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}"
       >
         <div
-          class="self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}"
+          class="self-center w-full text-left text-sm text-grey-600 md:text-base ${contentBgClass}"
         >
           ${this.getCountdownGracePeriod()}
         </div>
         ${this.isShowButton
           ? html`
               <div
-                class="flex w-full flex-col gap-4 self-center ${buttonColumnClass}"
+                class="flex grow items-center flex-wrap shrink-0 gap-2 ${buttonColumnClass}"
               >
-                <button
-                  @click=${this.redirectToCheckout}
-                  class="w-full rounded-md bg-brand-1 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base"
-                >
-                  ${textA || 'Perbarui Langganan'}
-                </button>
-                <div class="md:block hidden">
-                  <button
-                    @click=${this.redirectToBerlangganan}
-                    class="bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}"
-                  >
-                    ${textB || 'Paket Lainnya'}
-                  </button>
-                </div>
-                <div class="md:hidden block">
+                <div class="max-h-10 flex flex-grow md:w-auto">
                   <button
-                    @click=${this.redirectToBerlangganan}
-                    class="bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}"
+                    @click=${this.redirectToCheckout}
+                    class="w-full rounded-md bg-brand-1 p-2 px-5 text-sm justify-center items-center font-bold text-grey-100 md:text-base"
                   >
-                    ${textB || 'Lihat Paket Lainnya'}
+                    ${textA || 'Perbarui Langganan'}
                   </button>
                 </div>
+                ${this.isWallet()
+                  ? html`
+                      <div class="w-full md:w-auto flex flex-grow max-h-10">
+                        <button
+                          @click=${this.redirectCekSaldo}
+                          class="bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}"
+                        >
+                          Cara Isi Saldo
+                        </button>
+                      </div>
+                    `
+                  : nothing}
               </div>
             `
           : nothing}
@@ -309,13 +399,23 @@ export class KompasGracePeriod extends LitElement {
   }
 
   override async connectedCallback() {
+    // New API
+    const endpointNew =
+      'https://cdn-www.kompas.id/web-component/grace-period-offering.json'
+    const responseNew = await fetch(endpointNew)
+    const resultNew = await responseNew.json()
+    this.basketSize = resultNew.basket_size_kdp
+    this.messages = resultNew.payment_method_messages
+    this.templateCheckout = resultNew.template_checkout_url
+
+    // comment old
     // Constructing the URL with parameters
-    const endpoint = `https://cdn-www.kompas.id/web-component/grace-period-paywall.json`
-    const response = await fetch(endpoint)
-    const result = await response.json()
-    this.tempTextEachDay = result.message
-    this.tempButtonA = result.buttonA
-    this.tempButtonB = result.buttonB
+    // const endpoint = `https://cdn-www.kompas.id/web-component/grace-period-paywall.json`
+    // const response = await fetch(endpoint)
+    // const result = await response.json()
+    // this.tempTextEachDay = result.message
+    // this.tempButtonA = result.buttonA
+    // this.tempButtonB = result.buttonB
 
     super.connectedCallback()
 

package/src/components/kompasid-grace-period/readme.md

@@ -11,10 +11,13 @@ Ini adalah redesign komponen _grace period_ yang digunakan pada [kompas.id](http
 | `isEpaper`                     | `is-epaper`                    |             | `boolean`               | `false`     |
 | `isShowButton`                 | `is-show-button`               |             | `boolean`               | `false`     |
 | `subscriptionId`               | `subscription-id`              |             | `string`                | `false`     |
+| `memberhsip_channel_id`        | `memberhsip_channel_id`        |             | `number`                | `0`         |
+| `payment_method`               | `payment_method`               |             | `string`                | `''`        |
+| `offering`                     | `offering`                     |             | `string`                | `''`        |
+| `paywall_subscription_id`      | `paywall_subscription_id`      |used scenario GP| `number`                | `0`         |
+| `paywall_subscription_package` | `paywall_subscription_package` |used scenario GP| `string`                | `''`        |
 | `paywall_location`             | `paywall_location`             |             | `string`                | `''`        |
 | `paywall_position`             | `paywall_position`             |             | `number`                | `0`         |
-| `paywall_subscription_id`      | `paywall_subscription_id`      |             | `number`                | `0`         |
-| `paywall_subscription_package` | `paywall_subscription_package` |             | `string`                | `''`        |
 | `paywall_subscription_price`   | `paywall_subscription_price`   |             | `number`                | `0`         |
 | `tracker_content_categories`   | `tracker_content_categories`   |             | `string`                | `''`        |
 | `tracker_content_id`           | `tracker_content_id`           |             | `string`                | `''`        |

package/src/components/kompasid-header-account/readme.md

@@ -22,6 +22,15 @@ Ini adalah komponen _header account_ yang akan di implementasi pada header
 | `totalGracePeriod` | `totalGracePeriod` | Number of grace period days calculated from the **end date of the last grace period record**. The grace period lasts **7 days**, counted from day 1 to day 7 (last day).                                                                 | `number`  | `0`     | yes      |
 | `isGracePeriod`    | `isGracePeriod`    | Boolean flag indicating whether the user is currently in a grace period. Set to `true` if the grace period array is not empty. **However**, if both active membership and grace period arrays are not empty, this value must be `false`. | `boolean` | `false` | yes      |
 | `isMembership`     | `isMembership`     | Boolean flag indicating whether the user has an active membership. Set to `true` if the active membership array is not empty.                                                                                                            | `boolean` | `false` | yes      |
+| `detailPackageUser`     | `detailPackageUser`     | Object to use detail grace period user                                                                                                          | `object` | `{}` | yes      |
+
+## Properties Detail Package User (detailPackageUser)
+Property ini di peruntukan untuk mendetilkan skenario graceperiod yang akan di tampilkan, bila object ini kosong maka akan menggunakan flow default
+| Property                     | Attribute                    | Description                                | Type      | Default | Required |
+| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------------- | -------- |
+| `offering`           | `paywall_location`           |																							| `string`  | `''`    | yes       |
+| `payment_method`           | `paywall_location`           |																							| `string`  | `''`    | yes       |
+| `memberhsip_channel_id`           | `paywall_location`           |																							| `number`  | `0`    | yes       |
 
 ## Properties Grace Period Default
 Property dapat dilihat di [Readme Grace Period](https://github.com/pt-kompas-media-nusantara/lit-web-component/tree/master/src/components/kompasid-grace-period).
@@ -30,8 +39,8 @@ Pemakaian kalo memang tidak ada perubahan, lebih baik tidak digunakan atau di ko
 | Property                     | Attribute                    | Description                                | Type      | Default | Required |
 | ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------------- | -------- |
 | `paywall_location`           | `paywall_location`           |																							| `string`  | `''`    | no       |
-| `paywall_subscription_package` | `paywall_subscription_package` |																							| `string`  | `''`    | no       |
-| `paywall_subscription_id`    | `paywall_subscription_id`    |                                            | `number`  | `0`     | no       |
+| `paywall_subscription_package` | `paywall_subscription_package` |Used for graceperiod											| `string`  | `''`    | yes       |
+| `paywall_subscription_id`    | `paywall_subscription_id`    |Used for graceperiod													| `number`  | `0`     | yes       |
 | `paywall_subscription_price` | `paywall_subscription_price` |																							| `number`  | `0`     | no       |
 | `paywall_position`           | `paywall_position`           |																							| `number`  | `0`     | no       |
 | `tracker_page_type`          | `tracker_page_type`          |																							| `string`  | `''`    | no       |
@@ -65,6 +74,7 @@ API Last Order = "https://api.kompas.cloud/order/api/v1/product/latest"
 		subscriptionUrl="https://www.kompas.id/berlangganan"
 		read_later_url="https://www.kompas.id/bacananti"
 		:paywall_subscription_id="98888"
+		paywall_subscription_package="kdp"
 		theme="primary"
 		:userData="userData"
 	/>
@@ -77,8 +87,13 @@ API Last Order = "https://api.kompas.cloud/order/api/v1/product/latest"
 		totalGracePeriod: 0
 		isGracePeriod: false
 		isMembership: false
+		detailPackageUser: {
+			memberhsip_channel_id: 0
+			payment_method: ''
+			offering: ''
+		}
 	}
 ```
 
-Update 21 07 2025 - Penggunaan yang sudah berjalan di tim terkait
+Update 05 06 2026 - Penggunaan yang sudah berjalan di tim terkait
 _Terbikin oleh tim front-end kompas.id_

package/src/components/kompasid-header-account/types.ts

@@ -1,9 +1,14 @@
+export interface detailPackage {
+  offering: string
+  payment_method: string
+  memberhsip_channel_id: number
+}
+
 export interface User {
   userName: string
   expired: string
   totalGracePeriod: number
   isGracePeriod: boolean
   isMembership: boolean
-  // updateMembership: string
-  // activeInfo: string // ga kepake dua data ini
+  detailPackageUser: detailPackage
 }

package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts

@@ -12,6 +12,13 @@ import '../kompasid-grace-period/KompasGracePeriod.js'
 export class KompasHeaderAccountProfile extends LitElement {
   static styles = [
     css`
+      .multi-line-truncate {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1; /* Number of lines to show */
+        overflow: hidden;
+      }
+
       .header-account--membership-icon {
         position: absolute;
         bottom: -2px;
@@ -70,6 +77,23 @@ export class KompasHeaderAccountProfile extends LitElement {
     return format(new Date(date), 'dd MMM yyyy', { locale: id })
   }
 
+  private handleDetailGracePeriod() {
+    const { userData } = this
+    if (userData.detailPackageUser) {
+      return {
+        memberhsip_channel_id:
+          userData.detailPackageUser.memberhsip_channel_id || 0,
+        payment_method: userData.detailPackageUser.payment_method || '',
+        offering: userData.detailPackageUser.offering || '',
+      }
+    }
+    return {
+      memberhsip_channel_id: 0,
+      payment_method: '',
+      offering: '',
+    }
+  }
+
   private renderSkeletonLoading() {
     return html`
       <div>
@@ -206,14 +230,14 @@ export class KompasHeaderAccountProfile extends LitElement {
      * Kompeni Element
      */
     const kompeniTemplate = () => html` <div
-      class="flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs max-w-[190px] font-sans leading-none"
+      class="flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs font-sans leading-none w-full"
     >
       <div class="w-5 h-5 flex items-center justify-center flex-shrink-0">
         ${unsafeSVG(getFontAwesomeIcon('fa', 'building-circle-check', 13, 10))}
       </div>
-      <p class="truncate">${this.company_name}</p>
+      <p class="break-all multi-line-truncate w-full">${this.company_name}</p>
       <div
-        class="absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block"
+        class="absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block z-10"
       >
         <div
           class="bg-grey-600 text-white text-sm font-sans p-4 rounded-lg relative leading-5"
@@ -279,6 +303,11 @@ export class KompasHeaderAccountProfile extends LitElement {
           ? html` <div class="mt-4 kompasid-grace-period">
               <kompasid-grace-period
                 totalGracePeriod=${this.userData.totalGracePeriod}
+                offering="${this.handleDetailGracePeriod().offering}"
+                memberhsip_channel_id="${this.handleDetailGracePeriod()
+                  .memberhsip_channel_id}"
+                payment_method="${this.handleDetailGracePeriod()
+                  .payment_method}"
                 isColumn="true"
                 isShowButton="true"
                 isBackgroundOnContentOnly="true"

package/tailwind/tailwind.css

@@ -972,6 +972,10 @@ video {
   height: 100vh;
 }
 
+.max-h-10 {
+  max-height: 2.5rem;
+}
+
 .max-h-40 {
   max-height: 10rem;
 }
@@ -1155,10 +1159,6 @@ video {
   max-width: 1200px;
 }
 
-.max-w-\[190px\] {
-  max-width: 190px;
-}
-
 .max-w-\[214px\] {
   max-width: 214px;
 }
@@ -1211,6 +1211,10 @@ video {
   flex-grow: 1;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1457,6 +1461,10 @@ video {
   overflow-wrap: break-word;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2563,12 +2571,6 @@ video {
     gap: 2rem;
   }
 
-  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(1rem * var(--tw-space-x-reverse));
-    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .md\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.25rem * var(--tw-space-x-reverse));

package/tailwind/tailwind.ts

@@ -979,6 +979,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 100vh;
   }
 
+  .max-h-10 {
+    max-height: 2.5rem;
+  }
+
   .max-h-40 {
     max-height: 10rem;
   }
@@ -1162,10 +1166,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     max-width: 1200px;
   }
 
-  .max-w-\\[190px\\] {
-    max-width: 190px;
-  }
-
   .max-w-\\[214px\\] {
     max-width: 214px;
   }
@@ -1218,6 +1218,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     flex-grow: 1;
   }
 
+  .grow {
+    flex-grow: 1;
+  }
+
   .rotate-180 {
     --tw-rotate: 180deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@@ -1468,6 +1472,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     overflow-wrap: break-word;
   }
 
+  .break-all {
+    word-break: break-all;
+  }
+
   .rounded {
     border-radius: 0.25rem;
   }
@@ -2586,12 +2594,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       gap: 2rem;
     }
 
-    .md\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
-      --tw-space-x-reverse: 0;
-      margin-right: calc(1rem * var(--tw-space-x-reverse));
-      margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-    }
-
     .md\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
       --tw-space-x-reverse: 0;
       margin-right: calc(1.25rem * var(--tw-space-x-reverse));