@shopgate/engage 7.32.0-beta.5 → 7.32.0-beta.7

package/page/widgets/ProductSlider/ProductSlider.js

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { ProductSlider } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
-import { useTheme } from '@shopgate/engage/styles';
 import { useProductSliderWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 
@@ -30,7 +29,6 @@ const ProductSliderWidget = () => {
     limit: productCount,
     sort
   });
-  const theme = useTheme();
   const productIds = useMemo(() => results?.map(result => result.id), [results]);
   if (!productIds || !productIds.length) {
     return null;
@@ -41,24 +39,12 @@ const ProductSliderWidget = () => {
     }) : null, /*#__PURE__*/_jsx(ProductSlider, {
       productIds: productIds,
       scope: "widgets",
-      productItemProps: productItemProps,
-      slidesPerView: 2.3
+      productItemProps: productItemProps
       // Improves interaction with the slider in the CMS preview iframe
       ,
       ...(isPreview ? {
         touchStartPreventDefault: true
       } : {}),
-      breakpoints: {
-        [theme.breakpoints.values.sm]: {
-          slidesPerView: 3.3
-        },
-        [theme.breakpoints.values.md]: {
-          slidesPerView: 4.3
-        },
-        [theme.breakpoints.values.lg]: {
-          slidesPerView: 5.3
-        }
-      },
       ...swiperProps
     })]
   });

package/product/components/Media/FeaturedMedia.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@shopgate/engage/product';
+import { useProductImageSettings } from '@shopgate/engage/settings/hooks';
 import { PORTAL_PRODUCT_MEDIA } from "../../../components/constants";
 import MediaImage from "./MediaImage";
 import FeaturedVideo from "./FeaturedVideo";
@@ -21,11 +22,16 @@ const FeaturedMedia = ({
   altText
 }) => {
   const TypeRenderer = types[type] || MediaImage;
+  const {
+    list
+  } = useProductImageSettings();
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PORTAL_PRODUCT_MEDIA,
     children: /*#__PURE__*/_jsx(TypeRenderer, {
       url: url,
-      altText: altText
+      altText: altText,
+      resolutions: list.resolutions,
+      ratio: list.ratio
     })
   });
 };

package/product/components/Media/MediaImage.js

@@ -1,14 +1,18 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Image from '@shopgate/pwa-common/components/Image';
-import appConfig from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { SurroundPortals } from "../../../components";
 import { PORTAL_PRODUCT_IMAGE } from "../../../components/constants";
-import { useWidgetSettings } from "../../../core";
+import { useProductImageShadow } from "../ProductImage/hooks";
 import { defaultProps, propTypes } from "./props";
 import MediaPlaceholder from "./MediaPlaceholder";
+
+/**
+ * The widget id the legacy inner shadow setting is configured under for this component.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+const WIDGET_ID = '@shopgate/engage/product/MediaImage';
 const useStyles = makeStyles()({
   innerShadow: {
     ':after': {
@@ -33,41 +37,37 @@ const MediaImage = ({
   url,
   altText,
   className,
-  resolutions
+  resolutions,
+  ratio
 }) => {
   const {
     classes,
     cx
   } = useStyles();
-  const [placeholder, setPlaceholderEnabled] = useState(!url);
-  const {
-    showInnerShadow = !appConfig.hideProductImageShadow
-  } = useWidgetSettings('@shopgate/engage/product/MediaImage');
-  useEffect(() => setPlaceholderEnabled(!url), [url]);
+  const showInnerShadow = useProductImageShadow(WIDGET_ID);
   const mergedClassName = cx(className, {
     [classes.innerShadow]: showInnerShadow
   });
-  if (placeholder) {
-    return /*#__PURE__*/_jsx(SurroundPortals, {
-      portalName: PORTAL_PRODUCT_IMAGE,
-      children: /*#__PURE__*/_jsx(MediaPlaceholder, {
-        className: mergedClassName
-      })
-    });
-  }
   return /*#__PURE__*/_jsx(SurroundPortals, {
-    portalName: PORTAL_PRODUCT_IMAGE,
-    portalProps: {
+    portalName: PORTAL_PRODUCT_IMAGE
+    // Nothing is passed on without a url, so portals keep seeing what they saw before the
+    // placeholder moved into the Image component.
+    ,
+    portalProps: url ? {
       src: url,
-      resolutions
-    },
+      resolutions,
+      ratio
+    } : undefined,
     children: /*#__PURE__*/_jsx(Image, {
       src: url,
       resolutions: resolutions,
+      ratio: ratio,
       alt: altText,
       className: mergedClassName,
-      backgroundColor: "transparent",
-      onError: () => setPlaceholderEnabled(true),
+      backgroundColor: "transparent"
+      // Without the merged class name - it is already on the container this renders into.
+      ,
+      placeholder: /*#__PURE__*/_jsx(MediaPlaceholder, {}),
       animating: true
     })
   });
