@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.2

package/orders/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../orders/constants/index.js"],"names":[],"mappings":""}

package/orders/constants/pipelines.d.ts

@@ -0,0 +1,4 @@
+export const SHOPGATE_ORDER_GET_ORDER_DETAILS: "shopgate.order.getOrderDetails";
+export const SHOPGATE_ORDER_CANCEL_ORDER: "shopgate.order.cancelOrder";
+export const SHOPGATE_GET_ORDER_HISTORY: "shopgate.order.getOrderHistory";
+//# sourceMappingURL=pipelines.d.ts.map

package/orders/constants/pipelines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipelines.d.ts","sourceRoot":"","sources":["../../../orders/constants/pipelines.js"],"names":[],"mappings":"AAAA,+CAAgD,gCAAgC,CAAC;AACjF,0CAA2C,4BAA4B,CAAC;AACxE,yCAA0C,gCAAgC,CAAC"}

package/orders/constants/routes.d.ts

@@ -0,0 +1,4 @@
+export const ORDER_DETAILS_PATTERN: "/orders/:orderId";
+export const ORDER_DETAILS_PRIVATE_PATH: "/order-details";
+export const ORDER_DETAILS_PRIVATE_PATTERN: "/order-details/:orderNumber";
+//# sourceMappingURL=routes.d.ts.map

package/orders/constants/routes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../../../orders/constants/routes.js"],"names":[],"mappings":"AAAA,oCAAqC,kBAAkB,CAAC;AACxD,yCAA0C,gBAAgB,CAAC;AAC3D,4CAA6C,6BAA6B,CAAC"}

package/orders/constants/status.d.ts

@@ -0,0 +1,21 @@
+export const ORDER_STATUS_NEW: "new";
+export const ORDER_STATUS_OPEN: "open";
+export const ORDER_STATUS_REJECTED: "rejected";
+export const ORDER_STATUS_CANCELED: "canceled";
+export const ORDER_STATUS_READY: "ready";
+export const ORDER_STATUS_FULFILLED: "fulfilled";
+export const ORDER_STATUS_COMPLETED: "completed";
+export const ORDER_STATUS_IN_PROGRESS: "inProgress";
+export const ORDER_STATUS_SUBMITTED: "submitted";
+export function getEngageOrderStatus(orderStatus: string): string;
+export const LINE_ITEM_STATUS_OPEN: "open";
+export const LINE_ITEM_STATUS_IN_PROGRESS: "inProgress";
+export const LINE_ITEM_STATUS_REJECTED: "rejected";
+export const LINE_ITEM_STATUS_CANCELED: "canceled";
+export const LINE_ITEM_STATUS_FULFILLED: "fulfilled";
+export const LINE_ITEM_STATUS_PENDING: "pending";
+export const LINE_ITEM_STATUS_UNAVAILABLE: "unavailable";
+export const LINE_ITEM_SUB_STATUS_SUBSTITUTED: "substituted";
+export const LINE_ITEM_SUB_STATUS_REPLACED: "replaced";
+export function getEngageLineItemStatus(lineItemStatus: string, lineItemSubStatus: string): string;
+//# sourceMappingURL=status.d.ts.map

package/orders/constants/status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../orders/constants/status.js"],"names":[],"mappings":"AAAA,+BAAgC,KAAK,CAAC;AACtC,gCAAiC,MAAM,CAAC;AACxC,oCAAqC,UAAU,CAAC;AAChD,oCAAqC,UAAU,CAAC;AAChD,iCAAkC,OAAO,CAAC;AAC1C,qCAAsC,WAAW,CAAC;AAClD,qCAAsC,WAAW,CAAC;AAClD,uCAAwC,YAAY,CAAC;AAErD,qCAAsC,WAAW,CAAC;AAkB3C,kDAHI,MAAM,GACJ,MAAM,CAG6B;AAEhD,oCAAqC,MAAM,CAAC;AAC5C,2CAA4C,YAAY,CAAC;AACzD,wCAAyC,UAAU,CAAC;AACpD,wCAAyC,UAAU,CAAC;AACpD,yCAA0C,WAAW,CAAC;AAGtD,uCAAwC,SAAS,CAAC;AAClD,2CAA4C,aAAa,CAAC;AAE1D,+CAAgD,aAAa,CAAC;AAC9D,4CAA6C,UAAU,CAAC;AAgBjD,wDAJI,MAAM,qBACN,MAAM,GACJ,MAAM,CAYlB"}

