@propeller-commerce/propeller-v2-react-ui 0.4.6 → 0.4.9

package/CHANGELOG.md

@@ -8,6 +8,66 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.4.9] - 2026-06-19
+
+### Added
+
+- **`GridFiltersPanel`** — a responsive wrapper around `GridFilters`. At `lg`
+  (1024px) and up it renders the filters as the inline sidebar; below `lg` it
+  collapses them behind a "Filters" button that opens a left slide-in drawer
+  (dimmed backdrop, close button, "Show results" to dismiss). A single
+  `GridFilters` instance backs both layouts — no duplicate fetch or state.
+  Replaces the host's `<aside><GridFilters/></aside>`. New label keys:
+  `filtersButton`, `applyFilters`, `closeFilters`. Optional `activeFilterCount`
+  shows a badge on the button.
+
+## [0.4.8] - 2026-06-19
+
+### Fixed
+
+- **Product card list view broke on desktop after the 0.4.7 mobile
+  redesign.** The mobile-first footer (`flex-col`, full-width `AddToCart`
+  controls) leaked into the desktop row layout because the `md:` overrides
+  lost the cross-Tailwind cascade. The desktop (≥768px) row intent is now
+  restated on the BEM hook classes in `styles.css` — footer back to a row,
+  `__footer-meta` to `display: contents`, and the `AddToCart` controls back to
+  a single nowrap row with a fixed-width quantity input.
+- **Price clipped in the mobile grid card.** The stock + price meta row could
+  overflow a narrow (~190px) grid card. The row now wraps and the price is
+  allowed to shrink (`min-w-0`, right-aligned) instead of being cut off.
+
+### Changed
+
+- **`ClusterCard` gets the same responsive footer as `ProductCard`.** Below
+  768px the list view uses a 2-row footer (stock/price, then full-width "View
+  cluster" button) and the grid view pairs stock/price in a wrapping meta row;
+  desktop (≥768px) is unchanged.
+
+## [0.4.7] - 2026-06-19
+
+### Changed
+
+- **Mobile product card layout (below 768px).** On narrow viewports the
+  `ProductCard` action area no longer overflows the card edge — the quantity
+  stepper and "Add to cart" button were clipped. Below `md` (768px):
+  - **List view** (`columns === 1`): the footer becomes two rows — stock and
+    price share the first row (`justify-between`), and the full-width
+    `AddToCart` (stepper + button) sits on the second row.
+  - **Grid view** (`columns > 1`): the footer becomes three rows — stock ↔
+    price, then a full-width stepper, then a full-width button.
+
+  At `md` and up the previous desktop layout is unchanged. This flows through
+  every surface that renders `ProductCard` / `ProductGrid` (catalog, search,
+  product slider). Implemented purely with responsive Tailwind classes — no
+  JavaScript width detection.
+
+### Added
+
+- **Cart icon in the `AddToCart` button.** The submit button now renders a
+  built-in cart glyph (`.propeller-add-to-cart__icon`) before its label, drawn
+  with `currentColor` and `em` sizing so consumers can restyle its size,
+  colour and stroke via CSS.
+
 ## [0.4.6] - 2026-06-09
 
 ### Fixed

package/dist/index.cjs

@@ -4024,8 +4024,8 @@ function AddToCart(rawProps) {
       className: `propeller-add-to-cart ${props.className || ""}`,
       "data-loading": loading ? "true" : "false",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__controls flex items-center gap-2 w-full", children: [
-          props.allowIncrDecr !== false ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__stepper flex items-center border border-input rounded-control bg-card h-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__controls flex flex-wrap items-center gap-2 w-full md:flex-nowrap", children: [
+          props.allowIncrDecr !== false ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__stepper flex items-center border border-input rounded-control bg-card h-10 w-full md:w-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
@@ -4044,7 +4044,7 @@ function AddToCart(rawProps) {
               "input",
               {
                 type: "number",
-                className: "propeller-add-to-cart__quantity w-12 text-center text-sm bg-transparent border-none focus:ring-0 focus:outline-none h-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                className: "propeller-add-to-cart__quantity flex-1 md:flex-none md:w-12 text-center text-sm bg-transparent border-none focus:ring-0 focus:outline-none h-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
                 min: getMinQuantity(props.product),
                 step: getStep(props.product),
                 value: quantity,
@@ -4077,7 +4077,7 @@ function AddToCart(rawProps) {
             "input",
             {
               type: "number",
-              className: "propeller-add-to-cart__quantity w-16 h-10 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-secondary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+              className: "propeller-add-to-cart__quantity w-full md:w-16 h-10 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-secondary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
               min: getMinQuantity(props.product),
               step: getStep(props.product),
               value: quantity,
@@ -4095,10 +4095,28 @@ function AddToCart(rawProps) {
             "button",
             {
               type: "button",
-              className: "propeller-add-to-cart__submit flex-1 inline-flex justify-center items-center h-10 px-6 border border-transparent text-sm font-medium rounded-control text-secondary-foreground bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+              className: "propeller-add-to-cart__submit flex-1 basis-full md:basis-auto inline-flex justify-center items-center gap-2 h-10 px-6 border border-transparent text-sm font-medium rounded-control text-secondary-foreground bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
               onClick: () => handleAddToCart(),
               disabled: loading,
               children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    className: "propeller-add-to-cart__icon w-[1.1em] h-[1.1em] flex-shrink-0",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "21", r: "1" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "21", r: "1" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" })
+                    ]
+                  }
+                ),
                 loading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: propellerV2CoreUi.getLabel(props.labels, "adding", "Adding...") }) : null,
                 !loading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: propellerV2CoreUi.getLabel(props.labels, "add", "Add") }) : null
               ]
