@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

package/locations/components/StoreFinder/StoreFinderLocationHeader.js

@@ -12,6 +12,7 @@ import { container, storeName, storeDistance, storeHoursToday, clickable, storeN
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StoreFinderLocationHeader = () => {
   const store = useContext(StoreContext);
   const {
@@ -25,37 +26,49 @@ const StoreFinderLocationHeader = () => {
     selectedLocation
   } = useContext(StoreFinderContext);
   const isSelectedLocation = useMemo(() => selectedLocation?.code === store?.code, [selectedLocation, store]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: clickable
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 1
-  }, /*#__PURE__*/React.createElement("div", {
-    className: storeNameWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: storeName
-  }, name), isSelectedLocation && /*#__PURE__*/React.createElement("div", {
-    className: myStoreWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: myStoreIcon
-  }, /*#__PURE__*/React.createElement(LocationIcon, {
-    size: 20
-  })), /*#__PURE__*/React.createElement("div", {
-    className: myStore
-  }, i18n.text('location.myStore'))))), /*#__PURE__*/React.createElement(Grid.Item, {
-    className: storeDistance
-  }, /*#__PURE__*/React.createElement(StoreDistance, {
-    distance: distance,
-    unitSystem: unitSystem
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: storeHoursToday
-  }, /*#__PURE__*/React.createElement(StoreHoursToday, {
-    hours: operationHours
-  })), /*#__PURE__*/React.createElement(StoreAddress, {
-    address: address
-  })), /*#__PURE__*/React.createElement(StoreFinderLocationHeaderPhoneNumber, {
-    phone: address.phoneNumber
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: clickable,
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        children: [/*#__PURE__*/_jsx(Grid.Item, {
+          grow: 1,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: storeNameWrapper,
+            children: [/*#__PURE__*/_jsx("div", {
+              className: storeName,
+              children: name
+            }), isSelectedLocation && /*#__PURE__*/_jsxs("div", {
+              className: myStoreWrapper,
+              children: [/*#__PURE__*/_jsx("div", {
+                className: myStoreIcon,
+                children: /*#__PURE__*/_jsx(LocationIcon, {
+                  size: 20
+                })
+              }), /*#__PURE__*/_jsx("div", {
+                className: myStore,
+                children: i18n.text('location.myStore')
+              })]
+            })]
+          })
+        }), /*#__PURE__*/_jsx(Grid.Item, {
+          className: storeDistance,
+          children: /*#__PURE__*/_jsx(StoreDistance, {
+            distance: distance,
+            unitSystem: unitSystem
+          })
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: storeHoursToday,
+        children: /*#__PURE__*/_jsx(StoreHoursToday, {
+          hours: operationHours
+        })
+      }), /*#__PURE__*/_jsx(StoreAddress, {
+        address: address
+      })]
+    }), /*#__PURE__*/_jsx(StoreFinderLocationHeaderPhoneNumber, {
+      phone: address.phoneNumber
+    })]
+  });
 };
 export default StoreFinderLocationHeader;

package/locations/components/StoreFinder/StoreFinderLocationHeaderPhoneNumber.js

