@plurix/ecom-components 1.17.2 → 1.18.0

package/dist/assets/svgs/ClubCollectsIcon.d.ts

@@ -0,0 +1,7 @@
+interface ClubCollectsIconProps {
+    color?: string;
+    colorSecondary?: string;
+    colorsSecondaryLight?: string;
+}
+export declare const ClubCollectsIcon: ({ color, colorSecondary, colorsSecondaryLight }: ClubCollectsIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/assets/svgs/ClubCollectsIcon.js

@@ -0,0 +1,94 @@
+import { jsx as C, jsxs as h } from "react/jsx-runtime";
+const V = ({
+  color: l = "var(--color-assistant-main)",
+  colorSecondary: t = "var(--color-secondary)",
+  colorsSecondaryLight: i = "var(--color-secondary-light)"
+}) => /* @__PURE__ */ C(
+  "svg",
+  {
+    width: "64",
+    height: "18",
+    viewBox: "0 0 64 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ h(
+      "svg",
+      {
+        width: "64",
+        height: "18",
+        viewBox: "0 0 64 18",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ C(
+            "path",
+            {
+              d: "M19.8826 14.0657C19.4148 14.3201 18.9144 14.405 18.5435 14.405C17.6881 14.405 17.0426 13.9639 16.7526 13.1496C16.1071 13.896 15.2195 14.405 14.0736 14.405C11.7341 14.405 10.04 12.454 10.04 9.94332C10.04 7.43259 11.7182 5.48169 14.0736 5.48169C15.1063 5.48169 15.994 5.88883 16.688 6.51652V6.27902C16.688 5.82098 16.9462 5.54955 17.398 5.54955H18.1239C18.5757 5.54955 18.8339 5.82098 18.8339 6.27902V11.7755C18.8339 11.9621 18.8499 12.0978 19.0116 12.0978C19.1407 12.0978 19.2535 12.0299 19.4148 12.013C19.657 11.979 19.8021 12.1317 19.8989 12.471L20.1407 13.2853C20.2862 13.7773 20.1407 13.9299 19.8826 14.0657ZM16.349 9.94332C16.349 8.63706 15.5262 7.83974 14.4935 7.83974C13.3637 7.83974 12.6055 8.75582 12.6055 9.94332C12.6055 11.1308 13.3637 12.0469 14.4935 12.0469C15.5099 12.0469 16.349 11.2326 16.349 9.94332Z",
+              fill: l
+            }
+          ),
+          /* @__PURE__ */ C(
+            "path",
+            {
+              d: "M35.6206 14.0487C35.1365 14.3371 34.6687 14.405 34.2488 14.405C32.7161 14.405 31.9093 13.5567 31.9093 11.8773V9.36653C31.9093 8.41653 31.4252 7.82277 30.5862 7.82277C29.7634 7.82277 29.1985 8.41653 29.1985 9.36653V13.438C29.1985 13.913 28.9403 14.1844 28.5044 14.1844H27.2781C26.8263 14.1844 26.5845 13.913 26.5845 13.438V9.36653C26.5845 8.41653 26.0844 7.82277 25.2454 7.82277C24.4222 7.82277 23.8573 8.41653 23.8573 9.36653V13.438C23.8573 13.913 23.6155 14.1844 23.1636 14.1844H21.9373C21.5018 14.1844 21.2437 13.913 21.2437 13.438V8.1451C21.2437 7.97545 21.1791 7.89063 21.066 7.89063C20.9046 7.89063 20.711 8.02635 20.5496 8.04331C20.4046 8.07724 20.211 7.99242 20.1138 7.58527L19.9042 6.58437C19.8074 6.16026 19.8719 5.95669 20.211 5.77008C20.5496 5.56651 21.0337 5.48169 21.4046 5.48169C22.2764 5.48169 23.0828 5.87187 23.3573 6.88973C23.8899 6.07544 24.745 5.48169 25.939 5.48169C27.0363 5.48169 27.9076 5.92276 28.4725 6.68616C29.1017 5.97366 30.0053 5.48169 31.1671 5.48169C33.1679 5.48169 34.5233 6.94063 34.5233 9.16296V11.6737C34.5233 11.8603 34.5556 11.996 34.7333 11.996C34.7978 11.996 34.9429 11.9621 35.056 11.9282C35.3301 11.8433 35.4915 11.9621 35.6206 12.3692L35.8787 13.2853C36.0241 13.7433 35.8951 13.896 35.6206 14.0487Z",
+              fill: l
+            }
+          ),
+          /* @__PURE__ */ C(
+            "path",
+            {
+              d: "M36.5781 2.68253C36.5781 1.74948 37.2881 1.00305 38.1594 1.00305C39.0467 1.00305 39.7567 1.74948 39.7567 2.68253C39.7567 3.61557 39.0467 4.362 38.1594 4.362C37.2881 4.362 36.5781 3.61557 36.5781 2.68253ZM36.8522 11.8772V6.3638C36.8522 5.88879 37.1104 5.61736 37.5463 5.61736H38.7726C39.2244 5.61736 39.4666 5.88879 39.4666 6.3638V11.6736C39.4666 11.8603 39.4985 11.996 39.6762 11.996C39.7408 11.996 39.8858 11.962 39.9989 11.9281C40.2571 11.8433 40.4348 11.962 40.5639 12.3692L40.8221 13.2853C40.9511 13.7433 40.838 13.896 40.5639 14.0487C40.0635 14.3371 39.6117 14.4049 39.1921 14.4049C37.6594 14.4049 36.8522 13.5567 36.8522 11.8772Z",
+              fill: l
+            }
+          ),
+          /* @__PURE__ */ C(
+            "path",
+            {
+              d: "M50.8848 6.58437L50.6752 7.58527C50.578 7.99242 50.4007 8.07724 50.2394 8.04331C50.078 8.02635 49.8844 7.89063 49.739 7.89063C49.6262 7.89063 49.5617 7.97545 49.5617 8.1451V13.2005C49.5617 16.0844 47.5771 17.4585 45.0759 17.4585C43.3818 17.4585 42.1555 16.7969 41.3483 15.9657C41.0742 15.7112 40.9937 15.355 41.3323 14.9817L41.8001 14.371C42.0423 14.0996 42.3491 14.0148 42.72 14.3541C43.2201 14.846 44.0432 15.355 45.0918 15.355C46.1731 15.355 47.1572 14.8121 47.1572 13.5907V12.7424C46.5444 13.2005 45.7859 13.4719 44.9308 13.4719C42.7523 13.4719 41.1064 11.7755 41.1064 9.48528C41.1064 7.17813 42.7523 5.48169 44.9308 5.48169C45.9795 5.48169 46.8831 5.88883 47.5445 6.53348C47.8998 5.78705 48.6417 5.48169 49.4003 5.48169C49.7716 5.48169 50.2553 5.56651 50.5944 5.77008C50.9171 5.95669 50.9979 6.16026 50.8848 6.58437ZM47.3349 9.48528C47.3349 8.33171 46.5763 7.51742 45.5117 7.51742C44.4304 7.51742 43.6882 8.33171 43.6882 9.48528C43.6882 10.6219 44.4304 11.4362 45.5117 11.4362C46.5926 11.4362 47.3349 10.6219 47.3349 9.48528Z",
+              fill: l
+            }
+          ),
+          /* @__PURE__ */ C(
+            "path",
+            {
+              d: "M51.2188 9.94332C51.2188 7.3817 53.1065 5.48169 55.7042 5.48169C58.3022 5.48169 60.174 7.3817 60.174 9.94332C60.174 12.5049 58.3022 14.405 55.7042 14.405C53.1065 14.405 51.2188 12.5049 51.2188 9.94332ZM57.5922 9.94332C57.5922 8.72189 56.8014 7.83974 55.7042 7.83974C54.6069 7.83974 53.8005 8.72189 53.8005 9.94332C53.8005 11.1648 54.591 12.0469 55.7042 12.0469C56.8014 12.0469 57.5922 11.1648 57.5922 9.94332Z",
+              fill: l
+            }
+          ),
+          /* @__PURE__ */ C(
+            "path",
+            {
+              opacity: "0.7",
+              d: "M0 10.1523V9.58108C0 9.07935 0.263355 8.81995 0.724324 8.81995H5.33292V13.4054C5.33292 13.89 5.06957 14.1669 4.60858 14.1669H3.8355C3.37453 14.1669 3.11116 13.9071 3.11116 13.4054V10.9134H0.724324C0.263355 10.9134 0 10.654 0 10.1523Z",
+              fill: l
+            }
+          ),
+          /* @__PURE__ */ C(
+            "path",
+            {
+              d: "M8.44425 9.58123V10.1525C8.44425 10.6542 8.18089 10.9136 7.71992 10.9136H3.11133V6.32817C3.11133 5.84353 3.37468 5.56665 3.83567 5.56665H4.60874C5.06971 5.56665 5.33309 5.82644 5.33309 6.32817V8.82009H7.71992C8.18089 8.82009 8.44425 9.0795 8.44425 9.58123Z",
+              fill: l
+            }
+          ),
+          /* @__PURE__ */ C(
+            "path",
+            {
+              d: "M63.5074 1.78841C63.5074 3.76384 62.0089 5.36523 60.1604 5.36523C58.312 5.36523 56.8135 3.76384 56.8135 1.78841C56.8135 0.800694 57.5627 0 58.487 0C59.4111 0 60.1604 0.800694 60.1604 1.78841C60.1604 2.77609 60.9096 3.57682 61.8339 3.57682C62.7581 3.57682 63.5074 2.77609 63.5074 1.78841Z",
+              fill: t
+            }
+          ),
+          /* @__PURE__ */ C(
+            "path",
+            {
+              d: "M63.535 1.78876C63.535 2.77628 62.7734 3.57702 61.8341 3.57702C60.8944 3.57702 60.1328 2.77628 60.1328 1.78876C60.1328 0.801229 60.8944 0.000488281 61.8341 0.000488281C62.7734 0.000488281 63.535 0.801229 63.535 1.78876Z",
+              fill: i
+            }
+          )
+        ]
+      }
+    )
+  }
+);
+export {
+  V as ClubCollectsIcon
+};