package/orders/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export { getTranslatedOrderStatus, getTranslatedLineItemStatus, getLineItemActiveStatus } from "./orderStatus";
+//# sourceMappingURL=index.d.ts.map

package/orders/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../orders/helpers/index.js"],"names":[],"mappings":""}

package/orders/helpers/orderDetails.d.ts

@@ -0,0 +1,2 @@
+export function getOrderDetailsRoute(orderNumber: string): string;
+//# sourceMappingURL=orderDetails.d.ts.map

package/orders/helpers/orderDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"orderDetails.d.ts","sourceRoot":"","sources":["../../../orders/helpers/orderDetails.js"],"names":[],"mappings":"AAOO,kDAHI,MAAM,GACJ,MAAM,CAE8E"}

package/orders/helpers/orderStatus.d.ts

@@ -0,0 +1,4 @@
+export function getTranslatedOrderStatus(status: string): string;
+export function getTranslatedLineItemStatus(status: string, subStatus: string): string;
+export function getLineItemActiveStatus(status: string, subStatus: string): boolean;
+//# sourceMappingURL=orderStatus.d.ts.map

package/orders/helpers/orderStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"orderStatus.d.ts","sourceRoot":"","sources":["../../../orders/helpers/orderStatus.js"],"names":[],"mappings":"AAQO,iDAHI,MAAM,GACJ,MAAM,CAMlB;AAQM,oDAJI,MAAM,aACN,MAAM,GACJ,MAAM,CAOlB;AAQM,gDAJI,MAAM,aACN,MAAM,GACJ,OAAO,CAGgC"}

package/orders/helpers/orderStatus.js

@@ -1,4 +1,4 @@
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { getEngageOrderStatus, getEngageLineItemStatus } from "../constants";
 
 /**

package/orders/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export function useOrderDetails(): Object;
+export function useOrderHistory(): Object;
+//# sourceMappingURL=index.d.ts.map

package/orders/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../orders/hooks/index.js"],"names":[],"mappings":"AAQO,mCAFM,MAAM,CAEgD;AAM5D,mCAFM,MAAM,CAEgD"}

package/orders/providers/OrderDetailsProvider.context.d.ts

@@ -0,0 +1,4 @@
+declare const _default: React.Context<{}>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=OrderDetailsProvider.context.d.ts.map

package/orders/providers/OrderDetailsProvider.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderDetailsProvider.context.d.ts","sourceRoot":"","sources":["../../../orders/providers/OrderDetailsProvider.context.js"],"names":[],"mappings":";;kBAAkB,OAAO"}

package/orders/providers/OrderHistoryProvider.connector.d.ts

@@ -0,0 +1,9 @@
+declare const _default: import("react-redux").InferableComponentEnhancerWithProps<Object & {
+    fetchOrderHistory: ({ limit, offset }: {
+        limit?: number | undefined;
+        offset?: string | undefined;
+    }) => Function;
+    historyPush: (params?: any) => void;
+}, {}>;
+export default _default;
+//# sourceMappingURL=OrderHistoryProvider.connector.d.ts.map

package/orders/providers/OrderHistoryProvider.connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderHistoryProvider.connector.d.ts","sourceRoot":"","sources":["../../../orders/providers/OrderHistoryProvider.connector.js"],"names":[],"mappings":""}

package/orders/providers/OrderHistoryProvider.context.d.ts

@@ -0,0 +1,4 @@
+declare const _default: React.Context<{}>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=OrderHistoryProvider.context.d.ts.map

package/orders/providers/OrderHistoryProvider.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderHistoryProvider.context.d.ts","sourceRoot":"","sources":["../../../orders/providers/OrderHistoryProvider.context.js"],"names":[],"mappings":";;kBAAkB,OAAO"}

package/orders/providers/OrderHistoryProvider.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react-redux").ConnectedComponent<React.ComponentType<never>, never>;
+export default _default;
+import React from 'react';
+//# sourceMappingURL=OrderHistoryProvider.d.ts.map

package/orders/providers/OrderHistoryProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderHistoryProvider.d.ts","sourceRoot":"","sources":["../../../orders/providers/OrderHistoryProvider.jsx"],"names":[],"mappings":";;kBAA+B,OAAO"}

package/orders/selectors/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Retrieves the orders from the store.
+ * @param {Object} state The current application state.
+ * @return {Object} The orders state.
+ */
+export const getOrders: ((state: Object) => any) & import("reselect").OutputSelectorFields<(args_0: Object, args_1: Object) => any, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+export function getTotalOrderCount(state: Object): Object;
+export function makeGetOrderById(): Function;
+export function makeGetOrderByNumber(): Function;
+//# sourceMappingURL=index.d.ts.map

