@butternutbox/pawprint-native 0.14.0 → 0.15.0

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.cjs     528.39 KB
-CJS dist/index.cjs.map 1.01 MB
-CJS ⚡️ Build success in 7645ms
-ESM dist/index.js     498.99 KB
-ESM dist/index.js.map 1.01 MB
-ESM ⚡️ Build success in 7649ms
-DTS ⚡️ Build success in 21918ms
-DTS dist/index.d.cts 94.99 KB
-DTS dist/index.d.ts  94.99 KB
+ESM dist/index.js     502.55 KB
+ESM dist/index.js.map 1.02 MB
+ESM ⚡️ Build success in 6906ms
+CJS dist/index.cjs     532.19 KB
+CJS dist/index.cjs.map 1.02 MB
+CJS ⚡️ Build success in 6908ms
+DTS ⚡️ Build success in 18492ms
+DTS dist/index.d.cts 98.50 KB
+DTS dist/index.d.ts  98.50 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @butternutbox/pawprint-native
 
+## 0.15.0
+
+### Minor Changes
+
+- 80ab1d3: Add `Menu` molecule — a dropdown menu that expands beneath an anchor (e.g. a header/bar) and dismisses on outside tap, leaving the page behind undarkened. Consumers own open/close state and supply `Menu.Item` rows (`action` / `destructive` variants, opt-out `divider`); `anchorOffset` positions the card just below the anchoring bar.
+
 ## 0.14.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -10186,6 +10186,128 @@ var Tooltip = React66__default.default.forwardRef(
 );
 Tooltip.displayName = "Tooltip";
 var parseTokenValue53 = (value) => parseFloat(value);