@@ -7,6 +7,7 @@ import { StoreDetailsLine } from "../StoreList/StoreDetailsLine";
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const StoreFinderLocationHeaderPhoneNumber = ({
   phone,
   pure
@@ -15,15 +16,18 @@ const StoreFinderLocationHeaderPhoneNumber = ({
     return null;
   }
   if (pure) {
-    return /*#__PURE__*/React.createElement("a", {
-      href: `tel:${phone}`
-    }, phone);
+    return /*#__PURE__*/_jsx("a", {
+      href: `tel:${phone}`,
+      children: phone
+    });
   }
-  return /*#__PURE__*/React.createElement(StoreDetailsLine, {
-    icon: PhoneIcon
-  }, /*#__PURE__*/React.createElement("a", {
-    href: `tel:${phone}`
-  }, phone));
+  return /*#__PURE__*/_jsx(StoreDetailsLine, {
+    icon: PhoneIcon,
+    children: /*#__PURE__*/_jsx("a", {
+      href: `tel:${phone}`,
+      children: phone
+    })
+  });
 };
 StoreFinderLocationHeaderPhoneNumber.defaultProps = {
   phone: null,

package/locations/components/StoreFinder/StoreFinderLocations.js

@@ -10,6 +10,7 @@ import { container, cardList, card } from "./StoreFinderLocations.style";
  * @param {Object} ref A forwarded ref
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const StoreFinderLocations = (props, ref) => {
   const {
     locations
@@ -17,16 +18,19 @@ const StoreFinderLocations = (props, ref) => {
   if (!locations || locations.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     ref: ref,
-    className: container
-  }, /*#__PURE__*/React.createElement(CardList, {
-    className: cardList
-  }, locations.map(location => /*#__PURE__*/React.createElement(CardList.Item, {
-    className: card,
-    key: location.code
-  }, /*#__PURE__*/React.createElement(StoreContext.Provider, {
-    value: location
-  }, /*#__PURE__*/React.createElement(StoreFinderLocation, null))))));
+    className: container,
+    children: /*#__PURE__*/_jsx(CardList, {
+      className: cardList,
+      children: locations.map(location => /*#__PURE__*/_jsx(CardList.Item, {
+        className: card,
+        children: /*#__PURE__*/_jsx(StoreContext.Provider, {
+          value: location,
+          children: /*#__PURE__*/_jsx(StoreFinderLocation, {})
+        })
+      }, location.code))
+    })
+  });
 };
 export default /*#__PURE__*/forwardRef(StoreFinderLocations);

package/locations/components/StoreFinder/StoreFinderSearch.js

@@ -5,9 +5,11 @@ import { container } from "./StoreFinderSearch.style";
 /**
  * @returns {JSX}
  */
-const StoreFinderSearch = () => /*#__PURE__*/React.createElement("div", {
-  className: container
-}, /*#__PURE__*/React.createElement(StoreListSearch, {
-  isStoreFinder: true
-}));
+import { jsx as _jsx } from "react/jsx-runtime";
+const StoreFinderSearch = () => /*#__PURE__*/_jsx("div", {
+  className: container,
+  children: /*#__PURE__*/_jsx(StoreListSearch, {
+    isStoreFinder: true
+  })
+});
 export default StoreFinderSearch;

package/locations/components/StoreFinder/StoreFinderSelectLocationButton.js

@@ -10,6 +10,7 @@ import { selectLocationButton, selectLocationButtonWrapper } from "../StoreList/
  * Renders if route query.selectLocation param is passed
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const StoreFinderSelectLocationButton = () => {
   const store = useContext(StoreContext);
   const {
@@ -22,11 +23,13 @@ export const StoreFinderSelectLocationButton = () => {
     selectLocation(store);
   }, [selectLocation, store]);
   const isSelected = useMemo(() => selectedLocation?.code === store?.code, [selectedLocation, store]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: selectLocationButtonWrapper
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    onClick: handleClick,
-    className: selectLocationButton.toString(),
-    disabled: isLoading || store?.isComingSoon || isSelected
-  }, i18n.text(store?.isComingSoon ? 'location.comingSoon' : 'locations.select_location')));
+  return /*#__PURE__*/_jsx("div", {
+    className: selectLocationButtonWrapper,
+    children: /*#__PURE__*/_jsx(RippleButton, {
+      onClick: handleClick,
+      className: selectLocationButton.toString(),
+      disabled: isLoading || store?.isComingSoon || isSelected,
+      children: i18n.text(store?.isComingSoon ? 'location.comingSoon' : 'locations.select_location')
+    })
+  });
 };

package/locations/components/StoreFinder/StoreFinderStoreInfoButton.js

@@ -10,6 +10,7 @@ import { StoreContext } from "./Store.context";
 import { i18n } from "../../../core";
 import { StoreFinderContext } from "../../locations.context";
 import { STORE_DETAILS_PATH } from "../../constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   gap
 } = themeVariables;
@@ -53,12 +54,14 @@ const StoreFinderStoreInfoButton = ({
     e.stopPropagation();
     openStoreDetail(store?.code);
   }, [openStoreDetail, store]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.showStoreInfoButtonWrapper
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    onClick: handleClick,
-    className: classNames(styles.showStoreInfoButton),
-    disabled: isLoading
-  }, i18n.text('locations.store_info')));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.showStoreInfoButtonWrapper,
+    children: /*#__PURE__*/_jsx(RippleButton, {
+      onClick: handleClick,
+      className: classNames(styles.showStoreInfoButton),
+      disabled: isLoading,
+      children: i18n.text('locations.store_info')
+    })
+  });
 };
 export default connect(null, mapDispatchToProps)(StoreFinderStoreInfoButton);

package/locations/components/StoreList/StoreAddress.js