@@ -7582,22 +7600,28 @@ function ClusterCard(rawProps) {
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardShortDescription, {}) : null
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-card__footer w-full md:w-auto flex items-center gap-3 px-4 py-2 md:py-0 border-t md:border-t-0 border-border-subtle", children: [
-            props.showStock && defaultProductInventory ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardStock, {}) : null,
-            props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardPrice, {}) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-card__cta flex-shrink-0 ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardViewClusterLink, {}) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-card__footer w-full md:w-auto flex flex-col gap-2 md:flex-row md:items-center md:gap-3 px-4 py-2 md:py-0 border-t md:border-t-0 border-border-subtle", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-card__footer-meta flex items-center justify-between gap-3 md:contents", children: [
+              props.showStock && defaultProductInventory ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardStock, {}) : null,
+              props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardPrice, {}) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-card__cta w-full md:w-auto md:flex-shrink-0 md:ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardViewClusterLink, {}) })
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-card__body flex flex-1 flex-col gap-1.5 p-3 sm:gap-2 sm:p-4", children: [
             props.showSku !== false && clusterSku ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardName, { linkable: true }) : null,
-            props.showStock && defaultProductInventory ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardStock, {}) : null,
+            props.showStock && defaultProductInventory ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardStock, {}) }) : null,
             textLabelValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardTextLabels, {}) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardShortDescription, {}) : null,
-            props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardPrice, {}) : null
+            props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardPrice, {}) }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-card__cta px-3 pb-3 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardViewClusterLink, {}) })
+          props.showStock && defaultProductInventory || props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-card__footer-meta flex flex-wrap items-center justify-between gap-x-2 gap-y-1 px-3 pt-1 sm:px-4 md:hidden", children: [
+            props.showStock && defaultProductInventory ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardStock, {}) : null,
+            props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardPrice, {}) : null
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-card__cta px-3 pb-3 pt-2 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardViewClusterLink, {}) })
         ] })
       ]
     }
