@butternutbox/pawprint-native 0.7.0 → 0.9.0

package/dist/index.d.cts

@@ -2070,16 +2070,11 @@ type ProductDisplayCardProps = ViewProps & {
     showQuantityPicker?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
-    showIncrementButton?: boolean;
-    showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
     image?: string | React.ReactNode;
     imageBackgroundColor?: string;
     thumbnailWidth?: number;
-    thumbnailBackgroundColor?: string;
-    showImageQuantityBadge?: boolean;
-    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2121,16 +2116,11 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     showQuantityPicker?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
-    showIncrementButton?: boolean;
-    showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
     image?: string | React.ReactNode;
     imageBackgroundColor?: string;
     thumbnailWidth?: number;
-    thumbnailBackgroundColor?: string;
-    showImageQuantityBadge?: boolean;
-    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2154,6 +2144,8 @@ type TabNavigationListProps = TabNavigationListOwnProps & Omit<ViewProps, keyof
 type TabNavigationTabOwnProps = {
     value: string;
     disabled?: boolean;
+    icon?: PawprintIcon;
+    avatar?: AvatarProps;
     children: React.ReactNode;
 };
 type TabNavigationTabProps = TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps>;
@@ -2179,8 +2171,14 @@ declare const TabNavigationList: React.ForwardRefExoticComponent<TabNavigationLi
  * disabled state). Unlike the web version there are no hover or focus-visible
  * states (not applicable on mobile).
  *
+ * Optionally renders a leading `Avatar` and/or `Icon` before the label, matching
+ * the Figma design. The icon colour tracks the tab's label colour (brand when
+ * active/idle, muted when disabled); the avatar is rendered as-is from its props.
+ *
  * @param {string} value - Unique identifier; matches the `value` of a `TabNavigation.Panel`.
  * @param {boolean} [disabled=false] - Whether this tab is disabled.
+ * @param {PawprintIcon} [icon] - Optional leading icon from `@butternutbox/pawprint-icons`.
+ * @param {AvatarProps} [avatar] - Optional leading `Avatar`; props are forwarded to the `Avatar` atom.
  * @param {React.ReactNode} children - Tab label (and optional leading content).
  */
 declare const TabNavigationTab: React.ForwardRefExoticComponent<TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps> & React.RefAttributes<View>>;

package/dist/index.d.ts

@@ -2070,16 +2070,11 @@ type ProductDisplayCardProps = ViewProps & {
     showQuantityPicker?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
-    showIncrementButton?: boolean;
-    showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
     image?: string | React.ReactNode;
     imageBackgroundColor?: string;
     thumbnailWidth?: number;
-    thumbnailBackgroundColor?: string;
-    showImageQuantityBadge?: boolean;
-    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2121,16 +2116,11 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     showQuantityPicker?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
-    showIncrementButton?: boolean;
-    showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
     image?: string | React.ReactNode;
     imageBackgroundColor?: string;
     thumbnailWidth?: number;
-    thumbnailBackgroundColor?: string;
-    showImageQuantityBadge?: boolean;
-    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2154,6 +2144,8 @@ type TabNavigationListProps = TabNavigationListOwnProps & Omit<ViewProps, keyof
 type TabNavigationTabOwnProps = {
     value: string;
     disabled?: boolean;
+    icon?: PawprintIcon;
+    avatar?: AvatarProps;
     children: React.ReactNode;
 };
 type TabNavigationTabProps = TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps>;
@@ -2179,8 +2171,14 @@ declare const TabNavigationList: React.ForwardRefExoticComponent<TabNavigationLi
  * disabled state). Unlike the web version there are no hover or focus-visible
  * states (not applicable on mobile).
  *
+ * Optionally renders a leading `Avatar` and/or `Icon` before the label, matching
+ * the Figma design. The icon colour tracks the tab's label colour (brand when
+ * active/idle, muted when disabled); the avatar is rendered as-is from its props.
+ *
  * @param {string} value - Unique identifier; matches the `value` of a `TabNavigation.Panel`.
  * @param {boolean} [disabled=false] - Whether this tab is disabled.
+ * @param {PawprintIcon} [icon] - Optional leading icon from `@butternutbox/pawprint-icons`.
+ * @param {AvatarProps} [avatar] - Optional leading `Avatar`; props are forwarded to the `Avatar` atom.
  * @param {React.ReactNode} children - Tab label (and optional leading content).
  */
 declare const TabNavigationTab: React.ForwardRefExoticComponent<TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps> & React.RefAttributes<View>>;

package/dist/index.js