@@ -14,6 +14,7 @@ import { address as container, addressIcon, stockInfoContainer } from "./Store.s
  * @param {boolean} props.pure Whether to only render the address without any wrapper components.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreAddress({
   address,
   pure
@@ -25,30 +26,41 @@ export function StoreAddress({
   if (!address) {
     return null;
   }
-  const addressContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "street"
-  }, address.street), address.street2 && address.street2 !== '' && /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "street2"
-  }, address.street2), address.street3 && address.street3 !== '' && /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "street3"
-  }, address.street3), address.street4 && address.street4 !== '' && /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "street4"
-  }, address.street4), i18n.text('locations.address', address));
+  const addressContent = /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("div", {
+      "data-test-id": "street",
+      children: address.street
+    }), address.street2 && address.street2 !== '' && /*#__PURE__*/_jsx("div", {
+      "data-test-id": "street2",
+      children: address.street2
+    }), address.street3 && address.street3 !== '' && /*#__PURE__*/_jsx("div", {
+      "data-test-id": "street3",
+      children: address.street3
+    }), address.street4 && address.street4 !== '' && /*#__PURE__*/_jsx("div", {
+      "data-test-id": "street4",
+      children: address.street4
+    }), i18n.text('locations.address', address)]
+  });
   if (pure) {
     return addressContent;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: addressIcon,
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(LocationIcon, null)), /*#__PURE__*/React.createElement("div", null, addressContent, product && /*#__PURE__*/React.createElement("div", {
-    className: stockInfoContainer
-  }, /*#__PURE__*/React.createElement(StockInfo, {
-    location: store,
-    product: product,
-    showStoreName: false
-  }))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: addressIcon,
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx(LocationIcon, {})
+    }), /*#__PURE__*/_jsxs("div", {
+      children: [addressContent, product && /*#__PURE__*/_jsx("div", {
+        className: stockInfoContainer,
+        children: /*#__PURE__*/_jsx(StockInfo, {
+          location: store,
+          product: product,
+          showStoreName: false
+        })
+      })]
+    })]
+  });
 }
 StoreAddress.defaultProps = {
   address: null,

package/locations/components/StoreList/StoreAddressShort.js

@@ -12,6 +12,7 @@ import { detailsPrimary, detailsSecondary } from "./Store.style";
  * @param {boolean} props.showFull Whether to show the full address.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreAddressShort({
   address,
   showFull
@@ -21,30 +22,39 @@ export function StoreAddressShort({
     return null;
   }
   const addressLabel = `${address.street + (address.street2 ? `, ${address.street2}` : '') + (address.street3 ? `, ${address.street3}` : '') + (address.street4 ? `, ${address.street4}` : '') + i18n.text('locations.address', address)}: ${i18n.text('locations.map_open')}`;
-  return /*#__PURE__*/React.createElement(Link, {
+  return /*#__PURE__*/_jsx(Link, {
     target: "_blank",
     href: mapsUrl,
     role: "button",
-    "aria-label": addressLabel
-  }, /*#__PURE__*/React.createElement(StoreDetailsLine, {
-    icon: LocationIcon,
-    linked: true
-  }, showFull && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: detailsPrimary
-  }, address.street), address.street2 && address.street2 !== '' && /*#__PURE__*/React.createElement("p", {
-    className: detailsPrimary
-  }, address.street2), address.street3 && address.street3 !== '' && /*#__PURE__*/React.createElement("p", {
-    className: detailsPrimary
-  }, address.street3), address.street4 && address.street4 !== '' && /*#__PURE__*/React.createElement("p", {
-    className: detailsPrimary
-  }, address.street4)), /*#__PURE__*/React.createElement(Ellipsis, {
-    rows: 1,
-    className: detailsPrimary
-  }, i18n.text('locations.address', address)), /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "locations.map_open",
-    className: detailsSecondary,
-    "aria-label": `: ${i18n.text('locations.map_open')}`
-  })));
+    "aria-label": addressLabel,
+    children: /*#__PURE__*/_jsxs(StoreDetailsLine, {
+      icon: LocationIcon,
+      linked: true,
+      children: [showFull && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("p", {
+          className: detailsPrimary,
+          children: address.street
+        }), address.street2 && address.street2 !== '' && /*#__PURE__*/_jsx("p", {
+          className: detailsPrimary,
+          children: address.street2
+        }), address.street3 && address.street3 !== '' && /*#__PURE__*/_jsx("p", {
+          className: detailsPrimary,
+          children: address.street3
+        }), address.street4 && address.street4 !== '' && /*#__PURE__*/_jsx("p", {
+          className: detailsPrimary,
+          children: address.street4
+        })]
+      }), /*#__PURE__*/_jsx(Ellipsis, {
+        rows: 1,
+        className: detailsPrimary,
+        children: i18n.text('locations.address', address)
+      }), /*#__PURE__*/_jsx(I18n.Text, {
+        string: "locations.map_open",
+        className: detailsSecondary,
+        "aria-label": `: ${i18n.text('locations.map_open')}`
+      })]
+    })
+  });
 }
 StoreAddressShort.defaultProps = {
   address: null,

package/locations/components/StoreList/StoreCard.js

@@ -8,10 +8,13 @@ import { StoreSelectLocationButton } from "./StoreSelectLocationButton";
  * Renders the store's card.
  * @returns {JSX}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreCard() {
   const store = useContext(StoreContext);
   if (!store || !store.address) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(StoreHeader, null), /*#__PURE__*/React.createElement(StoreDetails, null), /*#__PURE__*/React.createElement(StoreSelectLocationButton, null));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(StoreHeader, {}), /*#__PURE__*/_jsx(StoreDetails, {}), /*#__PURE__*/_jsx(StoreSelectLocationButton, {})]