@@ -8816,7 +8840,7 @@ var DEFAULT_LABELS = {
   of: "of"
 };
 function GridPagination(props) {
-  function getLabel52(key) {
+  function getLabel53(key) {
     const labels = props.labels || {};
     return labels[key] !== void 0 ? labels[key] : DEFAULT_LABELS[key] || key;
   }
@@ -8889,15 +8913,15 @@ function GridPagination(props) {
               className: "propeller-grid-pagination__btn propeller-grid-pagination__btn--prev inline-flex items-center rounded-control border border-input bg-card px-4 py-2 text-sm font-medium text-foreground shadow-sm hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed",
               disabled: currentPage === 1,
               onClick: () => handlePageChange(currentPage - 1),
-              children: getLabel52("previous")
+              children: getLabel53("previous")
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "propeller-grid-pagination__info px-2 text-sm font-medium text-muted-foreground", children: [
-            getLabel52("page"),
+            getLabel53("page"),
             "\xA0",
             currentPage,
             "\xA0",
-            getLabel52("of"),
+            getLabel53("of"),
             "\xA0",
             totalPages
           ] }),
@@ -8908,7 +8932,7 @@ function GridPagination(props) {
               className: "propeller-grid-pagination__btn propeller-grid-pagination__btn--next inline-flex items-center rounded-control border border-input bg-card px-4 py-2 text-sm font-medium text-foreground shadow-sm hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed",
               disabled: currentPage === totalPages,
               onClick: () => handlePageChange(currentPage + 1),
-              children: getLabel52("next")
+              children: getLabel53("next")
             }
           )
         ] }) : null,
@@ -8920,7 +8944,7 @@ function GridPagination(props) {
               className: "propeller-grid-pagination__btn propeller-grid-pagination__btn--prev inline-flex items-center rounded-control border border-input bg-card px-3 py-2 text-sm font-medium text-foreground shadow-sm hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed",
               disabled: currentPage === 1,
               onClick: () => handlePageChange(currentPage - 1),
-              children: getLabel52("previous")
+              children: getLabel53("previous")
             }
           ),
           getFullPages().map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -8947,7 +8971,7 @@ function GridPagination(props) {
               className: "propeller-grid-pagination__btn propeller-grid-pagination__btn--next inline-flex items-center rounded-control border border-input bg-card px-3 py-2 text-sm font-medium text-foreground shadow-sm hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed",
               disabled: currentPage === totalPages,
               onClick: () => handlePageChange(currentPage + 1),
-              children: getLabel52("next")
+              children: getLabel53("next")
             }
           )
         ] }) : null
@@ -10508,6 +10532,94 @@ function GridFilters(rawProps) {
   );
 }
 var GridFilters_default = GridFilters;