@@ -76,6 +76,7 @@ MediaImage.defaultProps = {
   url: defaultProps.url,
   altText: defaultProps.altText,
   className: defaultProps.className,
+  ratio: null,
   resolutions: undefined
 };
 export default MediaImage;

package/product/components/Media/MediaPlaceholder.js

@@ -5,15 +5,12 @@ import { defaultProps, propTypes } from "./props";
 import { jsx as _jsx } from "react/jsx-runtime";
 const placeholderIconScale = 0.65;
 const useStyles = makeStyles()(theme => ({
+  // Fills the box its parent reserves rather than reserving one of its own.
   placeholderContainer: {
-    position: 'relative',
+    position: 'absolute',
     width: '100%',
-    ':before': {
-      display: 'block',
-      content: '""',
-      width: '100%',
-      paddingTop: '100%'
-    }
+    height: '100%',
+    top: 0
   },
   placeholderContent: {
     position: 'absolute',

package/product/components/MediaSlider/components/MediaImage/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
+import { useProductImageSettings } from '@shopgate/engage/settings/hooks';
 import { MediaImage as Image } from "../../../Media";
-import { PRODUCT_SLIDER_IMAGE_FORMATS } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   full: {
@@ -23,6 +23,9 @@ const MediaImage = ({
   const {
     classes
   } = useStyles();
+  const {
+    pdp
+  } = useProductImageSettings();
   return /*#__PURE__*/_jsx("div", {
     onClick: onClick,
     onKeyDown: onClick,
@@ -32,7 +35,8 @@ const MediaImage = ({
     children: /*#__PURE__*/_jsx(Image, {
       url: media.url,
       altText: media.altText,
-      resolutions: PRODUCT_SLIDER_IMAGE_FORMATS
+      resolutions: pdp.resolutions,
+      ratio: pdp.ratio
     })
   });
 };

package/product/components/MediaSlider/constants.js

@@ -1,15 +1,4 @@
 /**
  * key in the product image collection
  */
-export const PRODUCT_SLIDER_IMAGE_COLLECTION_KEY = 'PRODUCT_SLIDER_IMAGES';
-
-/**
- * themes value for the product slider image formats
- */
-export const PRODUCT_SLIDER_IMAGE_FORMATS = [{
-  width: 440,
-  height: 440
-}, {
-  width: 1024,
-  height: 1024
-}];
+export const PRODUCT_SLIDER_IMAGE_COLLECTION_KEY = 'PRODUCT_SLIDER_IMAGES';

package/product/components/ProductCard/index.js

@@ -1,19 +1,25 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { isBeta } from '@shopgate/engage/core/helpers';
-import { useWidgetSettings } from '@shopgate/engage/core/hooks';
-import { useProductListType } from '@shopgate/engage/product/hooks';
+import { useProductListType, useShowEmptyRatingStars } from '@shopgate/engage/product/hooks';
 import { Link, RatingStars, DiscountBadge, SurroundPortals } from '@shopgate/engage/components';
 import { getProductRoute } from '@shopgate/engage/product';
 import { MapPriceHint, ProductImage, OrderQuantityHint, FeaturedMedia, Swatches, ProductName, ProductBadges } from '@shopgate/engage/product/components';
-import { getProductImageSettings } from '@shopgate/engage/product/helpers';
 import { PRODUCT_ITEM_DISCOUNT, PRODUCT_ITEM_PRICE } from '@shopgate/engage/category';
+import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
+import { getProductCardNameMaxLines } from '@shopgate/engage/settings/selectors/appSettings';
 import ProductGridPrice from "../ProductGridPrice";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
+  root: {
+    padding: theme.components.productCard.padding
+  },
+  image: {
+    padding: theme.components.productCard.imagePadding
+  },
   details: {
-    padding: '12px 16px'
+    padding: theme.components.productCard.textPadding
   },
   title: {
     fontSize: theme.typography.body2.fontSize,
@@ -34,7 +40,8 @@ const location = 'productCard';
  * @param {boolean} props.hidePrice Whether the price should be hidden.
  * @param {boolean} props.hideRating Whether the rating should be hidden.
  * @param {boolean} props.hideName Whether the name should be hidden.
- * @param {number} props.titleRows The max number of rows for the product title.
+ * @param {number} props.titleRows Optional override for the max number of rows for the product
+ * title
  * @param {string} props.url Optional alternative url for the product link
  * @return {JSX.Element}
  */
@@ -54,12 +61,8 @@ function ProductCard(props) {
   const {
     meta
   } = useProductListType();
-  const {
-    ListImage: gridResolutions
-  } = getProductImageSettings();
-  const {
-    showEmptyRatingStars = false
-  } = useWidgetSettings('@shopgate/engage/rating');
+  const productNameLines = useSelector(getProductCardNameMaxLines);
+  const showEmptyRatingStars = useShowEmptyRatingStars();
   const showRatings = useMemo(() => {
     if (!hideRating && product?.rating?.average > 0) {
       return true;
@@ -70,7 +73,7 @@ function ProductCard(props) {
     return false;
   }, [hideRating, product, showEmptyRatingStars]);
   return /*#__PURE__*/_jsxs(Link, {
-    className: "engage__product-card",
+    className: cx(classes.root, 'engage__product-card'),
     href: url || getProductRoute(product.id),
     itemProp: "item",
     itemScope: true,
@@ -79,15 +82,18 @@ function ProductCard(props) {
     state: {
       ...meta
     },
-    children: [isBeta() && product.featuredMedia ? /*#__PURE__*/_jsx(FeaturedMedia, {
-      type: product.featuredMedia.type,
-      url: product.featuredMedia.url,
-      altText: product.featuredMedia.altText
-    }) : /*#__PURE__*/_jsx(ProductImage, {
-      src: product.featuredImageBaseUrl,
-      resolutions: gridResolutions,
-      alt: product.name,
-      itemProp: "image"
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.image,
+      children: isBeta() && product.featuredMedia ? /*#__PURE__*/_jsx(FeaturedMedia, {
+        type: product.featuredMedia.type,
+        url: product.featuredMedia.url,
+        altText: product.featuredMedia.altText
+      }) : /*#__PURE__*/_jsx(ProductImage, {
+        src: product.featuredImageBaseUrl,
+        context: "list",
+        alt: product.name,
+        itemProp: "image"
+      })
     }), /*#__PURE__*/_jsx(ProductBadges, {
       location: location,
       productId: product.id,
@@ -114,7 +120,7 @@ function ProductCard(props) {
         className: classes.title,
         testId: `Productname: ${product.name}`,
         itemProp: "name",
-        rows: titleRows || 3
+        rows: titleRows || productNameLines
       }), /*#__PURE__*/_jsx(MapPriceHint, {
         productId: product.id
       }), /*#__PURE__*/_jsx(OrderQuantityHint, {
@@ -150,7 +156,7 @@ ProductCard.defaultProps = {
   hideName: false,
   hidePrice: false,
   hideRating: false,
-  titleRows: 3,
+  titleRows: null,
   url: null
 };
 export default ProductCard;

package/product/components/ProductGrid/components/Item/components/ItemDetails/index.js

@@ -8,17 +8,20 @@ import { makeStyles } from '@shopgate/engage/styles';
 import ItemName from "../ItemName";
 import ItemPrice from "../ItemPrice";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     lineHeight: 1.2,
     ':not(:empty)': {
-      padding: '16px 8px 8px'
+      padding: theme.components.tiles.textPadding,
+      // Floored at the favorites button overhang so a small configured inner padding
+      // can't let the button overlap the product name.
+      paddingTop: theme.components.tiles.textPaddingTop
     }
   },
   quantityHint: {
     paddingTop: 8
   }
-});
+}));
 
 /**
  * The Product Grid Item Detail component.

package/product/components/ProductGrid/components/Item/components/ItemImage/index.js

@@ -2,12 +2,9 @@ import React, { useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_IMAGE } from '@shopgate/engage/category/constants';
-import { getProductImageSettings, ProductImage } from '@shopgate/engage/product';
+import { ProductImage } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  ListImage: gridResolutions
-} = getProductImageSettings();
 const useStyles = makeStyles()(theme => ({
   image: {
     background: theme.palette.background.surface
@@ -37,7 +34,7 @@ const ItemImage = ({
       className: classes.image,
       alt: name,
       src: imageUrl,
-      resolutions: gridResolutions,
+      context: "list",
       itemProp: "image"
     })
   });

package/product/components/ProductGrid/components/Item/components/ItemName/index.js

@@ -1,9 +1,11 @@
 import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { PRODUCT_ITEM_NAME, PRODUCT_ITEM_NAME_BEFORE, PRODUCT_ITEM_NAME_AFTER } from '@shopgate/engage/category/constants';
+import { useSelector } from 'react-redux';
 import { Portal } from '@shopgate/engage/components';
 import { ProductName, ProductRatingStars } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
+import { getProductTileNameMaxLines } from '@shopgate/engage/settings/selectors/appSettings';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
@@ -29,6 +31,7 @@ const ItemName = ({
     classes,
     cx
   } = useStyles();
+  const productNameLines = useSelector(getProductTileNameMaxLines);
   const portalProps = useMemo(() => ({
     productId,
     display
@@ -54,7 +57,8 @@ const ItemName = ({
       className: cx(classes.root, 'theme__product-grid__item__item-name'),
       portalName: PRODUCT_ITEM_NAME,
       portalProps: portalProps,
-      testId: `Productname: ${name}`
+      testId: `Productname: ${name}`,
+      rows: productNameLines
     })]
   });
 };

package/product/components/ProductGrid/components/Item/components/ItemName/spec.js

@@ -1,9 +1,16 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { ProductName } from '@shopgate/engage/product';
 import ItemName from "./index";
+
+// Resolve selectors against an empty state so they fall back to the built-in appSettings defaults.
 import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: selector => selector(undefined)
+}));
 jest.mock('@shopgate/engage/product', () => ({
-  ProductName: () => null,
+  ProductName: jest.fn(() => null),
   ProductRatingStars: () => null
 }));
 jest.mock('@shopgate/engage/components');
@@ -12,10 +19,21 @@ const props = {
   name: 'Foo'
 };
 describe('<ItemName />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   it('should render with minimal props', () => {
     const wrapper = render(/*#__PURE__*/_jsx(ItemName, {
       ...props
     }));
     expect(wrapper.asFragment()).toMatchSnapshot();
   });
+  it('should clamp the name to the configured tile line count', () => {
+    render(/*#__PURE__*/_jsx(ItemName, {
+      ...props
+    }));
+
+    // The tile name line count comes from the appSettings channel; 3 is the built-in default.
+    expect(ProductName.mock.calls[0][0].rows).toBe(3);
+  });
 });

package/product/components/ProductGrid/components/Item/index.js

@@ -17,7 +17,14 @@ const useStyles = makeStyles()((theme, {
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    height: '100%'
+    height: '100%',
+    overflow: 'hidden',
+    padding: theme.components.tiles.padding,
+    background: theme.components.tiles.backgroundColor
+  },
+  image: {
+    display: 'block',
+    padding: theme.components.tiles.imagePadding
   },
   itemDetails: {
     position: 'relative',
@@ -50,6 +57,7 @@ const Item = ({
   return /*#__PURE__*/_jsxs("div", {
     className: cx(classes.root, 'theme__product-grid__item'),
     children: [/*#__PURE__*/_jsx(Link, {
+      className: classes.image,
       role: "none",
       href: getProductRoute(product.id),
       state: {

package/product/components/ProductGrid/hooks.d.ts

@@ -5,13 +5,6 @@
  * Precedence:
  * - Once the app settings are hydrated from a source (admin sync / jsonp), they
  *   are authoritative everywhere.
- * - Before hydration, when the grid is rendered outside a page-builder widget
- *   (Category / Search / legacy Products widget), the single legacy
- *   `useWidgetSettings` scalar is honored flat across all breakpoints. This
- *   reproduces the old theme grid and preserves the merchant's configured value.
- * - Otherwise (inside a widget, pre-hydration) the built-in responsive default
- *   from the app settings is used ({ xs: 2, md: 4 }), so the inherited legacy
- *   `columns: 2` default no longer pins tablet to 2.
  * @returns The resolved number of columns for the active breakpoint.
  */
 export declare const useProductGridColumns: () => number;

package/product/components/ProductGrid/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductGrid/hooks.ts"],"names":[],"mappings":"AAYA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,qBAAqB,QAAO,MAwBxC,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductGrid/hooks.ts"],"names":[],"mappings":"AAiBA;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,QAAO,MAmCxC,CAAC"}

package/product/components/ProductGrid/hooks.js

@@ -1,9 +1,11 @@
+import "core-js/modules/es.array.reduce.js";
 import { useContext, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { WidgetContext } from '@shopgate/engage/page/components/Widgets/WidgetContext';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { useResponsiveValue } from '@shopgate/engage/styles';
 import { getAreAppSettingsHydrated, getProductGridColumns } from '@shopgate/engage/settings/selectors/appSettings';
+import { SCREEN_SIZE_BREAKPOINTS } from '@shopgate/engage/settings/constants/appSettings';
 import { WIDGET_ID } from "./constants";
 
 /**
@@ -13,13 +15,6 @@ import { WIDGET_ID } from "./constants";
  * Precedence:
  * - Once the app settings are hydrated from a source (admin sync / jsonp), they
  *   are authoritative everywhere.
- * - Before hydration, when the grid is rendered outside a page-builder widget
- *   (Category / Search / legacy Products widget), the single legacy
- *   `useWidgetSettings` scalar is honored flat across all breakpoints. This
- *   reproduces the old theme grid and preserves the merchant's configured value.
- * - Otherwise (inside a widget, pre-hydration) the built-in responsive default
- *   from the app settings is used ({ xs: 2, md: 4 }), so the inherited legacy
- *   `columns: 2` default no longer pins tablet to 2.
  * @returns The resolved number of columns for the active breakpoint.
  */
 export const useProductGridColumns = () => {
@@ -30,20 +25,24 @@ export const useProductGridColumns = () => {
   } = useContext(WidgetContext);
   const isInsideWidget = Boolean(widgetCode);
   const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
-  // The built-in default { xs: 2, md: 4 } until hydrated, the source value after.
+  // The built-in default { small: 2, large: 4 } until hydrated, the source value after.
   const appSettingsColumns = useSelector(getProductGridColumns);
   const {
     columns: legacyColumns
   } = useWidgetSettings(WIDGET_ID) || {};
-  const breakpoints = useMemo(() => {
+  const sizes = useMemo(() => {
     // Only special case: pre-hydration, outside a widget, honor the legacy
     // scalar flat across every breakpoint.
     if (!areAppSettingsHydrated && !isInsideWidget && typeof legacyColumns === 'number') {
       return {
-        xs: legacyColumns
+        small: legacyColumns
       };
     }
     return appSettingsColumns;
   }, [areAppSettingsHydrated, isInsideWidget, legacyColumns, appSettingsColumns]);
+  const breakpoints = useMemo(() => Object.entries(sizes).reduce((acc, [size, value]) => {
+    acc[SCREEN_SIZE_BREAKPOINTS[size]] = value;
+    return acc;
+  }, {}), [sizes]);
   return useResponsiveValue(breakpoints);
 };

package/product/components/ProductImage/ProductImage.d.ts

@@ -0,0 +1,42 @@
+import type { ImageProps } from '@shopgate/pwa-common/components/Image';
+import type { ImageResolution, ProductImageContext } from '@shopgate/engage/settings/types/appSettings';
+/**
+ * Everything the underlying Image accepts is forwarded, minus the two this component owns:
+ * `backgroundColor`, derived from `noBackground`, and `placeholder`.
+ */
+export interface ProductImageProps extends Omit<ImageProps, 'backgroundColor' | 'placeholder'> {
+    /**
+     * The surface this image is rendered on. Determines the resolutions and aspect ratio, which are
+     * configured app wide. Ignored when an explicit `resolutions` prop is passed.
+     */
+    context?: ProductImageContext | null;
+    /**
+     * Drops the background behind the image.
+     */
+    noBackground?: boolean;
+    /**
+     * Image to show instead of the placeholder icon. The shop wide setting wins over this.
+     */
+    placeholderSrc?: string | null;
+    /**
+     * @deprecated Pass a `context` instead, so the image follows the configured aspect ratio.
+     */
+    ratio?: number[] | null;
+    /**
+     * @deprecated Pass a `context` instead, so the image follows the configured aspect ratio.
+     * Still honored, and still takes precedence over `context`.
+     */
+    resolutions?: ImageResolution[];
+}
+/**
+ * The product image component.
+ *
+ * Behaves like the core Image component, with a product placeholder for a missing or failed image.
+ * @param props The component props.
+ * @returns The rendered component.
+ */
+declare const ProductImage: (props: ProductImageProps) => import("react").JSX.Element;
+export { ProductImage as UnwrappedProductImage };
+declare const _default: import("react").MemoExoticComponent<(props: ProductImageProps) => import("react").JSX.Element>;
+export default _default;
+//# sourceMappingURL=ProductImage.d.ts.map

package/product/components/ProductImage/ProductImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductImage.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductImage/ProductImage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAMxE,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,6CAA6C,CAAC;AA0BrD;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,aAAa,CAAC;IAC5F;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;CACjC;AAmCD;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCA0E7C,CAAC;AAEF,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,CAAC;oEAOX,iBAAiB;AAOvD,wBAA2C"}