@shopgate/engage 7.32.0-beta.1 → 7.32.0-beta.11

package/cart/components/CartItems/CartItems.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CardList, ResponsiveContainer } from '@shopgate/engage/components';
+import { ResponsiveContainer, Card } from '@shopgate/engage/components';
 import { FulfillmentSlotSwitcher } from '@shopgate/engage/locations';
 import { makeStyles } from '@shopgate/engage/styles';
 import PropTypes from 'prop-types';
@@ -14,15 +14,11 @@ const useStyles = makeStyles()(theme => ({
     marginBottom: theme.spacing(-1.5)
   },
   card: {
-    background: theme.palette.background.surface,
     marginBottom: theme.spacing(1.5),
     ':last-of-type': {
       marginBottom: 0
     },
-    border: `1px solid ${theme.components.border.light}`,
-    boxSizing: 'border-box',
-    boxShadow: '0px 4px 2px rgba(0, 0, 0, 0.05)',
-    borderRadius: 5
+    boxSizing: 'border-box'
   }
 }));
 
@@ -54,7 +50,8 @@ const CartItems = ({
   isDirectShipOnly
 }) => {
   const {
-    classes
+    classes,
+    cx
   } = useStyles();
   if (!cartItems || cartItems.length === 0) {
     return null;
@@ -69,8 +66,8 @@ const CartItems = ({
         isDirectShipOnly: isDirectShipOnly,
         isCheckoutConfirmation: isCheckoutConfirmation
       })
-    }), /*#__PURE__*/_jsxs(CardList, {
-      className: classes.items,
+    }), /*#__PURE__*/_jsxs("ul", {
+      className: cx('ui-shared__card-list', classes.items),
       children: [!isOrderDetails ? /*#__PURE__*/_jsx(ResponsiveContainer, {
         appAlways: true,
         breakpoint: "<=xs",
@@ -87,8 +84,9 @@ const CartItems = ({
           wrapCard: true,
           className: classes.card
         })
-      }), cartItems.map(item => /*#__PURE__*/_jsx(CardList.Item, {
+      }), cartItems.map(item => /*#__PURE__*/_jsx(Card, {
         className: classes.card,
+        component: "li",
         children: /*#__PURE__*/_jsx(CartItemProvider, {
           cartItem: item,
           isEditable: editable,

package/cart/components/CartItems/CartItemsSubstitution.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { CardList } from '@shopgate/engage/components';
+import { Card } from '@shopgate/engage/components';
 import Substitution, { SubstitutionWrapper } from "../Substitution";
 import connect from "./CartItemsSubscription.connector";
 
@@ -24,8 +24,9 @@ const CartItemsSubstitution = ({
   }))), [allAllowed, cartItems, updateProductsInCart]);
   if (wrapCard) {
     return /*#__PURE__*/_jsx(SubstitutionWrapper, {
-      children: /*#__PURE__*/_jsx(CardList.Item, {
+      children: /*#__PURE__*/_jsx(Card, {
         className: className,
+        component: "li",
         children: /*#__PURE__*/_jsx(Substitution, {
           id: "substitution-all",
           label: i18n.text('cart.allow_substitution_all'),

package/cart/components/CartSummaryWide/CartSummaryWide.js

@@ -25,12 +25,12 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2)
   },
   total: {
-    fontSize: theme.typography.body1.fontSize,
+    fontSize: theme.typography.body2.fontSize,
     padding: theme.spacing(1, 0),
     color: theme.palette.text.primary
   },
   grandTotal: {
-    fontSize: `${theme.typography.h3.fontSize} !important`,
+    fontSize: theme.typography.h4.fontSize,
     fontWeight: theme.typography.fontWeightMedium,
     borderTop: `1px solid ${theme.components.border.medium}`,
     padding: theme.spacing(1, 0),

package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.js

@@ -1,8 +1,8 @@
 import React, { useContext, useMemo } from 'react';
-import { SurroundPortals, I18n, Link } from '@shopgate/engage/components';
+import { SurroundPortals, I18n } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
-import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
+import { Button } from '@shopgate/engage/components/v2';
 import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
 import PropTypes from 'prop-types';
 import { CartContext } from "../../cart.context";
@@ -14,15 +14,7 @@ const useStyles = makeStyles()(theme => ({
     flexDirection: 'column'
   },
   button: {
-    width: '100%',
-    background: theme.components.ctaButton.background,
-    color: `${theme.contrastColor(theme.components.ctaButton.background)}!important`,
-    borderRadius: 4,
     margin: theme.spacing(2, 0)
-  },
-  disabledButton: {
-    background: theme.palette.action.disabledBackground,
-    color: `${theme.contrastColor(theme.palette.action.disabledBackground)}!important`
   }
 }));
 
@@ -35,16 +27,12 @@ const CartSummaryWideCheckoutButton = ({
   isOrderable
 }) => {
   const {
-    classes,
-    cx
+    classes
   } = useStyles();
   const {
     isLoading
   } = useContext(CartContext);
   const isActive = useMemo(() => isOrderable && !isLoading, [isLoading, isOrderable]);
-  const buttonClassName = cx(classes.button, {
-    [classes.disabledButton]: !isActive
-  });
   return /*#__PURE__*/_jsx("div", {
     className: classes.container,
     children: /*#__PURE__*/_jsx(SurroundPortals, {
@@ -52,16 +40,14 @@ const CartSummaryWideCheckoutButton = ({
       portalProps: {
         isActive
       },
-      children: /*#__PURE__*/_jsx(Link, {
+      children: /*#__PURE__*/_jsx(Button, {
         href: CHECKOUT_PATH,
+        color: "cta",
+        fullWidth: true,
         disabled: !isActive,
-        children: /*#__PURE__*/_jsx(RippleButton, {
-          disabled: !isActive,
-          type: "regular",
-          className: buttonClassName,
-          children: /*#__PURE__*/_jsx(I18n.Text, {
-            string: "cart.checkout"
-          })
+        className: classes.button,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "cart.checkout"
         })
       })
     })

package/cart/components/PaymentBar/PaymentBarCheckoutButton.js

@@ -1,37 +1,21 @@
 import React, { useContext, useMemo } from 'react';
-import { I18n, Link, SurroundPortals } from '@shopgate/engage/components';
-import { makeStyles } from '@shopgate/engage/styles';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
 import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
-import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
+import { Button } from '@shopgate/engage/components/v2';
 import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
 import PropTypes from 'prop-types';
 import { CartContext } from "../../cart.context";
 import connect from "./PaymentBarCheckoutButton.connector";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  button: {
-    width: '100%',
-    background: theme.components.ctaButton.background,
-    color: `${theme.contrastColor(theme.components.ctaButton.background)}!important`
-  },
-  disabledButton: {
-    width: '100%',
-    background: theme.palette.action.disabledBackground,
-    color: `${theme.contrastColor(theme.palette.action.disabledBackground)}!important`
-  }
-}));
 
 /**
  * Renders the cart payment bar checkout button.
  * @param {boolean} isOrderable Whether the cart is orderable.
  * @return {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const PaymentBarCheckoutButton = ({
   isOrderable
 }) => {
-  const {
-    classes
-  } = useStyles();
   const {
     isLoading
   } = useContext(CartContext);
@@ -41,19 +25,13 @@ const PaymentBarCheckoutButton = ({
     portalProps: {
       isActive
     },
-    children: /*#__PURE__*/_jsx(Link, {
+    children: /*#__PURE__*/_jsx(Button, {
       href: CHECKOUT_PATH,
+      color: "cta",
+      fullWidth: true,
       disabled: !isActive,
-      tabIndex: 0,
-      role: "button",
-      "aria-disabled": !isActive,
-      children: /*#__PURE__*/_jsx(RippleButton, {
-        disabled: !isActive,
-        type: "regular",
-        className: isActive ? classes.button : classes.disabledButton,
-        children: /*#__PURE__*/_jsx(I18n.Text, {
-          string: "cart.checkout"
-        })
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.checkout"
       })
     })
   });

package/cart/components/PaymentBar/PaymentBarContent.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => ({
     boxShadow: '0 -4px 5px -2px rgba(0, 0, 0, 0.1)',
     position: 'relative',
     zIndex: 2,
-    paddingBottom: 'var(--safe-area-inset-bottom)'
+    paddingBottom: theme.layout.safeArea.bottom
   },
   container: {
     padding: isIOSTheme() ? theme.spacing(1) : theme.spacing(2),

package/cart/components/PaymentBar/testUtils/mockFactories.js

@@ -38,27 +38,20 @@ const createCartTotalLineMock = () => {
   };
   return CartTotalLine;
 };
-const createRippleButtonMock = () => function RippleButton(props) {
+const createButtonMock = () => function Button(props) {
   return /*#__PURE__*/_jsx("button", {
     type: "button",
     className: props.className,
     disabled: props.disabled,
+    "data-color": props.color,
+    "data-href": props.href,
     children: props.children
   });
 };
-const createStylesMock = () => ({
-  makeStyles: () => () => () => ({
-    classes: {
-      button: 'button',
-      disabledButton: 'disabledButton'
-    }
-  })
-});
 module.exports = {
   createSurroundPortalsMock,
   createCartTotalLineMock,
-  createRippleButtonMock,
-  createStylesMock
+  createButtonMock
 };
 
 /* eslint-enable react/prop-types, require-jsdoc */

package/category/components/CategoryImage/index.js

@@ -1,37 +1,44 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Image } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    borderRadius: theme.shape.borderRadius,
+    overflow: 'hidden'
+  }
+}));
 
 /**
  * The CategoryImage component
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const CategoryImage = ({
   className,
   src,
   placeholderSrc
 }) => {
-  const [showPlaceholder, setShowPlaceholder] = useState(!src);
-  const onImageError = useCallback(() => {
-    setShowPlaceholder(true);
-  }, [setShowPlaceholder]);
-  if (!showPlaceholder) {
-    return /*#__PURE__*/_jsx(Image, {
-      className: className,
-      src: src,
-      onError: onImageError
-    });
-  }
-  if (!placeholderSrc) {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  if (!src && !placeholderSrc) {
     return null;
   }
   return /*#__PURE__*/_jsx(Image, {
-    className: className,
-    src: placeholderSrc
-  }, "placeholder");
+    className: cx(classes.root, className),
+    src: src
+    // Unwrapped, so the fallback renders into the container the outer Image already provides
+    // rather than nesting a second aspect ratio box inside it.
+    ,
+    placeholder: placeholderSrc ? /*#__PURE__*/_jsx(Image, {
+      unwrapped: true,
+      src: placeholderSrc
+    }) : null
+  });
 };
 CategoryImage.defaultProps = {
   src: null,

package/checkout/components/AddressBook/AddressList.js

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import { getCheckoutBillingAddress, getCheckoutShippingAddress } from '@shopgate/engage/checkout/selectors/order';
 import { i18n, historyPush } from '@shopgate/engage/core';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { RippleButton, ResponsiveContainer, Typography } from '@shopgate/engage/components';
+import { ResponsiveContainer, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { ResponsiveBackButton } from "../ResponsiveBackButton";
 import AddressCard from "../../../account/components/Profile/ProfileAddressCard";
 import { useProfileContext } from "../../../account/components/Profile/Profile.provider";
@@ -30,12 +31,11 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   push: props => dispatch(historyPush(props))
 });
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()(() => ({
   container: {
     display: 'flex',
     flexDirection: 'row',
     flexWrap: 'wrap',
-    margin: -4,
     padding: 16
   },
   headline: {
@@ -43,25 +43,16 @@ const useStyles = makeStyles()(theme => ({
     margin: 0
   },
   button: {
-    '&&': {
-      marginTop: 8,
-      marginRight: 16,
-      backgroundColor: theme.palette.primary.main,
-      borderRadius: 5,
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'none',
-      padding: 0,
-      [responsiveMediaQuery('<md', {
-        webOnly: false
-      })]: {
-        width: '100%',
-        marginRight: 0
-      }
+    marginTop: 8,
+    marginRight: 16,
+    textTransform: 'none',
+    [responsiveMediaQuery('<md', {
+      webOnly: false
+    })]: {
+      width: '100%',
+      marginRight: 0
     }
   },
-  ripple: {
-    padding: '8px 16px'
-  },
   actions: {
     display: 'flex',
     justifyContent: 'flex-end',
@@ -131,10 +122,10 @@ const AddressList = ({
       }, contact.id))
     }), /*#__PURE__*/_jsx("div", {
       className: classes.actions,
-      children: /*#__PURE__*/_jsx(RippleButton, {
+      children: /*#__PURE__*/_jsx(Button, {
+        color: "primary",
+        size: "small",
         className: classes.button,
-        rippleClassName: classes.ripple,
-        type: "primary",
         onClick: () => push({
           pathname: `${CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN}`.replace(':type', type)
         }),

package/checkout/components/Checkout/CheckoutActions.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useCheckoutContext } from "../../hooks/common";
 import { SupplementalContent } from "../SupplementalContent";
@@ -30,8 +31,8 @@ const Actions = () => {
     paymentButton: PaymentButton,
     isButtonLocked
   } = useCheckoutContext();
-  const originalButton = /*#__PURE__*/_jsx(RippleButton, {
-    type: "secondary",
+  const originalButton = /*#__PURE__*/_jsx(Button, {
+    color: "primary",
     onClick: handleSubmitOrder,
     disabled: isButtonLocked,
     children: i18n.text('checkout.submit_order')

package/checkout/components/Checkout/CheckoutAddress.js

@@ -95,29 +95,37 @@ const CheckoutAddress = ({
       children: address ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Typography, {
           component: "span",
+          variant: "body2",
           children: address.middleName?.length ? `${address.firstName} ${address.middleName} ${address.lastName}` : `${address.firstName} ${address.lastName}`
         }), type === ADDRESS_TYPE_BILLING && isGuestCheckout && orderReserveOnly && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(Typography, {
             component: "span",
+            variant: "body2",
             children: address.emailAddress
           }), /*#__PURE__*/_jsx(Typography, {
             component: "span",
+            variant: "body2",
             children: address.mobile
           })]
         }), /*#__PURE__*/_jsx(Typography, {
           component: "span",
+          variant: "body2",
           children: address.address1
         }), address.address2?.length ? /*#__PURE__*/_jsx(Typography, {
           component: "span",
+          variant: "body2",
           children: address.address2
         }) : null, address.address3?.length ? /*#__PURE__*/_jsx(Typography, {
           component: "span",
+          variant: "body2",
           children: address.address3
         }) : null, address.address4?.length ? /*#__PURE__*/_jsx(Typography, {
           component: "span",
+          variant: "body2",
           children: address.address4
         }) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/_jsx(Typography, {
           component: "span",
+          variant: "body2",
           children: i18n.text(`checkout.${type}.address`, {
             postalCode: address.postalCode || '',
             region: iso3166?.[address.country]?.divisions?.[address.region] || address.region || '',

package/checkout/components/Checkout/CheckoutSection.js

@@ -14,7 +14,7 @@ const useStyles = makeStyles()(theme => ({
   card: {
     display: 'flex',
     flexDirection: 'row',
-    fontSize: theme.typography.body1.fontSize,
+    fontSize: theme.typography.body2.fontSize,
     width: '100%',
     overflow: 'inherit !important',
     marginBottom: theme.spacing(2),
@@ -43,7 +43,9 @@ const useStyles = makeStyles()(theme => ({
     ' tr:last-of-type td': {
       paddingTop: 8,
       borderTop: `1px solid ${theme.components.border.medium}`,
-      fontWeight: theme.typography.fontWeightBold
+      '& span': {
+        fontWeight: `${theme.typography.fontWeightBold} !important`
+      }
     }
   },
   actionsContainer: {
@@ -116,6 +118,7 @@ const CheckoutSection = ({
                   children: [/*#__PURE__*/_jsxs("td", {
                     children: [/*#__PURE__*/_jsx(Typography, {
                       component: "span",
+                      variant: "body2",
                       className: cx({
                         [classes.labelWithInfoIcon]: !!info
                       }),
@@ -126,6 +129,7 @@ const CheckoutSection = ({
                   }), /*#__PURE__*/_jsx("td", {
                     children: typeof text === 'string' ? /*#__PURE__*/_jsx(Typography, {
                       component: "span",
+                      variant: "body2",
                       children: text
                     }) : text
                   })]

package/checkout/components/CheckoutConfirmation/CheckoutConfirmation.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ResponsiveContainer, RippleButton, Typography } from '@shopgate/engage/components';
+import { ResponsiveContainer, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { CartItems } from '@shopgate/engage/cart';
 import { useRoute } from '@shopgate/engage/core';
@@ -72,9 +73,8 @@ const useStyles = makeStyles()(theme => ({
     border: 0
   },
   button: {
-    flex: '0 0 auto !important',
-    borderRadius: '2px !important',
-    minWidth: '50% !important',
+    flex: '0 0 auto',
+    minWidth: '50%',
     [responsiveMediaQuery('<md')]: {
       width: '100%'
     }
@@ -218,9 +218,8 @@ const CheckoutConfirmation = ({
         })]
       }), /*#__PURE__*/_jsx("div", {
         className: classes.buttonWrapper,
-        children: /*#__PURE__*/_jsx(RippleButton, {
-          type: "secondary",
-          disabled: false,
+        children: /*#__PURE__*/_jsx(Button, {
+          color: "primary",
           className: classes.button,
           onClick: onContinueShopping,
           children: i18n.text('checkout.success.continue')

package/checkout/components/ResponsiveBackButton/ResponsiveBackButton.js

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, ArrowIcon } from '@shopgate/engage/components';
+import { I18n, ArrowIcon } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { useNavigation } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,21 +10,11 @@ const useStyles = makeStyles()(theme => ({
     display: 'flex',
     padding: theme.spacing(4, 2, 2, 2)
   },
-  button: {
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    padding: '0 !important',
-    ' > div ': {
-      padding: 0,
-      display: 'flex'
-    }
-  },
   buttonIcon: {
     display: 'inline-block',
-    fontSize: `${theme.components.icon.medium} !important`,
+    fontSize: theme.components.icon.medium,
     alignSelf: 'center',
-    marginRight: theme.spacing(0.5),
-    marginLeft: -3,
-    marginTop: -2
+    marginRight: theme.spacing(0.5)
   }
 }));
 
@@ -50,10 +41,9 @@ const ResponsiveBackButton = ({
   }, [onClick, pop]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.container,
-    children: /*#__PURE__*/_jsxs(RippleButton, {
-      flat: true,
-      className: classes.button,
-      type: "secondary",
+    children: /*#__PURE__*/_jsxs(Button, {
+      variant: "link",
+      color: "primary",
       onClick: handleClick,
       children: [/*#__PURE__*/_jsx(ArrowIcon, {
         className: classes.buttonIcon

package/components/Badge/Badge.d.ts

@@ -0,0 +1,30 @@
+export interface BadgeProps {
+    /**
+     * The number to display. The badge renders nothing when this is 0.
+     */
+    count: number;
+    /**
+     * Counts above this are displayed as `{max}+`.
+     */
+    max?: number;
+    /**
+     * Additional CSS classes. Callers own the badge's positioning.
+     */
+    className?: string;
+    /**
+     * Inline style overrides.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Renders an empty bubble when false, to indicate state without a number.
+     */
+    showCount?: boolean;
+    [key: `data-${string}`]: string;
+}
+/**
+ * A counter bubble used to display item counts on icons, e.g. within the tab bar or app bar.
+ * @returns The rendered component.
+ */
+declare const Badge: ({ count, max, className, style, showCount, ...restProps }: BadgeProps) => import("react").JSX.Element | null;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/components/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../components/Badge/Badge.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;CACjC;AAED;;;GAGG;AACH,QAAA,MAAM,KAAK,GAAI,2DAOZ,UAAU,uCAqBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Badge/Badge.js

@@ -0,0 +1,48 @@
+import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from "../Typography";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: theme.components.badge.background,
+    color: theme.contrastColor(theme.components.badge.background),
+    borderRadius: theme.spacing(1),
+    height: theme.spacing(2),
+    minWidth: theme.spacing(2),
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5)
+  }
+}));
+/**
+ * A counter bubble used to display item counts on icons, e.g. within the tab bar or app bar.
+ * @returns The rendered component.
+ */
+const Badge = ({
+  count,
+  max,
+  className,
+  style,
+  showCount = true,
+  ...restProps
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  if (!count) {
+    return null;
+  }
+  const label = max !== undefined && count > max ? `${max}+` : `${count}`;
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "caption",
+    component: "div",
+    fontWeight: "bold",
+    style: style,
+    className: cx(classes.root, className, 'theme__badge'),
+    ...restProps,
+    children: showCount ? label : ''
+  });
+};
+export default Badge;

package/components/Badge/index.d.ts

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

package/components/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}