@@ -7847,7 +7847,9 @@ var StyledThumb = styled51(Animated.View)(({ thumbSize, thumbBgColor }) => ({
   position: "absolute"
 }));
 var StyledContent = styled51(View)(({ contentGap }) => ({
-  gap: contentGap
+  gap: contentGap,
+  flex: 1,
+  minWidth: 0
 }));
 var Switch = React60.forwardRef(
   (_a, ref) => {
@@ -12659,7 +12661,7 @@ var Notification = React60.forwardRef(
     if (variant === "system") {
       const isLarge = size === "lg";
       const sizeTokens = isLarge ? systemNotifications.notification.spacing.large : systemNotifications.notification.spacing.small;
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsx(
         StyledSystemRoot,
         __spreadProps(__spreadValues({
           ref,
@@ -12672,7 +12674,7 @@ var Notification = React60.forwardRef(
           rootBgColor: bgMap[type],
           rootAlignCenter: isLarge
         }, rest), {
-          children: [
+          children: /* @__PURE__ */ jsxs(View, { style: { flexDirection: "column", flex: 1 }, children: [
             showIcon && /* @__PURE__ */ jsx(
               Icon,
               {
@@ -12682,27 +12684,31 @@ var Notification = React60.forwardRef(
                 "aria-label": type
               }
             ),
-            /* @__PURE__ */ jsxs(View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: [
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  token: systemNotifications.notifications.typography.default,
-                  color: systemNotifications.notification.colour.text.default,
-                  children
-                }
-              ),
-              link && /* @__PURE__ */ jsx(
-                Link,
-                {
-                  href: link.href,
-                  onPress: link.onPress,
-                  weight: "semiBold",
-                  size: "md",
-                  children: link.label
-                }
-              )
-            ] })
-          ]
+            /* @__PURE__ */ jsx(View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                token: systemNotifications.notifications.typography.default,
+                color: systemNotifications.notification.colour.text.default,
+                children
+              }
+            ) }),
+            link && /* @__PURE__ */ jsx(
+              StyledLinkWrapper,
+              {
+                linkPaddingLeft: parseTokenValue49(sizeTokens.content.gap),
+                children: /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: link.href,
+                    onPress: link.onPress,
+                    weight: "semiBold",
+                    size: "md",
+                    children: link.label
+                  }
+                )
+              }
+            )
+          ] })
         })
       );
     }