package/orders/selectors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../orders/selectors/index.js"],"names":[],"mappings":"AAuBA;;;;GAIG;AACH;;;;EAKE;AAOK,0CAHI,MAAM,GACL,MAAM,CAEqE;AAMhF,6CAIN;AAMM,iDAIN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.30.4-beta.1",
+  "version": "7.31.0-alpha.2",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,16 +17,16 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.30.4-beta.1",
-    "@shopgate/pwa-common-commerce": "7.30.4-beta.1",
-    "@shopgate/pwa-core": "7.30.4-beta.1",
-    "@shopgate/pwa-ui-ios": "7.30.4-beta.1",
-    "@shopgate/pwa-ui-material": "7.30.4-beta.1",
-    "@shopgate/pwa-ui-shared": "7.30.4-beta.1",
+    "@shopgate/pwa-common": "7.31.0-alpha.2",
+    "@shopgate/pwa-common-commerce": "7.31.0-alpha.2",
+    "@shopgate/pwa-core": "7.31.0-alpha.2",
+    "@shopgate/pwa-ui-ios": "7.31.0-alpha.2",
+    "@shopgate/pwa-ui-material": "7.31.0-alpha.2",
+    "@shopgate/pwa-ui-shared": "7.31.0-alpha.2",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",
-    "color": "^3.1.2",
+    "color": "^4.2.3",
     "focus-trap-react": "^10.3.1",
     "immer": "^11.1.3",
     "intersection-observer": "^0.6.0",
@@ -40,13 +40,17 @@
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
     "react-scroll-parallax": "^3.5.0",
+    "react-transition-group": "^4.4.5",
     "tss-react": "^4.9.20",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
+    "@types/color": "^4.2.0",
+    "@types/lodash": "^4.17.24",
+    "@types/react-dom": "^17.0.2",
+    "@types/react-transition-group": "^4.4.12",
     "classnames": "2.5.1",
     "jest-mock-console": "^2.0.0",
-    "lodash": "^4.17.23",
     "prop-types": "~15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

package/page/components/NotFound.js

@@ -1,40 +1,36 @@
 import React, { useCallback } from 'react';