+  });
 }

package/locations/components/StoreList/StoreDetails.js

@@ -11,23 +11,25 @@ import { storeDetailsBody, storeDetailsAccordion } from "./Store.style";
  * Renders a single store details.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreDetails() {
   const store = useContext(StoreContext);
   if (!store) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Accordion, {
+  return /*#__PURE__*/_jsxs(Accordion, {
     className: storeDetailsAccordion,
-    renderLabel: () => /*#__PURE__*/React.createElement(StoreAddress, {
+    renderLabel: () => /*#__PURE__*/_jsx(StoreAddress, {
       address: store.address
     }),
-    contentClassName: storeDetailsBody
-  }, /*#__PURE__*/React.createElement(StoreOpeningHours, {
-    hours: store.operationHours
-  }), store.address && /*#__PURE__*/React.createElement(StorePhoneNumber, {
-    phone: store.address.phoneNumber
-  }), /*#__PURE__*/React.createElement(StoreAddressShort, {
-    showFull: true,
-    address: store.address
-  }));
+    contentClassName: storeDetailsBody,
+    children: [/*#__PURE__*/_jsx(StoreOpeningHours, {
+      hours: store.operationHours
+    }), store.address && /*#__PURE__*/_jsx(StorePhoneNumber, {
+      phone: store.address.phoneNumber
+    }), /*#__PURE__*/_jsx(StoreAddressShort, {
+      showFull: true,
+      address: store.address
+    })]
+  });
 }

package/locations/components/StoreList/StoreDetailsLine.js

@@ -12,24 +12,28 @@ import { detailsLine, detailsIcon, detailsIconLinked, details } from "./Store.st
  * @param {React.ReactNode} props.children The component children.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreDetailsLine({
   icon: Icon,
   children,
   linked
 }) {
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: detailsLine
-  }, /*#__PURE__*/React.createElement(Grid.Item, {
-    shrink: 0,
-    className: classNames(detailsIcon, {
-      [detailsIconLinked]: linked
-    })
-  }, /*#__PURE__*/React.createElement(Icon, {
-    "aria-hidden": true
-  })), /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 1,
-    className: details
-  }, children));
+  return /*#__PURE__*/_jsxs(Grid, {
+    className: detailsLine,
+    children: [/*#__PURE__*/_jsx(Grid.Item, {
+      shrink: 0,
+      className: classNames(detailsIcon, {
+        [detailsIconLinked]: linked
+      }),
+      children: /*#__PURE__*/_jsx(Icon, {
+        "aria-hidden": true
+      })
+    }), /*#__PURE__*/_jsx(Grid.Item, {
+      grow: 1,
+      className: details,
+      children: children
+    })]
+  });
 }
 StoreDetailsLine.defaultProps = {
   linked: false

package/locations/components/StoreList/StoreDistance.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import formatDistance from "../../helpers/formatDistance";
 import { storeDistance } from "./Store.style";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const UNIT_SYSTEM_METRIC = 'metric';
 export const UNIT_SYSTEM_IMPERIAL = 'imperial';
 
@@ -19,9 +20,10 @@ export function StoreDistance({
   if (distance === null) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
-    className: storeDistance
-  }, formatDistance(distance, unitSystem === UNIT_SYSTEM_IMPERIAL));
+  return /*#__PURE__*/_jsx("span", {
+    className: storeDistance,
+    children: formatDistance(distance, unitSystem === UNIT_SYSTEM_IMPERIAL)
+  });
 }
 StoreDistance.defaultProps = {
   distance: null,

package/locations/components/StoreList/StoreHeader.js

@@ -14,6 +14,7 @@ import { storeHeader, storeName, disabled } from "./Store.style";
  * Renders a single store headline.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StoreHeader() {
   const store = useContext(StoreContext);
   const {
@@ -25,39 +26,51 @@ export function StoreHeader() {
     distance,
     unitSystem
   } = store;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(storeHeader, {
       [disabled]: !isAvailable
-    })
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 1,
-    className: storeName
-  }, name, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: ">=sm",
-    webOnly: true
-  }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement(Grid.Item, {
-    shrink: 0
-  }, /*#__PURE__*/React.createElement(StockInfo, {
-    location: store,
-    product: product,
-    showStoreName: false
-  }), /*#__PURE__*/React.createElement(StoreDistance, {
-    distance: distance,
-    unitSystem: unitSystem
-  }))))), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: "<sm",
-    appAlways: true
-  }, /*#__PURE__*/React.createElement(Grid.Item, {
-    shrink: 0
-  }, /*#__PURE__*/React.createElement(StoreDistance, {
-    distance: distance,
-    unitSystem: unitSystem
-  }))), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: ">=sm",
-    webOnly: true
-  }, /*#__PURE__*/React.createElement(Grid.Item, {
-    shrink: 0
-  }, /*#__PURE__*/React.createElement(StoreSelectLocationButton, null)))), /*#__PURE__*/React.createElement(StoreHoursToday, {
-    hours: store.operationHours
-  }));
+    }),
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      children: [/*#__PURE__*/_jsxs(Grid.Item, {
+        grow: 1,
+        className: storeName,
+        children: [name, /*#__PURE__*/_jsx(ResponsiveContainer, {
+          breakpoint: ">=sm",
+          webOnly: true,
+          children: /*#__PURE__*/_jsx("ul", {
+            children: /*#__PURE__*/_jsxs(Grid.Item, {
+              shrink: 0,
+              children: [/*#__PURE__*/_jsx(StockInfo, {
+                location: store,
+                product: product,
+                showStoreName: false
+              }), /*#__PURE__*/_jsx(StoreDistance, {
+                distance: distance,
+                unitSystem: unitSystem
+              })]
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+        breakpoint: "<sm",
+        appAlways: true,
+        children: /*#__PURE__*/_jsx(Grid.Item, {
+          shrink: 0,
+          children: /*#__PURE__*/_jsx(StoreDistance, {
+            distance: distance,
+            unitSystem: unitSystem
+          })
+        })
+      }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+        breakpoint: ">=sm",
+        webOnly: true,
+        children: /*#__PURE__*/_jsx(Grid.Item, {
+          shrink: 0,
+          children: /*#__PURE__*/_jsx(StoreSelectLocationButton, {})
+        })
+      })]
+    }), /*#__PURE__*/_jsx(StoreHoursToday, {
+      hours: store.operationHours
+    })]
+  });
 }