+var Row = styled51__default.default(reactNative.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__default.default.forwardRef((_a, ref) => {
+  var _b = _a, { variant = "action", onPress, children, divider = true } = _b, rest = __objRest(_b, ["variant", "onPress", "children", "divider"]);
+  const theme2 = react.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__ */ jsxRuntime.jsx(
+    Row,
+    __spreadProps(__spreadValues({
+      ref,
+      divider,
+      onPress,
+      accessible: true,
+      accessibilityRole: "menuitem",
+      accessibilityLabel: label
+    }, rest), {
+      children: label !== void 0 ? /* @__PURE__ */ jsxRuntime.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__default.default(reactNative.Pressable)({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+});
+var Anchor = styled51__default.default(reactNative.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__default.default(reactNative.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__ */ jsxRuntime.jsxs(
+    reactNative.Modal,
+    {
+      visible: open,
+      transparent: true,
+      statusBarTranslucent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DismissLayer,
+          {
+            onPress: onClose,
+            accessible: false,
+            accessibilityLabel: closeAccessibilityLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Anchor, { align, style: { top: anchorOffset }, children: /* @__PURE__ */ jsxRuntime.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__default.default(reactNative.View)(
   ({
     rootGap,
@@ -10230,26 +10352,26 @@ var MessageCardInsight = React66__default.default.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__ */ jsxRuntime.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,
@@ -10257,7 +10379,7 @@ var MessageCardInsight = React66__default.default.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), {
@@ -10266,7 +10388,7 @@ var MessageCardInsight = React66__default.default.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             StyledInsightContent,
             {
-              contentGap: parseTokenValue53(standalone.content.gap),
+              contentGap: parseTokenValue55(standalone.content.gap),
               children: [
                 title && /* @__PURE__ */ jsxRuntime.jsx(
                   Typography,
@@ -10358,9 +10480,9 @@ var MessageCardBanner = React66__default.default.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"
@@ -10372,7 +10494,7 @@ var MessageCardBanner = React66__default.default.forwardRef(
           }) }) : (media == null ? void 0 : media.type) === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
             StyledBannerImage,
             {
-              imageRadius: parseTokenValue53(dimensions3.borderRadius.sm),
+              imageRadius: parseTokenValue55(dimensions3.borderRadius.sm),
               imageBgColor: colour.background.surface.secondary,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 reactNative.Image,
@@ -10388,12 +10510,12 @@ var MessageCardBanner = React66__default.default.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             StyledBannerContents,
             {
-              contentsGap: parseTokenValue53(dimensions3.spacing.xs),
+              contentsGap: parseTokenValue55(dimensions3.spacing.xs),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   StyledBannerCopy,
                   {
-                    copyGap: parseTokenValue53(dimensions3.spacing["3xs"]),
+                    copyGap: parseTokenValue55(dimensions3.spacing["3xs"]),
                     children: [
                       title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading", size: "xs", color: "primary", children: title }),
                       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "md", color: "secondary", children })
@@ -10424,7 +10546,7 @@ var MessageCard = {
   Insight: MessageCardInsight,
   Banner: MessageCardBanner
 };
-var parseTokenValue54 = (value) => parseFloat(value);
+var parseTokenValue56 = (value) => parseFloat(value);
 var slideEaseOut = Animated10.Easing.out(Animated10.Easing.quad);
 var MONTH_SLIDE_ENTERING = {
   forward: Animated10.FadeInRight.duration(250).easing(slideEaseOut),
@@ -10585,17 +10707,17 @@ var DatePicker = React66__default.default.forwardRef(
     } = React66.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]
     );
@@ -10873,7 +10995,7 @@ var buildPointerPath = (r) => {
     "Z"
   ].join(" ");
 };
-var parseTokenValue55 = (value) => parseFloat(value);
+var parseTokenValue57 = (value) => parseFloat(value);
 var StyledRoot16 = styled51__default.default(reactNative.View)(({ rootGap }) => ({
   flexDirection: "column",
   gap: rootGap,
@@ -10963,21 +11085,21 @@ var PictureSelector = React66__default.default.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__ */ jsxRuntime.jsxs(
       StyledRoot16,
@@ -11070,7 +11192,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__default.default(reactNative.View)(({ rootGap }) => ({
   flexDirection: "row",
@@ -11200,28 +11322,28 @@ var Countdown = React66__default.default.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__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "bold", size: "md", color: "primary", children: label }),
             /* @__PURE__ */ jsxRuntime.jsx(
               InlineGroup,
               {
-                groupGap: parseTokenValue56(countdown.countdownGroup.spacing.gap),
+                groupGap: parseTokenValue58(countdown.countdownGroup.spacing.gap),
                 children: units.map((unit, index) => /* @__PURE__ */ jsxRuntime.jsxs(React66__default.default.Fragment, { children: [
                   index > 0 && colon(`colon-${unit.key}`),
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     InlineCount,
                     {
-                      countGap: parseTokenValue56(countdown.count.spacing.gap),
+                      countGap: parseTokenValue58(countdown.count.spacing.gap),
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           Typography,
@@ -11257,33 +11379,33 @@ var Countdown = React66__default.default.forwardRef(
       StackedRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue56(countdown.spacing.gap)
+        rootGap: parseTokenValue58(countdown.spacing.gap)
       }, rest), {
         children: units.map((unit, index) => /* @__PURE__ */ jsxRuntime.jsxs(React66__default.default.Fragment, { children: [
           index > 0 && colon(`colon-${unit.key}`),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -11313,7 +11435,7 @@ var Countdown = React66__default.default.forwardRef(
   }
 );
 Countdown.displayName = "Countdown";
-var parseTokenValue57 = (value) => {
+var parseTokenValue59 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
@@ -11324,14 +11446,14 @@ var BadgeContainer = styled51__default.default(reactNative.View)(({ theme: theme
   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__default.default(reactNative.View)(({ theme: theme2 }) => {
@@ -11341,9 +11463,9 @@ var BadgeIcon = styled51__default.default(reactNative.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
   };
 });
@@ -11392,7 +11514,7 @@ var Grid = React66__default.default.forwardRef(
   }
 );
 Grid.displayName = "ProductListingCard.Grid";
-var parseTokenValue58 = (value) => {
+var parseTokenValue60 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
@@ -11401,7 +11523,7 @@ var StyledRoot17 = styled51__default.default(reactNative.Pressable)(({ theme: th
   return {
     display: "flex",
     flexDirection: "column",
-    gap: parseTokenValue58(spacing.md),
+    gap: parseTokenValue60(spacing.md),
     alignItems: "flex-start",
     width: "100%"
   };
@@ -11411,7 +11533,7 @@ var ImageContainer = styled51__default.default(reactNative.View)(({ theme: theme
   width: "100%",
   aspectRatio: 1,
   overflow: "hidden",
-  borderRadius: parseTokenValue58(
+  borderRadius: parseTokenValue60(
     theme2.tokens.semantics.dimensions.borderRadius.md
   )
 }));
@@ -11422,7 +11544,7 @@ var StyledImage2 = styled51__default.default(reactNative.Image)({
 });
 var BadgeContainer2 = styled51__default.default(reactNative.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__default.default(reactNative.View)(({ theme: theme2 }) => {
@@ -11430,7 +11552,7 @@ var ContentContainer = styled51__default.default(reactNative.View)(({ theme: the
   return {
     display: "flex",
     flexDirection: "column",
-    gap: parseTokenValue58(spacing.md),
+    gap: parseTokenValue60(spacing.md),
     alignItems: "flex-start",
     width: "100%"
   };
@@ -11444,7 +11566,7 @@ var DetailsContainer = styled51__default.default(reactNative.View)({
 var CategoryWrapper = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
-    marginBottom: parseTokenValue58(spacing["3xs"])
+    marginBottom: parseTokenValue60(spacing["3xs"])
   };
 });
 var TitleContainer = styled51__default.default(reactNative.View)({
@@ -11792,7 +11914,7 @@ var useTabNavigationContext = () => {
   }
   return context;
 };
-var parseTokenValue59 = (value) => parseFloat(value);
+var parseTokenValue61 = (value) => parseFloat(value);
 var StyledFixedList = styled51__default.default(reactNative.View)({
   flexDirection: "row",
   alignItems: "stretch",
@@ -11858,13 +11980,13 @@ var TabNavigationTab = React66__default.default.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), {
@@ -11984,6 +12106,8 @@ exports.InputLabel = InputLabel;
 exports.InputText = InputText;
 exports.Link = Link;
 exports.Logo = Logo;
+exports.Menu = Menu2;
+exports.MenuItem = MenuItem;
 exports.MessageCard = MessageCard;
 exports.MessageCardBanner = MessageCardBanner;
 exports.MessageCardInsight = MessageCardInsight;