@butternutbox/pawprint-native 0.7.0 → 0.9.0

package/.turbo/turbo-build.log

@@ -13,9 +13,9 @@
 CJS dist/ibm-plex-sans-condensed-500-normal-IEQBNVGX.woff2 19.48 KB
 CJS dist/ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2 19.35 KB
 CJS dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
-CJS dist/index.cjs                                         1.79 MB
-CJS dist/index.cjs.map                                     2.68 MB
-CJS ⚡️ Build success in 11971ms
+CJS dist/index.cjs                                         1.78 MB
+CJS dist/index.cjs.map                                     2.67 MB
+CJS ⚡️ Build success in 11862ms
 ESM dist/ida-narrow-500-normal-C6I2PK4T.woff2              47.41 KB
 ESM dist/ida-narrow-700-normal-UPHPRIN6.woff2              49.90 KB
 ESM dist/ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2 19.33 KB
@@ -24,7 +24,7 @@
 ESM dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
 ESM dist/index.js                                          1.71 MB
 ESM dist/index.js.map                                      2.67 MB
-ESM ⚡️ Build success in 11975ms
-DTS ⚡️ Build success in 23351ms
-DTS dist/index.d.cts 90.02 KB
-DTS dist/index.d.ts  90.02 KB
+ESM ⚡️ Build success in 11871ms
+DTS ⚡️ Build success in 22152ms
+DTS dist/index.d.cts 90.17 KB
+DTS dist/index.d.ts  90.17 KB

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @butternutbox/pawprint-native
 
+## 0.9.0
+
+### Minor Changes
+
+- 6d84559: Add a web `NumberField` molecule (stepper) mirroring the native API, and align `ProductDisplayCard` with Figma across both platforms:
+  - Use `NumberField` for the quantity stepper (web previously used the plain `NumberInput` atom).
+  - 148×148 image (`thumbnailWidth` defaults to 148) and banner styling: square top / 12px bottom radius, `md` horizontal + 27px top padding, tucked behind the card.
+  - Web `device` prop now drives title/subtext typography (desktop 20/16, mobile 16/14).
+  - Remove `showImageQuantityBadge`, `borderless`, `thumbnailBackgroundColor`, and the per-button `showIncrementButton`/`showDecrementButton` props (use `hideQuantityButtons` instead). Native is now mobile-only (no `device` prop).
+
+### Patch Changes
+
+- 6d84559: Make `ProductDisplayCard` height responsive and cap its width (web + native):
+  - Replace the fixed `maxHeight: 148` with `minHeight: 148` so the card grows instead of clipping when the title wraps to multiple lines (e.g. translations).
+  - Cap the width at the Figma frame sizes — web 520 (desktop) / 358 (mobile), native 358 — while staying fluid below that.
+  - The image stretches to fill a taller card (cover crop) instead of leaving a gap, keeping its 148px width and square shape when the content fits.
+
+- 6d84559: Align `ProductListingCard` with Figma (web + native): add the 12px image border radius, fix the pinned badge (un-double-wrap so the right radius is 4px, 8px horizontal padding, brand background), and tighten the title bottom spacing to 6px and the size→price spacing to 16px.
+
+  Web also fixes the responsive `Grid` (columns were stuck at 1 because the media queries lived in an inline `style` prop) and sizes the standalone stories to the Figma widths (232 / 192).
+
+## 0.8.0
+
+### Minor Changes
+
+- 4409f6c: Add optional `icon` and `avatar` props to `TabNavigation.Tab`. The icon colour tracks the tab's label colour and the avatar is forwarded to the `Avatar` atom, matching the Figma design.
+
+### Patch Changes
+
+- 27ca8b6: Add styling to optional notification link; prevent switch label from overflowing
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -7880,7 +7880,9 @@ var StyledThumb = styled51__default.default(reactNative.Animated.View)(({ thumbS
   position: "absolute"
 }));
 var StyledContent = styled51__default.default(reactNative.View)(({ contentGap }) => ({
-  gap: contentGap
+  gap: contentGap,
+  flex: 1,
+  minWidth: 0
 }));
 var Switch = React60__default.default.forwardRef(
   (_a, ref) => {
@@ -12692,7 +12694,7 @@ var Notification = React60__default.default.forwardRef(
     if (variant === "system") {
       const isLarge = size === "lg";
       const sizeTokens = isLarge ? systemNotifications.notification.spacing.large : systemNotifications.notification.spacing.small;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsx(
         StyledSystemRoot,
         __spreadProps(__spreadValues({
           ref,
@@ -12705,7 +12707,7 @@ var Notification = React60__default.default.forwardRef(
           rootBgColor: bgMap[type],
           rootAlignCenter: isLarge
         }, rest), {
-          children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "column", flex: 1 }, children: [
             showIcon && /* @__PURE__ */ jsxRuntime.jsx(
               Icon,
               {
@@ -12715,27 +12717,31 @@ var Notification = React60__default.default.forwardRef(
                 "aria-label": type
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Typography,
-                {
-                  token: systemNotifications.notifications.typography.default,
-                  color: systemNotifications.notification.colour.text.default,
-                  children
-                }
-              ),
-              link && /* @__PURE__ */ jsxRuntime.jsx(
-                Link,
-                {
-                  href: link.href,
-                  onPress: link.onPress,
-                  weight: "semiBold",
-                  size: "md",
-                  children: link.label
-                }
-              )
-            ] })
-          ]
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Typography,
+              {
+                token: systemNotifications.notifications.typography.default,
+                color: systemNotifications.notification.colour.text.default,
+                children
+              }
+            ) }),
+            link && /* @__PURE__ */ jsxRuntime.jsx(
+              StyledLinkWrapper,
+              {
+                linkPaddingLeft: parseTokenValue49(sizeTokens.content.gap),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Link,
+                  {
+                    href: link.href,
+                    onPress: link.onPress,
+                    weight: "semiBold",
+                    size: "md",
+                    children: link.label
+                  }
+                )
+              }
+            )
+          ] })
         })
       );
     }
