igloo-d2c-components 1.0.45 → 1.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/esm/index.js CHANGED
@@ -2535,6 +2535,27 @@ const ProductCard$1 = styled$1(Box)(() => ({
2535
2535
  '@media (min-width: 900px)': {
2536
2536
  width: '158px',
2537
2537
  height: '158px',
2538
+ '&:hover': {
2539
+ border: '2px solid transparent',
2540
+ boxShadow: 'none',
2541
+ background: 'linear-gradient(90deg, #3D93DE 0%, #A4CE4E 100%)',
2542
+ '& .product-card-image-layer, & .product-card-placeholder-layer': {
2543
+ opacity: 0,
2544
+ },
2545
+ '& .product-card-bottom-bar': {
2546
+ position: 'absolute',
2547
+ inset: 0,
2548
+ height: '100%',
2549
+ background: 'transparent',
2550
+ zIndex: 1,
2551
+ },
2552
+ '& .product-card-icon img': {
2553
+ filter: 'brightness(0) invert(1)',
2554
+ },
2555
+ '& .product-card-name': {
2556
+ color: '#ffffff',
2557
+ },
2558
+ },
2538
2559
  },
2539
2560
  }));
2540
2561
  /** Background image that fills the product card */
@@ -2630,7 +2651,7 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
2630
2651
  e.preventDefault();
2631
2652
  onProductSelect(product.id);
2632
2653
  }
2633
- } }, { children: [product.cardImage ? (jsx(ProductCardImage, { src: product.cardImage, alt: product.name })) : (jsx(ProductCardPlaceholder, {})), jsxs(ProductCardBottomBar, { children: [jsx(ProductIcon, { children: jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) }), jsx(ProductName$1, { children: product.name })] })] }))] }, product.id));
2654
+ } }, { children: [product.cardImage ? (jsx(ProductCardImage, { src: product.cardImage, alt: product.name, className: "product-card-image-layer" })) : (jsx(ProductCardPlaceholder, { className: "product-card-placeholder-layer" })), jsxs(ProductCardBottomBar, Object.assign({ className: "product-card-bottom-bar" }, { children: [jsx(ProductIcon, Object.assign({ className: "product-card-icon" }, { children: jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) })), jsx(ProductName$1, Object.assign({ className: "product-card-name" }, { children: product.name }))] }))] }))] }, product.id));
2634
2655
  }) })) })] })));
2635
2656
  }
2636
2657
  // Mobile Drawer variant (default)
@@ -2641,7 +2662,7 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
2641
2662
  e.preventDefault();
2642
2663
  onProductSelect(product.id);
2643
2664
  }
2644
- } }, { children: [product.cardImage ? (jsx(ProductCardImage, { src: product.cardImage, alt: product.name })) : (jsx(ProductCardPlaceholder, {})), jsxs(ProductCardBottomBar, { children: [jsx(ProductIcon, { children: jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) }), jsx(ProductName$1, { children: product.name })] })] }))] }, product.id));
2665
+ } }, { children: [product.cardImage ? (jsx(ProductCardImage, { src: product.cardImage, alt: product.name, className: "product-card-image-layer" })) : (jsx(ProductCardPlaceholder, { className: "product-card-placeholder-layer" })), jsxs(ProductCardBottomBar, Object.assign({ className: "product-card-bottom-bar" }, { children: [jsx(ProductIcon, Object.assign({ className: "product-card-icon" }, { children: jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) })), jsx(ProductName$1, Object.assign({ className: "product-card-name" }, { children: product.name }))] }))] }))] }, product.id));
2645
2666
  }) })) })] }) })));
2646
2667
  }
2647
2668