+function GridFiltersPanel(props) {
+  const { activeFilterCount, wrapperClassName, labels, ...gridFiltersProps } = props;
+  const [open, setOpen] = React6.useState(false);
+  React6.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-grid-filters-panel w-full lg:w-64 lg:flex-shrink-0 ${wrapperClassName || ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "propeller-grid-filters-panel__trigger lg:hidden inline-flex items-center justify-center gap-2 h-10 px-4 rounded-control border border-border bg-card text-sm font-medium text-foreground shadow-sm hover:bg-surface-hover transition-colors",
+        onClick: () => setOpen(true),
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "propeller-grid-filters-panel__trigger-icon w-[1.1em] h-[1.1em] flex-shrink-0",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" })
+            }
+          ),
+          propellerV2CoreUi.getLabel(labels, "filtersButton", "Filters"),
+          activeFilterCount && activeFilterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-grid-filters-panel__count inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded-full bg-secondary text-secondary-foreground text-xs font-semibold", children: activeFilterCount }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `propeller-grid-filters-panel__backdrop lg:hidden fixed inset-0 z-40 bg-foreground/40 transition-opacity ${open ? "opacity-100" : "pointer-events-none opacity-0"}`,
+        onClick: () => setOpen(false),
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `propeller-grid-filters-panel__panel fixed inset-y-0 left-0 z-50 w-80 max-w-[85vw] bg-card shadow-xl flex flex-col transition-transform duration-300 lg:static lg:z-auto lg:w-auto lg:max-w-none lg:translate-x-0 lg:bg-transparent lg:shadow-none lg:block ${open ? "translate-x-0" : "-translate-x-full"}`,
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-filters-panel__header lg:hidden flex items-center justify-between gap-3 px-4 h-14 border-b border-border-subtle flex-shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-grid-filters-panel__title text-base font-semibold text-foreground", children: propellerV2CoreUi.getLabel(labels, "filtersButton", "Filters") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "propeller-grid-filters-panel__close inline-flex items-center justify-center h-8 w-8 rounded-control text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors",
+                onClick: () => setOpen(false),
+                "aria-label": propellerV2CoreUi.getLabel(labels, "closeFilters", "Close"),
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-grid-filters-panel__body flex-1 overflow-y-auto px-4 py-4 lg:flex-none lg:overflow-visible lg:p-0", children: /* @__PURE__ */ jsxRuntime.jsx(GridFilters_default, { ...gridFiltersProps, labels }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-grid-filters-panel__footer lg:hidden px-4 py-3 border-t border-border-subtle flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "propeller-grid-filters-panel__apply w-full inline-flex justify-center items-center h-10 px-6 rounded-control text-sm font-medium text-secondary-foreground bg-secondary hover:bg-secondary/90 transition-colors",
+              onClick: () => setOpen(false),
+              children: propellerV2CoreUi.getLabel(labels, "applyFilters", "Show results")
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
 function GridTitle(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-grid-title mb-8 ${props.className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-title__row flex items-baseline gap-3 mb-3", children: [
     props.headingLevel === "h2" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "propeller-grid-title__heading text-3xl sm:text-4xl font-bold tracking-tight", children: props.title }) : null,
@@ -10560,7 +10672,7 @@ function GridToolbar(rawProps) {
   const [currentSortOrder, setCurrentSortOrder] = React6.useState(propellerSdkV2.SortOrder.DESC);
   const [currentOffset, setCurrentOffset] = React6.useState(12);
   const [currentViewMode, setCurrentViewMode] = React6.useState("grid");
-  function getLabel52(key) {
+  function getLabel53(key) {
     const labels = props.labels || {};
     return labels[key] !== void 0 ? labels[key] : DEFAULT_LABELS2[key] || key;
   }
@@ -10637,7 +10749,7 @@ function GridToolbar(rawProps) {
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-toolbar__bar flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-grid-toolbar__count text-sm text-muted-foreground font-medium", children: props.itemsFound > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
             props.itemsFound,
-            getLabel52("products")
+            getLabel53("products")
           ] }) : null }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-toolbar__controls flex flex-wrap items-center gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -10648,7 +10760,7 @@ function GridToolbar(rawProps) {
                 onChange: (e) => handleOffsetChange(parseInt(e.target.value)),
                 children: getOffsetOptions()?.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: n, children: [
                   n,
-                  getLabel52("perPage")
+                  getLabel53("perPage")
                 ] }, n))
               }
             ),
@@ -10664,7 +10776,7 @@ function GridToolbar(rawProps) {
                   {
                     value: field,
                     disabled: field === "PRICE" && isPriceSortDisabled(),
-                    children: getLabel52(field)
+                    children: getLabel53(field)
                   },
                   field
                 ))
@@ -10677,8 +10789,8 @@ function GridToolbar(rawProps) {
                 value: currentSortOrder,
                 onChange: (e) => handleSortOrderChange(e.target.value),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.ASC, children: getLabel52("ASC") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.DESC, children: getLabel52("DESC") })
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.ASC, children: getLabel53("ASC") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.DESC, children: getLabel53("DESC") })
                 ]
               }
             ),