@@ -12828,59 +12834,57 @@ var Notification = React60__default.default.forwardRef(
         rootBgColor: bgMap[type]
       }, rest), {
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
-              showIcon && /* @__PURE__ */ jsxRuntime.jsx(
-                Icon,
-                {
-                  icon: IconComponent,
-                  size: "md",
-                  colour: type,
-                  "aria-label": type
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                StyledInlineCopy,
-                {
-                  copyGap: parseTokenValue49(content.copy.spacing.gap),
-                  children: [
-                    title && /* @__PURE__ */ jsxRuntime.jsx(
-                      Typography,
-                      {
-                        token: notifications.typography.title,
-                        color: colour.text.title,
-                        children: title
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Typography,
-                      {
-                        token: notifications.typography.body,
-                        color: colour.text.body,
-                        children
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }),
-            link && /* @__PURE__ */ jsxRuntime.jsx(
-              StyledLinkWrapper,
+          /* @__PURE__ */ jsxRuntime.jsx(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: /* @__PURE__ */ jsxRuntime.jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
+            showIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              Icon,
               {
-                linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
-                children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+              StyledInlineCopy,
+              {
+                copyGap: parseTokenValue49(content.copy.spacing.gap),
+                children: [
+                  title && /* @__PURE__ */ jsxRuntime.jsx(
+                    Typography,
+                    {
+                      token: notifications.typography.title,
+                      color: colour.text.title,
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Typography,
+                    {
+                      token: notifications.typography.body,
+                      color: colour.text.body,
+                      children
+                    }
+                  ),
+                  link && /* @__PURE__ */ jsxRuntime.jsx(
+                    StyledLinkWrapper,
+                    {
+                      linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        Link,
+                        {
+                          href: link.href,
+                          onPress: link.onPress,
+                          weight: "semiBold",
+                          size: "md",
+                          children: link.label
+                        }
+                      )
+                    }
+                  )
+                ]
               }
             )
-          ] }),
+          ] }) }),
           onClose && /* @__PURE__ */ jsxRuntime.jsx(
             StyledCloseButton,
             {
@@ -14271,8 +14275,8 @@ var BadgeContainer = styled51__default.default(reactNative.View)(({ theme: theme
     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)
   };
@@ -14349,37 +14353,25 @@ var StyledRoot16 = styled51__default.default(reactNative.Pressable)(({ theme: th
     width: "100%"
   };
 });
-var ImageContainer = styled51__default.default(reactNative.View)({
+var ImageContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => ({
   position: "relative",
   width: "100%",
   aspectRatio: 1,
-  overflow: "hidden"
-});
+  overflow: "hidden",
+  borderRadius: parseTokenValue56(
+    theme2.tokens.semantics.dimensions.borderRadius.md
+  )
+}));
 var StyledImage2 = styled51__default.default(reactNative.Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var BadgeContainer2 = styled51__default.default(reactNative.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__default.default(reactNative.View)(({ theme: theme2 }) => ({
+  position: "absolute",
+  top: parseTokenValue56(theme2.tokens.semantics.dimensions.spacing.md),
+  left: 0
+}));
 var ContentContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
@@ -14402,20 +14394,12 @@ var CategoryWrapper = styled51__default.default(reactNative.View)(({ theme: them
     marginBottom: parseTokenValue56(spacing["3xs"])
   };
 });
-var TitleContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  return {
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    marginBottom: parseTokenValue56(spacing.xs)
-  };
-});
-var SizeWrapper = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  return {
-    marginBottom: parseTokenValue56(spacing.md)
-  };
+var TitleContainer = styled51__default.default(reactNative.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__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
@@ -14476,7 +14460,7 @@ var _ProductListingCard = React60__default.default.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsxs(DetailsContainer, { children: [
           showCategory && category && /* @__PURE__ */ jsxRuntime.jsx(CategoryWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: category }) }),
           showTitle && /* @__PURE__ */ jsxRuntime.jsx(TitleContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading", size: "xs", children: title }) }),
-          showSize && size && /* @__PURE__ */ jsxRuntime.jsx(SizeWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "md", color: "secondary", children: size }) })
+          showSize && size && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "md", color: "secondary", children: size })
         ] }),
         showPrice && price && /* @__PURE__ */ jsxRuntime.jsxs(PricingContainer, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "md", color: "secondary", children: price }),
