@butternutbox/pawprint-native 0.14.0 → 0.15.1

package/dist/index.js

@@ -188,7 +188,10 @@ var VARIANT_DEFAULTS = {
   heading: { size: "md" },
   display: { size: "lg" }
 };
-var StyledText = styled51(Text)({});
+var StyledText = styled51(Text)({
+  includeFontPadding: false,
+  textAlignVertical: "center"
+});
 var Typography = React66.forwardRef(
   (props, ref) => {
     const theme2 = useTheme();
@@ -8873,6 +8876,16 @@ var { dimensions } = semantics;
 var parseSize = (value) => {
   return parseInt(value.replace("px", ""), 10);
 };
+var resolveTypography = (typography) => {
+  var _a, _b;
+  const { fontFamily } = resolveFont(
+    typography.fontFamily,
+    typography.fontWeight
+  );
+  const fontSize = parseSize(typography.fontSize);
+  const letterSpacing = ((_a = typography.letterSpacing) == null ? void 0 : _a.endsWith("%")) ? parseFloat(typography.letterSpacing) / 100 * fontSize : parseFloat((_b = typography.letterSpacing) != null ? _b : "0");
+  return { fontFamily, fontSize, letterSpacing };
+};
 var Wrapper = styled51(View)({
   borderWidth: parseSize(inputTokens.borderWidth.field.selected),
   borderColor: inputTokens.colour.field.border.selected,
@@ -8890,18 +8903,16 @@ var SelectIcon = styled51(Animated10.View)({
   right: 0,
   marginRight: 0
 });
-var InputText2 = styled51(Text)({
-  color: inputTokens.colour.field.text.default,
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+var InputText2 = styled51(Text)(__spreadProps(__spreadValues({
+  color: inputTokens.colour.field.text.default
+}, resolveTypography(inputTokens.field.placeholder.default)), {
   flex: 1
-});
-var PlaceholderText = styled51(Text)({
-  color: inputTokens.colour.field.text.placeholder,
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+}));
+var PlaceholderText = styled51(Text)(__spreadProps(__spreadValues({
+  color: inputTokens.colour.field.text.placeholder
+}, resolveTypography(inputTokens.field.placeholder.default)), {
   flex: 1
-});
+}));
 var ModalOverlay = styled51(View)({
   flex: 1,
   backgroundColor: "rgba(0, 0, 0, 0.32)",
@@ -8917,13 +8928,11 @@ var AndroidDialog = styled51(View)({
   paddingBottom: parseSize(dimensions.spacing.xl),
   paddingHorizontal: parseSize(dimensions.spacing.md)
 });
-var DialogTitle = styled51(Text)({
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.text.label.fontWeight,
+var DialogTitle = styled51(Text)(__spreadProps(__spreadValues({}, resolveTypography(inputTokens.text.label)), {
   color: inputTokens.colour.field.text.default,
   marginBottom: parseSize(dimensions.spacing.md),
   marginLeft: parseSize(dimensions.spacing.xs)
-});
+}));
 var AndroidOptionRow = styled51(View)({
   flexDirection: "row",
   alignItems: "center",
@@ -8949,9 +8958,9 @@ var RadioInner = styled51(View)({
   backgroundColor: inputTokens.colour.field.border.selected
 });
 var AndroidOptionText = styled51(Text)(
-  ({ isSelected }) => ({
-    fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-    fontWeight: isSelected ? inputTokens.text.label.fontWeight : inputTokens.field.placeholder.default.fontWeight,
+  ({ isSelected }) => __spreadProps(__spreadValues({}, resolveTypography(
+    isSelected ? inputTokens.text.label : inputTokens.field.placeholder.default
+  )), {
     color: inputTokens.colour.field.text.default,
     flex: 1
   })
@@ -10148,6 +10157,128 @@ var Tooltip = React66.forwardRef(
 );
 Tooltip.displayName = "Tooltip";
 var parseTokenValue53 = (value) => parseFloat(value);
+var Row = styled51(Pressable)(({ theme: theme2, divider }) => {
+  const { spacing } = theme2.tokens.semantics.dimensions;
+  const { colour } = theme2.tokens.semantics;
+  return {
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: parseTokenValue53(spacing.md),
+    paddingHorizontal: parseTokenValue53(spacing.md),
+    borderBottomWidth: divider ? 1 : 0,
+    borderBottomColor: colour.border.divider
+  };
+});
+var MenuItem = React66.forwardRef((_a, ref) => {
+  var _b = _a, { variant = "action", onPress, children, divider = true } = _b, rest = __objRest(_b, ["variant", "onPress", "children", "divider"]);
+  const theme2 = useTheme();
+  const { colour, typography } = theme2.tokens.semantics;
+  const labelColour = variant === "destructive" ? colour.text.error : colour.text.action.default;
+  const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+  return /* @__PURE__ */ jsx(
+    Row,
+    __spreadProps(__spreadValues({
+      ref,
+      divider,
+      onPress,
+      accessible: true,
+      accessibilityRole: "menuitem",
+      accessibilityLabel: label
+    }, rest), {
+      children: label !== void 0 ? /* @__PURE__ */ jsx(
+        Typography,
+        {
+          token: typography.body.medium.md,
+          align: "center",
+          color: labelColour,
+          children: label
+        }
+      ) : children
+    })
+  );
+});
+MenuItem.displayName = "Menu.Item";
+var parseTokenValue54 = (value) => parseFloat(value);
+var DismissLayer = styled51(Pressable)({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+});
+var Anchor = styled51(View)(({ theme: theme2, align }) => {
+  const inset = parseTokenValue54(theme2.tokens.semantics.dimensions.spacing.md);
+  return __spreadValues({
+    position: "absolute"
+  }, align === "right" ? { right: inset } : { left: inset });
+});
+var Card = styled51(Pressable)(({ theme: theme2, width }) => {
+  const { borderRadius } = theme2.tokens.semantics.dimensions;
+  const { shadow, background } = theme2.tokens.semantics.colour;
+  return {
+    width,
+    maxWidth: "90%",
+    borderRadius: parseTokenValue54(borderRadius.md),
+    overflow: "hidden",
+    backgroundColor: background.surface.default,
+    // Shadow token colour carries its own alpha, so opacity stays at 1.
+    shadowColor: shadow.md.color,
+    shadowOffset: {
+      width: parseTokenValue54(shadow.md.offsetX),
+      height: parseTokenValue54(shadow.md.offsetY)
+    },
+    shadowOpacity: 1,
+    shadowRadius: parseTokenValue54(shadow.md.blur),
+    elevation: 8
+  };
+});
+var MenuRoot = ({
+  open,
+  onClose,
+  anchorOffset = 0,
+  align = "right",
+  width = 360,
+  closeAccessibilityLabel = "Close menu",
+  children
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      visible: open,
+      transparent: true,
+      statusBarTranslucent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: [
+        /* @__PURE__ */ jsx(
+          DismissLayer,
+          {
+            onPress: onClose,
+            accessible: false,
+            accessibilityLabel: closeAccessibilityLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(Anchor, { align, style: { top: anchorOffset }, children: /* @__PURE__ */ jsx(
+          Card,
+          {
+            width,
+            onPress: () => {
+            },
+            accessible: false,
+            accessibilityRole: "menu",
+            children
+          }
+        ) })
+      ]
+    }
+  );
+};
+MenuRoot.displayName = "Menu";
+var Menu2 = Object.assign(MenuRoot, {
+  Item: MenuItem
+});
+var parseTokenValue55 = (value) => parseFloat(value);
 var StyledInsightRoot = styled51(View)(
   ({
     rootGap,
@@ -10192,26 +10323,26 @@ var MessageCardInsight = React66.forwardRef(
     const isSupporting = variant === "supporting";
     const supporting = insightCard.spacing.supporting;
     const standalone = insightCard.spacing.standalone;
-    const radiusStandalone = parseTokenValue53(
+    const radiusStandalone = parseTokenValue55(
       insightCard.borderRadius.standalone.default
     );
-    const radiusSupporting = parseTokenValue53(
+    const radiusSupporting = parseTokenValue55(
       insightCard.borderRadius.supporting.bottom
     );
     return /* @__PURE__ */ jsxs(
       StyledInsightRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue53(
+        rootGap: parseTokenValue55(
           isSupporting ? supporting.gap : standalone.gap
         ),
-        rootPaddingH: parseTokenValue53(
+        rootPaddingH: parseTokenValue55(
           isSupporting ? semanticSpacing.md : standalone.horizontalPadding
         ),
-        rootPaddingTop: parseTokenValue53(
+        rootPaddingTop: parseTokenValue55(
           isSupporting ? supporting.topPadding : standalone.verticalPadding
         ),
-        rootPaddingBottom: parseTokenValue53(
+        rootPaddingBottom: parseTokenValue55(
           isSupporting ? supporting.bottomPadding : standalone.verticalPadding
         ),
         rootBorderTopLeftRadius: isSupporting ? 0 : radiusStandalone,
@@ -10219,7 +10350,7 @@ var MessageCardInsight = React66.forwardRef(
         rootBorderBottomLeftRadius: isSupporting ? radiusSupporting : radiusStandalone,
         rootBorderBottomRightRadius: isSupporting ? radiusSupporting : radiusStandalone,
         rootBgColor: insightCard.colour.background.default,
-        rootMinWidth: parseTokenValue53(insightCard.size.minWidth),
+        rootMinWidth: parseTokenValue55(insightCard.size.minWidth),
         accessible: true,
         accessibilityRole: "summary"
       }, rest), {
@@ -10228,7 +10359,7 @@ var MessageCardInsight = React66.forwardRef(
           /* @__PURE__ */ jsxs(
             StyledInsightContent,
             {
-              contentGap: parseTokenValue53(standalone.content.gap),
+              contentGap: parseTokenValue55(standalone.content.gap),
               children: [
                 title && /* @__PURE__ */ jsx(
                   Typography,
@@ -10320,9 +10451,9 @@ var MessageCardBanner = React66.forwardRef(
       StyledBannerRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue53(dimensions3.spacing.md),
-        rootPadding: parseTokenValue53(dimensions3.spacing.md),
-        rootBorderRadius: parseTokenValue53(dimensions3.borderRadius.md),
+        rootGap: parseTokenValue55(dimensions3.spacing.md),
+        rootPadding: parseTokenValue55(dimensions3.spacing.md),
+        rootBorderRadius: parseTokenValue55(dimensions3.borderRadius.md),
         rootBgColor: bgColor,
         accessible: true,
         accessibilityRole: "summary"
@@ -10334,7 +10465,7 @@ var MessageCardBanner = React66.forwardRef(
           }) }) : (media == null ? void 0 : media.type) === "image" ? /* @__PURE__ */ jsx(
             StyledBannerImage,
             {
-              imageRadius: parseTokenValue53(dimensions3.borderRadius.sm),
+              imageRadius: parseTokenValue55(dimensions3.borderRadius.sm),
               imageBgColor: colour.background.surface.secondary,
               children: /* @__PURE__ */ jsx(
                 Image,
@@ -10350,12 +10481,12 @@ var MessageCardBanner = React66.forwardRef(
           /* @__PURE__ */ jsxs(
             StyledBannerContents,
             {
-              contentsGap: parseTokenValue53(dimensions3.spacing.xs),
+              contentsGap: parseTokenValue55(dimensions3.spacing.xs),
               children: [
                 /* @__PURE__ */ jsxs(
                   StyledBannerCopy,
                   {
-                    copyGap: parseTokenValue53(dimensions3.spacing["3xs"]),
+                    copyGap: parseTokenValue55(dimensions3.spacing["3xs"]),
                     children: [
                       title && /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "xs", color: "primary", children: title }),
                       /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children })
@@ -10386,7 +10517,7 @@ var MessageCard = {
   Insight: MessageCardInsight,
   Banner: MessageCardBanner
 };
-var parseTokenValue54 = (value) => parseFloat(value);
+var parseTokenValue56 = (value) => parseFloat(value);
 var slideEaseOut = Easing$1.out(Easing$1.quad);
 var MONTH_SLIDE_ENTERING = {
   forward: FadeInRight.duration(250).easing(slideEaseOut),
@@ -10547,17 +10678,17 @@ var DatePicker = React66.forwardRef(
     } = useMemo(
       () => ({
         // Gap between the week-day header and the month header.
-        weekGap: parseTokenValue54(datePicker.spacing.gap),
+        weekGap: parseTokenValue56(datePicker.spacing.gap),
         // Gap between the month header and the dates grid.
-        datesGap: parseTokenValue54(theme2.tokens.semantics.dimensions.spacing.md),
-        containerMaxWidth: parseTokenValue54(dt.size.width) * 7,
-        headerGap: parseTokenValue54(datePicker.month.spacing.gap),
-        cellHeight: parseTokenValue54(dt.size.height),
-        indicatorSize: parseTokenValue54(dt.size.indicator),
-        indicatorBorderRadius: parseTokenValue54(dt.borderRadius.indicator),
-        selectedBorderWidth: parseTokenValue54(dt.borderWidth.indicator.selected),
-        disabledOpacity: parseTokenValue54(dt.opacity.disabled),
-        rowGap: parseTokenValue54(datePicker.dates.spacing.gap)
+        datesGap: parseTokenValue56(theme2.tokens.semantics.dimensions.spacing.md),
+        containerMaxWidth: parseTokenValue56(dt.size.width) * 7,
+        headerGap: parseTokenValue56(datePicker.month.spacing.gap),
+        cellHeight: parseTokenValue56(dt.size.height),
+        indicatorSize: parseTokenValue56(dt.size.indicator),
+        indicatorBorderRadius: parseTokenValue56(dt.borderRadius.indicator),
+        selectedBorderWidth: parseTokenValue56(dt.borderWidth.indicator.selected),
+        disabledOpacity: parseTokenValue56(dt.opacity.disabled),
+        rowGap: parseTokenValue56(datePicker.dates.spacing.gap)
       }),
       [datePicker, dt, theme2]
     );
@@ -10835,7 +10966,7 @@ var buildPointerPath = (r) => {
     "Z"
   ].join(" ");
 };
-var parseTokenValue55 = (value) => parseFloat(value);
+var parseTokenValue57 = (value) => parseFloat(value);
 var StyledRoot16 = styled51(View)(({ rootGap }) => ({
   flexDirection: "column",
   gap: rootGap,
@@ -10925,21 +11056,21 @@ var PictureSelector = React66.forwardRef(
       if (!isControlled) setInternalValue(nextValue);
       onValueChange == null ? void 0 : onValueChange(nextValue);
     };
-    const rootGap = parseTokenValue55(pictureSelector.spacing.container.gap);
-    const rowGap = parseTokenValue55(pictureSelector.spacing.buttons.gap);
-    const stackGap = parseTokenValue55(pictureButton.spacing.container.gap);
-    const buttonPadding = parseTokenValue55(pictureButton.spacing.padding);
-    const buttonBorderRadius = parseTokenValue55(
+    const rootGap = parseTokenValue57(pictureSelector.spacing.container.gap);
+    const rowGap = parseTokenValue57(pictureSelector.spacing.buttons.gap);
+    const stackGap = parseTokenValue57(pictureButton.spacing.container.gap);
+    const buttonPadding = parseTokenValue57(pictureButton.spacing.padding);
+    const buttonBorderRadius = parseTokenValue57(
       pictureButton.borderRadius.default
     );
-    const borderWidthDefault = parseTokenValue55(
+    const borderWidthDefault = parseTokenValue57(
       pictureButton.borderWidth.default
     );
-    const borderWidthActive = parseTokenValue55(pictureButton.borderWidth.active);
+    const borderWidthActive = parseTokenValue57(pictureButton.borderWidth.active);
     const pointerPath = buildPointerPath(
-      parseTokenValue55(pictureButton.pointer.borderRadius.default)
+      parseTokenValue57(pictureButton.pointer.borderRadius.default)
     );
-    const resolvedMinWidth = itemMinWidth != null ? itemMinWidth : parseTokenValue55(pictureButton.size.minWidth);
+    const resolvedMinWidth = itemMinWidth != null ? itemMinWidth : parseTokenValue57(pictureButton.size.minWidth);
     const resolvedMinHeight = itemMinHeight != null ? itemMinHeight : resolvedMinWidth;
     return /* @__PURE__ */ jsxs(
       StyledRoot16,
@@ -11032,7 +11163,7 @@ var DEFAULT_UNIT_LABELS = {
   seconds: { singular: "sec", plural: "secs" }
 };
 var resolveLabel = (label, value) => typeof label === "string" ? label : value === 1 ? label.singular : label.plural;
-var parseTokenValue56 = (value) => parseFloat(value);
+var parseTokenValue58 = (value) => parseFloat(value);
 var pad = (value) => String(Math.max(0, Math.floor(value))).padStart(2, "0");
 var StackedRoot = styled51(View)(({ rootGap }) => ({
   flexDirection: "row",
@@ -11162,28 +11293,28 @@ var Countdown = React66.forwardRef(
         InlineRoot,
         __spreadProps(__spreadValues({
           ref,
-          rootGap: parseTokenValue56(countdown.spacing.gap),
-          rootVerticalPadding: parseTokenValue56(
+          rootGap: parseTokenValue58(countdown.spacing.gap),
+          rootVerticalPadding: parseTokenValue58(
             countdown.spacing.verticalPadding
           ),
-          rootHorizontalPadding: parseTokenValue56(
+          rootHorizontalPadding: parseTokenValue58(
             countdown.spacing.horizontalPadding
           ),
           rootBgColor: countdown.colour.background.default,
-          rootBorderRadius: parseTokenValue56(countdown.borderRadius.default)
+          rootBorderRadius: parseTokenValue58(countdown.borderRadius.default)
         }, rest), {
           children: [
             label != null && /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "bold", size: "md", color: "primary", children: label }),
             /* @__PURE__ */ jsx(
               InlineGroup,
               {
-                groupGap: parseTokenValue56(countdown.countdownGroup.spacing.gap),
+                groupGap: parseTokenValue58(countdown.countdownGroup.spacing.gap),
                 children: units.map((unit, index) => /* @__PURE__ */ jsxs(React66.Fragment, { children: [
                   index > 0 && colon(`colon-${unit.key}`),
                   /* @__PURE__ */ jsxs(
                     InlineCount,
                     {
-                      countGap: parseTokenValue56(countdown.count.spacing.gap),
+                      countGap: parseTokenValue58(countdown.count.spacing.gap),
                       children: [
                         /* @__PURE__ */ jsx(
                           Typography,
@@ -11219,33 +11350,33 @@ var Countdown = React66.forwardRef(
       StackedRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue56(countdown.spacing.gap)
+        rootGap: parseTokenValue58(countdown.spacing.gap)
       }, rest), {
         children: units.map((unit, index) => /* @__PURE__ */ jsxs(React66.Fragment, { children: [
           index > 0 && colon(`colon-${unit.key}`),
           /* @__PURE__ */ jsxs(
             StackedItem,
             {
-              itemGap: parseTokenValue56(countdownItem.spacing.gap),
-              itemVerticalPadding: parseTokenValue56(
+              itemGap: parseTokenValue58(countdownItem.spacing.gap),
+              itemVerticalPadding: parseTokenValue58(
                 countdownItem.spacing.verticalPadding
               ),
-              itemHorizontalPadding: parseTokenValue56(
+              itemHorizontalPadding: parseTokenValue58(
                 countdownItem.spacing.horizontalPadding
               ),
               itemBgColor: countdownItem.colour.background.default,
-              itemBorderRadius: parseTokenValue56(
+              itemBorderRadius: parseTokenValue58(
                 countdownItem.borderRadius.default
               ),
               children: [
                 /* @__PURE__ */ jsx(
                   StackedCountBox,
                   {
-                    countPaddingTop: parseTokenValue56(
+                    countPaddingTop: parseTokenValue58(
                       countdownItem.count.spacing.paddingTop
                     ),
                     countBgColor: countdownItem.count.colour.background.default,
-                    countBorderRadius: parseTokenValue56(
+                    countBorderRadius: parseTokenValue58(
                       countdownItem.count.borderRadius.default
                     ),
                     children: /* @__PURE__ */ jsx(
@@ -11275,7 +11406,7 @@ var Countdown = React66.forwardRef(
   }
 );
 Countdown.displayName = "Countdown";
-var parseTokenValue57 = (value) => {
+var parseTokenValue59 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
@@ -11286,14 +11417,14 @@ var BadgeContainer = styled51(View)(({ theme: theme2 }) => {
   return {
     display: "flex",
     flexDirection: "row",
-    gap: parseTokenValue57(spacing["2xs"]),
+    gap: parseTokenValue59(spacing["2xs"]),
     alignItems: "center",
     justifyContent: "center",
-    height: parseTokenValue57(sizing["2xl"]),
-    paddingRight: parseTokenValue57(spacing.xs),
+    height: parseTokenValue59(sizing["2xl"]),
+    paddingRight: parseTokenValue59(spacing.xs),
     backgroundColor: colour.background.container.brand,
-    borderTopRightRadius: parseTokenValue57(borderRadius.xs),
-    borderBottomRightRadius: parseTokenValue57(borderRadius.xs)
+    borderTopRightRadius: parseTokenValue59(borderRadius.xs),
+    borderBottomRightRadius: parseTokenValue59(borderRadius.xs)
   };
 });
 var BadgeIcon = styled51(View)(({ theme: theme2 }) => {
@@ -11303,9 +11434,9 @@ var BadgeIcon = styled51(View)(({ theme: theme2 }) => {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: parseTokenValue57(sizing.md),
-    height: parseTokenValue57(sizing.md),
-    marginLeft: parseTokenValue57(spacing.xs),
+    width: parseTokenValue59(sizing.md),
+    height: parseTokenValue59(sizing.md),
+    marginLeft: parseTokenValue59(spacing.xs),
     flexShrink: 0
   };
 });
@@ -11354,7 +11485,7 @@ var Grid = React66.forwardRef(
   }
 );
 Grid.displayName = "ProductListingCard.Grid";
-var parseTokenValue58 = (value) => {
+var parseTokenValue60 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
@@ -11363,7 +11494,7 @@ var StyledRoot17 = styled51(Pressable)(({ theme: theme2 }) => {
   return {
     display: "flex",
     flexDirection: "column",
-    gap: parseTokenValue58(spacing.md),
+    gap: parseTokenValue60(spacing.md),
     alignItems: "flex-start",
     width: "100%"
   };
@@ -11373,7 +11504,7 @@ var ImageContainer = styled51(View)(({ theme: theme2 }) => ({
   width: "100%",
   aspectRatio: 1,
   overflow: "hidden",
-  borderRadius: parseTokenValue58(
+  borderRadius: parseTokenValue60(
     theme2.tokens.semantics.dimensions.borderRadius.md
   )
 }));
@@ -11384,7 +11515,7 @@ var StyledImage2 = styled51(Image)({
 });
 var BadgeContainer2 = styled51(View)(({ theme: theme2 }) => ({
   position: "absolute",
-  top: parseTokenValue58(theme2.tokens.semantics.dimensions.spacing.md),
+  top: parseTokenValue60(theme2.tokens.semantics.dimensions.spacing.md),
   left: 0
 }));
 var ContentContainer = styled51(View)(({ theme: theme2 }) => {
@@ -11392,7 +11523,7 @@ var ContentContainer = styled51(View)(({ theme: theme2 }) => {
   return {
     display: "flex",
     flexDirection: "column",
-    gap: parseTokenValue58(spacing.md),
+    gap: parseTokenValue60(spacing.md),
     alignItems: "flex-start",
     width: "100%"
   };
@@ -11406,7 +11537,7 @@ var DetailsContainer = styled51(View)({
 var CategoryWrapper = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
-    marginBottom: parseTokenValue58(spacing["3xs"])
+    marginBottom: parseTokenValue60(spacing["3xs"])
   };
 });
 var TitleContainer = styled51(View)({
@@ -11754,7 +11885,7 @@ var useTabNavigationContext = () => {
   }
   return context;
 };
-var parseTokenValue59 = (value) => parseFloat(value);
+var parseTokenValue61 = (value) => parseFloat(value);
 var StyledFixedList = styled51(View)({
   flexDirection: "row",
   alignItems: "stretch",
@@ -11820,13 +11951,13 @@ var TabNavigationTab = React66.forwardRef(
       StyledTab,
       __spreadProps(__spreadValues({
         ref,
-        tabHeight: parseTokenValue59(tabitem.size.height),
-        tabMinWidth: parseTokenValue59(tabitem.size.minWidth),
-        tabPaddingTop: parseTokenValue59(spacing.topPadding),
-        tabPaddingBottom: parseTokenValue59(spacing.bottomPadding),
-        tabPaddingHorizontal: parseTokenValue59(spacing.horizontalPadding),
-        tabGap: parseTokenValue59(spacing.gap),
-        tabBorderWidth: parseTokenValue59(borderWidth.default),
+        tabHeight: parseTokenValue61(tabitem.size.height),
+        tabMinWidth: parseTokenValue61(tabitem.size.minWidth),
+        tabPaddingTop: parseTokenValue61(spacing.topPadding),
+        tabPaddingBottom: parseTokenValue61(spacing.bottomPadding),
+        tabPaddingHorizontal: parseTokenValue61(spacing.horizontalPadding),
+        tabGap: parseTokenValue61(spacing.gap),
+        tabBorderWidth: parseTokenValue61(borderWidth.default),
         tabBorderColor: borderColour,
         tabFlex: layout === "fixed" ? 1 : void 0
       }, rest), {
@@ -11908,6 +12039,6 @@ var TabNavigation = Object.assign(TabNavigationRoot, {
   Panel: TabNavigationPanel
 });
 
-export { Accordion, Animated5 as Animated, Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, Animated5 as Animated, Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map