@@ -12795,59 +12801,57 @@ var Notification = React60.forwardRef(
         rootBgColor: bgMap[type]
       }, rest), {
         children: [
-          /* @__PURE__ */ jsxs(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: [
-            /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
-              showIcon && /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  icon: IconComponent,
-                  size: "md",
-                  colour: type,
-                  "aria-label": type
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                StyledInlineCopy,
-                {
-                  copyGap: parseTokenValue49(content.copy.spacing.gap),
-                  children: [
-                    title && /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        token: notifications.typography.title,
-                        color: colour.text.title,
-                        children: title
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        token: notifications.typography.body,
-                        color: colour.text.body,
-                        children
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }),
-            link && /* @__PURE__ */ jsx(
-              StyledLinkWrapper,
+          /* @__PURE__ */ jsx(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
+            showIcon && /* @__PURE__ */ jsx(
+              Icon,
               {
-                linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
-                children: /* @__PURE__ */ jsx(
-                  Link,
-                  {
-                    href: link.href,
-                    onPress: link.onPress,
-                    weight: "semiBold",
-                    size: "md",
-                    children: link.label
-                  }
-                )
+                icon: IconComponent,
+                size: "md",
+                colour: type,
+                "aria-label": type
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              StyledInlineCopy,
+              {
+                copyGap: parseTokenValue49(content.copy.spacing.gap),
+                children: [
+                  title && /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      token: notifications.typography.title,
+                      color: colour.text.title,
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      token: notifications.typography.body,
+                      color: colour.text.body,
+                      children
+                    }
+                  ),
+                  link && /* @__PURE__ */ jsx(
+                    StyledLinkWrapper,
+                    {
+                      linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
+                      children: /* @__PURE__ */ jsx(
+                        Link,
+                        {
+                          href: link.href,
+                          onPress: link.onPress,
+                          weight: "semiBold",
+                          size: "md",
+                          children: link.label
+                        }
+                      )
+                    }
+                  )
+                ]
               }
             )
-          ] }),
+          ] }) }),
           onClose && /* @__PURE__ */ jsx(
             StyledCloseButton,
             {
@@ -14238,8 +14242,8 @@ var BadgeContainer = styled51(View)(({ theme: theme2 }) => {
     alignItems: "center",
     justifyContent: "center",
     height: parseTokenValue55(sizing["2xl"]),
-    paddingRight: parseTokenValue55(spacing.sm),
-    backgroundColor: colour.background.container.alt,
+    paddingRight: parseTokenValue55(spacing.xs),
+    backgroundColor: colour.background.container.brand,
     borderTopRightRadius: parseTokenValue55(borderRadius.xs),
     borderBottomRightRadius: parseTokenValue55(borderRadius.xs)
   };
@@ -14316,37 +14320,25 @@ var StyledRoot16 = styled51(Pressable)(({ theme: theme2 }) => {
     width: "100%"
   };
 });
-var ImageContainer = styled51(View)({
+var ImageContainer = styled51(View)(({ theme: theme2 }) => ({
   position: "relative",
   width: "100%",
   aspectRatio: 1,
-  overflow: "hidden"
-});
+  overflow: "hidden",
+  borderRadius: parseTokenValue56(
+    theme2.tokens.semantics.dimensions.borderRadius.md
+  )
+}));
 var StyledImage2 = styled51(Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var BadgeContainer2 = styled51(View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  const { sizing, borderRadius } = theme2.tokens.semantics.dimensions;
-  const { colour } = theme2.tokens.semantics;
-  return {
-    position: "absolute",
-    top: parseTokenValue56(spacing.md),
-    left: 0,
-    display: "flex",
-    flexDirection: "row",
-    gap: parseTokenValue56(spacing["2xs"]),
-    alignItems: "center",
-    justifyContent: "center",
-    height: parseTokenValue56(sizing["2xl"]),
-    paddingRight: parseTokenValue56(spacing.sm),
-    backgroundColor: colour.background.container.alt,
-    borderTopRightRadius: parseTokenValue56(borderRadius.sm),
-    borderBottomRightRadius: parseTokenValue56(borderRadius.sm)
-  };
-});
+var BadgeContainer2 = styled51(View)(({ theme: theme2 }) => ({
+  position: "absolute",
+  top: parseTokenValue56(theme2.tokens.semantics.dimensions.spacing.md),
+  left: 0
+}));
 var ContentContainer = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
@@ -14369,20 +14361,12 @@ var CategoryWrapper = styled51(View)(({ theme: theme2 }) => {
     marginBottom: parseTokenValue56(spacing["3xs"])
   };
 });
-var TitleContainer = styled51(View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  return {
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    marginBottom: parseTokenValue56(spacing.xs)
-  };
-});
-var SizeWrapper = styled51(View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  return {
-    marginBottom: parseTokenValue56(spacing.md)
-  };
+var TitleContainer = styled51(View)({
+  display: "flex",
+  flexDirection: "row",
+  width: "100%",
+  // 6px below the title to match Figma (4px title bottom padding + 2px gap).
+  marginBottom: 6
 });
 var PricingContainer = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
@@ -14443,7 +14427,7 @@ var _ProductListingCard = React60.forwardRef(
         /* @__PURE__ */ jsxs(DetailsContainer, { children: [
           showCategory && category && /* @__PURE__ */ jsx(CategoryWrapper, { children: /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: category }) }),
           showTitle && /* @__PURE__ */ jsx(TitleContainer, { children: /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "xs", children: title }) }),
-          showSize && size && /* @__PURE__ */ jsx(SizeWrapper, { children: /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children: size }) })
+          showSize && size && /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children: size })
         ] }),
         showPrice && price && /* @__PURE__ */ jsxs(PricingContainer, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children: price }),
