mealz-components 2.0.0-beta.3 → 2.0.0-beta.5

package/dist/store-indicator/store-indicator.min.js

@@ -1,4 +1,4 @@
-import"../assets/store-locator-DdG34z7_.js";import{N as p,D as m,k as u,m as l}from"../assets/no-shadow-element-Dckeu5Ol.js";import{t as d}from"../assets/custom-element-BhZVzxrc.js";import{n as b}from"../assets/property-B_Up5EGr.js";import"../assets/state-Dg5rn9XH.js";var h=Object.defineProperty,w=Object.getOwnPropertyDescriptor,c=(e,s,i,a)=>{for(var t=a>1?void 0:a?w(s,i):s,o=e.length-1,n;o>=0;o--)(n=e[o])&&(t=(a?n(s,i,t):n(t))||t);return a&&t&&h(s,i,t),t};let r=class extends p{constructor(){super(),this.analyticsPath="",this.subscriptions=[],this.styleURL=new URL("./store-indicator.css",import.meta.url)}connectedCallback(){super.connectedCallback(),this.setCurrentPosLabel()}disconnectedCallback(){super.disconnectedCallback(),this.subscriptions.forEach(e=>e.unsubscribe())}render(){return this.currentPosLabel?u`
+import"../assets/store-locator-m8sx3XDc.js";import{N as p,D as m,k as u,m as l}from"../assets/no-shadow-element-l9trQfcI.js";import{t as d}from"../assets/custom-element-BhZVzxrc.js";import{n as h}from"../assets/property-leIVgCvV.js";import"../assets/state-CccUMzBZ.js";var b=Object.defineProperty,w=Object.getOwnPropertyDescriptor,c=(e,s,i,a)=>{for(var t=a>1?void 0:a?w(s,i):s,o=e.length-1,n;o>=0;o--)(n=e[o])&&(t=(a?n(s,i,t):n(t))||t);return a&&t&&b(s,i,t),t};let r=class extends p{constructor(){super(),this.analyticsPath="",this.subscriptions=[],this.styleURL=new URL("./store-indicator/store-indicator.css",this.getBaseURL())}connectedCallback(){super.connectedCallback(),this.setCurrentPosLabel()}disconnectedCallback(){super.disconnectedCallback(),this.subscriptions.forEach(e=>e.unsubscribe())}render(){return this.currentPosLabel?u`
       <div class="mealz-store-indicator">
           <span class="mealz-store-indicator__pos-label mealz-ds-text weight-xl">
               ${this.currentPosLabel}
@@ -11,4 +11,4 @@ import"../assets/store-locator-DdG34z7_.js";import{N as p,D as m,k as u,m as l}f
           <span class="mealz-store-indicator__swap-pos-label mealz-ds-text size-s weight-l">Changer</span>
         </button>
       </div>
-    `:m}setCurrentPosLabel(){this.subscriptions.push(l.pos.currentPos().subscribe(e=>{e?this.currentPosLabel=e.relationships.supplier.data.attributes.name+" - "+e.attributes.name:this.currentPosLabel=" - ",this.requestUpdate()}))}openDrawer(){const e=document.querySelector("mealz-drawer-view-swapper");e&&(e.displayStoreLocator$.next(!0),this.sendLocatorDisplayEvent())}sendLocatorDisplayEvent(){l.analytics.sendEvent("locator.display",this.analyticsPath,{})}};c([b({type:String})],r.prototype,"analyticsPath",2);r=c([d("mealz-store-indicator")],r);customElements.get("mealz-store-indicator")||customElements.define("mealz-store-indicator",r);
+    `:m}setCurrentPosLabel(){this.subscriptions.push(l.pos.currentPos().subscribe(e=>{e?this.currentPosLabel=e.relationships.supplier.data.attributes.name+" - "+e.attributes.name:this.currentPosLabel=" - ",this.requestUpdate()}))}openDrawer(){const e=document.querySelector("mealz-drawer-view-swapper");e&&(e.displayStoreLocator$.next(!0),this.sendLocatorDisplayEvent())}sendLocatorDisplayEvent(){l.analytics.sendEvent("locator.display",this.analyticsPath,{})}};c([h({type:String})],r.prototype,"analyticsPath",2);r=c([d("mealz-store-indicator")],r);customElements.get("mealz-store-indicator")||customElements.define("mealz-store-indicator",r);