@@ -14500,78 +14484,50 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled51__default.default(reactNative.View)(({
-  theme: theme2,
-  borderless
-}) => {
+var StyledCardContainer = styled51__default.default(reactNative.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__default.default(reactNative.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__default.default(reactNative.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__default.default(reactNative.View)(({
-  theme: theme2,
-  borderless
-}) => {
+var StyledImage3 = styled51__default.default(reactNative.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__default.default(reactNative.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"
   };
@@ -14579,25 +14535,38 @@ var StyledContentArea = styled51__default.default(reactNative.View)(({
 var StyledTextContainer = styled51__default.default(reactNative.View)(() => ({
   gap: 2
 }));
-var StyledBannerWrapper = styled51__default.default(reactNative.View)(() => ({
-  width: "100%",
-  marginTop: -48,
-  paddingTop: 24,
-  paddingBottom: 16
-}));
+var StyledBannerWrapper = styled51__default.default(reactNative.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__default.default(reactNative.View)(() => {
   return {
     flexDirection: "column",
     width: "100%",
-    height: "100%"
+    maxWidth: 358
   };
 });
 var StyledNotification = styled51__default.default(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__default.default.forwardRef(
@@ -14611,16 +14580,11 @@ var ProductDisplayCard = React60__default.default.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",
@@ -14634,16 +14598,11 @@ var ProductDisplayCard = React60__default.default.forwardRef(
       "showQuantityPicker",
       "disableQuantityButtons",
       "hideQuantityButtons",
-      "showIncrementButton",
-      "showDecrementButton",
       "incrementDisabled",
       "decrementDisabled",
       "image",
       "imageBackgroundColor",
       "thumbnailWidth",
-      "thumbnailBackgroundColor",
-      "showImageQuantityBadge",
-      "borderless",
       "banner",
       "showBanner",
       "bannerType",
@@ -14654,26 +14613,23 @@ var ProductDisplayCard = React60__default.default.forwardRef(
         onQuantityChange == null ? void 0 : onQuantityChange(newQuantity);
       }
     };
-    const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, borderless }, rest), { children: [
-      image && /* @__PURE__ */ jsxRuntime.jsxs(
+    const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref }, rest), { children: [
+      image && /* @__PURE__ */ jsxRuntime.jsx(
         StyledImage3,
         {
           imageBackgroundColor,
           thumbnailWidth,
-          thumbnailBackgroundColor,
-          children: [
-            typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.Image,
-              {
-                source: { uri: image },
-                style: { width: "100%", height: "100%" }
-              }
-            ) : image,
-            showImageQuantityBadge && quantity && /* @__PURE__ */ jsxRuntime.jsx(StyledQuantityBadge, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "sm", weight: "bold", children: quantity }) })
-          ]
+          children: typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Image,
+            {
+              source: { uri: image },
+              resizeMode: "cover",
+              style: { flex: 1, width: "100%" }
+            }
+          ) : image
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(StyledContentArea, { borderless, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(StyledContentArea, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(StyledTextContainer, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading", size: "2xs", color: "primary", children: title }),
           showSubtext && subtext && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: subtext })
@@ -14694,8 +14650,8 @@ var ProductDisplayCard = React60__default.default.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
           }
@@ -14782,7 +14738,7 @@ var TabNavigationList = React60__default.default.forwardRef(
 TabNavigationList.displayName = "TabNavigation.List";
 var TabNavigationTab = React60__default.default.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__namespace.useRootContext();
     const theme2 = react.useTheme();
@@ -14792,7 +14748,7 @@ var TabNavigationTab = React60__default.default.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__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       StyledTab,
       __spreadProps(__spreadValues({
         ref,
@@ -14806,7 +14762,11 @@ var TabNavigationTab = React60__default.default.forwardRef(
         tabBorderColor: borderColour,
         tabFlex: layout === "fixed" ? 1 : void 0
       }, rest), {
-        children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { token, color: textColour, children })
+        children: [
+          avatar && /* @__PURE__ */ jsxRuntime.jsx(Avatar, __spreadValues({}, avatar)),
+          icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, customColour: textColour, "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { token, color: textColour, children })
+        ]
       })
     ) });
   }