@@ -10688,7 +10800,7 @@ function GridToolbar(rawProps) {
                 type: "button",
                 className: "propeller-grid-toolbar__view-toggle h-9 w-9 flex items-center justify-center rounded-control border border-input bg-transparent hover:bg-accent hover:text-accent-foreground transition-colors",
                 onClick: (event) => handleViewChange(),
-                title: currentViewMode === "grid" ? getLabel52("switchToList") : getLabel52("switchToGrid"),
+                title: currentViewMode === "grid" ? getLabel53("switchToList") : getLabel53("switchToGrid"),
                 children: [
                   currentViewMode === "grid" ? /* @__PURE__ */ jsxRuntime.jsxs(
                     "svg",
@@ -10746,7 +10858,7 @@ function GridToolbar(rawProps) {
               onClick: (event) => {
                 if (props.onClearFilters) props.onClearFilters();
               },
-              children: getLabel52("clearAll")
+              children: getLabel53("clearAll")
             }
           ),
           props.priceFilterMin !== void 0 || props.priceFilterMax !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10757,7 +10869,7 @@ function GridToolbar(rawProps) {
                 if (props.onPriceFilterRemove) props.onPriceFilterRemove();
               },
               children: [
-                getLabel52("price"),
+                getLabel53("price"),
                 ": \u20AC",
                 props.priceFilterMin ?? 0,
                 " \u2013 \u20AC",
@@ -13262,22 +13374,28 @@ function ProductCardRoot(rawProps) {
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardShortDescription, {}) : null
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__footer w-full md:w-auto flex items-center gap-3 px-4 py-2 md:py-0 border-t md:border-t-0 border-border-subtle", children: [
-            props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) : null,
-            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-sm" }) : null,
-            props.allowAddToCart !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__cta flex-shrink-0 ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardAddToCart, {}) }) : null
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__footer w-full md:w-auto flex flex-col gap-2 md:flex-row md:items-center md:gap-3 px-4 py-2 md:py-0 border-t md:border-t-0 border-border-subtle", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__footer-meta flex items-center justify-between gap-3 md:contents", children: [
+              props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) : null,
+              props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-sm" }) : null
+            ] }),
+            props.allowAddToCart !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__cta w-full md:w-auto md:flex-shrink-0 md:ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardAddToCart, {}) }) : null
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__body flex flex-1 flex-col gap-1.5 p-3 sm:gap-2 sm:p-4", children: [
             props.showSku !== false && sku ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardName, { linkable: true }) : null,
             textLabelValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardTextLabels, {}) : null,
-            props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) : null,
+            props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) }) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardShortDescription, {}) : null,
-            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__price mt-auto pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-base sm:text-lg" }) }) : null
+            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__price mt-auto pt-1 hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-base sm:text-lg" }) }) : null
           ] }),
-          props.allowAddToCart !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__cta px-3 pb-3 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardAddToCart, {}) }) : null
+          props.showStock && !!product.inventory || props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__footer-meta flex flex-wrap items-center justify-between gap-x-2 gap-y-1 px-3 pt-1 sm:px-4 md:hidden", children: [
+            props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) : null,
+            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-base", className: "propeller-product-card__price min-w-0 text-right" }) : null
+          ] }) : null,
+          props.allowAddToCart !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__cta px-3 pb-3 pt-2 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardAddToCart, {}) }) : null
         ] })
       ]
     }
@@ -17269,6 +17387,7 @@ exports.FavoriteListItem = FavoriteListItem_default;
 exports.FavoriteLists = FavoriteLists_default;
 exports.ForgotPassword = ForgotPassword_default;
 exports.GridFilters = GridFilters_default;
+exports.GridFiltersPanel = GridFiltersPanel;
 exports.GridPagination = GridPagination_default;
 exports.GridTitle = GridTitleWithProvider_default;
 exports.GridToolbar = GridToolbar_default;