package/dist/main.d.ts

@@ -1,4 +1,5 @@
 export { CartClubAlert } from './packages/CartClubAlert/CartClubAlert';
+export { ClubCollects } from './packages/ClubCollects/ClubCollects';
 export { Carousel } from './packages/Carousel/Carousel';
 export { Coupons } from './packages/Coupons/Coupons';
 export { Onboarding } from './packages/Onboarding/Onboarding';

package/dist/main.js

@@ -1,30 +1,32 @@
 import { CartClubAlert as e } from "./packages/CartClubAlert/CartClubAlert.js";
-import { Carousel as m } from "./packages/Carousel/Carousel.js";
-import { Coupons as f } from "./packages/Coupons/Coupons.js";
-import { Onboarding as a } from "./packages/Onboarding/Onboarding.js";
+import { ClubCollects as m } from "./packages/ClubCollects/ClubCollects.js";
+import { Carousel as f } from "./packages/Carousel/Carousel.js";
+import { Coupons as a } from "./packages/Coupons/Coupons.js";
+import { Onboarding as C } from "./packages/Onboarding/Onboarding.js";
 import { Tour as n } from "./packages/Tour/Tour.js";
-import { Regionalization as u } from "./packages/Regionalization/Regionalization.js";
-import { Modal as c } from "./packages/Modal/Modal.js";
-import { ContactCard as i } from "./packages/ContactCard/ContactCard.js";
-import { ChangeOrderModal as S } from "./packages/ChangeOrderModal/ChangeOrderModal.js";
-import { Skeleton as M } from "./packages/Skeleton/index.js";
-import { SearchSuggestions as O } from "./packages/SearchSugestions/components/SearchSuggestions/index.js";
-import { ProductCard as R } from "./packages/ProductCard/index.js";
-import { ProductCardSeeMore as z } from "./packages/ProductCardSeeMore/ProductCardSeeMore.js";
-import { VouchersRedeemed as T } from "./packages/VouchersRedeemed/VouchersRedeemed.js";
+import { Regionalization as c } from "./packages/Regionalization/Regionalization.js";
+import { Modal as g } from "./packages/Modal/Modal.js";
+import { ContactCard as S } from "./packages/ContactCard/ContactCard.js";
+import { ChangeOrderModal as h } from "./packages/ChangeOrderModal/ChangeOrderModal.js";
+import { Skeleton as O } from "./packages/Skeleton/index.js";
+import { SearchSuggestions as R } from "./packages/SearchSugestions/components/SearchSuggestions/index.js";
+import { ProductCard as z } from "./packages/ProductCard/index.js";
+import { ProductCardSeeMore as T } from "./packages/ProductCardSeeMore/ProductCardSeeMore.js";
+import { VouchersRedeemed as j } from "./packages/VouchersRedeemed/VouchersRedeemed.js";
 export {
-  m as Carousel,
+  f as Carousel,
   e as CartClubAlert,
-  S as ChangeOrderModal,
-  i as ContactCard,
-  f as Coupons,
-  c as Modal,
-  a as Onboarding,
-  R as ProductCard,
-  z as ProductCardSeeMore,
-  u as Regionalization,
-  O as SearchSuggestions,
-  M as Skeleton,
+  h as ChangeOrderModal,
+  m as ClubCollects,
+  S as ContactCard,
+  a as Coupons,
+  g as Modal,
+  C as Onboarding,
+  z as ProductCard,
+  T as ProductCardSeeMore,
+  c as Regionalization,
+  R as SearchSuggestions,
+  O as Skeleton,
   n as Tour,
-  T as VouchersRedeemed
+  j as VouchersRedeemed
 };