package/dist/store-locator-drawer/store-locator-drawer.min.js

@@ -1,6 +1,6 @@
-import{N as c,k as r,m as o}from"../assets/no-shadow-element-Dckeu5Ol.js";import{t as m}from"../assets/custom-element-BhZVzxrc.js";import{r as u}from"../assets/state-Dg5rn9XH.js";import{s as g}from"../assets/skipWhile-BpCW6MT3.js";import{s as b}from"../assets/switchMap-_eqjHrlq.js";import{m as v}from"../assets/map-CtoF0MFx.js";import"../assets/property-B_Up5EGr.js";import"../assets/OperatorSubscriber-C_ZC-4p2.js";import"../assets/innerFrom-cJ8wLVnp.js";var z=Object.defineProperty,S=Object.getOwnPropertyDescriptor,h=(e,s,n,i)=>{for(var t=i>1?void 0:i?S(s,n):s,a=e.length-1,l;a>=0;a--)(l=e[a])&&(t=(i?l(s,n,t):l(t))||t);return i&&t&&z(s,n,t),t};let d=class extends c{constructor(){super(),this.step=1,this.modalConfirmed=!1,this.steps=[{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep1.png",title:"Les recettes sont commandables en ligne !",content:r`<span class="mealz-no-supplier-onboarding__bold">Commandez</span>
+import{N as c,k as r,m as o}from"../assets/no-shadow-element-l9trQfcI.js";import{t as m}from"../assets/custom-element-BhZVzxrc.js";import{r as g}from"../assets/state-CccUMzBZ.js";import{s as u}from"../assets/skipWhile-DuMEda_n.js";import{s as b}from"../assets/switchMap-D8q0hRYH.js";import{m as v}from"../assets/map-C4rf5Jbc.js";import"../assets/property-leIVgCvV.js";import"../assets/OperatorSubscriber-EGuECN6g.js";import"../assets/innerFrom-CfKCbnvr.js";var z=Object.defineProperty,S=Object.getOwnPropertyDescriptor,h=(e,s,n,i)=>{for(var t=i>1?void 0:i?S(s,n):s,a=e.length-1,l;a>=0;a--)(l=e[a])&&(t=(i?l(s,n,t):l(t))||t);return i&&t&&z(s,n,t),t};let d=class extends c{constructor(){super(),this.step=1,this.modalConfirmed=!1,this.steps=[{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep1.png",title:"Les recettes sont commandables en ligne !",content:r`<span class="mealz-no-supplier-onboarding__bold">Commandez</span>
                     dès à présent les ingrédients de vos recettes en cliquant sur le bouton
-                    <span class="mealz-no-supplier-onboarding__bold">“Mes courses”</span>`},{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep2.png",title:"Choisissez votre drive",content:"Sélectionnez un magasin parmi les enseignes participantes et disponibles proches de vous"},{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep3.png",title:"Une recette, des produits",content:"Ajoutez les produits de votre choix dans votre panier et ajustez les quantités."},{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep4.png",title:"Commande en 1 clic",content:"Accédez à votre panier et passez votre commande dans le magasin sélectionné."}],this.analyticsPath="/onboarding",this.styleURL=new URL("./no-supplier-onboarding.css",import.meta.url)}connectedCallback(){super.connectedCallback(),this.pageview(),this.listenToModalCloseEvent()}render(){const{img:e,title:s,content:n}=this.steps[this.step-1];return r`
+                    <span class="mealz-no-supplier-onboarding__bold">“Mes courses”</span>`},{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep2.png",title:"Choisissez votre drive",content:"Sélectionnez un magasin parmi les enseignes participantes et disponibles proches de vous"},{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep3.png",title:"Une recette, des produits",content:"Ajoutez les produits de votre choix dans votre panier et ajustez les quantités."},{img:"https://storage.googleapis.com/assets.miam.tech/generic/images/8.7/noSupplierOnboardingStep4.png",title:"Commande en 1 clic",content:"Accédez à votre panier et passez votre commande dans le magasin sélectionné."}],this.analyticsPath="/onboarding",this.styleURL=new URL("./no-supplier-onboarding/no-supplier-onboarding.css",this.getBaseURL())}connectedCallback(){super.connectedCallback(),this.pageview(),this.listenToModalCloseEvent()}render(){const{img:e,title:s,content:n}=this.steps[this.step-1];return r`
       <div class="mealz-no-supplier-onboarding">
         <div class="mealz-no-supplier-onboarding__body">
           <div class="mealz-no-supplier-onboarding__content step${this.step}">
@@ -33,11 +33,11 @@ import{N as c,k as r,m as o}from"../assets/no-shadow-element-Dckeu5Ol.js";import
         class="mealz-no-supplier-onboarding__next mealz-ds-button primary ghost square${this.step===this.steps.length?"hidden":""}">
         <img src="https://storage.googleapis.com/assets.miam.tech/generic/icons/ArrowLeft_dark.svg" alt="next step">
       </button>
-    `}previousStep(){this.step=Math.max(this.step-1,1)}nextStep(){this.step=Math.min(this.step+1,this.steps.length)}onConfirm(){this.modalConfirmed=!0,this.sendConfirmEvent(),this.dispatchEvent(new CustomEvent("onboardingConfirmed",{bubbles:!0,composed:!0}))}listenToModalCloseEvent(){document.querySelector("mealz-modal").addEventListener("modalClosed",()=>{this.modalConfirmed||this.sendCloseEvent(),sessionStorage.setItem("_miam/noSupplier/onboarding","was-closed")})}pageview(){o.analytics.sendEvent("pageview",this.analyticsPath,{})}sendConfirmEvent(){o.analytics.sendEvent("onboarding.action",this.analyticsPath,{steps_completed:this.step.toString()})}sendCloseEvent(){o.analytics.sendEvent("onboarding.close",this.analyticsPath,{steps_completed:this.step.toString()})}};h([u()],d.prototype,"step",2);d=h([m("mealz-no-supplier-onboarding")],d);customElements.get("mealz-no-supplier-onboarding")||customElements.define("mealz-no-supplier-onboarding",d);var _=Object.getOwnPropertyDescriptor,f=(e,s,n,i)=>{for(var t=i>1?void 0:i?_(s,n):s,a=e.length-1,l;a>=0;a--)(l=e[a])&&(t=l(t)||t);return t};let p=class extends c{constructor(){super(...arguments),this.hostCoordinates=null,this.analyticsPath="/locator",this.subscriptions=[]}connectedCallback(){super.connectedCallback(),this.pageview(),this.listenToCloseEvent()}disconnectedCallback(){super.disconnectedCallback(),this.subscriptions.forEach(e=>e.unsubscribe())}render(){return this.shouldDisplayOnboarding()&&this.displayOnboardingModal(),r`
+    `}previousStep(){this.step=Math.max(this.step-1,1)}nextStep(){this.step=Math.min(this.step+1,this.steps.length)}onConfirm(){this.modalConfirmed=!0,this.sendConfirmEvent(),this.dispatchEvent(new CustomEvent("onboardingConfirmed",{bubbles:!0,composed:!0}))}listenToModalCloseEvent(){document.querySelector("mealz-modal").addEventListener("modalClosed",()=>{this.modalConfirmed||this.sendCloseEvent(),sessionStorage.setItem("_miam/noSupplier/onboarding","was-closed")})}pageview(){o.analytics.sendEvent("pageview",this.analyticsPath,{})}sendConfirmEvent(){o.analytics.sendEvent("onboarding.action",this.analyticsPath,{steps_completed:this.step.toString()})}sendCloseEvent(){o.analytics.sendEvent("onboarding.close",this.analyticsPath,{steps_completed:this.step.toString()})}};h([g()],d.prototype,"step",2);d=h([m("mealz-no-supplier-onboarding")],d);customElements.get("mealz-no-supplier-onboarding")||customElements.define("mealz-no-supplier-onboarding",d);var _=Object.getOwnPropertyDescriptor,f=(e,s,n,i)=>{for(var t=i>1?void 0:i?_(s,n):s,a=e.length-1,l;a>=0;a--)(l=e[a])&&(t=l(t)||t);return t};let p=class extends c{constructor(){super(...arguments),this.hostCoordinates=null,this.analyticsPath="/locator",this.subscriptions=[]}connectedCallback(){super.connectedCallback(),this.pageview(),this.listenToCloseEvent()}disconnectedCallback(){super.disconnectedCallback(),this.subscriptions.forEach(e=>e.unsubscribe())}render(){return this.shouldDisplayOnboarding()&&this.displayOnboardingModal(),r`
       <mealz-store-locator
         .show="${!0}"
         .geolocationCoordinates="${this.hostCoordinates}"
         @posIdChange=${e=>this.changePosAndSupplier(e)}
         @searchChange=${e=>this.sendSearchEvent(e)}
       ></mealz-store-locator>
-    `}shouldDisplayOnboarding(){const e=sessionStorage.getItem("_miam/noSupplier/onboarding")==="was-closed",s=document.querySelector("mealz-drawer-view-swapper");return!e&&(s==null?void 0:s.displayStoreLocator$.value)}displayOnboardingModal(){const e=document.createElement("mealz-modal");e.titleSlot=r`<span class="mealz-no-supplier-onboarding__badge mealz-ds-badge size-l">NOUVEAU !</span>`,e.contentSlot=r`<mealz-no-supplier-onboarding></mealz-no-supplier-onboarding>`,document.body.appendChild(e)}changePosAndSupplier(e){const s=o.pos.currentPos().value;if((s==null?void 0:s.id)===e.detail.posId){this.closeStoreLocator();return}this.selectedPosId=e.detail.posId,this.selectedSupplierName=e.detail.supplierName,this.changePos()}changePos(){this.subscriptions.push(o.pos.loadPos(this.selectedPosId).pipe(g(e=>!e||e.id!==this.selectedPosId),b(e=>(this.sendSelectedEvent(e),o.pos.basketLoadedForNewPos())),v(()=>(o.storeLocator.newStoreSelected(),this.closeStoreLocator()))).subscribe())}listenToCloseEvent(){document.querySelector("mealz-drawer").addEventListener("drawerClosed",()=>{this.closeStoreLocator(),this.sendCloseEvent()})}closeStoreLocator(){const e=document.querySelector("mealz-drawer-view-swapper");e&&e.displayStoreLocator$.next(!1)}isHidden(){return this.classList.contains("hidden")}pageview(){this.isHidden()||o.analytics.sendEvent("pageview",this.analyticsPath,{})}sendSelectedEvent(e){this.isHidden()||o.analytics.sendEvent("locator.select",this.analyticsPath,{pos_name:e.attributes.name,pos_id:e.id,supplier_name:this.selectedSupplierName})}sendSearchEvent(e){this.isHidden()||o.analytics.sendEvent("locator.search",this.analyticsPath,{search_term:e.detail.searchTerm,stores_found_count:e.detail.storesFoundCount.toString()})}sendCloseEvent(){this.isHidden()||o.analytics.sendEvent("locator.close",this.analyticsPath,{})}};p=f([m("mealz-store-locator-drawer")],p);customElements.get("mealz-store-locator-drawer")||customElements.define("mealz-store-locator-drawer",p);
+    `}shouldDisplayOnboarding(){const e=sessionStorage.getItem("_miam/noSupplier/onboarding")==="was-closed",s=document.querySelector("mealz-drawer-view-swapper");return!e&&(s==null?void 0:s.displayStoreLocator$.value)}displayOnboardingModal(){const e=document.createElement("mealz-modal");e.titleSlot=r`<span class="mealz-no-supplier-onboarding__badge mealz-ds-badge size-l">NOUVEAU !</span>`,e.contentSlot=r`<mealz-no-supplier-onboarding></mealz-no-supplier-onboarding>`,document.body.appendChild(e)}changePosAndSupplier(e){const s=o.pos.currentPos().value;if((s==null?void 0:s.id)===e.detail.posId){this.closeStoreLocator();return}this.selectedPosId=e.detail.posId,this.selectedSupplierName=e.detail.supplierName,this.changePos()}changePos(){this.subscriptions.push(o.pos.loadPos(this.selectedPosId).pipe(u(e=>!e||e.id!==this.selectedPosId),b(e=>(this.sendSelectedEvent(e),o.pos.basketLoadedForNewPos())),v(()=>(o.storeLocator.newStoreSelected(),this.closeStoreLocator()))).subscribe())}listenToCloseEvent(){document.querySelector("mealz-drawer").addEventListener("drawerClosed",()=>{this.closeStoreLocator(),this.sendCloseEvent()})}closeStoreLocator(){const e=document.querySelector("mealz-drawer-view-swapper");e&&e.displayStoreLocator$.next(!1)}isHidden(){return this.classList.contains("hidden")}pageview(){this.isHidden()||o.analytics.sendEvent("pageview",this.analyticsPath,{})}sendSelectedEvent(e){this.isHidden()||o.analytics.sendEvent("locator.select",this.analyticsPath,{pos_name:e.attributes.name,pos_id:e.id,supplier_name:this.selectedSupplierName})}sendSearchEvent(e){this.isHidden()||o.analytics.sendEvent("locator.search",this.analyticsPath,{search_term:e.detail.searchTerm,stores_found_count:e.detail.storesFoundCount.toString()})}sendCloseEvent(){this.isHidden()||o.analytics.sendEvent("locator.close",this.analyticsPath,{})}};p=f([m("mealz-store-locator-drawer")],p);customElements.get("mealz-store-locator-drawer")||customElements.define("mealz-store-locator-drawer",p);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mealz-components",
   "type": "module",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "main": "./dist/mealz-components.js",
   "module": "./dist/mealz-components.js",
   "scripts": {

package/dist/assets/delay-DY9ohHpd.js

@@ -1 +0,0 @@
-import{a as i}from"./async-Cf5pIG6K.js";import{t as m}from"./take-C-_8_Rq7.js";import{m as a}from"./map-CtoF0MFx.js";import{m as e}from"./mergeMap-DkeMJrVP.js";import{i as f}from"./innerFrom-cJ8wLVnp.js";import{t as p}from"./timer-FQ7WMtFD.js";function u(r){return a(function(){return r})}function s(r,t){return e(function(n,o){return f(r(n,o)).pipe(m(1),u(n))})}function l(r,t){t===void 0&&(t=i);var n=p(r,t);return s(function(){return n})}export{l as d};

package/dist/assets/empty-DzB-G1O3.js

@@ -1 +0,0 @@
-import{O as r}from"./no-shadow-element-Dckeu5Ol.js";var t=new r(function(e){return e.complete()});export{t as E};

package/dist/assets/mapOneOrManyArgs-BgYvpJCA.js

@@ -1 +0,0 @@
-import{b as n,c as p}from"./no-shadow-element-Dckeu5Ol.js";import{m as o}from"./map-CtoF0MFx.js";var t=Array.isArray;function i(a,r){return t(r)?a.apply(void 0,n([],p(r))):a(r)}function y(a){return o(function(r){return i(a,r)})}export{y as m};

package/dist/assets/merge-CfUUBPqp.js

@@ -1 +0,0 @@
-import{m as t}from"./mergeMap-DkeMJrVP.js";import{x as n}from"./no-shadow-element-Dckeu5Ol.js";import{i}from"./innerFrom-cJ8wLVnp.js";import{E as s}from"./empty-DzB-G1O3.js";import{p as f,a as p,f as g}from"./from-BJlgdPzK.js";function u(r){return r===void 0&&(r=1/0),t(n,r)}function y(){for(var r=[],e=0;e<arguments.length;e++)r[e]=arguments[e];var o=f(r),a=p(r,1/0),m=r;return m.length?m.length===1?i(m[0]):u(a)(g(m,o)):s}export{y as m};

package/dist/assets/promotion-badge-CErkYPs5.js

@@ -1,12 +0,0 @@
-import{N as c,k as n}from"./no-shadow-element-Dckeu5Ol.js";import{t as l}from"./custom-element-BhZVzxrc.js";import{n as d}from"./property-B_Up5EGr.js";import{P as u}from"./price-3QEU2vDV.js";var f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,p=(e,r,i,o)=>{for(var t=o>1?void 0:o?v(r,i):r,s=e.length-1,a;s>=0;s--)(a=e[s])&&(t=(o?a(r,i,t):a(t))||t);return o&&t&&f(r,i,t),t};let m=class extends c{constructor(){super(),this.priceService=u.getInstance(),this.styleURL=new URL("./promotion-badge.css",import.meta.url)}getPriceAmountSuffix(){var e;return(e=this.priceData.discountType)!=null&&e.endsWith("_perc")?"%":this.priceService.currencySymbol()}render(){var e;return n`
-        <div class="mealz-promotion-badge">
-            ${((e=this.priceData)==null?void 0:e.discountAmount)>0?n`
-                <div class="mealz-ds-badge mealz-promotion-badge__promotion">
-              <span class="mealz-promotion-badge__promotion-value mealz-ds-text size-s weight-l">
-                ${this.priceData.discountAmount}${this.getPriceAmountSuffix()}
-              </span>
-                    <span class="mealz-promotion-badge__promotion-text mealz-ds-text size-s weight-l">de remise immédiate</span>
-                </div>
-            `:""}
-        </div>
-    `}};p([d()],m.prototype,"priceData",2);m=p([l("mealz-promotion-badge")],m);

package/dist/assets/session-handler-BjExGUaE.js

@@ -1 +0,0 @@
-import{m as n}from"./no-shadow-element-Dckeu5Ol.js";function t(e){e&&n.user.setSessionId(e)}export{t as h};

package/dist/product-card-skeleton.css

@@ -1,44 +0,0 @@
-@import '../../../styles/skeleton.css';
-
-.mealz-product-card.skeleton {
-  .mealz-product-card__header {
-    background: var(--mealz-ds-color-skeleton, #f7f7f7);
-    height: initial;
-
-    .mealz-product-card__header-name::before {
-      content: "";
-      display: inline-block;
-    }
-  }
-
-  .mealz-product-card__content {
-    .mealz-product-card__selected-product {
-      display: flex;
-      > * {
-        margin-right: 12px;
-      }
-      .mealz-product-card__info-column {
-        flex: 1;
-        .mealz-product-card__details {
-          height: initial;
-        }
-        .mealz-product-card__details.product-fullname {
-          width: 100%;
-        }
-        .mealz-product-card__details.product-price-per-unit {
-          width: 100%;
-        }
-      }
-    }
-
-    .mealz-product-card__lower-action {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .mealz-skeleton-loader.pulse {
-        margin-bottom: 0;
-      }
-    }
-  }
-}

package/dist/product-card.css

@@ -1,208 +0,0 @@
-.mealz-product-card {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  height: 100%;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid var(--mealz-ds-color-primary-100, #e4eaec);
-  background: var(--mealz-ds-color-primary-text, #fff);
-  transition: all 0.3s;
-  position: relative;
-
-  &.added {
-    border: 1px solid var(--mealz-ds-color-primary, #24748f);
-    background: var(--mealz-ds-color-primary-text, #fff);
-  }
-
-  .mealz-product-card__header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px;
-    color: var(--mealz-ds-color-neutral-black, #0f191f);
-    background: var(--mealz-ds-color-primary-100, #e4eaec);
-    transition: all 0.3s;
-
-    > *:not(:last-child) {
-      margin-right: 8px;
-    }
-
-    &.added {
-      background: var(--mealz-ds-color-primary, #24748f);
-      color: var(--core-background-background-primary, #fff);
-    }
-
-    &.disabled {
-      background: var(--mealz-ds-color-neutral-200, #d9dde1);
-    }
-
-    &.unavailable {
-      background-color: var(--mealz-ds-color-neutral-50, #f7f8f9);
-    }
-
-    .mealz-product-card__header-quantity {
-      text-align: right;
-      white-space: nowrap;
-    }
-  }
-
-  .mealz-product-card__content {
-    padding: 12px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--mealz-ds-color-neutral-white, #fff);
-    transition: background-color 0.3s;
-
-    > *:not(:last-child) {
-      margin-bottom: 8px;
-    }
-
-    &.disabled,
-    &.unavailable {
-      justify-content: center;
-      align-items: center;
-      padding: 12px;
-      text-align: center;
-    }
-
-    &.disabled {
-      background-color: var(--mealz-ds-color-neutral-200, #d9dde1);
-    }
-
-    &.unavailable {
-      background-color: var(--mealz-ds-color-neutral-50, #f7f8f9);
-    }
-
-    .mealz-product-card__selected-product {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      height: 100%;
-
-      > *:not(:last-child) {
-        margin-right: 12px;
-      }
-
-      .mealz-product-card__picture {
-        height: 120px;
-        width: 120px;
-      }
-
-      .mealz-product-card__info-column {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-
-        .mealz-product-card__details {
-          font-size: 14px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          line-clamp: 2;
-          -webkit-box-orient: vertical;
-          color: var(--mealz-ds-color-neutral-black, #0f191f);
-
-          &.product-brand {
-            text-transform: uppercase;
-            line-height: 24px;
-          }
-
-          &.product-fullname {
-          }
-
-          &.product-price-per-unit {
-            font-size: 12px;
-          }
-        }
-
-        .mealz-product-card__link {
-          font-size: 14px;
-        }
-      }
-    }
-
-    .mealz-product-card__lower-action {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      > *:not(:last-child) {
-        margin-right: 8px;
-      }
-
-      .mealz-product-card__cta {
-        display: flex;
-        align-items: center;
-
-        > *:not(:last-child) {
-          margin-right: 12px;
-        }
-
-        .mealz-ds-button.square {
-          padding: 8px;
-          height: 40px;
-          width: 40px;
-        }
-
-        .mealz-product-card__checkbox input {
-          width: 40px;
-          height: 40px;
-          border-radius: 8px;
-        }
-
-        .mealz-product-card__loading-button {
-          padding: 14px;
-        }
-
-        @media (max-width: 1023px) {
-          .mealz-ds-button.primary:hover:not(:disabled) {
-            background-color: var(--mealz-ds-color-primary);
-          }
-        }
-      }
-
-      .mealz-product-card__price {
-        color: var(--mealz-ds-color-neutral-black, #0f191f);
-        line-height: 0;
-      }
-    }
-
-    .mealz-product-card__footer__actions {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      > *:not(:last-child) {
-        margin-right: 28px;
-      }
-    }
-
-    .mealz-ds-avatar {
-      height: 64px;
-      width: 64px;
-    }
-  }
-
-  .mealz-product-card__disabled-text {
-    color: var(--mealz-ds-color-neutral-black, #0f191f);
-  }
-
-  .mealz-product-card__footer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: var(--mealz-ds-color-primary-50, #f0f3f4);
-    padding: 8px;
-
-    .light-text {
-      color: var(--mealz-ds-color-neutral-black, #0f191f);
-      opacity: 0.5;
-    }
-  }
-}