@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/product/components/FilterBar/components/Content/components/FilterButton/index.js

@@ -1,21 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { Grid, I18n, Ripple, FilterIcon } from '@shopgate/engage/components';
+import { Grid, I18n, Ripple, FilterIcon, Typography } from '@shopgate/engage/components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   button: {
     color: 'inherit',
-    fontSize: '1.5rem',
-    lineHeight: 1,
+    fontSize: theme.components.icon.medium,
     outline: 0,
     padding: 0,
-    minWidth: variables.navigator.height,
-    height: variables.filterbar.height,
+    minWidth: theme.components.navigator.height,
+    height: theme.components.filterBar.height,
     position: 'relative',
     zIndex: 1,
     overflow: 'hidden'
@@ -25,9 +20,6 @@ const useStyles = makeStyles()(theme => ({
   },
   filterButtonLabel: {
     alignSelf: 'center',
-    fontSize: '0.875rem',
-    fontWeight: '500',
-    lineHeight: 1,
     paddingRight: theme.spacing(1)
   },
   filterButtonRipple: {
@@ -66,7 +58,9 @@ function FilterButton({
         children: [/*#__PURE__*/_jsx(Grid.Item, {
           className: classes.filterButton,
           component: "div",
-          children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle2",
+            component: "span",
             className: classes.filterButtonLabel,
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: "titles.filter"

package/product/components/FilterBar/components/Content/components/Sort/index.js

@@ -2,13 +2,8 @@ import React from 'react';
 import { SelectBox, ArrowDropIcon, SurroundPortals } from '@shopgate/engage/components';
 import { useSort, PORTAL_FILTER_SORT_OPTIONS } from '@shopgate/engage/filter';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Item from "./components/Item";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  shadows,
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   button: {
     color: 'inherit',
@@ -18,18 +13,17 @@ const useStyles = makeStyles()(theme => ({
     alignItems: 'center',
     textOverflow: 'ellipsis',
     justifyContent: 'center',
-    height: variables.filterbar.height,
+    height: theme.components.filterBar.height,
     whiteSpace: 'nowrap'
   },
   selection: {
-    fontSize: '0.875rem',
-    fontWeight: '500',
-    lineHeight: 1,
+    fontSize: theme.typography.body2.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
     paddingTop: 1,
     alignSelf: 'center'
   },
   icon: {
-    fontSize: '1.5rem'
+    fontSize: theme.components.icon.medium
   },
   iconOpen: {
     transform: 'rotate(180deg)'
@@ -40,8 +34,8 @@ const useStyles = makeStyles()(theme => ({
     zIndex: 2,
     top: '100%',
     left: 0,
-    background: 'var(--color-background-accent)',
-    boxShadow: shadows.filter.sort,
+    background: theme.palette.background.emphasized,
+    boxShadow: 'rgba(0, 0, 0, 0.16) 0 2px 2px',
     [responsiveMediaQuery('>xs', {
       webOnly: true
     })]: {
@@ -63,7 +57,7 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   selectItemSelected: {
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   },
   selectBox: {
     flexGrow: 2

package/product/components/FilterBar/components/FilterModal/FilterModalContent.js

@@ -1,18 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useFilterPage } from '@shopgate/engage/filter/hooks';
 import FilterPageContent from '@shopgate/engage/filter/components/FilterPageContent';
 import Title from "./FilterModalTitle";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     zIndex: 1,
-    background: colors.light,
+    background: theme.palette.background.surface,
     borderRadius: 4,
     minWidth: 300,
     [responsiveMediaQuery('>=md')]: {
@@ -29,7 +25,7 @@ const useStyles = makeStyles()({
     overflow: 'auto',
     flex: 1
   }
-});
+}));
 
 /**
  * Filter modal content component

package/product/components/FilterBar/components/FilterModal/FilterModalTitle.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { Ripple, CrossIcon } from '@shopgate/engage/components';
+import { Ripple, CrossIcon, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     display: 'flex',
     flexDirection: 'row',
@@ -15,30 +15,29 @@ const useStyles = makeStyles()({
     paddingBottom: 16
   },
   title: {
-    flex: 1,
-    fontSize: '1.25rem'
+    flex: 1
   },
   closeButton: {
-    fontSize: 21,
+    fontSize: theme.components.icon.small,
     marginRight: 12,
     cursor: 'pointer',
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   },
   actionButton: {
     cursor: 'pointer',
     marginLeft: 16,
-    color: 'var(--color-primary)',
-    fontWeight: '600',
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold,
     padding: 8
   },
   actionButtonSecondary: {
     cursor: 'pointer',
     marginLeft: 16,
-    color: 'var(--color-primary)',
-    fontWeight: '500',
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightMedium,
     padding: 8
   }
-});
+}));
 
 /**
  * Filter Modal Title
@@ -59,7 +58,9 @@ const FilterModalTitle = ({
       onClick: close,
       className: classes.closeButton,
       children: /*#__PURE__*/_jsx(CrossIcon, {})
-    }), /*#__PURE__*/_jsx("span", {
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      component: "span",
       className: classes.title,
       children: i18n.text('titles.filter')
     }), /*#__PURE__*/_jsx(Ripple, {

package/product/components/FilterBar/index.js

@@ -2,16 +2,12 @@ import React, { useState, useMemo, memo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { ResponsiveContainer } from '@shopgate/engage/components';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
-import { themeConfig } from '@shopgate/engage';
 import { SortProvider, SORT_SCOPE_CATEGORY, SORT_SCOPE_SEARCH } from '@shopgate/engage/filter';
 import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import Provider from "./FilterBarProvider";
 import Content from "./components/Content";
 import Modal from "./components/FilterModal";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()({
   root: {
     transition: 'transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1)'
@@ -37,11 +33,11 @@ const FilterBar = ({
     setActive(count > 0);
   }, []);
   const style = useMemo(() => hasNewServices() ? {
-    background: active ? 'var(--color-background-accent)' : 'var(--color-background-accent)',
-    color: active ? 'var(--color-primary)' : theme.palette.text.primary
+    background: theme.palette.background.emphasized,
+    color: active ? theme.palette.primary.main : theme.palette.text.primary
   } : {
-    background: active ? 'var(--color-secondary)' : colors.background,
-    color: active ? 'var(--color-secondary-contrast)' : colors.dark
+    background: active ? theme.palette.secondary.main : theme.palette.background.emphasized,
+    color: active ? theme.palette.secondary.contrastText : theme.palette.text.primary
   }, [active, theme]);
   const sortScope = useMemo(() => categoryId ? SORT_SCOPE_CATEGORY : SORT_SCOPE_SEARCH, [categoryId]);
   return /*#__PURE__*/_jsx("div", {

package/product/components/Header/PriceStriked/index.js

@@ -5,12 +5,8 @@ import { PRODUCT_PRICE_STRIKED, PRODUCT_PRICE_STRIKED_AFTER, PRODUCT_PRICE_STRIK
 import { withPriceCalculation } from '@shopgate/engage/product/hocs';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import connect from "./connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   placeholder: {
     height: 16,
@@ -19,13 +15,13 @@ const useStyles = makeStyles()(theme => ({
     marginBottom: 2
   },
   msrp: {
-    color: colors.shade11,
-    fontSize: '0.875rem',
-    marginRight: theme.spacing(0.5)
+    color: theme.palette.grey.dark,
+    marginRight: theme.spacing(0.5),
+    fontSize: theme.typography.body2.fontSize
   },
   msrpStriked: {
     display: 'inline',
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   }
 }));
 

package/product/components/Header/Shipping/index.js

@@ -7,7 +7,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import Label from "./components/Label";
 import connect from "./connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   placeholder: {
     height: 16,
     width: '70%',
@@ -15,9 +15,9 @@ const useStyles = makeStyles()({
     marginBottom: 2
   },
   shipping: {
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   }
-});
+}));
 
 /**
  * The Shipping Info component.

package/product/components/Header/Tiers/components/Tier/index.js

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import { I18n } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   tier: {
     display: 'block',
     lineHeight: 1.35
   },
   price: {
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   }
-});
+}));
 
 /**
  * @param {Object} props The component props.

package/product/components/Header/Tiers/index.js

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import Portal from '@shopgate/pwa-common/components/Portal';
+import { Typography } from '@shopgate/engage/components';
 import { PRODUCT_TIERS, PRODUCT_TIERS_AFTER, PRODUCT_TIERS_BEFORE } from '@shopgate/pwa-common-commerce/product/constants/Portals';
 import { makeStyles } from '@shopgate/engage/styles';
 import Tier from "./components/Tier";
@@ -8,8 +9,7 @@ import connect from "./connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   wrapper: {
-    marginTop: 4,
-    fontSize: '0.875rem'
+    marginTop: 4
   }
 });
 
@@ -33,7 +33,9 @@ const Tiers = ({
       name: PRODUCT_TIERS_BEFORE
     }), /*#__PURE__*/_jsx(Portal, {
       name: PRODUCT_TIERS,
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "div",
         className: cx(classes.wrapper, 'engage__product__header__tiers'),
         children: price.tiers.map(tier => /*#__PURE__*/_jsx(Tier, {
           tier: tier,

package/product/components/MapPriceHint/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SurroundPortals, I18n, TimeBoundary } from '@shopgate/engage/components';
+import { SurroundPortals, I18n, TimeBoundary, Typography } from '@shopgate/engage/components';
 import { isBeta, useWidgetSettings, useWidgetStyles } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_MAP_PRICE } from '@shopgate/engage/product';
@@ -10,9 +10,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()((_, {
   hintStyle
 }) => ({
-  defaultStyle: {
-    fontSize: '0.75rem'
-  },
   hintStyle: hintStyle || {}
 }));
 
@@ -45,9 +42,13 @@ const MapPriceHint = ({
       end: new Date(mapPrice.endDate),
       children: ({
         between
-      }) => between && /*#__PURE__*/_jsx(I18n.Text, {
-        string: settings.hint,
-        className: cx('engage__product__map-price-hint', cx(classes.defaultStyle, classes.hintStyle))
+      }) => between && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
+        className: cx('engage__product__map-price-hint', classes.hintStyle),
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: settings.hint
+        })
       })
     })
   });

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, { themeShadows } 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': {
@@ -19,7 +23,7 @@ const useStyles = makeStyles()({
       right: 0,
       bottom: 0,
       left: 0,
-      boxShadow: themeShadows.productImage,
+      boxShadow: 'inset 0 0 20px rgba(0, 0, 0, .05)',
       pointerEvents: 'none'
     }
   }
@@ -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

@@ -1,20 +1,16 @@
 import React from 'react';
 import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { defaultProps, propTypes } from "./props";
 import { jsx as _jsx } from "react/jsx-runtime";
 const placeholderIconScale = 0.65;
-const useStyles = makeStyles()({
+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',
@@ -29,9 +25,9 @@ const useStyles = makeStyles()({
     height: `${placeholderIconScale * 100}% !important`,
     top: `${(1.0 - placeholderIconScale) * 50}%`,
     left: `${(1.0 - placeholderIconScale) * 50}%`,
-    color: themeColors.placeholder
+    color: theme.palette.background.emphasized
   }
-});
+}));
 
 /**
  * The media placeholder component.

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/Options/components/TextOption/components/OptionInfo/index.js

@@ -1,7 +1,7 @@
 import "core-js/modules/es.string.replace.js";
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { Grid, I18n } from '@shopgate/engage/components';
+import { Grid, I18n, Typography } from '@shopgate/engage/components';
 import { ProductContext } from '@shopgate/engage/product/contexts';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,14 +9,6 @@ const useStyles = makeStyles()(theme => ({
   info: {
     marginTop: theme.spacing(0.5),
     padding: theme.spacing(0, 2)
-  },
-  required: {
-    color: 'var(--color-text-medium-emphasis)',
-    fontSize: '0.825rem'
-  },
-  price: {
-    textAlign: 'right',
-    fontSize: '0.825rem'
   }
 }));
 
@@ -57,19 +49,27 @@ const OptionInfo = ({
   return /*#__PURE__*/_jsxs(Grid, {
     className: classes.info,
     children: [required && /*#__PURE__*/_jsx(Grid.Item, {
-      className: classes.required,
       "aria-hidden": true,
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "common.required"
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "span",
+        color: "textSecondary",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "common.required"
+        })
       })
-    }), !!price && /*#__PURE__*/_jsxs(Grid.Item, {
+    }), !!price && /*#__PURE__*/_jsx(Grid.Item, {
       grow: 1,
-      className: classes.price,
       "aria-hidden": true,
-      children: [`${label}: `, /*#__PURE__*/_jsx(I18n.Price, {
-        currency: currency,
-        price: price
-      })]
+      children: /*#__PURE__*/_jsxs(Typography, {
+        variant: "body2",
+        component: "span",
+        align: "right",
+        children: [`${label}: `, /*#__PURE__*/_jsx(I18n.Price, {
+          currency: currency,
+          price: price
+        })]
+      })
     }), /*#__PURE__*/_jsxs("div", {
       hidden: true,
       id: optionInfoId,