package/dist/packages/ClubCollects/ClubCollects.d.ts

@@ -0,0 +1,12 @@
+
+interface ClubCollectsProps {
+    currentSeals?: number;
+    nextSealProgress?: number;
+    missingValue?: number;
+    sealGoalValue?: number;
+    subtotalValue?: number;
+    sealQuantityText?: string;
+    bannerSrc?: string;
+}
+export declare const ClubCollects: ({ currentSeals, nextSealProgress, missingValue, sealGoalValue, subtotalValue, sealQuantityText, bannerSrc }: ClubCollectsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/ClubCollects/ClubCollects.js

@@ -0,0 +1,71 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { ClubCollectsIcon as d } from "../../assets/svgs/ClubCollectsIcon.js";
+/* empty css                          */const _ = ({
+  currentSeals: e,
+  nextSealProgress: o,
+  missingValue: r,
+  sealGoalValue: n,
+  subtotalValue: i,
+  sealQuantityText: c,
+  bannerSrc: a
+}) => /* @__PURE__ */ l("div", { className: "clubCollects", children: [
+  /* @__PURE__ */ l("div", { className: "clubCollects__header", children: [
+    /* @__PURE__ */ s(d, {}),
+    /* @__PURE__ */ s("span", { className: "clubCollects__logo", children: "Coleciona" })
+  ] }),
+  /* @__PURE__ */ l("div", { className: "clubCollects__content", children: [
+    /* @__PURE__ */ l("p", { className: "clubCollects__current", children: [
+      "Garantidos no carrinho atual:",
+      " ",
+      /* @__PURE__ */ l("span", { children: [
+        e,
+        " ",
+        e === 1 ? "selo" : "selos"
+      ] })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "clubCollects__progressWrapper", children: [
+      /* @__PURE__ */ s("div", { className: "clubCollects__progress", children: /* @__PURE__ */ s(
+        "div",
+        {
+          className: "clubCollects__progressFill",
+          style: { width: `${o}%` }
+        }
+      ) }),
+      /* @__PURE__ */ l("span", { className: "clubCollects__next", children: [
+        "+",
+        c,
+        " selo"
+      ] })
+    ] }),
+    /* @__PURE__ */ l("p", { className: "clubCollects__missing", children: [
+      "Subtotal ",
+      /* @__PURE__ */ l("span", { children: [
+        "R$ ",
+        Number(i).toFixed(2)
+      ] }),
+      " faltam",
+      " ",
+      /* @__PURE__ */ l("span", { children: [
+        "R$ ",
+        Number(r).toFixed(2)
+      ] }),
+      " para o próximo selo"
+    ] }),
+    a && /* @__PURE__ */ s("div", { className: "clubCollects__banner", children: /* @__PURE__ */ s("img", { src: a, alt: "Banner da campanha" }) }),
+    /* @__PURE__ */ l("p", { className: "clubCollects__rule", children: [
+      "A cada ",
+      /* @__PURE__ */ l("strong", { children: [
+        "R$ ",
+        n
+      ] }),
+      " ganhe",
+      " ",
+      /* @__PURE__ */ s("strong", { children: c }),
+      " selo",
+      /* @__PURE__ */ s("span", { children: "Produtos aceleradores dão selos extras!" })
+    ] })
+  ] })
+] });
+export {
+  _ as ClubCollects
+};

package/dist/styles/club-collects.global.css

@@ -0,0 +1 @@
+.clubCollects{background:#0f2144;border-radius:8px;padding:16px;max-width:370px;color:#fff}.clubCollects__header{display:flex;justify-content:center;align-items:center;margin-bottom:16px;gap:5px}.clubCollects__logo{font-size:16px;font-weight:600;color:#f4af25}.clubCollects__content{display:flex;flex-direction:column;gap:12px}.clubCollects__current{font-size:12px;font-weight:700;line-height:16px;margin:0;text-align:center}.clubCollects__current span{color:#f4af25;font-size:16px}.clubCollects__progressWrapper{display:flex;align-items:center;gap:8px}.clubCollects__progress{flex:1;height:6px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden;position:relative}.clubCollects__progressFill{height:100%;border-radius:999px;background:#f4af25;transition:width .3s ease}.clubCollects__next{font-size:14px;font-weight:700;white-space:nowrap}.clubCollects__missing{font-size:12px;text-align:center;margin:0}.clubCollects__missing span{color:#f4af25;font-weight:700}.clubCollects__rule{text-align:center;font-size:12px;margin:0}.clubCollects__rule strong{font-weight:700}.clubCollects__rule span{display:block}.clubCollects__banner img{display:block;object-fit:contain;width:100%;height:100%}

package/dist/styles/product-card.global.css

@@ -1 +1 @@
-*{-webkit-tap-highlight-color:transparent}:root{--product-card-horizontal-width: 100px;--product-card-horizontal-margin: 8px;--product-card-horizontal-padding: 8px}#product-card,#product-card-unavailable{display:flex;flex-direction:column;min-height:276px;max-height:304px;height:100%}#product-card-unavailable.product-card-horizontal-unavailable{min-height:172px;max-height:206px}.product-card{display:flex;flex-direction:column;flex:1;position:relative;height:100%;cursor:pointer;border:1px solid var(--color-grayScale-lightest);border-radius:8px;overflow:hidden}.clean-button{display:flex;flex-direction:column;appearance:none;border:none;background:none;outline:none;text-align:left;cursor:pointer;font:inherit;color:inherit;margin:0;padding:0;text-transform:none;height:100%}.product-card,.product-card+.product-card-unavailable-text{width:162px}.product-card-description{display:flex;flex-direction:column;gap:4px;padding:8px;height:100%}.invisible-button{width:100%;height:46px;background-color:transparent}.product-card-horizontal .invisible-button{height:38px}.product-card-badge{display:flex;gap:4px}.product-card-badge-kg{display:inline-block;width:fit-content;height:16px;padding:2px 4px;background-color:var(--color-main);border-radius:2px;color:var(--color-grayScale-white);font-weight:var(--text-weight-bold);font-size:10px;line-height:13px;text-align:center;vertical-align:middle}.product-card-discount-badge{display:flex;align-items:center;justify-content:center;width:42px;height:16px;background-color:var(--color-badge-main);border-radius:2px}.product-card-discount-badge-value{font-weight:var(--text-weight-bold);font-size:var(--text-size-0);line-height:16px;color:var(--color-badge-secondary)}.product-card-badge-club{width:43px;background-color:var(--color-badge-main);border-radius:4px;text-align:center}.product-card-badge-club-text{font-weight:var(--text-weight-bold);font-size:var(--text-size-0);line-height:16px;color:var(--color-badge-secondary);padding:1px 0}.product-card-section-badge{display:flex;gap:4px}.product-card-horizontal{position:relative;display:flex;flex-direction:column;width:304px;height:100%;min-height:163px;max-height:206px;border:1px solid var(--color-grayScale-lightest);border-radius:8px}.product-card-section-product-horizontal{display:flex;flex-direction:row;position:relative;height:100%;border-radius:8px}.product-card-section-product-horizontal .product-card-image-container{position:relative;align-self:flex-start;padding:0 var(--product-card-horizontal-padding);height:100%;min-height:163px;max-height:206px}.product-card-section-product-horizontal .product-card-image-container .image{width:var(--product-card-horizontal-width);height:100px;object-fit:contain;margin-top:8px;margin-bottom:auto}.product-card-horizontal-description{display:flex;flex-direction:column;gap:4px;height:100%;width:100%;padding:7.5px 8px;border-radius:8px;border-bottom-left-radius:unset;border-top-left-radius:unset}.product-card-section-name{display:flex;flex-direction:column;gap:4px}.product-card-horizontal-description .product-card-club-price{line-height:18px}.out-of-stock{min-height:126px}.out-of-stock-description-content{display:flex;flex-direction:column;flex:1;background-color:var(--color-grayScale-faded)}.product-card-section-product-horizontal .product-card-name{font-size:var(--text-size-1);line-height:20px;min-height:auto;height:100%;max-width:172px}.product-card-section-product-horizontal .product-card-section-badge-horizontal{display:flex;gap:4px;height:16px}.product-card-horizontal .product-card-price-container{display:flex;flex-direction:row;align-items:center;min-height:20px}.product-card-horizontal .product-card-price-container .product-card-old-price{padding-right:4px;border-right:1px solid var(--color-grayScale-light)}.product-card-horizontal .product-card-price-container .product-card-new-price{padding-left:4px;font-size:var(--text-size-2);line-height:20px}.product-card-section-badge-container.horizontal{position:unset;height:24px;width:100%}.product-card-button{display:flex;justify-content:center;align-items:center;width:calc(100% - 16px);height:40px;padding:8px 16px;margin:8px;border:1px solid var(--color-main);border-radius:20px;background-color:var(--color-main);color:var(--color-grayScale-white);font-weight:var(--text-weight-bold);font-size:var(--text-size-2);line-height:20px;cursor:pointer}.product-card-button span{display:flex;align-items:center;gap:4px}#product-card-button{position:absolute;bottom:0;left:0;width:stretch}.product-card-button.unavailable{background-color:var(--color-grayScale-lightest);color:#545454;cursor:not-allowed}.product-card-button .button{padding:12px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;font-size:var(--text-size-3);line-height:24px;max-height:unset}.product-card-image-container{position:relative;display:flex;justify-content:center;align-items:center;padding:7.5px 8px;background-color:var(--color-grayScale-white)}.product-card .product-card-image-container{border-top:7px}.product-card-horizontal .product-card-image-container{border-top-left-radius:7px;border-bottom-left-radius:7px}.product-card-image-container .image{max-width:96px;height:96px;object-fit:contain}.product-club-badge{position:absolute;width:50px;height:18px;inset:8px 0 0 8px}.product-card-section-badge-container{position:absolute;bottom:8px;height:18px;width:calc(100% - 16px);display:flex;justify-content:center;align-items:center;border-radius:4px}.product-card-section-badge-text{font-weight:var(--text-weight-bold);font-size:var(--text-size-0);line-height:16px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}.product-club-badge.horizontal{inset:9px 0 0 9px}.product-card-name{display:-webkit-box;font-weight:var(--text-weight-regular);font-size:var(--text-size-1);line-height:18px;color:#545454;vertical-align:middle;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-card-price{display:flex;flex-direction:column;gap:4px;margin-top:auto}.product-card-club-price{display:inline-block;width:100%;padding:4px;border-radius:4px;font-weight:var(--text-weight-bold);font-size:var(--text-size-0);line-height:16px}.product-card-old-price{height:16px;font-weight:400;font-size:var(--text-size-0);line-height:16px;color:#545454;text-decoration:line-through;vertical-align:middle}.product-card-new-price{font-weight:var(--text-weight-bold);font-size:var(--text-size-3);line-height:24px;color:var(--color-main);vertical-align:middle}.product-card-price-container{display:flex;flex-direction:column;min-height:24px}.product-card-old-price .mobile{display:block}@media (min-width: 769px){.product-card,.product-card+.product-card-unavailable-text{width:226px}#product-card,#product-card-unavailable{min-height:324px;max-height:350px}.product-card-description{padding:8px 16px 0}.product-card-unavailable{height:74px}.product-card-image-container{padding:15.5px 16px 7.5px}.product-card-image-container .image{max-width:144px;height:144px}.product-club-badge{width:67px;height:24px;inset:16px 0 0 16px}.product-card-section-badge-container{width:calc(100% - 32px);max-width:194px;height:24px}.product-card-section-badge-text{font-size:var(--text-size-1);line-height:18px}.product-card-name{font-size:var(--text-size-2);line-height:20px}.product-card-old-price .mobile{display:none}.product-card-old-price{padding-right:4px;border-right:2px solid var(--color-grayScale-light)}.product-card-new-price{padding-left:4px}.product-card-club-price{font-size:var(--text-size-1);line-height:18px}.product-card-price-container{display:flex;flex-direction:row;align-items:center}.product-card-badge-club{width:57px}.product-card-badge-club-text{font-size:var(--text-size-1);line-height:18px;padding:3px 0}.product-card .quantity-selector,.product-card .product-card-button,.product-card-horizontal .quantity-selector,.product-card-horizontal .product-card-button{width:calc(100% - 32px);margin:8px 16px}}.quantity-selector{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:calc(100% - 16px);height:40px;margin:8px;border:1px solid var(--color-grayScale-light);border-radius:20px;background-color:var(--color-grayScale-white);box-shadow:0 0 0 var(--border-width-0) var(--color-support-shadow);transition:box-shadow .2s ease}[data-store-quantity-selector] [data-store-icon]{display:inline-block;margin:0;color:var(--color-main);line-height:0}.quantity-selector .quantity-selector-quantity{display:block;width:100%;height:100%;padding:0;font-weight:400;line-height:20px;color:var(--color-grayScale);text-align:center;background-color:transparent;border-width:0;opacity:1}.quantity-selector .quantity-selector-quantity:focus{outline:0}.quantity-selector .quantity-selector-quantity:disabled{color:var(--color-grayScale);opacity:1}.quantity-selector-button{display:flex;align-items:center;justify-content:center;width:46px;height:100%;padding:var(--space-0);background-color:#e6e6e6;border:unset;border-bottom-left-radius:20px;border-top-left-radius:20px;cursor:pointer}.quantity-selector-button.quantity-selector-button-plus{border-top-right-radius:20px;border-top-left-radius:unset;border-bottom-right-radius:20px;border-bottom-left-radius:unset}.quantity-selector-measure-unit{font-family:DM Sans,sans-serif;font-size:var;font-weight:400;line-height:20px;color:var(--color-grayScale)}.quantity-selector .quantity-selector-button [data-store-icon]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--border-radius-default);transition:background-color .2s ease}.quantity-selector .quantity-selector-button:disabled{cursor:not-allowed}.quantity-selector .quantity-selector-button:disabled [data-store-icon]{color:var(--color-grayScale-light)}.quantity-selector[data-store-quantity-selector=disabled]{background-color:var(--color-grayScale-light);box-shadow:0 0 0 var(--border-width-0) var(--color-support-shadow)}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){.quantity-selector .quantity-selector-button:focus{outline:none;box-shadow:none}}}.product-add-text{display:block;height:10px;padding-bottom:17px;text-align:center;transition-delay:.25s;transition-property:margin-top}.product-add-text p{font-family:DM Sans,sans-serif;font-size:var(--text-size-0);font-weight:400;font-style:normal;line-height:16px;color:var(--color-positiveFeedback-dark);text-align:center;white-space:nowrap}@include media(">tablet"){.product-add-text p {font-size: var(--text-size-1); line-height: 18px;}}.product-card-unavailable-text{height:40px;margin:8px;align-content:center;border:1px solid var(--color-grayScale-light);border-radius:20px;position:absolute;bottom:0;left:0;width:stretch;background-color:var(--color-grayScale-lightest)}.product-card-unavailable-text p{text-align:center;font-size:var(--text-size-3);font-weight:var(--text-weight-bold);line-height:24px;color:var(--color-grayScale-darkest)}
+*{-webkit-tap-highlight-color:transparent}:root{--product-card-horizontal-width: 100px;--product-card-horizontal-margin: 8px;--product-card-horizontal-padding: 8px}#product-card,#product-card-unavailable{display:flex;flex-direction:column;min-height:276px;max-height:304px;height:100%}#product-card-unavailable.product-card-horizontal-unavailable{min-height:172px;max-height:206px}.product-card{display:flex;flex-direction:column;flex:1;position:relative;height:100%;cursor:pointer;border:1px solid var(--color-grayScale-lightest);border-radius:8px;overflow:hidden}.clean-button{display:flex;flex-direction:column;appearance:none;border:none;background:none;outline:none;text-align:left;cursor:pointer;font:inherit;color:inherit;margin:0;padding:0;text-transform:none;height:100%}.product-card,.product-card+.product-card-unavailable-text{width:162px}.product-card-description{display:flex;flex-direction:column;gap:4px;padding:8px;height:100%}.invisible-button{width:100%;height:46px;background-color:transparent}.product-card-horizontal .invisible-button{height:38px}.product-card-badge{display:flex;gap:4px}.product-card-badge-kg{display:inline-block;width:fit-content;height:16px;padding:2px 4px;background-color:var(--color-main);border-radius:2px;color:var(--color-grayScale-white);font-weight:var(--text-weight-bold);font-size:10px;line-height:13px;text-align:center;vertical-align:middle}.product-card-discount-badge{display:flex;align-items:center;justify-content:center;width:42px;height:16px;background-color:var(--color-badge-main);border-radius:2px}.product-card-discount-badge-value{font-weight:var(--text-weight-bold);font-size:var(--text-size-0);line-height:16px;color:var(--color-badge-secondary)}.product-card-badge-club{width:43px;background-color:var(--color-badge-main);border-radius:4px;text-align:center}.product-card-badge-club-text{font-weight:var(--text-weight-bold);font-size:var(--text-size-0);line-height:16px;color:var(--color-badge-secondary);padding:1px 0}.product-card-section-badge{display:flex;gap:4px}.product-card-horizontal{position:relative;display:flex;flex-direction:column;width:304px;height:100%;min-height:163px;max-height:206px;border:1px solid var(--color-grayScale-lightest);border-radius:8px}.product-card-section-product-horizontal{display:flex;flex-direction:row;position:relative;height:100%;border-radius:8px}.product-card-section-product-horizontal .product-card-image-container{position:relative;align-self:flex-start;padding:0 var(--product-card-horizontal-padding);height:100%;min-height:163px;max-height:206px}.product-card-section-product-horizontal .product-card-image-container .image{width:var(--product-card-horizontal-width);height:100px;object-fit:contain;margin-top:8px;margin-bottom:auto}.product-card-horizontal-description{display:flex;flex-direction:column;gap:4px;height:100%;width:100%;padding:7.5px 8px;border-radius:8px;border-bottom-left-radius:unset;border-top-left-radius:unset}.product-card-section-name{display:flex;flex-direction:column;gap:4px}.product-card-horizontal-description .product-card-club-price{line-height:18px}.out-of-stock{min-height:126px}.out-of-stock-description-content{display:flex;flex-direction:column;flex:1;background-color:var(--color-grayScale-faded)}.product-card-section-product-horizontal .product-card-name{font-size:var(--text-size-1);line-height:20px;min-height:auto;height:100%;max-width:172px}.product-card-section-product-horizontal .product-card-section-badge-horizontal{display:flex;gap:4px;height:16px}.product-card-horizontal .product-card-price-container{display:flex;flex-direction:row;align-items:center;min-height:20px}.product-card-horizontal .product-card-price-container .product-card-old-price{padding-right:4px;border-right:1px solid var(--color-grayScale-light)}.product-card-horizontal .product-card-price-container .product-card-new-price{padding-left:4px;font-size:var(--text-size-2);line-height:20px}.product-card-section-badge-container.horizontal{position:unset;height:24px;width:100%}.product-card-button{display:flex;justify-content:center;align-items:center;width:calc(100% - 16px);height:40px;padding:8px 16px;margin:8px;border:1px solid var(--color-main);border-radius:20px;background-color:var(--color-main);color:var(--color-grayScale-white);font-weight:var(--text-weight-bold);font-size:var(--text-size-2);line-height:20px;cursor:pointer}.product-card-button span{display:flex;align-items:center;gap:4px}#product-card-button{position:absolute;bottom:0;left:0;width:stretch}.product-card-button.unavailable{background-color:var(--color-grayScale-lightest);color:#545454;cursor:not-allowed}.product-card-button .button{padding:12px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;font-size:var(--text-size-3);line-height:24px;max-height:unset}.product-card-image-container{position:relative;display:flex;justify-content:center;align-items:center;padding:7.5px 8px;background-color:var(--color-grayScale-white)}.product-card .product-card-image-container{border-top:7px}.product-card-horizontal .product-card-image-container{border-top-left-radius:7px;border-bottom-left-radius:7px}.product-card-image-container .image{max-width:96px;height:96px;object-fit:contain}.product-club-badge{position:absolute;width:50px;height:18px;inset:8px 0 0 8px}.product-card-section-badge-container{position:absolute;bottom:8px;height:18px;width:calc(100% - 32px);display:flex;justify-content:center;align-items:center;border-radius:4px}.product-card-section-badge-text{font-weight:var(--text-weight-bold);font-size:var(--text-size-0);line-height:16px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}.product-club-badge.horizontal{inset:9px 0 0 9px}.product-card-name{display:-webkit-box;font-weight:var(--text-weight-regular);font-size:var(--text-size-1);line-height:18px;color:#545454;vertical-align:middle;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-card-price{display:flex;flex-direction:column;gap:4px;margin-top:auto}.product-card-club-price{display:inline-block;width:100%;padding:4px;border-radius:4px;font-weight:var(--text-weight-bold);font-size:var(--text-size-0);line-height:16px}.product-card-old-price{height:16px;font-weight:400;font-size:var(--text-size-0);line-height:16px;color:#545454;text-decoration:line-through;vertical-align:middle}.product-card-new-price{font-weight:var(--text-weight-bold);font-size:var(--text-size-3);line-height:24px;color:var(--color-main);vertical-align:middle}.product-card-price-container{display:flex;flex-direction:column;min-height:24px}.product-card-old-price .mobile{display:block}@media (min-width: 769px){.product-card,.product-card+.product-card-unavailable-text{width:226px}#product-card,#product-card-unavailable{min-height:324px;max-height:350px}.product-card-description{padding:8px 16px 0}.product-card-unavailable{height:74px}.product-card-image-container{padding:15.5px 16px 7.5px}.product-card-image-container .image{max-width:144px;height:144px}.product-club-badge{width:67px;height:24px;inset:16px 0 0 16px}.product-card-section-badge-container{max-width:194px;height:24px}.product-card-section-badge-text{font-size:var(--text-size-1);line-height:18px}.product-card-name{font-size:var(--text-size-2);line-height:20px}.product-card-old-price .mobile{display:none}.product-card-old-price{padding-right:4px;border-right:2px solid var(--color-grayScale-light)}.product-card-new-price{padding-left:4px}.product-card-club-price{font-size:var(--text-size-1);line-height:18px}.product-card-price-container{display:flex;flex-direction:row;align-items:center}.product-card-badge-club{width:57px}.product-card-badge-club-text{font-size:var(--text-size-1);line-height:18px;padding:3px 0}.product-card .quantity-selector,.product-card .product-card-button,.product-card-horizontal .quantity-selector,.product-card-horizontal .product-card-button{width:calc(100% - 32px);margin:8px 16px}}.quantity-selector{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:calc(100% - 16px);height:40px;margin:8px;border:1px solid var(--color-grayScale-light);border-radius:20px;background-color:var(--color-grayScale-white);box-shadow:0 0 0 var(--border-width-0) var(--color-support-shadow);transition:box-shadow .2s ease}[data-store-quantity-selector] [data-store-icon]{display:inline-block;margin:0;color:var(--color-main);line-height:0}.quantity-selector .quantity-selector-quantity{display:block;width:100%;height:100%;padding:0;font-weight:400;line-height:20px;color:var(--color-grayScale);text-align:center;background-color:transparent;border-width:0;opacity:1}.quantity-selector .quantity-selector-quantity:focus{outline:0}.quantity-selector .quantity-selector-quantity:disabled{color:var(--color-grayScale);opacity:1}.quantity-selector-button{display:flex;align-items:center;justify-content:center;width:46px;height:100%;padding:var(--space-0);background-color:#e6e6e6;border:unset;border-bottom-left-radius:20px;border-top-left-radius:20px;cursor:pointer}.quantity-selector-button.quantity-selector-button-plus{border-top-right-radius:20px;border-top-left-radius:unset;border-bottom-right-radius:20px;border-bottom-left-radius:unset}.quantity-selector-measure-unit{font-family:DM Sans,sans-serif;font-size:var;font-weight:400;line-height:20px;color:var(--color-grayScale)}.quantity-selector .quantity-selector-button [data-store-icon]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--border-radius-default);transition:background-color .2s ease}.quantity-selector .quantity-selector-button:disabled{cursor:not-allowed}.quantity-selector .quantity-selector-button:disabled [data-store-icon]{color:var(--color-grayScale-light)}.quantity-selector[data-store-quantity-selector=disabled]{background-color:var(--color-grayScale-light);box-shadow:0 0 0 var(--border-width-0) var(--color-support-shadow)}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){.quantity-selector .quantity-selector-button:focus{outline:none;box-shadow:none}}}.product-add-text{display:block;height:10px;padding-bottom:17px;text-align:center;transition-delay:.25s;transition-property:margin-top}.product-add-text p{font-family:DM Sans,sans-serif;font-size:var(--text-size-0);font-weight:400;font-style:normal;line-height:16px;color:var(--color-positiveFeedback-dark);text-align:center;white-space:nowrap}@include media(">tablet"){.product-add-text p {font-size: var(--text-size-1); line-height: 18px;}}.product-card-unavailable-text{height:40px;margin:8px;align-content:center;border:1px solid var(--color-grayScale-light);border-radius:20px;position:absolute;bottom:0;left:0;width:stretch;background-color:var(--color-grayScale-lightest)}.product-card-unavailable-text p{text-align:center;font-size:var(--text-size-3);font-weight:var(--text-weight-bold);line-height:24px;color:var(--color-grayScale-darkest)}

package/package.json

@@ -1,69 +1,69 @@
-{
-  "name": "@plurix/ecom-components",
-  "author": "Plurix",
-  "private": false,
-  "version": "1.17.2",
-  "type": "module",
-  "main": "dist/main.js",
-  "types": "dist/main.d.ts",
-  "files": [
-    "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/plurix-ecommerce/ecom-components.git"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc --p ./tsconfig-build.json && vite build",
-    "format": "prettier --write .",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "prepare": "husky install",
-    "preview": "vite preview",
-    "test": "jest"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@commitlint/cli": "^17.4.2",
-    "@commitlint/config-conventional": "^17.4.2",
-    "@jest/globals": "^29.7.0",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.71",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "glob": "^10.3.10",
-    "husky": "^9.0.11",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-svg-transformer": "^1.0.0",
-    "prettier": "^2.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.4.3",
-    "vite": "^4.5.3",
-    "vite-plugin-dts": "^3.7.3",
-    "vite-plugin-lib-inject-css": "^2.0.1"
-  },
-  "dependencies": {
-    "axios": "^1.7.4"
-  }
-}
+{
+  "name": "@plurix/ecom-components",
+  "author": "Plurix",
+  "private": false,
+  "version": "1.18.0",
+  "type": "module",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/plurix-ecommerce/ecom-components.git"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "format": "prettier --write .",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "prepare": "husky install",
+    "preview": "vite preview",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@commitlint/cli": "^17.4.2",
+    "@commitlint/config-conventional": "^17.4.2",
+    "@jest/globals": "^29.7.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.71",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "glob": "^10.3.10",
+    "husky": "^9.0.11",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-svg-transformer": "^1.0.0",
+    "prettier": "^2.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.4.3",
+    "vite": "^4.5.3",
+    "vite-plugin-dts": "^3.7.3",
+    "vite-plugin-lib-inject-css": "^2.0.1"
+  },
+  "dependencies": {
+    "axios": "^1.7.4"
+  }
+}