@shopgate/pwa-ui-shared 7.30.0-alpha.10 → 7.30.0-alpha.11

package/NoResults/components/Icon/index.js

@@ -8,124 +8,148 @@ import styles from "./style";
  * @param {Object} props Props of the component
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const NoResultIcon = props => {
   const filterId = useMemo(() => {
     const prefix = 'no-search-results-shadow';
     const hash = CryptoJs.MD5(`${prefix}-${Date.now() + Math.random()}`).toString();
     return `${prefix}-${hash}`;
   }, []);
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/_jsxs("svg", {
     className: props.className,
     viewBox: "-2698 6977 216 216",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-    id: filterId,
-    height: "130%"
-  }, /*#__PURE__*/React.createElement("feGaussianBlur", {
-    in: "SourceAlpha",
-    stdDeviation: "3"
-  }), /*#__PURE__*/React.createElement("feOffset", {
-    dx: "2",
-    dy: "2",
-    result: "offsetblur"
-  }), /*#__PURE__*/React.createElement("feComponentTransfer", null, /*#__PURE__*/React.createElement("feFuncA", {
-    type: "linear",
-    slope: "0.1"
-  })), /*#__PURE__*/React.createElement("feMerge", null, /*#__PURE__*/React.createElement("feMergeNode", null), /*#__PURE__*/React.createElement("feMergeNode", {
-    in: "SourceGraphic"
-  })))), /*#__PURE__*/React.createElement("g", {
-    transform: "translate(-2770 6819)"
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "translate(0 46)"
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: styles.background,
-    cx: "104",
-    cy: "104",
-    r: "104",
-    transform: "translate(76 116)"
-  })), /*#__PURE__*/React.createElement("g", {
-    transform: "translate(-4 42)"
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: styles.background,
-    cx: "108",
-    cy: "108",
-    r: "108",
-    transform: "translate(76 116)"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("circle", {
-    className: styles.circle,
-    cx: "104",
-    cy: "104",
-    r: "104",
-    transform: "translate(76 162)"
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: styles.circle,
-    cx: "92",
-    cy: "92",
-    r: "92",
-    transform: "translate(88 174)"
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: styles.circle,
-    cx: "80",
-    cy: "80",
-    r: "80",
-    transform: "translate(100 186)"
-  })), /*#__PURE__*/React.createElement("g", {
-    name: "cloud",
-    filter: `url(#${filterId})`,
-    transform: "translate(83.6 235.124)"
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "matrix(1, 0, 0, 1, 2686.4, -7054.12)"
-  }, /*#__PURE__*/React.createElement("path", {
-    className: styles.background,
-    d: "M90.216,116.652a24.732,24.732,0,0,1-20.61-10.992,13.394,13.394,0,0,1-7.263-1.374,20,20,0,0,1-7.655,1.767,20.473,20.473,0,0,1-18.255-10.6,20.009,20.009,0,0,1-6.478.981A23.584,23.584,0,0,1,6.4,73.076c0-10.6,6.085-19.236,15.507-22.181V50.11A13.07,13.07,0,0,1,34.862,37.155a13.905,13.905,0,0,1,2.748.2A18.6,18.6,0,0,1,52.724,29.7,19.248,19.248,0,0,1,65.876,35,14.4,14.4,0,0,1,75.1,31.659a13.191,13.191,0,0,1,6.281,1.963,24.851,24.851,0,0,1,40.239,1.767,21.962,21.962,0,0,1,20.61,5.3c.393-.2.589-.393.981-.589a16.9,16.9,0,0,1,7.459-1.963,15.491,15.491,0,0,1,15.311,13.937A22.951,22.951,0,0,1,181.49,64.439c2.944,6.478,2.355,13.544-1.57,20.218a21.266,21.266,0,0,1-18.059,10.011h-.2c-4.122,0-7.459-.785-10.207-2.552a13.109,13.109,0,0,1-7.263.393,24.871,24.871,0,0,1-15.311,15.114,24.1,24.1,0,0,1-18.451-.981A25.762,25.762,0,0,1,90.216,116.652Z",
-    transform: "translate(-2686.4 7054.12)"
-  }))), /*#__PURE__*/React.createElement("g", {
-    name: "magnifier",
-    filter: `url(#${filterId})`
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "matrix(1, 0, 0, 1, 2770, -6819)"
-  }, /*#__PURE__*/React.createElement("rect", {
-    className: styles.magnifier,
-    width: "13.003",
-    height: "3.855",
-    transform: "matrix(0.53, 0.85, -0.85, 0.53, -2613.92, 7029.38)"
-  })), /*#__PURE__*/React.createElement("g", {
-    transform: "matrix(1, 0, 0, 1, 2770, -6819)"
-  }, /*#__PURE__*/React.createElement("rect", {
-    className: styles.magnifier,
-    width: "3.855",
-    height: "13.003",
-    transform: "translate(-2566.07 7029.56) rotate(37.01)"
-  })), /*#__PURE__*/React.createElement("g", {
-    transform: "matrix(1, 0, 0, 1, 2770, -6819)"
-  }, /*#__PURE__*/React.createElement("rect", {
-    className: styles.magnifier,
-    width: "3.856",
-    height: "13.002",
-    transform: "translate(-2592.67 7023)"
-  })), /*#__PURE__*/React.createElement("circle", {
-    className: styles.background,
-    cx: "34",
-    cy: "34",
-    r: "34",
-    transform: "translate(147 223)"
-  }), /*#__PURE__*/React.createElement("g", {
-    transform: "translate(136 -7)"
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "translate(10.699 229.942)"
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "translate(0 0)"
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "matrix(1, 0, 0, 1, 2623.3, -7041.94)"
-  }, /*#__PURE__*/React.createElement("path", {
-    className: styles.magnifier,
-    d: "M83.335,33.853a34.228,34.228,0,1,0-1.494,49.8l4.482,4.482L84.63,89.829a1.926,1.926,0,0,0,0,2.789l17.032,16.932a1.926,1.926,0,0,0,2.789,0l5.677-5.677a1.926,1.926,0,0,0,0-2.789L93.1,84.152a1.926,1.926,0,0,0-2.789,0l-1.1,1.1-4.482-4.482A34.352,34.352,0,0,0,83.335,33.853Zm22.51,68.625-2.789,2.789L88.912,91.124,91.7,88.335ZM37.718,79.47a30.214,30.214,0,1,1,42.729,0A30.3,30.3,0,0,1,37.718,79.47Z",
-    transform: "translate(-2648.22 7018.1)"
-  })), /*#__PURE__*/React.createElement("path", {
-    className: styles.magnifier,
-    d: "M111.291,55.583a1.972,1.972,0,1,0,2.789-2.789,28.585,28.585,0,0,0-40.338-.1,1.972,1.972,0,0,0,2.789,2.789A24.557,24.557,0,0,1,111.291,55.583Z",
-    transform: "translate(-59.748 -38.701)"
-  })))))));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsxs("filter", {
+        id: filterId,
+        height: "130%",
+        children: [/*#__PURE__*/_jsx("feGaussianBlur", {
+          in: "SourceAlpha",
+          stdDeviation: "3"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dx: "2",
+          dy: "2",
+          result: "offsetblur"
+        }), /*#__PURE__*/_jsx("feComponentTransfer", {
+          children: /*#__PURE__*/_jsx("feFuncA", {
+            type: "linear",
+            slope: "0.1"
+          })
+        }), /*#__PURE__*/_jsxs("feMerge", {
+          children: [/*#__PURE__*/_jsx("feMergeNode", {}), /*#__PURE__*/_jsx("feMergeNode", {
+            in: "SourceGraphic"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsxs("g", {
+      transform: "translate(-2770 6819)",
+      children: [/*#__PURE__*/_jsx("g", {
+        transform: "translate(0 46)",
+        children: /*#__PURE__*/_jsx("circle", {
+          className: styles.background,
+          cx: "104",
+          cy: "104",
+          r: "104",
+          transform: "translate(76 116)"
+        })
+      }), /*#__PURE__*/_jsx("g", {
+        transform: "translate(-4 42)",
+        children: /*#__PURE__*/_jsx("circle", {
+          className: styles.background,
+          cx: "108",
+          cy: "108",
+          r: "108",
+          transform: "translate(76 116)"
+        })
+      }), /*#__PURE__*/_jsxs("g", {
+        children: [/*#__PURE__*/_jsx("circle", {
+          className: styles.circle,
+          cx: "104",
+          cy: "104",
+          r: "104",
+          transform: "translate(76 162)"
+        }), /*#__PURE__*/_jsx("circle", {
+          className: styles.circle,
+          cx: "92",
+          cy: "92",
+          r: "92",
+          transform: "translate(88 174)"
+        }), /*#__PURE__*/_jsx("circle", {
+          className: styles.circle,
+          cx: "80",
+          cy: "80",
+          r: "80",
+          transform: "translate(100 186)"
+        })]
+      }), /*#__PURE__*/_jsx("g", {
+        name: "cloud",
+        filter: `url(#${filterId})`,
+        transform: "translate(83.6 235.124)",
+        children: /*#__PURE__*/_jsx("g", {
+          transform: "matrix(1, 0, 0, 1, 2686.4, -7054.12)",
+          children: /*#__PURE__*/_jsx("path", {
+            className: styles.background,
+            d: "M90.216,116.652a24.732,24.732,0,0,1-20.61-10.992,13.394,13.394,0,0,1-7.263-1.374,20,20,0,0,1-7.655,1.767,20.473,20.473,0,0,1-18.255-10.6,20.009,20.009,0,0,1-6.478.981A23.584,23.584,0,0,1,6.4,73.076c0-10.6,6.085-19.236,15.507-22.181V50.11A13.07,13.07,0,0,1,34.862,37.155a13.905,13.905,0,0,1,2.748.2A18.6,18.6,0,0,1,52.724,29.7,19.248,19.248,0,0,1,65.876,35,14.4,14.4,0,0,1,75.1,31.659a13.191,13.191,0,0,1,6.281,1.963,24.851,24.851,0,0,1,40.239,1.767,21.962,21.962,0,0,1,20.61,5.3c.393-.2.589-.393.981-.589a16.9,16.9,0,0,1,7.459-1.963,15.491,15.491,0,0,1,15.311,13.937A22.951,22.951,0,0,1,181.49,64.439c2.944,6.478,2.355,13.544-1.57,20.218a21.266,21.266,0,0,1-18.059,10.011h-.2c-4.122,0-7.459-.785-10.207-2.552a13.109,13.109,0,0,1-7.263.393,24.871,24.871,0,0,1-15.311,15.114,24.1,24.1,0,0,1-18.451-.981A25.762,25.762,0,0,1,90.216,116.652Z",
+            transform: "translate(-2686.4 7054.12)"
+          })
+        })
+      }), /*#__PURE__*/_jsxs("g", {
+        name: "magnifier",
+        filter: `url(#${filterId})`,
+        children: [/*#__PURE__*/_jsx("g", {
+          transform: "matrix(1, 0, 0, 1, 2770, -6819)",
+          children: /*#__PURE__*/_jsx("rect", {
+            className: styles.magnifier,
+            width: "13.003",
+            height: "3.855",
+            transform: "matrix(0.53, 0.85, -0.85, 0.53, -2613.92, 7029.38)"
+          })
+        }), /*#__PURE__*/_jsx("g", {
+          transform: "matrix(1, 0, 0, 1, 2770, -6819)",
+          children: /*#__PURE__*/_jsx("rect", {
+            className: styles.magnifier,
+            width: "3.855",
+            height: "13.003",
+            transform: "translate(-2566.07 7029.56) rotate(37.01)"
+          })
+        }), /*#__PURE__*/_jsx("g", {
+          transform: "matrix(1, 0, 0, 1, 2770, -6819)",
+          children: /*#__PURE__*/_jsx("rect", {
+            className: styles.magnifier,
+            width: "3.856",
+            height: "13.002",
+            transform: "translate(-2592.67 7023)"
+          })
+        }), /*#__PURE__*/_jsx("circle", {
+          className: styles.background,
+          cx: "34",
+          cy: "34",
+          r: "34",
+          transform: "translate(147 223)"
+        }), /*#__PURE__*/_jsx("g", {
+          transform: "translate(136 -7)",
+          children: /*#__PURE__*/_jsx("g", {
+            transform: "translate(10.699 229.942)",
+            children: /*#__PURE__*/_jsxs("g", {
+              transform: "translate(0 0)",
+              children: [/*#__PURE__*/_jsx("g", {
+                transform: "matrix(1, 0, 0, 1, 2623.3, -7041.94)",
+                children: /*#__PURE__*/_jsx("path", {
+                  className: styles.magnifier,
+                  d: "M83.335,33.853a34.228,34.228,0,1,0-1.494,49.8l4.482,4.482L84.63,89.829a1.926,1.926,0,0,0,0,2.789l17.032,16.932a1.926,1.926,0,0,0,2.789,0l5.677-5.677a1.926,1.926,0,0,0,0-2.789L93.1,84.152a1.926,1.926,0,0,0-2.789,0l-1.1,1.1-4.482-4.482A34.352,34.352,0,0,0,83.335,33.853Zm22.51,68.625-2.789,2.789L88.912,91.124,91.7,88.335ZM37.718,79.47a30.214,30.214,0,1,1,42.729,0A30.3,30.3,0,0,1,37.718,79.47Z",
+                  transform: "translate(-2648.22 7018.1)"
+                })
+              }), /*#__PURE__*/_jsx("path", {
+                className: styles.magnifier,
+                d: "M111.291,55.583a1.972,1.972,0,1,0,2.789-2.789,28.585,28.585,0,0,0-40.338-.1,1.972,1.972,0,0,0,2.789,2.789A24.557,24.557,0,0,1,111.291,55.583Z",
+                transform: "translate(-59.748 -38.701)"
+              })]
+            })
+          })
+        })]
+      })]
+    })]
+  });
 };
 NoResultIcon.defaultProps = {
   className: ''

package/NoResults/index.js

@@ -6,6 +6,7 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { svgToDataUrl } from '@shopgate/engage/core';
 import Icon from "./components/Icon";
 import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   svgImages = {}
 } = themeConfig || {};
@@ -20,28 +21,33 @@ const {
  */
 const NoResults = props => {
   const imageSRC = useMemo(() => svgToDataUrl(noResultsImage), []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(styles.wrapper, props.className, ' ui-shared__no-results'),
-    "data-test-id": "noResults"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.icon, 'no-results__image')
-  }, noResultsImage ? /*#__PURE__*/React.createElement("img", {
-    src: imageSRC,
-    alt: ""
-  }) : /*#__PURE__*/React.createElement(Icon, null)), /*#__PURE__*/React.createElement("div", {
-    role: "alert",
-    "aria-atomic": "true"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.headline
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: props.headlineText,
-    params: props
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.text
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: props.bodyText,
-    params: props
-  }))));
+    "data-test-id": "noResults",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classNames(styles.icon, 'no-results__image'),
+      children: noResultsImage ? /*#__PURE__*/_jsx("img", {
+        src: imageSRC,
+        alt: ""
+      }) : /*#__PURE__*/_jsx(Icon, {})
+    }), /*#__PURE__*/_jsxs("div", {
+      role: "alert",
+      "aria-atomic": "true",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: styles.headline,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: props.headlineText,
+          params: props
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.text,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: props.bodyText,
+          params: props
+        })
+      })]
+    })]
+  });
 };
 NoResults.defaultProps = {
   className: null

package/Placeholder/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styles from "./style";
@@ -5,17 +6,24 @@ import styles from "./style";
 /**
  * The placeholder component.
  */
-class Placeholder extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Placeholder = /*#__PURE__*/function (_PureComponent) {
+  function Placeholder() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(Placeholder, _PureComponent);
+  var _proto = Placeholder.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx("div", {
       className: `${styles} ui-shared__placeholder`,
       style: this.props
     });
-  }
-}
+  };
+  return Placeholder;
+}(PureComponent);
 /* eslint-disable react/no-unused-prop-types */
 /* eslint-enable react/no-unused-prop-types */
 Placeholder.defaultProps = {

package/PlaceholderLabel/index.js

@@ -7,6 +7,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const PlaceholderLabel = ({
   children,
   className,
@@ -14,7 +15,7 @@ const PlaceholderLabel = ({
   style
 }) => {
   if (!ready) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       style: style,
       className: `${styles.label} ${className} ui-shared__placeholder-label`
     });

package/PlaceholderLabel/spec.js

@@ -1,18 +1,25 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import PlaceholderLabel from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<PlaceholderLabel />', () => {
   it('should render placeholder ', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(PlaceholderLabel, {
-      ready: false
-    }, /*#__PURE__*/React.createElement("h1", null, "foo")));
+    const wrapper = mount(/*#__PURE__*/_jsx(PlaceholderLabel, {
+      ready: false,
+      children: /*#__PURE__*/_jsx("h1", {
+        children: "foo"
+      })
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('h1').length).toEqual(0);
   });
   it('should render children', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(PlaceholderLabel, {
-      ready: true
-    }, /*#__PURE__*/React.createElement("h1", null, "foo")));
+    const wrapper = mount(/*#__PURE__*/_jsx(PlaceholderLabel, {
+      ready: true,
+      children: /*#__PURE__*/_jsx("h1", {
+        children: "foo"
+      })
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('h1').length).toEqual(1);
   });

package/PlaceholderParagraph/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import range from 'lodash/range';
 import PlaceholderLabel from "../PlaceholderLabel";
+import { jsx as _jsx } from "react/jsx-runtime";
 const widths = [95, 100, 92, 88, 96, 93, 96, 48];
 
 /**
@@ -19,18 +20,18 @@ const PlaceholderParagraph = ({
   if (ready) {
     return children;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "ui-shared__placeholder-paragraph"
-  }, range(lines).map(num => {
-    const width = num % 2 === 0 ? `${widths[(num / 2 + widths.length) % widths.length]}%` : null;
-    return /*#__PURE__*/React.createElement(PlaceholderLabel, {
-      key: num,
-      style: width ? {
-        width
-      } : null,
-      className: className
-    });
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: "ui-shared__placeholder-paragraph",
+    children: range(lines).map(num => {
+      const width = num % 2 === 0 ? `${widths[(num / 2 + widths.length) % widths.length]}%` : null;
+      return /*#__PURE__*/_jsx(PlaceholderLabel, {
+        style: width ? {
+          width
+        } : null,
+        className: className
+      }, num);
+    })
+  });
 };
 PlaceholderParagraph.defaultProps = {
   className: '',

package/PlaceholderParagraph/spec.js

@@ -1,18 +1,25 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import PlaceholderParagraph from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<PlaceholderParagraph />', () => {
   it('should render placeholder ', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(PlaceholderParagraph, {
-      ready: false
-    }, /*#__PURE__*/React.createElement("h1", null, "foo")));
+    const wrapper = mount(/*#__PURE__*/_jsx(PlaceholderParagraph, {
+      ready: false,
+      children: /*#__PURE__*/_jsx("h1", {
+        children: "foo"
+      })
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('h1').length).toEqual(0);
   });
   it('should render children', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(PlaceholderParagraph, {
-      ready: true
-    }, /*#__PURE__*/React.createElement("h1", null, "foo")));
+    const wrapper = mount(/*#__PURE__*/_jsx(PlaceholderParagraph, {
+      ready: true,
+      children: /*#__PURE__*/_jsx("h1", {
+        children: "foo"
+      })
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('h1').length).toEqual(1);
   });

package/Price/index.js

@@ -18,6 +18,7 @@ import styles from "./style";
  * @param {Object} context The component context.
  * @return {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Price = (props, context) => {
   // Added with PWA 6 - CCP-2372
   const {
@@ -55,35 +56,52 @@ const Price = (props, context) => {
    * The unitPriceMin contains the lowest of these prices and will be
    * displayed with a 'From' prefix.
    */
-  return /*#__PURE__*/React.createElement("div", {
+  const priceContent = useMemo(() => {
+    let result = null;
+    if (showFromPrice) {
+      result = /*#__PURE__*/_jsx(I18n.Text, {
+        "aria-hidden": true,
+        string: "price.from",
+        children: /*#__PURE__*/_jsx(I18n.Price, {
+          currency: props.currency,
+          fractions: props.fractions,
+          forKey: "price",
+          price: props.unitPriceMin
+        })
+      });
+    } else if (props.allowFree && props.unitPrice === 0) {
+      result = /*#__PURE__*/_jsx(I18n.Text, {
+        string: "price.free"
+      });
+    } else {
+      result = /*#__PURE__*/_jsx(I18n.Price, {
+        currency: props.currency,
+        fractions: props.fractions,
+        price: props.unitPrice
+      });
+    }
+    return result;
+  }, [props.allowFree, props.currency, props.fractions, props.unitPrice, props.unitPriceMin, showFromPrice]);
+  return /*#__PURE__*/_jsxs("div", {
     className: containerClasses,
-    "data-test-id": `minPrice: ${props.unitPriceMin} price: ${props.unitPrice} currency: ${props.currency}`
-  }, /*#__PURE__*/React.createElement("span", {
-    "aria-label": __('price.label', {
-      price: ariaPrice
-    })
-  }, showFromPrice ? /*#__PURE__*/React.createElement(I18n.Text, {
-    "aria-hidden": true,
-    string: "price.from"
-  }, /*#__PURE__*/React.createElement(I18n.Price, {
-    currency: props.currency,
-    fractions: props.fractions,
-    forKey: "price",
-    price: props.unitPriceMin
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, props.allowFree && props.unitPrice === 0 ? /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "price.free"
-  }) : /*#__PURE__*/React.createElement(I18n.Price, {
-    currency: props.currency,
-    fractions: props.fractions,
-    price: props.unitPrice
-  }))), props.taxDisclaimer && showDisclaimer ? /*#__PURE__*/React.createElement("div", {
-    className: styles.disclaimer
-  }, /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": true
-  }, hint || '*'), /*#__PURE__*/React.createElement("span", {
-    className: "sr-only",
-    "aria-label": hint || __('product.tax_disclaimer_aria')
-  }, __('product.tax_disclaimer_aria'))) : null);
+    "data-test-id": `minPrice: ${props.unitPriceMin} price: ${props.unitPrice} currency: ${props.currency}`,
+    children: [/*#__PURE__*/_jsx("span", {
+      "aria-label": __('price.label', {
+        price: ariaPrice
+      }),
+      children: priceContent
+    }), props.taxDisclaimer && showDisclaimer ? /*#__PURE__*/_jsxs("div", {
+      className: styles.disclaimer,
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        children: hint || '*'
+      }), /*#__PURE__*/_jsx("span", {
+        className: "sr-only",
+        "aria-label": hint || __('product.tax_disclaimer_aria'),
+        children: __('product.tax_disclaimer_aria')
+      })]
+    }) : null]
+  });
 };
 Price.defaultProps = {
   className: '',

package/PriceInfo/index.js

@@ -9,10 +9,11 @@ import styles from "./style";
  * @param {string} [props.className] CSS classes
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const PriceInfo = ({
   className,
   text
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("div", {
   className: `${styles} ${className} ui-shared__price-info`,
   dangerouslySetInnerHTML: {
     __html: text