-import { css } from 'glamor';
 import { useDispatch } from 'react-redux';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
 import { I18n } from '@shopgate/engage/components';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import { historyPop, historyResetTo } from '@shopgate/pwa-common/actions/router';
 import { i18n, INDEX_PATH } from "../../core";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-const styles = {
-  wrapper: css({
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
     display: 'flex',
     justifyContent: 'center',
     flexDirection: 'column',
     textAlign: 'center',
-    padding: variables.gap.big,
-    paddingTop: variables.gap.xxbig
-  }).toString(),
-  text: css({
+    padding: theme.spacing(2),
+    paddingTop: theme.spacing(8)
+  },
+  text: {
     fontSize: '1.5rem'
-  }).toString(),
-  button: css({
+  },
+  button: {
     width: '100%',
     maxWidth: 250
-  }).toString(),
-  buttonContainer: css({
+  },
+  buttonContainer: {
     flexGrow: '0',
-    padding: `${variables.emptyPage.buttonVerticalGap}px ${variables.gap.big}px`,
+    padding: theme.spacing(3, 2),
     display: 'flex',
     flexDirection: 'column',
-    gap: variables.gap.big,
+    gap: theme.spacing(2),
     alignItems: 'center'
-  }).toString()
-};
+  }
+}));
 
 /**
  * The NotFoundPage component renders a "Page Not Found" view
@@ -42,6 +38,9 @@ const styles = {
  * @returns {JSX.Element}
  */
 const NotFound = () => {
+  const {
+    classes
+  } = useStyles();
   const dispatch = useDispatch();
   const handleBack = useCallback(() => {
     dispatch(historyPop());
@@ -50,22 +49,22 @@ const NotFound = () => {
     dispatch(historyResetTo(INDEX_PATH));
   }, [dispatch]);
   return /*#__PURE__*/_jsxs("div", {
-    className: styles.wrapper,
+    className: classes.wrapper,
     children: [/*#__PURE__*/_jsx(I18n.Text, {
-      className: styles.text,
+      className: classes.text,
       string: "page.not_found"
     }), /*#__PURE__*/_jsxs("div", {
-      className: styles.buttonContainer,
+      className: classes.buttonContainer,
       children: [/*#__PURE__*/_jsx(RippleButton, {
         onClick: handleBack,
-        className: styles.button,
+        className: classes.button,
         type: "secondary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "common.back"
         })
       }), /*#__PURE__*/_jsx(RippleButton, {
         onClick: handleHome,
-        className: styles.button,
+        className: classes.button,
         type: "secondary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "navigation.back",

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -136,9 +136,9 @@ const ResponsiveWidgetImage = ({
       ref: parallax.ref,
       alt: alt,
       loading: "lazy",
-      className: cx(className, classes.preventSave, classes.image, {
+      className: cx(classes.preventSave, classes.image, {
         [classes.banner]: isBanner
-      }),
+      }, className),
       onLoad: handleImageLoad,
       style: {
         ...(enableParallax && isBanner ? {

package/page/components/Widgets/Tooltip.js

@@ -188,7 +188,9 @@ function Tooltip({
       className: cx(classes.tooltipBox, arrowClass, 'tooltip-box'),
       style: portalStyle,
       "data-visible": animate ? 'true' : 'false',
-      "data-tooltip-id": tooltipId.current,
+      "data-tooltip-id": tooltipId.current
+      // eslint-disable-next-line react/no-danger
+      ,
       dangerouslySetInnerHTML: {
         __html: text
       }

package/page/components/Widgets/hooks.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/web.url.js";
 import "core-js/modules/web.url.to-json.js";
 import "core-js/modules/web.url-search-params.js";

package/page/selectors/index.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import { createSelector } from 'reselect';
 import { makeGetMenu, makeGetIsFetchingMenu, getEnableCms2ForAllShoppers } from '@shopgate/engage/core/selectors';
 import { getFulfillmentParams, getPopulatedProductsResult, SHOPGATE_CATALOG_GET_HIGHLIGHT_PRODUCTS } from '@shopgate/engage/product';

package/page/widgets/ImageSlider/ImageSlider.js

@@ -45,6 +45,7 @@ const ImageSliderWidget = () => {
             className: classes.image,
             src: slide.image.url,
             alt: slide.image.altText || '',
+            "aria-hidden": !slide.image.altText,
             borderRadius: borderRadius
           })
         })

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -11,23 +11,22 @@ import { useNestedCategoryFilterWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const {
-  colors,
-  variables
+  colors
 } = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     background: colors.light,
     display: 'flex',
     flexDirection: 'column',
-    paddingBottom: variables.gap.big
+    paddingBottom: theme.spacing(2)
   },
   buttonContainer: {
-    padding: `0 ${variables.gap.big}px`
+    padding: theme.spacing(0, 2)
   },
   button: {
     width: '100%'
   }
-});
+}));
 
 /**
  * The NestedCategoryFilter component

package/page/widgets/NestedCategoryFilter/components/Picker/components/Sheet/index.js

@@ -31,7 +31,8 @@ const CategorySheet = ({
   onSelect
 }) => {
   const {
-    classes
+    classes,
+    cx
   } = useStyles();
   const handleItemClick = useCallback(event => {
     event.stopPropagation();
@@ -42,7 +43,7 @@ const CategorySheet = ({
     isOpen: open,
     onClose: onClose,
     children: /*#__PURE__*/_jsx(SheetList, {
-      className: `widget__nested-category-filter__sheet-list ${classes.sheetList}`,
+      className: cx('widget__nested-category-filter__sheet-list', classes.sheetList),
       children: items.map(item => /*#__PURE__*/_jsx(Item, {
         item: item,
         onClick: handleItemClick,

package/page/widgets/NestedCategoryFilter/components/Picker/components/SheetItem/index.js

@@ -1,30 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors,
-  variables
-} = themeConfig;
-const bgColor = colors.darkGray;
-const boxShadowOffset = variables.gap.bigger;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
     outline: 0,
     padding: 16,
     textAlign: 'left',
     width: '100%',
-    color: 'var(--color-text-high-emphasis)'
+    color: theme.palette.text.primary
   },
   buttonSelected: {
-    background: `var(--color-background-accent, ${bgColor})`,
-    boxShadow: `-${boxShadowOffset}px 0px 0px var(--color-background-accent, ${bgColor}), ${boxShadowOffset}px 0px 0px var(--color-background-accent,${bgColor})`,
+    background: 'var(--color-background-accent)',
+    boxShadow: `${theme.spacing(-2.5)}px 0px 0px var(--color-background-accent), ${theme.spacing(2.5)}px 0px 0px var(--color-background-accent)`,
     margin: '-1px 0',
     paddingTop: 17,
     paddingBottom: 17
   }
-});
+}));
 
 /**
  * The SheetItem component.

package/page/widgets/NestedCategoryFilter/components/Picker/index.js

@@ -11,10 +11,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const {
   colors
 } = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
-    background: `var(--color-background-accent, ${colors.overlay})`,
-    color: 'var(--color-text-high-emphasis)',
+    background: 'var(--color-background-accent)',
+    color: theme.palette.text.primary,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
@@ -38,7 +38,7 @@ const useStyles = makeStyles()({
     fontWeight: 500,
     lineHeight: 1.125
   }
-});
+}));
 
 /**
  * The CategoryPicker component.

package/product/components/Availability/Availability.js

@@ -1,40 +1,54 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { AVAILABILITY_STATE_OK, AVAILABILITY_STATE_WARNING, AVAILABILITY_STATE_ALERT } from '@shopgate/pwa-common-commerce/product/constants';
 import { SurroundPortals, PlaceholderLabel, Availability as AvailableText } from '@shopgate/engage/components';
 import { PRODUCT_AVAILABILITY } from '@shopgate/engage/product';
+import { makeStyles } from '@shopgate/engage/styles';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
 import connect from "./Availability.connector";
-import { placeholder, availability as availabilityStyle } from "./Availability.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  placeholder: {
+    height: 16,
+    width: '70%',
+    marginTop: 5,
+    marginBottom: 2
+  },
+  availability: {
+    fontSize: '0.875rem'
+  }
+});
 
 /**
  * The Availability component.
  * @param {Object} props The component props.
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function Availability({
   availability,
   fulfillmentMethods,
   fulfillmentSelection,
   className
 }) {
+  const {
+    classes,
+    cx
+  } = useStyles();
   // Render only when no fulfillment methods are available or when the given method exists
   if (hasNewServices() && (!fulfillmentMethods || fulfillmentMethods.indexOf(fulfillmentSelection) !== -1)) {
     return null;
   }
-  const classes = classNames(placeholder, className ? className.toString() : null);
+  const placeholderClasses = cx(classes.placeholder, className ? className.toString() : null);
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_AVAILABILITY,
     portalProps: {
       availability
     },
     children: /*#__PURE__*/_jsx(PlaceholderLabel, {
-      className: classes,
+      className: placeholderClasses,
       ready: availability !== null,
       children: availability && /*#__PURE__*/_jsx(AvailableText, {
-        className: availabilityStyle,
+        className: classes.availability,
         showWhenAvailable: true,
         text: availability.text || '',
         state: availability.state

package/product/components/Characteristics/Characteristic/components/Sheet/index.js

@@ -1,5 +1,5 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { SheetDrawer, SheetList, Menu, ResponsiveContainer } from '@shopgate/engage/components';
 import { ThemeContext } from '@shopgate/engage/core/contexts';