package/locations/components/StoreList/StoreHoursToday.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from "../../../core";
 import { storeHoursToday } from "./Store.style";
+import { jsx as _jsx } from "react/jsx-runtime";
 const weekdays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
 
 /**
@@ -24,11 +25,12 @@ export function StoreHoursToday({
     return null;
   }
   const label = longLabel ? 'locations.today_hours_long' : 'locations.today_hours';
-  return /*#__PURE__*/React.createElement("div", {
-    className: storeHoursToday
-  }, i18n.text(label, {
-    hours: hoursToday
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: storeHoursToday,
+    children: i18n.text(label, {
+      hours: hoursToday
+    })
+  });
 }
 StoreHoursToday.defaultProps = {
   hours: null,

package/locations/components/StoreList/StoreList.js

@@ -7,5 +7,8 @@ import StoreListLocations from "./StoreListLocations";
  * Renders the store list.
  * @returns {JSX}
  */
-const StoreList = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StoreListProduct, null), /*#__PURE__*/React.createElement(StoreListSearch, null), /*#__PURE__*/React.createElement(StoreListLocations, null));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const StoreList = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(StoreListProduct, {}), /*#__PURE__*/_jsx(StoreListSearch, {}), /*#__PURE__*/_jsx(StoreListLocations, {})]
+});
 export default StoreList;