@shopgate/pwa-ui-shared 7.32.2-alpha.1 → 7.32.2-alpha.2

package/AddToCartButton/AddToCartButton.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export interface AddToCartButtonProps {
+    /**
+     * Whether the button is disabled.
+     */
+    isDisabled: boolean;
+    /**
+     * Shows a spinner instead of the icons and ignores clicks.
+     */
+    isLoading: boolean;
+    /**
+     * Called on click. `false` skips the checkmark animation, a promise delays it until it
+     * resolves.
+     */
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => unknown;
+    /**
+     * Hides the button from assistive technology.
+     */
+    'aria-hidden'?: boolean;
+    /**
+     * Accessible label of the button.
+     */
+    'aria-label'?: string;
+    /**
+     * Size of the button in pixels.
+     * @default 40
+     */
+    buttonSize?: number;
+    /**
+     * Custom class name for the button.
+     */
+    className?: string;
+    /**
+     * Ref of the button element, set by `withForwardedRef`.
+     */
+    forwardedRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * Size of the icons in pixels.
+     * @default 20
+     */
+    iconSize?: number;
+    /**
+     * Called when the checkmark animation has finished.
+     */
+    onReset?: () => void;
+    /**
+     * Counts adds that happen outside the click, e.g. in a picker; each increase plays the checkmark.
+     * @default 0
+     */
+    successCount?: number;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<AddToCartButtonProps, "forwardedRef"> & React.RefAttributes<HTMLButtonElement>>;
+export default _default;
+//# sourceMappingURL=AddToCartButton.d.ts.map

package/AddToCartButton/AddToCartButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartButton.d.ts","sourceRoot":"","sources":["../../AddToCartButton/AddToCartButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAEN,MAAM,OAAO,CAAC;AAiGf,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC;IACjE;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;wBAuKmD,KAAK,CAAC,yBAAyB,CACjF,IAAI,CAAC,oBAAoB,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CACpF;AAFD,wBAEE"}

package/AddToCartButton/AddToCartButton.js

@@ -0,0 +1,240 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import spring from 'css-spring';
+import { withForwardedRef } from '@shopgate/engage/core';
+import { keyframes, makeStyles, useTheme } from '@shopgate/engage/styles';
+import CartPlusIcon from "../icons/CartPlusIcon";
+import TickIcon from "../icons/TickIcon";
+import IndicatorCircle from "../IndicatorCircle";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_BUTTON_SIZE = 40;
+const DEFAULT_ICON_SIZE = 20;
+const springOptions = {
+  stiffness: 381.47,
+  damping: 15
+};
+const springFromTopKeyframes = keyframes(spring({
+  transform: 'translate3d(0, 300%, 0)'
+}, {
+  transform: 'translate3d(0, -50%, 0)'
+}, springOptions));
+const springFromBottomKeyframes = keyframes(spring({
+  transform: 'translate3d(0, -300%, 0)'
+}, {
+  transform: 'translate3d(0, -50%, 0)'
+}, springOptions));
+const springToTopKeyframes = keyframes(spring({
+  transform: 'translate3d(0, -50%, 0)'
+}, {
+  transform: 'translate3d(0, 300%, 0)'
+}, springOptions));
+const springToBottomKeyframes = keyframes(spring({
+  transform: 'translate3d(0, -50%, 0)'
+}, {
+  transform: 'translate3d(0, -300%, 0)'
+}, springOptions));
+const useStyles = makeStyles()(theme => ({
+  springFromBottom: {
+    animation: `${springFromBottomKeyframes} 600ms`
+  },
+  springFromTop: {
+    animation: `${springFromTopKeyframes} 600ms`
+  },
+  springToTop: {
+    animation: `${springToTopKeyframes} 600ms`
+  },
+  springToBottom: {
+    animation: `${springToBottomKeyframes} 600ms`
+  },
+  icon: {
+    transition: 'opacity 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+    opacity: 1,
+    position: 'absolute',
+    display: 'flex',
+    left: '50%',
+    marginLeft: '-0.5em'
+  },
+  spinnerIcon: {
+    left: '50%',
+    top: '50%',
+    marginTop: -32 / 2,
+    marginLeft: -32 / 2
+  },
+  buttonReady: {
+    background: theme.components.ctaButton.background,
+    color: theme.contrastColor(theme.components.ctaButton.background)
+  },
+  buttonSuccess: {
+    background: theme.contrastColor(theme.components.ctaButton.background),
+    color: theme.components.ctaButton.background
+  },
+  buttonDisabled: {
+    background: theme.palette.action.disabledBackground,
+    color: theme.contrastColor(theme.palette.action.disabledBackground),
+    boxShadow: '0 3px 4px rgba(0, 0, 0, 0.13)'
+  }
+}));
+const getWrapperStyle = (bSize, iSize) => ({
+  transition: 'background 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+  borderRadius: '50%',
+  width: bSize,
+  height: bSize,
+  position: 'relative',
+  fontSize: iSize,
+  outline: 0,
+  paddingLeft: (bSize - iSize) / 2,
+  paddingRight: (bSize - iSize) / 2,
+  zIndex: 2,
+  overflow: 'hidden',
+  flexShrink: 0
+});
+/**
+ * The add to cart button with its checkmark animation.
+ */
+const AddToCartButton = ({
+  'aria-hidden': ariaHidden = false,
+  'aria-label': ariaLabel,
+  buttonSize = DEFAULT_BUTTON_SIZE,
+  className,
+  forwardedRef,
+  iconSize = DEFAULT_ICON_SIZE,
+  isDisabled,
+  isLoading,
+  onClick,
+  onReset,
+  successCount = 0
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const theme = useTheme();
+  const [showCheckmark, setShowCheckmark] = useState(null);
+  const previousSuccessCount = useRef(successCount);
+  const isMounted = useRef(true);
+  const checkmarkTimeout = useRef();
+  useEffect(() => () => {
+    isMounted.current = false;
+    clearTimeout(checkmarkTimeout.current);
+  }, []);
+  const handleCompletion = useCallback(() => {
+    if (!isMounted.current) {
+      return;
+    }
+    clearTimeout(checkmarkTimeout.current);
+    setShowCheckmark(true);
+    checkmarkTimeout.current = setTimeout(() => {
+      setShowCheckmark(false);
+    }, 900);
+  }, []);
+  useEffect(() => {
+    if (successCount > previousSuccessCount.current) {
+      handleCompletion();
+    }
+    previousSuccessCount.current = successCount;
+  }, [successCount, handleCompletion]);
+  const handleClick = useCallback(event => {
+    if (showCheckmark || isLoading || isDisabled) {
+      return;
+    }
+    const result = onClick(event);
+    if (result === false) {
+      return;
+    }
+    if (result instanceof Promise) {
+      (async () => {
+        try {
+          await result;
+          handleCompletion();
+        } catch (error) {
+          // ignore error in button.
+        }
+      })();
+      return;
+    }
+    handleCompletion();
+  }, [showCheckmark, isLoading, isDisabled, onClick, handleCompletion]);
+  const handleCartAnimationEnd = useCallback(() => {
+    if (showCheckmark === false) {
+      setShowCheckmark(null);
+    }
+    onReset?.();
+  }, [showCheckmark, onReset]);
+  let buttonStateClass = classes.buttonReady;
+  let tickIconClass = classes.icon;
+  let cartPlusIconClass = classes.icon;
+  const iconOpacity = isLoading ? {
+    opacity: 0
+  } : {
+    opacity: 1
+  };
+  const spinnerInlineStyle = isLoading ? {
+    opacity: 1
+  } : {
+    opacity: 0
+  };
+  let tickInlineStyle = showCheckmark === null ? {
+    transform: 'translate3d(0, 300%, 0)',
+    ...iconOpacity
+  } : undefined;
+  let cartInlineStyle = showCheckmark === null ? {
+    transform: 'translate3d(0, -50%, 0)',
+    ...iconOpacity
+  } : undefined;
+  if (isDisabled && !isLoading) {
+    buttonStateClass = classes.buttonDisabled;
+  } else if (showCheckmark) {
+    tickIconClass = cx(classes.icon, classes.springFromBottom);
+    cartPlusIconClass = cx(classes.icon, classes.springToTop);
+    buttonStateClass = classes.buttonSuccess;
+    tickInlineStyle = {
+      transform: 'translate3d(0, -50%, 0)',
+      ...iconOpacity
+    };
+    cartInlineStyle = {
+      transform: 'translate3d(0, -300%, 0)',
+      ...iconOpacity
+    };
+  } else if (showCheckmark !== null) {
+    tickIconClass = cx(classes.icon, classes.springToBottom);
+    cartPlusIconClass = cx(classes.icon, classes.springFromTop);
+    cartInlineStyle = {
+      transform: 'translate3d(0, -50%, 0)',
+      ...iconOpacity
+    };
+    tickInlineStyle = {
+      transform: 'translate3d(0, -300%, 0)',
+      ...iconOpacity
+    };
+  }
+  const wrapperStyle = getWrapperStyle(buttonSize, iconSize);
+  return /*#__PURE__*/_jsxs("button", {
+    "data-test-id": "addToCartButton",
+    className: cx('ui-shared__add-to-cart-button', buttonStateClass, className),
+    style: wrapperStyle,
+    onClick: handleClick,
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    "aria-disabled": isDisabled,
+    ref: forwardedRef,
+    type: "button",
+    children: [isLoading && /*#__PURE__*/_jsx("div", {
+      className: cx(classes.icon, classes.spinnerIcon),
+      style: spinnerInlineStyle,
+      children: /*#__PURE__*/_jsx(IndicatorCircle, {
+        color: theme.contrastColor(theme.components.ctaButton.background),
+        strokeWidth: 5,
+        paused: !isLoading
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: tickIconClass,
+      style: tickInlineStyle,
+      children: /*#__PURE__*/_jsx(TickIcon, {})
+    }), /*#__PURE__*/_jsx("div", {
+      className: cartPlusIconClass,
+      style: cartInlineStyle,
+      onAnimationEnd: handleCartAnimationEnd,
+      children: /*#__PURE__*/_jsx(CartPlusIcon, {})
+    })]
+  });
+};
+export default withForwardedRef(AddToCartButton);

package/AddToCartButton/css-spring.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `css-spring` ships no types. It calculates the keyframes of a spring animation between two
+ * sets of CSS properties.
+ */
+declare module 'css-spring' {
+  /**
+   * Spring physics of the animation.
+   */
+  interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+    precision?: number;
+  }
+
+  export default function spring(
+    from: Record<string, string | number>,
+    to: Record<string, string | number>,
+    options?: SpringOptions
+  ): Record<string, Record<string, string | number>>;
+}

package/AddToCartButton/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './AddToCartButton';
+export type { AddToCartButtonProps } from './AddToCartButton';
+//# sourceMappingURL=index.d.ts.map

package/AddToCartButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../AddToCartButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/AddToCartButton/index.js

@@ -1,247 +1 @@
-import React, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
-import spring from 'css-spring';
-import { withForwardedRef } from '@shopgate/engage/core';
-import { keyframes, makeStyles, useTheme } from '@shopgate/engage/styles';
-import CartPlusIcon from "../icons/CartPlusIcon";
-import TickIcon from "../icons/TickIcon";
-import IndicatorCircle from "../IndicatorCircle";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_BUTTON_SIZE = 40;
-const DEFAULT_ICON_SIZE = 20;
-const springOptions = {
-  stiffness: 381.47,
-  damping: 15
-};
-const springFromTopKeyframes = keyframes(spring({
-  transform: 'translate3d(0, 300%, 0)'
-}, {
-  transform: 'translate3d(0, -50%, 0)'
-}, springOptions));
-const springFromBottomKeyframes = keyframes(spring({
-  transform: 'translate3d(0, -300%, 0)'
-}, {
-  transform: 'translate3d(0, -50%, 0)'
-}, springOptions));
-const springToTopKeyframes = keyframes(spring({
-  transform: 'translate3d(0, -50%, 0)'
-}, {
-  transform: 'translate3d(0, 300%, 0)'
-}, springOptions));
-const springToBottomKeyframes = keyframes(spring({
-  transform: 'translate3d(0, -50%, 0)'
-}, {
-  transform: 'translate3d(0, -300%, 0)'
-}, springOptions));
-const useStyles = makeStyles()(theme => ({
-  springFromBottom: {
-    animation: `${springFromBottomKeyframes} 600ms`
-  },
-  springFromTop: {
-    animation: `${springFromTopKeyframes} 600ms`
-  },
-  springToTop: {
-    animation: `${springToTopKeyframes} 600ms`
-  },
-  springToBottom: {
-    animation: `${springToBottomKeyframes} 600ms`
-  },
-  icon: {
-    transition: 'opacity 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
-    opacity: 1,
-    position: 'absolute',
-    display: 'flex',
-    left: '50%',
-    marginLeft: '-0.5em'
-  },
-  spinnerIcon: {
-    left: '50%',
-    top: '50%',
-    marginTop: -32 / 2,
-    marginLeft: -32 / 2
-  },
-  buttonReady: {
-    background: theme.components.ctaButton.background,
-    color: theme.contrastColor(theme.components.ctaButton.background)
-  },
-  buttonSuccess: {
-    background: theme.contrastColor(theme.components.ctaButton.background),
-    color: theme.components.ctaButton.background
-  },
-  buttonDisabled: {
-    background: theme.palette.action.disabledBackground,
-    color: theme.contrastColor(theme.palette.action.disabledBackground),
-    boxShadow: '0 3px 4px rgba(0, 0, 0, 0.13)'
-  }
-}));
-
-/**
- * @param {number} bSize .
- * @param {number} iSize .
- * @returns {Object}
- */
-const getWrapperStyle = (bSize, iSize) => ({
-  transition: 'background 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
-  borderRadius: '50%',
-  width: bSize,
-  height: bSize,
-  position: 'relative',
-  fontSize: iSize,
-  outline: 0,
-  paddingLeft: (bSize - iSize) / 2,
-  paddingRight: (bSize - iSize) / 2,
-  zIndex: 2,
-  overflow: 'hidden',
-  flexShrink: 0
-});
-
-/**
- * AddToCartButton component.
- * @param {Object} props Props.
- * @returns {JSX.Element}
- */
-const AddToCartButton = ({
-  'aria-hidden': ariaHidden,
-  'aria-label': ariaLabel,
-  buttonSize,
-  className,
-  forwardedRef,
-  iconSize,
-  isDisabled,
-  isLoading,
-  onClick,
-  onReset
-}) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  const theme = useTheme();
-  const [showCheckmark, setShowCheckmark] = useState(null);
-
-  /**
-   * @param {Event} e Click event.
-   */
-  const handleClick = useCallback(e => {
-    if (showCheckmark || isLoading || isDisabled) {
-      return;
-    }
-
-    /** Completes the success checkmark animation cycle. */
-    const handleCompletion = () => {
-      setShowCheckmark(true);
-      setTimeout(() => {
-        setShowCheckmark(false);
-      }, 900);
-    };
-    const result = onClick(e);
-    if (result === false) {
-      return;
-    }
-    if (result instanceof Promise) {
-      (async () => {
-        try {
-          await result;
-          handleCompletion();
-        } catch (error) {
-          // ignore error in button.
-        }
-      })();
-      return;
-    }
-    handleCompletion();
-  }, [showCheckmark, isLoading, isDisabled, onClick]);
-  const handleCartAnimationEnd = useCallback(() => {
-    if (showCheckmark === false) {
-      setShowCheckmark(null);
-    }
-    onReset();
-  }, [showCheckmark, onReset]);
-  let buttonStateClass = classes.buttonReady;
-  let tickIconClass = classes.icon;
-  let cartPlusIconClass = classes.icon;
-  const iconOpacity = isLoading ? {
-    opacity: 0
-  } : {
-    opacity: 1
-  };
-  const spinnerInlineStyle = isLoading ? {
-    opacity: 1
-  } : {
-    opacity: 0
-  };
-  let tickInlineStyle = showCheckmark === null ? {
-    transform: 'translate3d(0, 300%, 0)',
-    ...iconOpacity
-  } : null;
-  let cartInlineStyle = showCheckmark === null ? {
-    transform: 'translate3d(0, -50%, 0)',
-    ...iconOpacity
-  } : null;
-  if (isDisabled && !isLoading) {
-    buttonStateClass = classes.buttonDisabled;
-  } else if (showCheckmark) {
-    tickIconClass = cx(classes.icon, classes.springFromBottom);
-    cartPlusIconClass = cx(classes.icon, classes.springToTop);
-    buttonStateClass = classes.buttonSuccess;
-    tickInlineStyle = {
-      transform: 'translate3d(0, -50%, 0)',
-      ...iconOpacity
-    };
-    cartInlineStyle = {
-      transform: 'translate3d(0, -300%, 0)',
-      ...iconOpacity
-    };
-  } else if (showCheckmark !== null) {
-    tickIconClass = cx(classes.icon, classes.springToBottom);
-    cartPlusIconClass = cx(classes.icon, classes.springFromTop);
-    cartInlineStyle = {
-      transform: 'translate3d(0, -50%, 0)',
-      ...iconOpacity
-    };
-    tickInlineStyle = {
-      transform: 'translate3d(0, -300%, 0)',
-      ...iconOpacity
-    };
-  }
-  const wrapperStyle = getWrapperStyle(buttonSize, iconSize);
-  return /*#__PURE__*/_jsxs("button", {
-    "data-test-id": "addToCartButton",
-    className: cx('ui-shared__add-to-cart-button', buttonStateClass, className),
-    style: wrapperStyle,
-    onClick: handleClick,
-    "aria-hidden": ariaHidden,
-    "aria-label": ariaLabel,
-    "aria-disabled": isDisabled,
-    ref: forwardedRef,
-    type: "button",
-    children: [isLoading && /*#__PURE__*/_jsx("div", {
-      className: cx(classes.icon, classes.spinnerIcon),
-      style: spinnerInlineStyle,
-      children: /*#__PURE__*/_jsx(IndicatorCircle, {
-        color: theme.contrastColor(theme.components.ctaButton.background),
-        strokeWidth: 5,
-        paused: !isLoading
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      className: tickIconClass,
-      style: tickInlineStyle,
-      children: /*#__PURE__*/_jsx(TickIcon, {})
-    }), /*#__PURE__*/_jsx("div", {
-      className: cartPlusIconClass,
-      style: cartInlineStyle,
-      onAnimationEnd: handleCartAnimationEnd,
-      children: /*#__PURE__*/_jsx(CartPlusIcon, {})
-    })]
-  });
-};
-AddToCartButton.defaultProps = {
-  'aria-hidden': false,
-  'aria-label': null,
-  buttonSize: DEFAULT_BUTTON_SIZE,
-  className: null,
-  forwardedRef: null,
-  iconSize: DEFAULT_ICON_SIZE,
-  onReset: () => {}
-};
-export default withForwardedRef(AddToCartButton);
+export { default } from "./AddToCartButton";

package/AddToCartButton/style.js

@@ -1,6 +1,7 @@
-import { css } from 'glamor';
 import spring from 'css-spring';
+import { logger } from '@shopgate/pwa-core/helpers';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { css, keyframes } from '@shopgate/engage/styles';
 
 /* eslint-disable max-len */
 // TODO This file was brought back since some extensions import it (@shopgate-project/tablet-adjustments, @shopgate/grouped-products).
@@ -9,6 +10,7 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 // on their own
 /* eslint-enable max-len */
 
+logger.warn('DEPRECATED: @shopgate/pwa-ui-shared/AddToCartButton/style is deprecated and will be removed. Style the add to cart button inside the extension instead.');
 const options = {
   stiffness: 381.47,
   damping: 15
@@ -20,38 +22,38 @@ const iconSize = 20;
  * Keyframe animations to create spring animation.
  * spring(..) automatically calculates all steps for the keyframe animation.
  */
-const springFromTopKeyframes = css.keyframes(spring({
+const springFromTopKeyframes = keyframes(spring({
   transform: 'translate3d(0, 300%, 0)'
 }, {
   transform: 'translate3d(0, -50%, 0)'
 }, options));
-const springFromBottomKeyframes = css.keyframes(spring({
+const springFromBottomKeyframes = keyframes(spring({
   transform: 'translate3d(0, -300%, 0)'
 }, {
   transform: 'translate3d(0, -50%, 0)'
 }, options));
-const springToTopKeyframes = css.keyframes(spring({
+const springToTopKeyframes = keyframes(spring({
   transform: 'translate3d(0, -50%, 0)'
 }, {
   transform: 'translate3d(0, 300%, 0)'
 }, options));
-const springToBottomKeyframes = css.keyframes(spring({
+const springToBottomKeyframes = keyframes(spring({
   transform: 'translate3d(0, -50%, 0)'
 }, {
   transform: 'translate3d(0, -300%, 0)'
 }, options));
 const springFromBottom = css({
   animation: `${springFromBottomKeyframes} 600ms`
-}).toString();
+});
 const springFromTop = css({
   animation: `${springFromTopKeyframes} 600ms`
-}).toString();
+});
 const springToTop = css({
   animation: `${springToTopKeyframes} 600ms`
-}).toString();
+});
 const springToBottom = css({
   animation: `${springToBottomKeyframes} 600ms`
-}).toString();
+});
 
 /**
  * Circular button and container for the icons.
@@ -83,7 +85,7 @@ const buttonWrapperDefault = (bSize, iSize) => ({
  */
 const buttonWrapper = (bSize, iSize) => css({
   ...buttonWrapperDefault(bSize, iSize)
-}).toString();
+});
 
 /**
  * Circular button and container for the icons.
@@ -94,7 +96,7 @@ const buttonWrapper = (bSize, iSize) => css({
  */
 const buttonWrapperNoShadow = (bSize, iSize) => css({
   ...buttonWrapperDefault(bSize, iSize)
-}).toString();
+});
 
 /**
  * Styling that is applied to the button when cart icon is shown.
@@ -102,7 +104,7 @@ const buttonWrapperNoShadow = (bSize, iSize) => css({
 const buttonReady = css({
   background: `var(--color-button-cta, ${themeConfig.colors.cta})`,
   color: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`
-}).toString();
+});
 
 /**
  * Styling that is applied to the button when checkmark is shown.
@@ -110,7 +112,7 @@ const buttonReady = css({
 const buttonSuccess = css({
   background: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`,
   color: `var(--color-button-cta, ${themeConfig.colors.cta})`
-}).toString();
+});
 
 /**
  * Styling that is applied to the button when it is disabled.
@@ -119,7 +121,7 @@ const buttonDisabled = css({
   background: themeConfig.colors.shade5,
   color: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`,
   boxShadow: themeConfig.shadows.buttons.disabled
-}).toString();
+});
 
 /**
  * Basic icon style that is always applied to all icons.
@@ -128,7 +130,7 @@ const icon = css({
   transition: 'opacity 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
   opacity: 1,
   position: 'absolute'
-}).toString();
+});
 
 /**
  * Icon style that is applied only to the spinner icon.
@@ -138,7 +140,7 @@ const spinnerIcon = css({
   top: '50%',
   marginTop: -themeConfig.variables.loadingIndicator.size / 2,
   marginLeft: -themeConfig.variables.loadingIndicator.size / 2
-}).toString();
+});
 export default {
   buttonWrapper,
   buttonWrapperNoShadow,

package/Dialog/components/BasicDialog/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 // TODO: Move to ThemeContext
 import BaseDialogGMD from '@shopgate/pwa-ui-material/BaseDialog';
 import BaseDialogIOS from '@shopgate/pwa-ui-ios/BaseDialog';

package/FavoritesButton/FavoritesButton.d.ts

@@ -57,9 +57,9 @@ export type FavoritesButtonProps = FavoritesButtonOwnProps & FavoritesButtonConn
 declare const FavoritesButtonComponent: import("react-redux").ConnectedComponent<React.MemoExoticComponent<({ active, addFavorites, "aria-hidden": ariaHidden, className, loadWishlistOnAppStartEnabled, once, productId, removeFavorites, removeThrottle, removeWithRelatives, size, wishlistItemQuantityEnabled, }: FavoritesButtonProps) => React.JSX.Element | null>, {
     className?: string | undefined;
     size?: IconButtonSize | undefined;
+    'aria-hidden'?: boolean | undefined;
     active?: boolean | undefined;
     addFavorites?: ((productId: string) => void) | undefined;
-    'aria-hidden'?: boolean | undefined;
     loadWishlistOnAppStartEnabled?: boolean | undefined;
     once?: boolean | undefined;
     productId?: string | null | undefined;

package/FavoritesButton/FavoritesButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FavoritesButton.d.ts","sourceRoot":"","sources":["../../FavoritesButton/FavoritesButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAEN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAiGrE,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED;;;GAGG;AACH,UAAU,6BAA6B;IACrC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7E,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,MAAM,MAAM,oBAAoB,GAAG,uBAAuB,GAAG,6BAA6B,CAAC;AAE3F;;;GAGG;AACH,QAAA,MAAM,wBAAwB,gRAnI3B,oBAAoB;gBAuFT,MAAM;WAwBX,cAAc;aAhCZ,OAAO;oBAwCD,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI;oBApC1B,OAAO;oCAsCS,OAAO;WA7BhC,OAAO;gBAIF,MAAM,GAAG,IAAI;uBAwBP,CAAC,SAAS,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,OAAO,KAAK,IAAI;qBAnB3D,MAAM;0BAKD,OAAO;kCAgBC,OAAO;;;EASwB,CAAC;AAEhE,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"FavoritesButton.d.ts","sourceRoot":"","sources":["../../FavoritesButton/FavoritesButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAEN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAiGrE,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED;;;GAGG;AACH,UAAU,6BAA6B;IACrC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7E,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,MAAM,MAAM,oBAAoB,GAAG,uBAAuB,GAAG,6BAA6B,CAAC;AAE3F;;;GAGG;AACH,QAAA,MAAM,wBAAwB,gRAnI3B,oBAAoB;gBAuFT,MAAM;WAwBX,cAAc;oBA5BL,OAAO;aAJd,OAAO;oBAwCD,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI;oCAEV,OAAO;WA7BhC,OAAO;gBAIF,MAAM,GAAG,IAAI;uBAwBP,CAAC,SAAS,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,OAAO,KAAK,IAAI;qBAnB3D,MAAM;0BAKD,OAAO;kCAgBC,OAAO;;;EASwB,CAAC;AAEhE,eAAe,wBAAwB,CAAC"}

package/Form/Builder/builders/buildCountryList.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import { logger } from '@shopgate/pwa-core/helpers';
 import iso3166 from "../iso-3166-2";
 

package/Form/Builder/builders/buildValidationErrorList.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 /**
  * Builds an Object, that contains all validation errors given as array of objects
  * @param {{path: string, message: string}[]} validationErrors Associated object containing errors

package/Form/Builder/classes/ActionListener/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 import { logger } from '@shopgate/pwa-core/helpers';
 import { ELEMENT_TYPE_NUMBER, ELEMENT_TYPE_COUNTRY, ELEMENT_TYPE_PROVINCE, ELEMENT_TYPE_CHECKBOX } from "../../elementTypes";
 import { ACTION_TYPE_UPDATE_PROVINCE_ELEMENT, ACTION_TYPE_SET_VISIBILITY, ACTION_TYPE_SET_VALUE, ACTION_TYPE_TRANSFORM, ACTION_SET_VALUE_FIXED, ACTION_SET_VALUE_COPY_FROM, ACTION_SET_VALUE_LENGTH_OF, ACTION_RULE_TYPE_NOT_IN, ACTION_RULE_TYPE_ONE_OF, ACTION_RULE_TYPE_BOOLEAN, ACTION_RULE_TYPE_REGEX, ACTION_RULE_DATA_TYPES, ACTION_RULES_CONCAT_METHOD_ALL, ACTION_RULES_CONCAT_METHOD_ANY, ACTION_RULES_CONCAT_METHOD_NONE } from "./constants";

package/Form/Builder/index.js

@@ -1,6 +1,5 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import _isEqual from "lodash/isEqual";
-import "core-js/modules/es.string.replace.js";
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { logger } from '@shopgate/pwa-core/helpers';

package/Form/SelectContextChoices/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';

package/IndicatorCircle/index.d.ts

@@ -0,0 +1,36 @@
+export default IndicatorCircle;
+/**
+ * The circle indicator component.
+ * @param {Object} props The component props.
+ * @param {Object} props.size Width and height of the circle.
+ * @param {Object} props.color Color of the circle.
+ * @param {Object} props.strokeWidth Stroke width of the circle.
+ * @param {boolean} props.paused Animation should be paused.
+ * @returns {JSX}
+ */
+declare function IndicatorCircle({ size, color, strokeWidth, paused, }: {
+    size: Object;
+    color: Object;
+    strokeWidth: Object;
+    paused: boolean;
+}): JSX;
+declare namespace IndicatorCircle {
+    namespace propTypes {
+        let color: PropTypes.Requireable<string>;
+        let paused: PropTypes.Requireable<boolean>;
+        let size: PropTypes.Requireable<number>;
+        let strokeWidth: PropTypes.Requireable<number>;
+    }
+    namespace defaultProps {
+        let color_1: string;
+        export { color_1 as color };
+        let paused_1: boolean;
+        export { paused_1 as paused };
+        let size_1: number;
+        export { size_1 as size };
+        let strokeWidth_1: number;
+        export { strokeWidth_1 as strokeWidth };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

package/IndicatorCircle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../IndicatorCircle/index.jsx"],"names":[],"mappings":";AA2CA;;;;;;;;GAQG;AACH,wEANG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,WAAW,EAAzB,MAAM;IACS,MAAM,EAArB,OAAO;CACf,GAAU,GAAG,CA+Bf;;;;;;;;;;;;;;;;;;;sBAhFqB,YAAY"}

package/Price/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace.js";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { I18n, Typography } from '@shopgate/engage/components';

package/TextField/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 import React, { useState, useCallback, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';

package/package.json

@@ -1,16 +1,22 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.32.2-alpha.1",
+  "version": "7.32.2-alpha.2",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shopgate/pwa.git",
+    "directory": "libraries/ui-shared"
+  },
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.32.2-alpha.1",
-    "@shopgate/pwa-ui-material": "7.32.2-alpha.1"
+    "@shopgate/pwa-ui-ios": "7.32.2-alpha.2",
+    "@shopgate/pwa-ui-material": "7.32.2-alpha.2",
+    "css-spring": "git+https://github.com/shopgate/css-spring.git#master"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.32.2-alpha.1",
-    "@shopgate/pwa-common-commerce": "7.32.2-alpha.1",
+    "@shopgate/pwa-common": "7.32.2-alpha.2",
+    "@shopgate/pwa-common-commerce": "7.32.2-alpha.2",
     "classnames": "2.5.1",
     "react": "^17.0.2"
   },