@@ -14467,78 +14451,50 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled51(View)(({
-  theme: theme2,
-  borderless
-}) => {
+var StyledCardContainer = styled51(View)(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
   const spacingMd = parseTokenValue8(spacing.md);
   const spacingXl = parseTokenValue8(spacing.xl);
-  return __spreadProps(__spreadValues({
+  return {
     flexDirection: "row",
     width: "100%",
-    height: borderless ? void 0 : "100%",
-    maxHeight: spacingXl * 6 + spacingMd,
-    backgroundColor: colour.background.surface.default
-  }, borderless ? {} : {
+    // Cap at the Figma mobile card width (can be narrower — responsive).
+    maxWidth: 358,
+    // The 148px image sets the baseline height; the card grows if the content
+    // is taller (e.g. a long or translated title wrapping to multiple lines)
+    // so nothing is clipped.
+    minHeight: 148,
+    backgroundColor: colour.background.surface.default,
     borderWidth: 1,
     borderColor: colour.border.default,
     shadowColor: "#522a10",
     shadowOffset: { width: 0, height: spacingMd / 4 },
     shadowOpacity: 0.05,
     shadowRadius: spacingXl - 4,
-    elevation: 5
-  }), {
+    elevation: 5,
     borderRadius: parseTokenValue8(borderRadius.md),
     overflow: "hidden",
     zIndex: 1
-  });
-});
-var StyledImage3 = styled51(View)(
-  ({
-    theme: theme2,
-    imageBackgroundColor,
-    thumbnailWidth = 100,
-    thumbnailBackgroundColor
-  }) => ({
-    flexShrink: 0,
-    backgroundColor: thumbnailBackgroundColor || imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
-    overflow: "hidden",
-    aspectRatio: "1 / 1",
-    width: thumbnailWidth,
-    height: thumbnailWidth,
-    position: "relative"
-  })
-);
-var StyledQuantityBadge = styled51(View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  const borderRadius = theme2.tokens.semantics.dimensions.borderRadius;
-  const { colour } = theme2.tokens.semantics;
-  return {
-    position: "absolute",
-    top: parseTokenValue8(spacing["2xs"]),
-    right: parseTokenValue8(spacing["2xs"]),
-    backgroundColor: colour.background.container.brand,
-    borderRadius: parseTokenValue8(borderRadius.xs),
-    paddingHorizontal: parseTokenValue8(spacing.sm),
-    height: parseTokenValue8(spacing["2xl"]),
-    minWidth: parseTokenValue8(spacing["2xl"]),
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 2
   };
 });
-var StyledContentArea = styled51(View)(({
-  theme: theme2,
-  borderless
-}) => {
+var StyledImage3 = styled51(View)(({ theme: theme2, imageBackgroundColor, thumbnailWidth = 148 }) => ({
+  flexShrink: 0,
+  backgroundColor: imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
+  overflow: "hidden",
+  width: thumbnailWidth,
+  // Square (148) by default; stretches taller to fill the card when the
+  // content makes it taller than the image.
+  minHeight: thumbnailWidth,
+  position: "relative"
+}));
+var StyledContentArea = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   const paddingValue = parseTokenValue8(spacing.md);
   return {
     flex: 1,
     paddingHorizontal: paddingValue,
-    paddingVertical: borderless ? 0 : paddingValue,
+    paddingVertical: paddingValue,
     gap: parseTokenValue8(spacing.xs),
     justifyContent: "space-between"
   };
@@ -14546,25 +14502,38 @@ var StyledContentArea = styled51(View)(({
 var StyledTextContainer = styled51(View)(() => ({
   gap: 2
 }));
-var StyledBannerWrapper = styled51(View)(() => ({
-  width: "100%",
-  marginTop: -48,
-  paddingTop: 24,
-  paddingBottom: 16
-}));
+var StyledBannerWrapper = styled51(View)(({ theme: theme2 }) => {
+  const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
+  return {
+    width: "100%",
+    // Tuck the banner up behind the card by the corner radius so its square top
+    // corners hide under the card's rounded bottom; the rest sits below.
+    marginTop: -parseTokenValue8(borderRadius.md),
+    paddingBottom: parseTokenValue8(spacing.md)
+  };
+});
 var StyledRootWrapper = styled51(View)(() => {
   return {
     flexDirection: "column",
     width: "100%",
-    height: "100%"
+    maxWidth: 358
   };
 });
 var StyledNotification = styled51(Notification)(({ theme: theme2 }) => {
-  const { spacing } = theme2.tokens.semantics.dimensions;
+  const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
+  const spacingMd = parseTokenValue8(spacing.md);
+  const radiusMd = parseTokenValue8(borderRadius.md);
   return {
-    top: parseTokenValue8(spacing.md),
-    paddingHorizontal: parseTokenValue8(spacing.xl),
-    paddingVertical: parseTokenValue8(spacing.md)
+    paddingHorizontal: spacingMd,
+    // 27px top padding (Figma) leaves a small cream reveal above the text once
+    // the banner tucks behind the card.
+    paddingTop: 27,
+    paddingBottom: spacingMd,
+    // Square top corners, rounded bottom corners (banner tucks under the card).
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: radiusMd,
+    borderBottomRightRadius: radiusMd
   };
 });
 var ProductDisplayCard = React60.forwardRef(
@@ -14578,16 +14547,11 @@ var ProductDisplayCard = React60.forwardRef(
       showQuantityPicker = false,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
-      showIncrementButton,
-      showDecrementButton,
       incrementDisabled = false,
       decrementDisabled = false,
       image,
       imageBackgroundColor,
       thumbnailWidth,
-      thumbnailBackgroundColor,
-      showImageQuantityBadge = false,
-      borderless = false,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -14601,16 +14565,11 @@ var ProductDisplayCard = React60.forwardRef(
       "showQuantityPicker",
       "disableQuantityButtons",
       "hideQuantityButtons",
-      "showIncrementButton",
-      "showDecrementButton",
       "incrementDisabled",
       "decrementDisabled",
       "image",
       "imageBackgroundColor",
       "thumbnailWidth",
-      "thumbnailBackgroundColor",
-      "showImageQuantityBadge",
-      "borderless",
       "banner",
       "showBanner",
       "bannerType",
@@ -14621,26 +14580,23 @@ var ProductDisplayCard = React60.forwardRef(
         onQuantityChange == null ? void 0 : onQuantityChange(newQuantity);
       }
     };
-    const cardContent = /* @__PURE__ */ jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, borderless }, rest), { children: [
-      image && /* @__PURE__ */ jsxs(
+    const cardContent = /* @__PURE__ */ jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref }, rest), { children: [
+      image && /* @__PURE__ */ jsx(
         StyledImage3,
         {
           imageBackgroundColor,
           thumbnailWidth,
-          thumbnailBackgroundColor,
-          children: [
-            typeof image === "string" ? /* @__PURE__ */ jsx(
-              Image,
-              {
-                source: { uri: image },
-                style: { width: "100%", height: "100%" }
-              }
-            ) : image,
-            showImageQuantityBadge && quantity && /* @__PURE__ */ jsx(StyledQuantityBadge, { children: /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", weight: "bold", children: quantity }) })
-          ]
+          children: typeof image === "string" ? /* @__PURE__ */ jsx(
+            Image,
+            {
+              source: { uri: image },
+              resizeMode: "cover",
+              style: { flex: 1, width: "100%" }
+            }
+          ) : image
         }
       ),
-      /* @__PURE__ */ jsxs(StyledContentArea, { borderless, children: [
+      /* @__PURE__ */ jsxs(StyledContentArea, { children: [
         /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "2xs", color: "primary", children: title }),
           showSubtext && subtext && /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: subtext })
@@ -14661,8 +14617,8 @@ var ProductDisplayCard = React60.forwardRef(
             min: 1,
             accessible: true,
             accessibilityLabel: `Quantity: ${quantity}`,
-            showIncrementButton: showIncrementButton !== void 0 ? showIncrementButton : !hideQuantityButtons,
-            showDecrementButton: showDecrementButton !== void 0 ? showDecrementButton : !hideQuantityButtons,
+            showIncrementButton: !hideQuantityButtons,
+            showDecrementButton: !hideQuantityButtons,
             incrementDisabled: incrementDisabled || disableQuantityButtons,
             decrementDisabled: decrementDisabled || disableQuantityButtons
           }
@@ -14749,7 +14705,7 @@ var TabNavigationList = React60.forwardRef(
 TabNavigationList.displayName = "TabNavigation.List";
 var TabNavigationTab = React60.forwardRef(
   (_a, ref) => {
-    var _b = _a, { value, disabled = false, children } = _b, rest = __objRest(_b, ["value", "disabled", "children"]);
+    var _b = _a, { value, disabled = false, icon, avatar, children } = _b, rest = __objRest(_b, ["value", "disabled", "icon", "avatar", "children"]);
     const { layout } = useTabNavigationContext();
     const { value: selectedValue } = TabsPrimitive.useRootContext();
     const theme2 = useTheme();
@@ -14759,7 +14715,7 @@ var TabNavigationTab = React60.forwardRef(
     const token = selected ? typography.selected : typography.default;
     const borderColour = selected ? colour.border.default : colour.border.disabled;
     const textColour = disabled ? theme2.tokens.primitives.colour.brand.brown["5"] : colour.text.default;
-    return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { value, disabled, asChild: true, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { value, disabled, asChild: true, children: /* @__PURE__ */ jsxs(
       StyledTab,
       __spreadProps(__spreadValues({
         ref,
@@ -14773,7 +14729,11 @@ var TabNavigationTab = React60.forwardRef(
         tabBorderColor: borderColour,
         tabFlex: layout === "fixed" ? 1 : void 0
       }, rest), {
-        children: /* @__PURE__ */ jsx(Typography, { token, color: textColour, children })
+        children: [
+          avatar && /* @__PURE__ */ jsx(Avatar, __spreadValues({}, avatar)),
+          icon && /* @__PURE__ */ jsx(Icon, { icon, customColour: textColour, "aria-hidden": true }),
+          /* @__PURE__ */ jsx(Typography, { token, color: textColour, children })
+        ]
       })
     ) });
   }