@butternutbox/pawprint-native 0.11.1 → 0.13.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { useTheme, ThemeProvider as ThemeProvider$1 } from '@emotion/react';
 import { Brand, Theme, DEFAULT_THEME_OPTIONS, THEME_OPTIONS_MAP, tokens } from '@butternutbox/pawprint-tokens';
 export { tokens } from '@butternutbox/pawprint-tokens';
-import styled50 from '@emotion/native';
+import styled51 from '@emotion/native';
 export { default as styled } from '@emotion/native';
 import idaNarrow500 from './ida-narrow-500-normal.ttf';
 import idaNarrow700 from './ida-narrow-700-normal.ttf';
@@ -9,7 +9,7 @@ import ibmPlexSansCondensed400 from './ibm-plex-sans-condensed-400-normal.ttf';
 import ibmPlexSansCondensed500 from './ibm-plex-sans-condensed-500-normal.ttf';
 import ibmPlexSansCondensed600 from './ibm-plex-sans-condensed-600-normal.ttf';
 import ibmPlexSansCondensed700 from './ibm-plex-sans-condensed-700-normal.ttf';
-import React65, { createContext, forwardRef, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
+import React66, { createContext, forwardRef, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@rn-primitives/avatar';
 import { Text, View, Animated, Pressable, TextInput, Easing, StyleSheet, useWindowDimensions, PanResponder, Image, ScrollView, Keyboard, ActionSheetIOS, TouchableOpacity, Platform, Modal, TouchableWithoutFeedback, FlatList, Linking, Clipboard, Alert } from 'react-native';
@@ -188,8 +188,8 @@ var VARIANT_DEFAULTS = {
   heading: { size: "md" },
   display: { size: "lg" }
 };
-var StyledText = styled50(Text)({});
-var Typography = React65.forwardRef(
+var StyledText = styled51(Text)({});
+var Typography = React66.forwardRef(
   (props, ref) => {
     const theme2 = useTheme();
     const { typography, colour } = theme2.tokens.semantics;
@@ -272,14 +272,14 @@ var Typography = React65.forwardRef(
 );
 Typography.displayName = "Typography";
 var parseTokenValue2 = (value) => parseFloat(value);
-var StyledIconRoot = styled50(View)(({ iconDimension }) => ({
+var StyledIconRoot = styled51(View)(({ iconDimension }) => ({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
   width: iconDimension,
   height: iconDimension
 }));
-var Icon = React65.forwardRef(
+var Icon = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       icon: IconComponent,
@@ -580,7 +580,7 @@ var SIZE_MAP = {
   lg: "large"
 };
 var parseTokenValue3 = (value) => parseFloat(value);
-var StyledRoot = styled50(AvatarPrimitive.Root)(({ theme: theme2, size, border }) => {
+var StyledRoot = styled51(AvatarPrimitive.Root)(({ theme: theme2, size, border }) => {
   const { avatar } = theme2.tokens.components;
   const { borderRadius } = theme2.tokens.semantics.dimensions;
   const tokenSize = SIZE_MAP[size];
@@ -601,12 +601,12 @@ var StyledRoot = styled50(AvatarPrimitive.Root)(({ theme: theme2, size, border }
     borderStyle: "solid"
   });
 });
-var StyledImage = styled50(AvatarPrimitive.Image)({
+var StyledImage = styled51(AvatarPrimitive.Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var StyledFallback = styled50(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
+var StyledFallback = styled51(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
   const { background, text } = theme2.tokens.semantics.colour;
   return {
     display: "flex",
@@ -618,7 +618,7 @@ var StyledFallback = styled50(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
     color: text.primary
   };
 });
-var StyledIcon = styled50(Icon)(({
+var StyledIcon = styled51(Icon)(({
   theme: theme2,
   avatarSize
 }) => {
@@ -645,7 +645,7 @@ var AVATAR_SIZE_TO_ICON_SIZE = {
   md: "md",
   lg: "xl"
 };
-var AvatarRoot = React65.forwardRef(
+var AvatarRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       src,
@@ -682,7 +682,7 @@ var AvatarRoot = React65.forwardRef(
 AvatarRoot.displayName = "Avatar";
 var Avatar = AvatarRoot;
 var parseTokenValue4 = (value) => parseFloat(value);
-var Container = styled50(View)(({ theme: theme2, showBg }) => {
+var Container = styled51(View)(({ theme: theme2, showBg }) => {
   const { colour, sizing, borderRadius } = theme2.tokens.components.carouselControls.carouselControl;
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
@@ -704,7 +704,7 @@ function getVisibleDots(count, activeIndex) {
   const windowStart = Math.min(Math.max(activeIndex - 2, 0), count - 5);
   return Array.from({ length: 5 }, (_, i) => windowStart + i);
 }
-var CarouselControls = React65.forwardRef(
+var CarouselControls = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { count, activeIndex, showBackground = true } = _b, props = __objRest(_b, ["count", "activeIndex", "showBackground"]);
     const theme2 = useTheme();
@@ -751,7 +751,7 @@ var CarouselControls = React65.forwardRef(
 );
 CarouselControls.displayName = "CarouselControls";
 var parseTokenValue5 = (value) => parseFloat(value);
-var StyledBadge = styled50(View)(({ theme: theme2, badgeVariant, badgeSize, pinned, top, bottom }) => {
+var StyledBadge = styled51(View)(({ theme: theme2, badgeVariant, badgeSize, pinned, top, bottom }) => {
   const { sizing, spacing, colour, primary, pinnedBadge } = theme2.tokens.components.badges.badge;
   const backgroundColorMap = {
     primary: colour.background.default,
@@ -791,7 +791,7 @@ var StyledBadge = styled50(View)(({ theme: theme2, badgeVariant, badgeSize, pinn
     backgroundColor: backgroundColorMap[badgeVariant]
   }, borderRadiusStyles), positionStyles);
 });
-var Badge = React65.forwardRef(
+var Badge = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "primary",
@@ -865,8 +865,8 @@ var Badge = React65.forwardRef(
 );
 Badge.displayName = "Badge";
 var parseTokenValue6 = (value) => parseFloat(value);
-var StyledSpinner = styled50(View)({});
-var Spinner = React65.forwardRef(
+var StyledSpinner = styled51(View)({});
+var Spinner = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "md", variant = "dark", style } = _b, rest = __objRest(_b, ["size", "variant", "style"]);
     const theme2 = useTheme();
@@ -931,12 +931,12 @@ var sizeToTypographyKey = {
   md: "medium",
   sm: "small"
 };
-var IconWrapper = styled50(View)({
+var IconWrapper = styled51(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var StyledButton = styled50(Pressable)(
+var StyledButton = styled51(Pressable)(
   ({
     buttonHeight,
     buttonMinWidth,
@@ -964,16 +964,16 @@ var StyledButton = styled50(Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {}), buttonFullWidth ? { width: "100%" } : {})
 );
-var StyledTextWrapper = styled50(View)(({ textOpacity }) => ({
+var StyledTextWrapper = styled51(View)(({ textOpacity }) => ({
   opacity: textOpacity,
   flexShrink: 0
 }));
-var StyledSpinnerWrapper = styled50(View)({
+var StyledSpinnerWrapper = styled51(View)({
   position: "absolute",
   alignItems: "center",
   justifyContent: "center"
 });
-var Button = React65.forwardRef(
+var Button = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "filled",
@@ -1005,7 +1005,7 @@ var Button = React65.forwardRef(
     const typographyKey = sizeToTypographyKey[size];
     const typography = buttons.text[typographyKey];
     resolveFont(typography.fontFamily, typography.fontWeight);
-    const [pressed, setPressed] = React65.useState(false);
+    const [pressed, setPressed] = React66.useState(false);
     const getVariantStyles = (isPressed) => {
       if (variant === "filled") {
         const bgTokens = buttons.filledButton.colour.background[colour];
@@ -1089,10 +1089,33 @@ var Button = React65.forwardRef(
   }
 );
 Button.displayName = "Button";
+var parseTokenValue8 = (value) => parseFloat(value);
+var StyledDivider = styled51(View)(({ theme: theme2, dividerSize, dividerColour }) => {
+  const { colour, sizing } = theme2.tokens.components.dividers;
+  return {
+    width: "100%",
+    height: parseTokenValue8(sizing[dividerSize].height),
+    backgroundColor: colour[dividerColour]
+  };
+});
+var Divider = React66.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { size = "small", colour = "light" } = _b, rest = __objRest(_b, ["size", "colour"]);
+    return /* @__PURE__ */ jsx(
+      StyledDivider,
+      __spreadValues({
+        ref,
+        dividerSize: size,
+        dividerColour: colour
+      }, rest)
+    );
+  }
+);
+Divider.displayName = "Divider";
 
 // src/utils/token.ts
-var parseTokenValue8 = (value) => parseFloat(value);
-var StyledHint = styled50(View)(({
+var parseTokenValue9 = (value) => parseFloat(value);
+var StyledHint = styled51(View)(({
   theme: theme2,
   hintVariant
 }) => {
@@ -1108,7 +1131,7 @@ var StyledHint = styled50(View)(({
     warning: background.warning,
     error: background.error
   };
-  const size = parseTokenValue8(badge.hint.sizing.default);
+  const size = parseTokenValue9(badge.hint.sizing.default);
   return {
     width: size,
     height: size,
@@ -1116,20 +1139,20 @@ var StyledHint = styled50(View)(({
     backgroundColor: hintVariantMap[hintVariant]
   };
 });
-var Hint = React65.forwardRef(
+var Hint = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "default" } = _b, rest = __objRest(_b, ["variant"]);
     return /* @__PURE__ */ jsx(StyledHint, __spreadValues({ ref, hintVariant: variant }, rest));
   }
 );
 Hint.displayName = "Hint";
-var parseTokenValue9 = (value) => parseFloat(value);
+var parseTokenValue10 = (value) => parseFloat(value);
 var sizeToIconSizeToken = {
   lg: "xl",
   md: "lg",
   sm: "md"
 };
-var StyledIconButton = styled50(Pressable)(
+var StyledIconButton = styled51(Pressable)(
   ({
     buttonDimension,
     buttonBorderRadius,
@@ -1148,17 +1171,17 @@ var StyledIconButton = styled50(Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {})
 );
-var StyledIconWrapper = styled50(View)(({ iconDimension, iconOpacity }) => ({
+var StyledIconWrapper = styled51(View)(({ iconDimension, iconOpacity }) => ({
   width: iconDimension,
   height: iconDimension,
   opacity: iconOpacity
 }));
-var StyledSpinnerWrapper2 = styled50(View)({
+var StyledSpinnerWrapper2 = styled51(View)({
   position: "absolute",
   alignItems: "center",
   justifyContent: "center"
 });
-var IconButton = React65.forwardRef(
+var IconButton = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       icon: IconComponent,
@@ -1181,10 +1204,10 @@ var IconButton = React65.forwardRef(
     const isDisabled = disabled || loading;
     const buttons = theme2.tokens.components.buttons;
     const sizeTokens = buttons.size[size];
-    const dimension = parseTokenValue9(sizeTokens.height);
+    const dimension = parseTokenValue10(sizeTokens.height);
     const iconSizing = theme2.tokens.components.icons.sizing.icons.core;
-    const iconDimension = parseTokenValue9(iconSizing[sizeToIconSizeToken[size]]);
-    const [pressed, setPressed] = React65.useState(false);
+    const iconDimension = parseTokenValue10(iconSizing[sizeToIconSizeToken[size]]);
+    const [pressed, setPressed] = React66.useState(false);
     const getVariantStyles = (isPressed) => {
       if (variant === "filled") {
         const filled = buttons.iconButton.filledButton;
@@ -1200,7 +1223,7 @@ var IconButton = React65.forwardRef(
         const outline = buttons.iconButton.outlineButton;
         return {
           backgroundColor: loading || isPressed ? outline.colour.background.selected : "transparent",
-          borderWidth: parseTokenValue9(outline.border.default),
+          borderWidth: parseTokenValue10(outline.border.default),
           borderColor: outline.colour.border.default,
           iconColor: loading || isPressed ? outline.colour.icon.selected : outline.colour.icon.default
         };
@@ -1222,7 +1245,7 @@ var IconButton = React65.forwardRef(
         onPressIn: () => setPressed(true),
         onPressOut: () => setPressed(false),
         buttonDimension: dimension,
-        buttonBorderRadius: parseTokenValue9(buttons.borderRadius.default),
+        buttonBorderRadius: parseTokenValue10(buttons.borderRadius.default),
         buttonBgColor: variantStyles.backgroundColor,
         buttonOpacity: isDisabled && !loading ? parseFloat(buttons.opacity.disabled) : 1,
         buttonBorderWidth: variantStyles.borderWidth,
@@ -1260,14 +1283,14 @@ var IconButton = React65.forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
-var parseTokenValue10 = (value) => parseFloat(value);
-var StyledRoot2 = styled50(View)(({ illustrationHeight }) => ({
+var parseTokenValue11 = (value) => parseFloat(value);
+var StyledRoot2 = styled51(View)(({ illustrationHeight }) => ({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
   height: illustrationHeight
 }));
-var Illustration = React65.forwardRef(
+var Illustration = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       illustration: IllustrationComponent,
@@ -1279,7 +1302,7 @@ var Illustration = React65.forwardRef(
       "aria-label"
     ]);
     const theme2 = useTheme();
-    const dimension = parseTokenValue10(
+    const dimension = parseTokenValue11(
       theme2.tokens.components.illustrations.sizing.illustrations[size]
     );
     return /* @__PURE__ */ jsx(
@@ -1297,13 +1320,13 @@ var Illustration = React65.forwardRef(
   }
 );
 Illustration.displayName = "Illustration";
-var parseTokenValue11 = (value) => parseFloat(value);
-var StyledLabelRow = styled50(View)(({ labelGap }) => ({
+var parseTokenValue12 = (value) => parseFloat(value);
+var StyledLabelRow = styled51(View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
 }));
-var InputLabel = React65.forwardRef(
+var InputLabel = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { optionalText, state = "default", children } = _b, rest = __objRest(_b, ["optionalText", "state", "children"]);
     const theme2 = useTheme();
@@ -1312,7 +1335,7 @@ var InputLabel = React65.forwardRef(
       StyledLabelRow,
       __spreadProps(__spreadValues({
         ref,
-        labelGap: parseTokenValue11(spacing.label.gap)
+        labelGap: parseTokenValue12(spacing.label.gap)
       }, rest), {
         children: [
           /* @__PURE__ */ jsx(
@@ -1330,22 +1353,22 @@ var InputLabel = React65.forwardRef(
   }
 );
 InputLabel.displayName = "Input.Label";
-var parseTokenValue12 = (value) => parseFloat(value);
-var StyledInputWrapper = styled50(Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
+var parseTokenValue13 = (value) => parseFloat(value);
+var StyledInputWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
   return {
     flexDirection: "row",
     alignItems: "center",
-    gap: parseTokenValue12(spacing.field.gap),
-    minWidth: containerWidth !== void 0 ? void 0 : parseTokenValue12(size.field.minWidth),
+    gap: parseTokenValue13(spacing.field.gap),
+    minWidth: containerWidth !== void 0 ? void 0 : parseTokenValue13(size.field.minWidth),
     width: containerWidth !== void 0 ? containerWidth : "100%",
-    height: containerHeight !== void 0 ? containerHeight : parseTokenValue12(size.field.height),
+    height: containerHeight !== void 0 ? containerHeight : parseTokenValue13(size.field.height),
     backgroundColor: isDisabled ? colour.field.background.inactive : colour.field.background.default,
-    borderRadius: parseTokenValue12(borderRadius.field.default),
+    borderRadius: parseTokenValue13(borderRadius.field.default),
     flexShrink: containerWidth !== void 0 ? 0 : void 0
   };
 });
-var StyledInput = styled50(TextInput)(({
+var StyledInput = styled51(TextInput)(({
   theme: theme2,
   hasInlineHelp
 }) => {
@@ -1356,7 +1379,7 @@ var StyledInput = styled50(TextInput)(({
     typography.fontFamily,
     typography.fontWeight
   );
-  const fontSize = parseTokenValue12(typography.fontSize);
+  const fontSize = parseTokenValue13(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 __spreadValues(__spreadValues({
     flex: 1,
@@ -1373,16 +1396,16 @@ var StyledInput = styled50(TextInput)(({
     outlineColor: "transparent"
   });
 });
-var StyledFocusRing = styled50(View)({
+var StyledFocusRing = styled51(View)({
   position: "absolute",
   pointerEvents: "none"
 });
-var StyledIconSlot = styled50(View)({
+var StyledIconSlot = styled51(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var InputField = React65.forwardRef(
+var InputField = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingIcon,
@@ -1429,12 +1452,12 @@ var InputField = React65.forwardRef(
     );
     const isDisabled = editable === false;
     const hasState = state === "error" || state === "success";
-    const baseBorderWidth = parseTokenValue12(borderWidth.field.default);
-    const selectedBorderWidth = parseTokenValue12(borderWidth.field.selected);
-    const focusBorderWidth = parseTokenValue12(borderWidth.field.focus);
-    const fieldBorderRadius = parseTokenValue12(borderRadius.field.default);
-    const baseVerticalPadding = parseTokenValue12(spacing.field.verticalPadding);
-    const baseHorizontalPadding = parseTokenValue12(
+    const baseBorderWidth = parseTokenValue13(borderWidth.field.default);
+    const selectedBorderWidth = parseTokenValue13(borderWidth.field.selected);
+    const focusBorderWidth = parseTokenValue13(borderWidth.field.focus);
+    const fieldBorderRadius = parseTokenValue13(borderRadius.field.default);
+    const baseVerticalPadding = parseTokenValue13(spacing.field.verticalPadding);
+    const baseHorizontalPadding = parseTokenValue13(
       spacing.field.horizontalPadding
     );
     const borderDelta = selectedBorderWidth - baseBorderWidth;
@@ -1541,7 +1564,7 @@ var InputField = React65.forwardRef(
   }
 );
 InputField.displayName = "Input.Field";
-var InputText = React65.forwardRef(
+var InputText = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { placeholderTextColor } = _b, rest = __objRest(_b, ["placeholderTextColor"]);
     const theme2 = useTheme();
@@ -1556,11 +1579,11 @@ var InputText = React65.forwardRef(
   }
 );
 InputText.displayName = "Input.Text";
-var StyledDescriptionRow = styled50(View)({
+var StyledDescriptionRow = styled51(View)({
   flexDirection: "row",
   alignItems: "center"
 });
-var InputDescription = React65.forwardRef(
+var InputDescription = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { state = "default", children } = _b, rest = __objRest(_b, ["state", "children"]);
     const theme2 = useTheme();
@@ -1576,11 +1599,11 @@ var InputDescription = React65.forwardRef(
   }
 );
 InputDescription.displayName = "Input.Description";
-var StyledErrorRow = styled50(View)({
+var StyledErrorRow = styled51(View)({
   flexDirection: "row",
   alignItems: "center"
 });
-var InputError = React65.forwardRef(
+var InputError = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -1596,14 +1619,14 @@ var InputError = React65.forwardRef(
   }
 );
 InputError.displayName = "Input.Error";
-var parseTokenValue13 = (value) => parseFloat(value);
-var StyledRoot3 = styled50(View)(({ theme: theme2 }) => {
+var parseTokenValue14 = (value) => parseFloat(value);
+var StyledRoot3 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
-    gap: parseTokenValue13(spacing.gap)
+    gap: parseTokenValue14(spacing.gap)
   };
 });
-var InputRoot = React65.forwardRef(
+var InputRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -1647,7 +1670,7 @@ var Input = Object.assign(InputRoot, {
   Description: InputDescription,
   Error: InputError
 });
-var Link = React65.forwardRef(
+var Link = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
@@ -4240,12 +4263,12 @@ function registerLogo(brand, variant, component) {
   }
   LOGOS[brand][variant] = component;
 }
-var StyledRoot4 = styled50(View)({
+var StyledRoot4 = styled51(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var Logo = React65.forwardRef(
+var Logo = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { brand, variant = "primary", "aria-label": ariaLabel } = _b, rest = __objRest(_b, ["brand", "variant", "aria-label"]);
     const effectiveVariant = brand === "bcorp" ? "primary" : variant;
@@ -4267,28 +4290,28 @@ var Logo = React65.forwardRef(
   }
 );
 Logo.displayName = "Logo";
-var parseTokenValue14 = (value) => parseFloat(value);
-var StyledFieldGroup = styled50(View)(({ theme: theme2 }) => {
+var parseTokenValue15 = (value) => parseFloat(value);
+var StyledFieldGroup = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     flexDirection: "row",
     alignItems: "center",
-    gap: parseTokenValue14(spacing.field.gap)
+    gap: parseTokenValue15(spacing.field.gap)
   };
 });
-var StyledFieldTextWrapper = styled50(View)({
+var StyledFieldTextWrapper = styled51(View)({
   flexShrink: 0,
   justifyContent: "center"
 });
-var StyledInputContainer = styled50(View)(({ hasInlineHelp }) => ({
+var StyledInputContainer = styled51(View)(({ hasInlineHelp }) => ({
   flexDirection: "column",
   gap: hasInlineHelp ? 2 : 0
 }));
-var NumberInputField = React65.forwardRef((_a, ref) => {
+var NumberInputField = React66.forwardRef((_a, ref) => {
   var _b = _a, { fieldText, inlineHelpText } = _b, props = __objRest(_b, ["fieldText", "inlineHelpText"]);
   const theme2 = useTheme();
   const { colour, description } = theme2.tokens.components.inputs;
-  const fieldSize = parseTokenValue14(
+  const fieldSize = parseTokenValue15(
     theme2.tokens.components.numberField.size.large.height
   );
   const inputElement = /* @__PURE__ */ jsx(
@@ -4374,14 +4397,14 @@ var NumberInputField = React65.forwardRef((_a, ref) => {
   return fieldContent;
 });
 NumberInputField.displayName = "NumberInput.Field";
-var parseTokenValue15 = (value) => parseFloat(value);
-var StyledRoot5 = styled50(View)(({ theme: theme2 }) => {
+var parseTokenValue16 = (value) => parseFloat(value);
+var StyledRoot5 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
-    gap: parseTokenValue15(spacing.gap)
+    gap: parseTokenValue16(spacing.gap)
   };
 });
-var NumberInputRoot = React65.forwardRef(
+var NumberInputRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -4431,14 +4454,14 @@ var NumberInput = Object.assign(NumberInputRoot, {
   Description: InputDescription,
   Error: InputError
 });
-var parseTokenValue16 = (value) => parseFloat(value);
-var StyledContainer = styled50(View)(({ switchGap, switchOpacity }) => ({
+var parseTokenValue17 = (value) => parseFloat(value);
+var StyledContainer = styled51(View)(({ switchGap, switchOpacity }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: switchGap,
   opacity: switchOpacity
 }));
-var StyledControlTrack = styled50(View)(
+var StyledControlTrack = styled51(View)(
   ({
     switchChecked,
     controlWidth,
@@ -4464,19 +4487,19 @@ var StyledControlTrack = styled50(View)(
     justifyContent: "center"
   })
 );
-var StyledThumb = styled50(Animated.View)(({ thumbSize, thumbBgColor }) => ({
+var StyledThumb = styled51(Animated.View)(({ thumbSize, thumbBgColor }) => ({
   width: thumbSize,
   height: thumbSize,
   borderRadius: thumbSize / 2,
   backgroundColor: thumbBgColor,
   position: "absolute"
 }));
-var StyledContent = styled50(View)(({ contentGap }) => ({
+var StyledContent = styled51(View)(({ contentGap }) => ({
   gap: contentGap,
   flex: 1,
   minWidth: 0
 }));
-var Switch = React65.forwardRef(
+var Switch = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -4496,12 +4519,12 @@ var Switch = React65.forwardRef(
     const theme2 = useTheme();
     const { size, colour, opacity, borderWidth, spacing, typography } = theme2.tokens.components.switch;
     const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = React66.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
-    const controlWidth = parseTokenValue16(size.control.width);
-    const controlHeight = parseTokenValue16(size.control.height);
-    const thumbSize = parseTokenValue16(size.thumb.default);
-    const borderWidthValue = parseTokenValue16(borderWidth.control.default);
+    const controlWidth = parseTokenValue17(size.control.width);
+    const controlHeight = parseTokenValue17(size.control.height);
+    const thumbSize = parseTokenValue17(size.thumb.default);
+    const borderWidthValue = parseTokenValue17(borderWidth.control.default);
     const inset = 2;
     const offTranslateX = inset;
     const onTranslateX = controlWidth - borderWidthValue * 2 - thumbSize - inset;
@@ -4527,7 +4550,7 @@ var Switch = React65.forwardRef(
       StyledContainer,
       __spreadProps(__spreadValues({
         ref,
-        switchGap: parseTokenValue16(spacing.gap),
+        switchGap: parseTokenValue17(spacing.gap),
         switchOpacity: disabled ? parseFloat(opacity.disabled) : 1
       }, rest), {
         children: [
@@ -4561,7 +4584,7 @@ var Switch = React65.forwardRef(
               )
             }
           ),
-          (label || subText) && /* @__PURE__ */ jsxs(StyledContent, { contentGap: parseTokenValue16(spacing.content.gap), children: [
+          (label || subText) && /* @__PURE__ */ jsxs(StyledContent, { contentGap: parseTokenValue17(spacing.content.gap), children: [
             label && /* @__PURE__ */ jsx(Typography, { token: typography.label, color: colour.text.title, children: label }),
             subText && /* @__PURE__ */ jsx(
               Typography,
@@ -4578,8 +4601,8 @@ var Switch = React65.forwardRef(
   }
 );
 Switch.displayName = "Switch";
-var parseTokenValue17 = (value) => parseFloat(value);
-var StyledTag = styled50(View)(({ theme: theme2, tagVariant, tagSize }) => {
+var parseTokenValue18 = (value) => parseFloat(value);
+var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
   const { sizing, spacing, colour, badge } = theme2.tokens.components.tags;
   const backgroundColorMap = {
     primary: colour.primary.background,
@@ -4594,15 +4617,15 @@ var StyledTag = styled50(View)(({ theme: theme2, tagVariant, tagSize }) => {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    height: parseTokenValue17(sizing[tagSize].height),
-    minWidth: parseTokenValue17(sizing[tagSize].minWidth),
-    paddingHorizontal: parseTokenValue17(spacing.horizontalPadding),
-    gap: parseTokenValue17(spacing[tagSize].gap),
-    borderRadius: parseTokenValue17(badge.borderRadius.default),
+    height: parseTokenValue18(sizing[tagSize].height),
+    minWidth: parseTokenValue18(sizing[tagSize].minWidth),
+    paddingHorizontal: parseTokenValue18(spacing.horizontalPadding),
+    gap: parseTokenValue18(spacing[tagSize].gap),
+    borderRadius: parseTokenValue18(badge.borderRadius.default),
     backgroundColor: backgroundColorMap[tagVariant]
   };
 });
-var Tag = React65.forwardRef(
+var Tag = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "primary", size = "medium", icon, children } = _b, rest = __objRest(_b, ["variant", "size", "icon", "children"]);
     const theme2 = useTheme();
@@ -4651,22 +4674,22 @@ var Tag = React65.forwardRef(
   }
 );
 Tag.displayName = "Tag";
-var parseTokenValue18 = (value) => parseFloat(value);
-var StyledTextAreaWrapper = styled50(Animated.View)(({ theme: theme2, isDisabled }) => {
+var parseTokenValue19 = (value) => parseFloat(value);
+var StyledTextAreaWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
   const { dimensions: dimensions3 } = theme2.tokens.semantics;
   return {
     flexDirection: "column",
-    gap: parseTokenValue18(spacing.field.gap),
+    gap: parseTokenValue19(spacing.field.gap),
     width: "100%",
-    minWidth: parseTokenValue18(size.field.minWidth),
-    minHeight: parseTokenValue18(dimensions3.sizing["3xl"]),
+    minWidth: parseTokenValue19(size.field.minWidth),
+    minHeight: parseTokenValue19(dimensions3.sizing["3xl"]),
     backgroundColor: isDisabled ? colour.field.background.inactive : colour.field.background.default,
-    borderRadius: parseTokenValue18(borderRadius.field.default),
+    borderRadius: parseTokenValue19(borderRadius.field.default),
     position: "relative"
   };
 });
-var StyledTextArea = styled50(TextInput)(({ theme: theme2 }) => {
+var StyledTextArea = styled51(TextInput)(({ theme: theme2 }) => {
   const { colour } = theme2.tokens.components.inputs;
   return __spreadValues({
     flex: 1,
@@ -4681,17 +4704,17 @@ var StyledTextArea = styled50(TextInput)(({ theme: theme2 }) => {
     outlineColor: "transparent"
   });
 });
-var StyledFocusRing2 = styled50(View)({
+var StyledFocusRing2 = styled51(View)({
   position: "absolute",
   pointerEvents: "none"
 });
-var TextAreaContainer = styled50(View)({
+var TextAreaContainer = styled51(View)({
   position: "relative",
   width: "100%",
   flex: 1,
   flexDirection: "column"
 });
-var IconWrapper2 = styled50(View)(({ side }) => {
+var IconWrapper2 = styled51(View)(({ side }) => {
   return {
     position: "absolute",
     top: 0,
@@ -4702,7 +4725,7 @@ var IconWrapper2 = styled50(View)(({ side }) => {
     zIndex: 1
   };
 });
-var TextAreaField = React65.forwardRef(
+var TextAreaField = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingIcon,
@@ -4744,12 +4767,12 @@ var TextAreaField = React65.forwardRef(
     );
     const isDisabled = editable === false;
     const hasState = state === "error" || state === "success";
-    const baseBorderWidth = parseTokenValue18(borderWidth.field.default);
-    const selectedBorderWidth = parseTokenValue18(borderWidth.field.selected);
-    const focusBorderWidth = parseTokenValue18(borderWidth.field.focus);
-    const fieldBorderRadius = parseTokenValue18(borderRadius.field.default);
-    const baseVerticalPadding = parseTokenValue18(spacing.field.verticalPadding);
-    const baseHorizontalPadding = parseTokenValue18(
+    const baseBorderWidth = parseTokenValue19(borderWidth.field.default);
+    const selectedBorderWidth = parseTokenValue19(borderWidth.field.selected);
+    const focusBorderWidth = parseTokenValue19(borderWidth.field.focus);
+    const fieldBorderRadius = parseTokenValue19(borderRadius.field.default);
+    const baseVerticalPadding = parseTokenValue19(spacing.field.verticalPadding);
+    const baseHorizontalPadding = parseTokenValue19(
       spacing.field.horizontalPadding
     );
     const borderDelta = selectedBorderWidth - baseBorderWidth;
@@ -4805,11 +4828,11 @@ var TextAreaField = React65.forwardRef(
       var _a2;
       (_a2 = internalInputRef.current) == null ? void 0 : _a2.focus();
     };
-    const fieldHeight = parseTokenValue18(size.field.height);
+    const fieldHeight = parseTokenValue19(size.field.height);
     const textAreaMinHeight = fieldHeight;
-    const iconGap = parseTokenValue18(spacing.field.gap);
-    const leadingIconSize = parseTokenValue18(dimensions3.sizing.xl);
-    const trailingIconSize = parseTokenValue18(dimensions3.sizing.md);
+    const iconGap = parseTokenValue19(spacing.field.gap);
+    const leadingIconSize = parseTokenValue19(dimensions3.sizing.xl);
+    const trailingIconSize = parseTokenValue19(dimensions3.sizing.md);
     const leadingIconPadding = leadingIconSize + iconGap;
     const trailingIconPadding = trailingIconSize + iconGap;
     return /* @__PURE__ */ jsx(Pressable, { onPress: handleWrapperPress, children: /* @__PURE__ */ jsxs(
@@ -4877,25 +4900,25 @@ var TextAreaField = React65.forwardRef(
   }
 );
 TextAreaField.displayName = "TextArea.Field";
-var parseTokenValue19 = (value) => parseFloat(value);
-var StyledLabelWrapper = styled50(View)({
+var parseTokenValue20 = (value) => parseFloat(value);
+var StyledLabelWrapper = styled51(View)({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledLabel = styled50(View)(({ labelGap }) => ({
+var StyledLabel = styled51(View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
 }));
-var StyledCharCountWrapper = styled50(View)(({ charCountGap, charCountPadding }) => ({
+var StyledCharCountWrapper = styled51(View)(({ charCountGap, charCountPadding }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: charCountGap,
   paddingLeft: charCountPadding
 }));
-var TextAreaLabel = React65.forwardRef(
+var TextAreaLabel = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       optionalText,
@@ -4915,7 +4938,7 @@ var TextAreaLabel = React65.forwardRef(
     const showCharacterCount = maxLength !== void 0 && currentLength !== void 0;
     const isOverLimit = currentLength !== void 0 && maxLength !== void 0 && currentLength > maxLength;
     return /* @__PURE__ */ jsxs(StyledLabelWrapper, __spreadProps(__spreadValues({ ref }, rest), { children: [
-      /* @__PURE__ */ jsxs(StyledLabel, { labelGap: parseTokenValue19(spacing.label.gap), children: [
+      /* @__PURE__ */ jsxs(StyledLabel, { labelGap: parseTokenValue20(spacing.label.gap), children: [
         /* @__PURE__ */ jsx(
           Typography,
           {
@@ -4929,8 +4952,8 @@ var TextAreaLabel = React65.forwardRef(
       showCharacterCount && /* @__PURE__ */ jsxs(
         StyledCharCountWrapper,
         {
-          charCountGap: parseTokenValue19(spacing.field.gap),
-          charCountPadding: parseTokenValue19(spacing.description.leftPadding),
+          charCountGap: parseTokenValue20(spacing.field.gap),
+          charCountPadding: parseTokenValue20(spacing.description.leftPadding),
           children: [
             isOverLimit && /* @__PURE__ */ jsx(Icon, { icon: Error_default, size: "sm", colour: "error" }),
             /* @__PURE__ */ jsxs(
@@ -4952,14 +4975,14 @@ var TextAreaLabel = React65.forwardRef(
   }
 );
 TextAreaLabel.displayName = "TextArea.Label";
-var parseTokenValue20 = (value) => parseFloat(value);
-var StyledRoot6 = styled50(View)(({ theme: theme2 }) => {
+var parseTokenValue21 = (value) => parseFloat(value);
+var StyledRoot6 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
-    gap: parseTokenValue20(spacing.gap)
+    gap: parseTokenValue21(spacing.gap)
   };
 });
-var TextAreaRoot = React65.forwardRef(
+var TextAreaRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -4986,8 +5009,8 @@ var TextAreaRoot = React65.forwardRef(
       "defaultValue",
       "onChangeText"
     ]);
-    const [charCount, setCharCount] = React65.useState(0);
-    React65.useEffect(() => {
+    const [charCount, setCharCount] = React66.useState(0);
+    React66.useEffect(() => {
       if (value !== void 0) {
         setCharCount(String(value).length);
       } else if (defaultValue !== void 0) {
@@ -5040,38 +5063,38 @@ var TextArea = Object.assign(TextAreaRoot, {
   Description: InputDescription,
   Error: InputError
 });
-var AccordionContext = React65.createContext({
+var AccordionContext = React66.createContext({
   openValues: [],
   toggle: () => {
   },
   disabled: false,
   size: "small"
 });
-var parseTokenValue21 = (value) => parseFloat(value);
-var StyledRoot7 = styled50(View)(({ rootGap }) => ({
+var parseTokenValue22 = (value) => parseFloat(value);
+var StyledRoot7 = styled51(View)(({ rootGap }) => ({
   width: "100%",
   flexDirection: "column",
   gap: rootGap
 }));
-var StyledItem = styled50(View)({
+var StyledItem = styled51(View)({
   flexDirection: "column"
 });
-var StyledTrigger = styled50(Pressable)(({ triggerOpacity }) => ({
+var StyledTrigger = styled51(Pressable)(({ triggerOpacity }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%",
   opacity: triggerOpacity
 }));
-var StyledPanel = styled50(View)(({ panelGap }) => ({
+var StyledPanel = styled51(View)(({ panelGap }) => ({
   marginTop: panelGap
 }));
-var StyledDivider = styled50(View)(({ dividerColor, dividerMarginTop }) => ({
+var StyledDivider2 = styled51(View)(({ dividerColor, dividerMarginTop }) => ({
   height: 1,
   backgroundColor: dividerColor,
   marginTop: dividerMarginTop
 }));
-var AccordionItem = React65.forwardRef(
+var AccordionItem = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { title, children, value, disabled: itemDisabled } = _b, rest = __objRest(_b, ["title", "children", "value", "disabled"]);
     const theme2 = useTheme();
@@ -5081,7 +5104,7 @@ var AccordionItem = React65.forwardRef(
       toggle,
       disabled: rootDisabled,
       size
-    } = React65.useContext(AccordionContext);
+    } = React66.useContext(AccordionContext);
     const itemValue = value != null ? value : title;
     const isOpen = openValues.includes(itemValue);
     const isDisabled = itemDisabled || rootDisabled;
@@ -5120,7 +5143,7 @@ var AccordionItem = React65.forwardRef(
       isOpen && /* @__PURE__ */ jsx(
         StyledPanel,
         {
-          panelGap: parseTokenValue21(accordion.spacing.content.gap),
+          panelGap: parseTokenValue22(accordion.spacing.content.gap),
           children: /* @__PURE__ */ jsx(
             Typography,
             {
@@ -5132,17 +5155,17 @@ var AccordionItem = React65.forwardRef(
         }
       ),
       /* @__PURE__ */ jsx(
-        StyledDivider,
+        StyledDivider2,
         {
           dividerColor: theme2.tokens.semantics.colour.border.default,
-          dividerMarginTop: parseTokenValue21(accordion.spacing.gap)
+          dividerMarginTop: parseTokenValue22(accordion.spacing.gap)
         }
       )
     ] }));
   }
 );
 AccordionItem.displayName = "Accordion.Item";
-var AccordionRoot = React65.forwardRef(
+var AccordionRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -5164,11 +5187,11 @@ var AccordionRoot = React65.forwardRef(
     const theme2 = useTheme();
     const { accordion } = theme2.tokens.components;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React65.useState(
+    const [internalValue, setInternalValue] = React66.useState(
       defaultValue != null ? defaultValue : []
     );
     const openValues = isControlled ? controlledValue : internalValue;
-    const toggle = React65.useCallback(
+    const toggle = React66.useCallback(
       (itemValue) => {
         const isOpen = openValues.includes(itemValue);
         let next;
@@ -5186,7 +5209,7 @@ var AccordionRoot = React65.forwardRef(
       },
       [openValues, multiple, isControlled, onValueChange]
     );
-    const ctx = React65.useMemo(
+    const ctx = React66.useMemo(
       () => ({ openValues, toggle, disabled, size }),
       [openValues, toggle, disabled, size]
     );
@@ -5194,7 +5217,7 @@ var AccordionRoot = React65.forwardRef(
       StyledRoot7,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue21(accordion.spacing.gap)
+        rootGap: parseTokenValue22(accordion.spacing.gap)
       }, rest), {
         children
       })
@@ -5316,7 +5339,7 @@ function buildDelayedEntering(variant, delayMs) {
   b.delay(delayMs);
   return b;
 }
-var Animated5 = React65.forwardRef(
+var Animated5 = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "fade", delay, exit = true, children } = _b, props = __objRest(_b, ["variant", "delay", "exit", "children"]);
     const delayMs = delay !== void 0 && delay > 0 ? Math.round(delay * 1e3) : 0;
@@ -5334,7 +5357,7 @@ var Animated5 = React65.forwardRef(
   }
 );
 Animated5.displayName = "Animated";
-var DrawerContext = React65.createContext({
+var DrawerContext = React66.createContext({
   isOpen: false,
   modalVisible: false,
   openDrawer: () => {
@@ -5344,9 +5367,9 @@ var DrawerContext = React65.createContext({
   onExitComplete: () => {
   }
 });
-var useDrawerContext = () => React65.useContext(DrawerContext);
+var useDrawerContext = () => React66.useContext(DrawerContext);
 var FADE_DURATION = 220;
-var DrawerOverlay = React65.forwardRef(({ accessible = false }, _ref) => {
+var DrawerOverlay = React66.forwardRef(({ accessible = false }, _ref) => {
   const theme2 = useTheme();
   const { isOpen, closeDrawer } = useDrawerContext();
   const opacity = useRef(new Animated.Value(0)).current;
@@ -5380,19 +5403,19 @@ var DrawerOverlay = React65.forwardRef(({ accessible = false }, _ref) => {
   );
 });
 DrawerOverlay.displayName = "Drawer.Overlay";
-var DrawerDragContext = React65.createContext(null);
-var useDrawerDragContext = () => React65.useContext(DrawerDragContext);
+var DrawerDragContext = React66.createContext(null);
+var useDrawerDragContext = () => React66.useContext(DrawerDragContext);
 var DrawerMeasureContext = createContext(null);
 var useDrawerMeasureContext = () => useContext(DrawerMeasureContext);
-var DrawerFooterContext = React65.createContext(false);
-var useDrawerFooterContext = () => React65.useContext(DrawerFooterContext);
-var DrawerHeaderContext = React65.createContext(null);
-var useDrawerHeaderContext = () => React65.useContext(DrawerHeaderContext);
+var DrawerFooterContext = React66.createContext(false);
+var useDrawerFooterContext = () => React66.useContext(DrawerFooterContext);
+var DrawerHeaderContext = React66.createContext(null);
+var useDrawerHeaderContext = () => React66.useContext(DrawerHeaderContext);
 var OPEN_DURATION = 320;
 var CLOSE_DURATION = 220;
 var DISMISS_THRESHOLD = 80;
-var parseTokenValue22 = (value) => parseFloat(value);
-var StyledPanel2 = styled50(View)(
+var parseTokenValue23 = (value) => parseFloat(value);
+var StyledPanel2 = styled51(View)(
   ({
     panelBorderRadius,
     panelBgColor,
@@ -5423,7 +5446,7 @@ var StyledPanel2 = styled50(View)(
     overflow: "hidden"
   })
 );
-var DrawerContent = React65.forwardRef(
+var DrawerContent = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     var _a2;
@@ -5618,11 +5641,11 @@ var DrawerContent = React65.forwardRef(
       () => ({ panHandlers: panResponder.panHandlers }),
       [panResponder.panHandlers]
     );
-    const hasFooter = React65.Children.toArray(children).some(
-      (child) => React65.isValidElement(child) && child.type.displayName === "Drawer.Footer"
+    const hasFooter = React66.Children.toArray(children).some(
+      (child) => React66.isValidElement(child) && child.type.displayName === "Drawer.Footer"
     );
-    const headerChild = React65.Children.toArray(children).find(
-      (child) => React65.isValidElement(child) && child.type.displayName === "Drawer.Header"
+    const headerChild = React66.Children.toArray(children).find(
+      (child) => React66.isValidElement(child) && child.type.displayName === "Drawer.Header"
     );
     const headerContextValue = headerChild != null ? {
       variant: (_a2 = headerChild.props.variant) != null ? _a2 : "titleAndText"
@@ -5640,15 +5663,15 @@ var DrawerContent = React65.forwardRef(
           __spreadProps(__spreadValues({
             ref,
             onLayout,
-            panelBorderRadius: parseTokenValue22(drawer.borderRadius.top),
+            panelBorderRadius: parseTokenValue23(drawer.borderRadius.top),
             panelBgColor: colour.background.container.default,
-            panelMaxWidth: parseTokenValue22(drawer.size.maxWidth),
+            panelMaxWidth: parseTokenValue23(drawer.size.maxWidth),
             panelFlex: panelHeight > 0 ? 1 : void 0,
-            panelBorderWidth: parseTokenValue22(dimensions3.borderWidth.sm),
+            panelBorderWidth: parseTokenValue23(dimensions3.borderWidth.sm),
             panelBorderColor: colour.border.default,
             panelShadowColor: modal.shadow.color,
-            panelShadowOffsetY: parseTokenValue22(modal.shadow.offsetY),
-            panelShadowBlur: parseTokenValue22(modal.shadow.blur),
+            panelShadowOffsetY: parseTokenValue23(modal.shadow.offsetY),
+            panelShadowBlur: parseTokenValue23(modal.shadow.blur),
             accessible: true,
             accessibilityRole: "none",
             accessibilityViewIsModal: true
@@ -5669,8 +5692,8 @@ var styles = StyleSheet.create({
     right: 0
   }
 });
-var parseTokenValue23 = (value) => parseFloat(value);
-var StyledWrapper = styled50(View)(
+var parseTokenValue24 = (value) => parseFloat(value);
+var StyledWrapper = styled51(View)(
   ({ grabberPaddingTop }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -5679,13 +5702,13 @@ var StyledWrapper = styled50(View)(
     paddingBottom: grabberPaddingTop
   })
 );
-var StyledBar = styled50(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+var StyledBar = styled51(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
   width: barWidth,
   height: barHeight,
   borderRadius: barBorderRadius,
   backgroundColor: barColor
 }));
-var DrawerGrabber = React65.forwardRef(
+var DrawerGrabber = React66.forwardRef(
   (props, ref) => {
     var _a;
     const theme2 = useTheme();
@@ -5696,14 +5719,14 @@ var DrawerGrabber = React65.forwardRef(
       StyledWrapper,
       __spreadProps(__spreadValues(__spreadValues({
         ref,
-        grabberPaddingTop: parseTokenValue23(drawer.spacing.grabber.paddingTop)
+        grabberPaddingTop: parseTokenValue24(drawer.spacing.grabber.paddingTop)
       }, (_a = dragContext == null ? void 0 : dragContext.panHandlers) != null ? _a : {}), props), {
         children: /* @__PURE__ */ jsx(
           StyledBar,
           {
-            barWidth: parseTokenValue23(grabber.size.bar.width),
-            barHeight: parseTokenValue23(grabber.size.bar.height),
-            barBorderRadius: parseTokenValue23(borderRadius.round),
+            barWidth: parseTokenValue24(grabber.size.bar.width),
+            barHeight: parseTokenValue24(grabber.size.bar.height),
+            barBorderRadius: parseTokenValue24(borderRadius.round),
             barColor: grabber.colour.background.default
           }
         )
@@ -5712,8 +5735,8 @@ var DrawerGrabber = React65.forwardRef(
   }
 );
 DrawerGrabber.displayName = "Drawer.Grabber";
-var parseTokenValue24 = (value) => parseFloat(value);
-var DrawerClose = React65.forwardRef(
+var parseTokenValue25 = (value) => parseFloat(value);
+var DrawerClose = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { "aria-label": ariaLabel = "Close" } = _b, props = __objRest(_b, ["aria-label"]);
     const theme2 = useTheme();
@@ -5740,8 +5763,8 @@ var DrawerClose = React65.forwardRef(
           style: [
             styles2.floating,
             {
-              top: parseTokenValue24(spacing.close.top.md),
-              right: parseTokenValue24(spacing.close.right.md)
+              top: parseTokenValue25(spacing.close.top.md),
+              right: parseTokenValue25(spacing.close.right.md)
             }
           ]
         }, props), {
@@ -5759,8 +5782,8 @@ var styles2 = StyleSheet.create({
     zIndex: 1
   }
 });
-var parseTokenValue25 = (value) => parseFloat(value);
-var StyledGrabberWrapper = styled50(View)(
+var parseTokenValue26 = (value) => parseFloat(value);
+var StyledGrabberWrapper = styled51(View)(
   ({ grabberPaddingTop }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -5768,13 +5791,13 @@ var StyledGrabberWrapper = styled50(View)(
     paddingTop: grabberPaddingTop
   })
 );
-var StyledGrabberBar = styled50(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+var StyledGrabberBar = styled51(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
   width: barWidth,
   height: barHeight,
   borderRadius: barBorderRadius,
   backgroundColor: barColor
 }));
-var StyledHeader = styled50(View)(
+var StyledHeader = styled51(View)(
   ({
     headerPaddingHorizontal,
     headerPaddingBottom,
@@ -5794,7 +5817,7 @@ var StyledHeader = styled50(View)(
     borderBottomColor: headerBorderColor
   } : {}), headerBgColor ? { backgroundColor: headerBgColor } : {})
 );
-var StyledImageContainer = styled50(View)(({ imageHeight, imageBorderRadius }) => ({
+var StyledImageContainer = styled51(View)(({ imageHeight, imageBorderRadius }) => ({
   position: "relative",
   width: "100%",
   height: imageHeight,
@@ -5802,20 +5825,20 @@ var StyledImageContainer = styled50(View)(({ imageHeight, imageBorderRadius }) =
   overflow: "hidden",
   flexShrink: 0
 }));
-var StyledImageCloseWrapper = styled50(View)(({ closeTop, closeRight }) => ({
+var StyledImageCloseWrapper = styled51(View)(({ closeTop, closeRight }) => ({
   position: "absolute",
   top: closeTop,
   right: closeRight,
   zIndex: 1
 }));
-var StyledTitleRow = styled50(View)(({ rowGap }) => ({
+var StyledTitleRow = styled51(View)(({ rowGap }) => ({
   flexDirection: "row",
   gap: rowGap,
   alignItems: "flex-start",
   width: "100%",
   flexShrink: 0
 }));
-var StyledTitleContent = styled50(View)(
+var StyledTitleContent = styled51(View)(
   ({ contentGap }) => ({
     flexDirection: "column",
     gap: contentGap,
@@ -5826,8 +5849,8 @@ var StyledTitleContent = styled50(View)(
 function splitChildren(children) {
   let closeChild = null;
   const otherChildren = [];
-  React65.Children.forEach(children, (child) => {
-    if (React65.isValidElement(child) && child.type === DrawerClose) {
+  React66.Children.forEach(children, (child) => {
+    if (React66.isValidElement(child) && child.type === DrawerClose) {
       closeChild = child;
     } else {
       otherChildren.push(child);
@@ -5835,7 +5858,7 @@ function splitChildren(children) {
   });
   return { closeChild, otherChildren };
 }
-var DrawerHeader = React65.forwardRef(
+var DrawerHeader = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "titleAndText", imageSource, children } = _b, props = __objRest(_b, ["variant", "imageSource", "children"]);
     var _a2, _b2, _c, _d, _e, _f;
@@ -5851,8 +5874,8 @@ var DrawerHeader = React65.forwardRef(
       content = /* @__PURE__ */ jsxs(
         StyledImageContainer,
         {
-          imageHeight: parseTokenValue25(drawer.size.imageHeader.image.maxHeight),
-          imageBorderRadius: parseTokenValue25(
+          imageHeight: parseTokenValue26(drawer.size.imageHeader.image.maxHeight),
+          imageBorderRadius: parseTokenValue26(
             drawer.drawerHeader.borderRadius.image.default
           ),
           children: [
@@ -5867,8 +5890,8 @@ var DrawerHeader = React65.forwardRef(
             closeChild && /* @__PURE__ */ jsx(
               StyledImageCloseWrapper,
               {
-                closeTop: parseTokenValue25(drawer.spacing.close.top.md),
-                closeRight: parseTokenValue25(drawer.spacing.close.right.md),
+                closeTop: parseTokenValue26(drawer.spacing.close.top.md),
+                closeRight: parseTokenValue26(drawer.spacing.close.right.md),
                 children: closeChild
               }
             )
@@ -5878,8 +5901,8 @@ var DrawerHeader = React65.forwardRef(
     } else {
       const containerGap = (_b2 = (_a2 = headerSpacing.container) == null ? void 0 : _a2.gap) != null ? _b2 : "0";
       const contentGap = (_e = (_d = (_c = headerSpacing.container) == null ? void 0 : _c.content) == null ? void 0 : _d.gap) != null ? _e : "0";
-      content = /* @__PURE__ */ jsxs(StyledTitleRow, { rowGap: parseTokenValue25(containerGap), children: [
-        /* @__PURE__ */ jsx(StyledTitleContent, { contentGap: parseTokenValue25(contentGap), children: otherChildren }),
+      content = /* @__PURE__ */ jsxs(StyledTitleRow, { rowGap: parseTokenValue26(containerGap), children: [
+        /* @__PURE__ */ jsx(StyledTitleContent, { contentGap: parseTokenValue26(contentGap), children: otherChildren }),
         closeChild
       ] });
     }
@@ -5887,12 +5910,12 @@ var DrawerHeader = React65.forwardRef(
       StyledHeader,
       __spreadProps(__spreadValues({
         ref,
-        headerPaddingHorizontal: parseTokenValue25(
+        headerPaddingHorizontal: parseTokenValue26(
           headerSpacing.horizontalPadding
         ),
-        headerPaddingBottom: parseTokenValue25(headerSpacing.bottomPadding),
-        headerGap: parseTokenValue25(headerSpacing.gap),
-        headerBorderBottomWidth: variant === "titleAndText" ? parseTokenValue25(dimensions3.borderWidth.sm) : void 0,
+        headerPaddingBottom: parseTokenValue26(headerSpacing.bottomPadding),
+        headerGap: parseTokenValue26(headerSpacing.gap),
+        headerBorderBottomWidth: variant === "titleAndText" ? parseTokenValue26(dimensions3.borderWidth.sm) : void 0,
         headerBorderColor: variant === "titleAndText" ? colour.border.default : void 0,
         headerBgColor: variant === "fullBleed" ? drawer.drawerHeader.colour.background.fullBleed : void 0
       }, props), {
@@ -5900,16 +5923,16 @@ var DrawerHeader = React65.forwardRef(
           /* @__PURE__ */ jsx(
             StyledGrabberWrapper,
             __spreadProps(__spreadValues({
-              grabberPaddingTop: parseTokenValue25(
+              grabberPaddingTop: parseTokenValue26(
                 drawer.spacing.grabber.paddingTop
               )
             }, (_f = dragContext == null ? void 0 : dragContext.panHandlers) != null ? _f : {}), {
               children: /* @__PURE__ */ jsx(
                 StyledGrabberBar,
                 {
-                  barWidth: parseTokenValue25(grabber.size.bar.width),
-                  barHeight: parseTokenValue25(grabber.size.bar.height),
-                  barBorderRadius: parseTokenValue25(dimensions3.borderRadius.round),
+                  barWidth: parseTokenValue26(grabber.size.bar.width),
+                  barHeight: parseTokenValue26(grabber.size.bar.height),
+                  barBorderRadius: parseTokenValue26(dimensions3.borderRadius.round),
                   barColor: grabber.colour.background.default
                 }
               )
@@ -5922,7 +5945,7 @@ var DrawerHeader = React65.forwardRef(
   }
 );
 DrawerHeader.displayName = "Drawer.Header";
-var DrawerTitle = React65.forwardRef(
+var DrawerTitle = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -5938,7 +5961,7 @@ var DrawerTitle = React65.forwardRef(
   }
 );
 DrawerTitle.displayName = "Drawer.Title";
-var DrawerDescription = React65.forwardRef(
+var DrawerDescription = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -5954,8 +5977,8 @@ var DrawerDescription = React65.forwardRef(
   }
 );
 DrawerDescription.displayName = "Drawer.Description";
-var parseTokenValue26 = (value) => parseFloat(value);
-var StyledScrollView = styled50(ScrollView)(
+var parseTokenValue27 = (value) => parseFloat(value);
+var StyledScrollView = styled51(ScrollView)(
   ({
     bodyPaddingHorizontal,
     bodyPaddingRight,
@@ -5971,7 +5994,7 @@ var StyledScrollView = styled50(ScrollView)(
     paddingBottom: bodyPaddingBottom
   })
 );
-var DrawerBody = React65.forwardRef(
+var DrawerBody = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, contentContainerStyle, onContentSizeChange } = _b, props = __objRest(_b, ["children", "contentContainerStyle", "onContentSizeChange"]);
     const theme2 = useTheme();
@@ -5989,12 +6012,12 @@ var DrawerBody = React65.forwardRef(
       },
       [measureContext, onContentSizeChange]
     );
-    const gap = parseTokenValue26(content.slot.gap);
-    const horizontalPadding = parseTokenValue26(content.slot.horizontalPadding);
-    const topPadding = parseTokenValue26(content.slot.verticalPadding);
+    const gap = parseTokenValue27(content.slot.gap);
+    const horizontalPadding = parseTokenValue27(content.slot.horizontalPadding);
+    const topPadding = parseTokenValue27(content.slot.verticalPadding);
     const bodyMaxHeight = windowHeight - 300;
-    const paddingRight = headerContext === null ? parseTokenValue26(spacing.close.right.md) + parseTokenValue26(buttons.size.sm.height) : horizontalPadding;
-    const bodyPaddingBottom = !footerContext ? parseTokenValue26(theme2.tokens.semantics.dimensions.spacing["2xl"]) : 0;
+    const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.height) : horizontalPadding;
+    const bodyPaddingBottom = !footerContext ? parseTokenValue27(theme2.tokens.semantics.dimensions.spacing["2xl"]) : 0;
     return /* @__PURE__ */ jsx(
       StyledScrollView,
       __spreadProps(__spreadValues({
@@ -6020,14 +6043,14 @@ var DrawerBody = React65.forwardRef(
   }
 );
 DrawerBody.displayName = "Drawer.Body";
-var parseTokenValue27 = (value) => parseFloat(value);
-var StyledFooter = styled50(View)(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
+var parseTokenValue28 = (value) => parseFloat(value);
+var StyledFooter = styled51(View)(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
   flexShrink: 0,
   paddingTop: footerPaddingTop,
   paddingHorizontal: footerPaddingHorizontal,
   paddingBottom: footerPaddingBottom
 }));
-var DrawerFooter = React65.forwardRef(
+var DrawerFooter = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
     const theme2 = useTheme();
@@ -6037,11 +6060,11 @@ var DrawerFooter = React65.forwardRef(
       StyledFooter,
       __spreadProps(__spreadValues({
         ref,
-        footerPaddingTop: parseTokenValue27(spacing.footer.topPaddding),
-        footerPaddingHorizontal: parseTokenValue27(
+        footerPaddingTop: parseTokenValue28(spacing.footer.topPaddding),
+        footerPaddingHorizontal: parseTokenValue28(
           spacing.footer.horizontalPadding
         ),
-        footerPaddingBottom: parseTokenValue27(spacing.bottomPadding) + insets.bottom
+        footerPaddingBottom: parseTokenValue28(spacing.bottomPadding) + insets.bottom
       }, props), {
         children
       })
@@ -6049,7 +6072,7 @@ var DrawerFooter = React65.forwardRef(
   }
 );
 DrawerFooter.displayName = "Drawer.Footer";
-var DrawerRoot = React65.forwardRef(
+var DrawerRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       open: controlledOpen,
@@ -6090,15 +6113,15 @@ var DrawerRoot = React65.forwardRef(
   }
 );
 DrawerRoot.displayName = "Drawer";
-var DrawerTrigger = React65.forwardRef(
+var DrawerTrigger = React66.forwardRef(
   ({ children }, ref) => {
-    const { openDrawer } = React65.useContext(DrawerContext);
+    const { openDrawer } = React66.useContext(DrawerContext);
     return /* @__PURE__ */ jsx(Slot, { ref, onPress: openDrawer, children });
   }
 );
 DrawerTrigger.displayName = "Drawer.Trigger";
 var DrawerPortal = ({ children, topContent }) => {
-  const { modalVisible, closeDrawer } = React65.useContext(DrawerContext);
+  const { modalVisible, closeDrawer } = React66.useContext(DrawerContext);
   if (!modalVisible) return null;
   return /* @__PURE__ */ jsx(
     Modal,
@@ -6135,8 +6158,8 @@ var styles3 = StyleSheet.create({
     flex: 1
   }
 });
-var parseTokenValue28 = (value) => parseFloat(value);
-var StyledDockRoot = styled50(View)(
+var parseTokenValue29 = (value) => parseFloat(value);
+var StyledDockRoot = styled51(View)(
   ({
     dockBgColor,
     dockBorderTopWidth,
@@ -6154,7 +6177,7 @@ var StyledDockRoot = styled50(View)(
     paddingHorizontal: dockPaddingHorizontal
   })
 );
-var StyledStackedInner = styled50(View)(
+var StyledStackedInner = styled51(View)(
   ({ innerGap }) => ({
     alignItems: "center",
     gap: innerGap,
@@ -6162,21 +6185,21 @@ var StyledStackedInner = styled50(View)(
     maxWidth: 520
   })
 );
-var StyledButtonGroup = styled50(View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
+var StyledButtonGroup = styled51(View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
   flexDirection: groupDirection,
   alignItems: groupAlign,
   justifyContent: groupJustify,
   gap: groupGap,
   width: "100%"
 }, groupDirection === "column" ? { maxWidth: 520 } : {}));
-var ButtonDock = React65.forwardRef(
+var ButtonDock = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "stacked", leadingContent, description, children } = _b, rest = __objRest(_b, ["variant", "leadingContent", "description", "children"]);
     const theme2 = useTheme();
     const { buttonDock, buttonGroup } = theme2.tokens.components;
     const { dimensions: dimensions3, typography } = theme2.tokens.semantics;
     const isStacked = variant === "stacked";
-    const groupGap = parseTokenValue28(
+    const groupGap = parseTokenValue29(
       isStacked ? buttonGroup.spacing.stacked.gap : buttonGroup.spacing.sideBySide.gap
     );
     return /* @__PURE__ */ jsx(
@@ -6184,19 +6207,19 @@ var ButtonDock = React65.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         dockBgColor: buttonDock.colour.background,
-        dockBorderTopWidth: parseTokenValue28(dimensions3.borderWidth.sm),
+        dockBorderTopWidth: parseTokenValue29(dimensions3.borderWidth.sm),
         dockBorderTopColor: buttonDock.colour.border,
-        dockPaddingVertical: parseTokenValue28(
+        dockPaddingVertical: parseTokenValue29(
           buttonDock.spacing[variant].mobile.topPadding
         ),
-        dockPaddingHorizontal: parseTokenValue28(
+        dockPaddingHorizontal: parseTokenValue29(
           buttonDock.spacing[variant].mobile.horizontalPadding
         )
       }, rest), {
         children: isStacked ? /* @__PURE__ */ jsxs(
           StyledStackedInner,
           {
-            innerGap: parseTokenValue28(buttonGroup.spacing.gap),
+            innerGap: parseTokenValue29(buttonGroup.spacing.gap),
             children: [
               leadingContent,
               /* @__PURE__ */ jsx(
@@ -6235,21 +6258,21 @@ var ButtonDock = React65.forwardRef(
   }
 );
 ButtonDock.displayName = "ButtonDock";
-var parseTokenValue29 = (value) => parseFloat(value);
-var StyledGroupRoot = styled50(View)(({ rootGap }) => ({
+var parseTokenValue30 = (value) => parseFloat(value);
+var StyledGroupRoot = styled51(View)(({ rootGap }) => ({
   gap: rootGap,
   alignItems: "center",
   width: "100%"
 }));
-var StyledButtonRow = styled50(View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
+var StyledButtonRow = styled51(View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
   flexDirection: rowDirection,
   width: "100%",
   gap: rowGap
 }, rowAlign ? { alignItems: rowAlign } : {}));
-var StyledChildSlot = styled50(View)(
+var StyledChildSlot = styled51(View)(
   ({ slotInline }) => __spreadValues({}, slotInline ? { flex: 1, minWidth: 0 } : { width: "100%", alignSelf: "stretch" })
 );
-var ButtonGroup = React65.forwardRef(
+var ButtonGroup = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { layout = "stacked", description, children } = _b, rest = __objRest(_b, ["layout", "description", "children"]);
     const theme2 = useTheme();
@@ -6260,7 +6283,7 @@ var ButtonGroup = React65.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         accessibilityRole: "none",
-        rootGap: parseTokenValue29(buttonGroup.spacing.gap)
+        rootGap: parseTokenValue30(buttonGroup.spacing.gap)
       }, rest), {
         children: [
           /* @__PURE__ */ jsx(
@@ -6268,12 +6291,12 @@ var ButtonGroup = React65.forwardRef(
             {
               rowDirection: isInline ? "row" : "column",
               rowAlign: isInline ? "center" : void 0,
-              rowGap: parseTokenValue29(
+              rowGap: parseTokenValue30(
                 isInline ? buttonGroup.spacing.sideBySide.gap : buttonGroup.spacing.stacked.gap
               ),
-              children: React65.Children.map(children, (child, index) => {
-                if (!React65.isValidElement(child)) return child;
-                return /* @__PURE__ */ jsx(StyledChildSlot, { slotInline: isInline, children: React65.cloneElement(
+              children: React66.Children.map(children, (child, index) => {
+                if (!React66.isValidElement(child)) return child;
+                return /* @__PURE__ */ jsx(StyledChildSlot, { slotInline: isInline, children: React66.cloneElement(
                   child,
                   {
                     fullWidth: true
@@ -6297,8 +6320,8 @@ var ButtonGroup = React65.forwardRef(
   }
 );
 ButtonGroup.displayName = "ButtonGroup";
-var parseTokenValue30 = (value) => parseFloat(value);
-var StyledRootPressable = styled50(Pressable)(
+var parseTokenValue31 = (value) => parseFloat(value);
+var StyledRootPressable = styled51(Pressable)(
   ({
     rootFlexAlign,
     rootGap,
@@ -6306,6 +6329,7 @@ var StyledRootPressable = styled50(Pressable)(
     rootPaddingVertical,
     rootPaddingHorizontal,
     rootMaxWidth,
+    rootFitContent,
     rootBgColor,
     rootBorderWidth,
     rootBorderColor,
@@ -6315,9 +6339,9 @@ var StyledRootPressable = styled50(Pressable)(
     alignItems: rootFlexAlign,
     gap: rootGap,
     opacity: rootOpacity
-  }, rootPaddingVertical !== void 0 ? { paddingVertical: rootPaddingVertical } : {}), rootPaddingHorizontal !== void 0 ? { paddingHorizontal: rootPaddingHorizontal } : {}), rootMaxWidth !== void 0 ? { maxWidth: rootMaxWidth, width: "100%" } : {}), rootBgColor ? { backgroundColor: rootBgColor } : {}), rootBorderWidth !== void 0 ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor } : {}), rootBorderRadius !== void 0 ? { borderRadius: rootBorderRadius } : {})
+  }, rootPaddingVertical !== void 0 ? { paddingVertical: rootPaddingVertical } : {}), rootPaddingHorizontal !== void 0 ? { paddingHorizontal: rootPaddingHorizontal } : {}), rootMaxWidth !== void 0 ? rootFitContent ? { maxWidth: rootMaxWidth, alignSelf: "flex-start" } : { maxWidth: rootMaxWidth, width: "100%" } : {}), rootBgColor ? { backgroundColor: rootBgColor } : {}), rootBorderWidth !== void 0 ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor } : {}), rootBorderRadius !== void 0 ? { borderRadius: rootBorderRadius } : {})
 );
-var StyledControl = styled50(View)(
+var StyledControl = styled51(View)(
   ({
     controlSize,
     controlBorderWidth,
@@ -6336,19 +6360,19 @@ var StyledControl = styled50(View)(
     justifyContent: "center"
   })
 );
-var StyledContent2 = styled50(View)(({ contentGap }) => ({
+var StyledContent2 = styled51(View)(({ contentGap, contentFlex }) => ({
   flexDirection: "column",
   gap: contentGap,
-  flex: 1,
+  flex: contentFlex,
   minWidth: 0
 }));
-var StyledIllustration = styled50(View)(({ illustrationSize }) => ({
+var StyledIllustration = styled51(View)(({ illustrationSize }) => ({
   flexShrink: 0,
   width: illustrationSize,
   height: illustrationSize,
   overflow: "hidden"
 }));
-var Checkbox = React65.forwardRef(
+var Checkbox = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "standalone",
@@ -6359,6 +6383,7 @@ var Checkbox = React65.forwardRef(
       defaultChecked = false,
       onCheckedChange,
       disabled = false,
+      fitContent = false,
       style
     } = _b, rest = __objRest(_b, [
       "variant",
@@ -6369,13 +6394,14 @@ var Checkbox = React65.forwardRef(
       "defaultChecked",
       "onCheckedChange",
       "disabled",
+      "fitContent",
       "style"
     ]);
     const theme2 = useTheme();
     const { checkbox } = theme2.tokens.components;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = React66.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
     const handlePress = () => {
       if (disabled) return;
@@ -6386,7 +6412,7 @@ var Checkbox = React65.forwardRef(
       onCheckedChange == null ? void 0 : onCheckedChange(next);
     };
     const isTile = variant === "tile";
-    const controlSize = parseTokenValue30(checkbox.size.control.default);
+    const controlSize = parseTokenValue31(checkbox.size.control.default);
     return /* @__PURE__ */ jsxs(
       StyledRootPressable,
       __spreadProps(__spreadValues({
@@ -6396,17 +6422,18 @@ var Checkbox = React65.forwardRef(
         accessibilityRole: "checkbox",
         accessibilityState: { checked: isChecked, disabled },
         rootFlexAlign: isTile ? "center" : "flex-start",
-        rootGap: parseTokenValue30(
+        rootGap: parseTokenValue31(
           isTile ? checkbox.checkboxTile.spacing.gap : checkbox.spacing.gap
         ),
         rootOpacity: disabled ? parseFloat(theme2.tokens.primitives.opacity["40"]) : 1,
-        rootPaddingVertical: isTile ? parseTokenValue30(checkbox.checkboxTile.spacing.verticalPadding) : void 0,
-        rootPaddingHorizontal: isTile ? parseTokenValue30(checkbox.checkboxTile.spacing.horizontalPadding) : void 0,
-        rootMaxWidth: isTile ? parseTokenValue30(checkbox.checkboxTile.size.maxWidth) : void 0,
+        rootPaddingVertical: isTile ? parseTokenValue31(checkbox.checkboxTile.spacing.verticalPadding) : void 0,
+        rootPaddingHorizontal: isTile ? parseTokenValue31(checkbox.checkboxTile.spacing.horizontalPadding) : void 0,
+        rootMaxWidth: isTile ? parseTokenValue31(checkbox.checkboxTile.size.maxWidth) : void 0,
+        rootFitContent: isTile && fitContent,
         rootBgColor: isTile ? isChecked ? checkbox.checkboxTile.colour.background.selected : checkbox.checkboxTile.colour.background.default : void 0,
-        rootBorderWidth: isTile ? parseTokenValue30(checkbox.checkboxTile.borderWidth.default) : void 0,
+        rootBorderWidth: isTile ? parseTokenValue31(checkbox.checkboxTile.borderWidth.default) : void 0,
         rootBorderColor: isTile ? isChecked ? checkbox.checkboxTile.colour.border.selected : checkbox.checkboxTile.colour.border.default : void 0,
-        rootBorderRadius: isTile ? parseTokenValue30(checkbox.checkboxTile.borderRadius.default) : void 0,
+        rootBorderRadius: isTile ? parseTokenValue31(checkbox.checkboxTile.borderRadius.default) : void 0,
         style: typeof style === "function" ? void 0 : style
       }, rest), {
         children: [
@@ -6414,9 +6441,9 @@ var Checkbox = React65.forwardRef(
             StyledControl,
             {
               controlSize,
-              controlBorderWidth: parseTokenValue30(checkbox.control.border.default),
+              controlBorderWidth: parseTokenValue31(checkbox.control.border.default),
               controlBorderColor: isChecked ? checkbox.colour.background.selected : checkbox.colour.border.default,
-              controlBorderRadius: parseTokenValue30(dimensions3.borderRadius.xs),
+              controlBorderRadius: parseTokenValue31(dimensions3.borderRadius.xs),
               controlBgColor: isChecked ? checkbox.colour.background.selected : "transparent",
               children: isChecked && /* @__PURE__ */ jsx(Icon, { icon: Check_default, size: "xs", colour: "alt" })
             }
@@ -6424,7 +6451,8 @@ var Checkbox = React65.forwardRef(
           /* @__PURE__ */ jsxs(
             StyledContent2,
             {
-              contentGap: parseTokenValue30(checkbox.spacing.content.gap),
+              contentGap: parseTokenValue31(checkbox.spacing.content.gap),
+              contentFlex: isTile && fitContent ? 0 : 1,
               children: [
                 label && /* @__PURE__ */ jsx(
                   Typography,
@@ -6448,7 +6476,7 @@ var Checkbox = React65.forwardRef(
           isTile && illustration && /* @__PURE__ */ jsx(
             StyledIllustration,
             {
-              illustrationSize: parseTokenValue30(
+              illustrationSize: parseTokenValue31(
                 checkbox.checkboxTile.size.illustration.default
               ),
               children: illustration
@@ -6460,30 +6488,42 @@ var Checkbox = React65.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-var parseTokenValue31 = (value) => parseFloat(value);
-var StyledGroup = styled50(View)(({ groupDirection, groupGap }) => ({
+var parseTokenValue32 = (value) => parseFloat(value);
+var StyledGroup = styled51(View)(({ groupDirection, groupGap, groupWrap }) => ({
   flexDirection: groupDirection,
-  gap: groupGap
+  gap: groupGap,
+  flexWrap: groupWrap ? "wrap" : "nowrap"
 }));
-var CheckboxGroup = React65.forwardRef(
+var CheckboxGroup = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { orientation = "vertical", children } = _b, rest = __objRest(_b, ["orientation", "children"]);
     const theme2 = useTheme();
     const { checkbox } = theme2.tokens.components;
+    const isHorizontal = orientation === "horizontal";
+    const renderChildren = () => isHorizontal ? React66.Children.map(children, (child) => {
+      var _a2;
+      if (!React66.isValidElement(child)) return child;
+      const childProps = child.props;
+      return React66.cloneElement(
+        child,
+        { fitContent: (_a2 = childProps.fitContent) != null ? _a2 : true }
+      );
+    }) : children;
     return /* @__PURE__ */ jsx(
       StyledGroup,
       __spreadProps(__spreadValues({
         ref,
-        groupDirection: orientation === "horizontal" ? "row" : "column",
-        groupGap: parseTokenValue31(checkbox.spacing.gap)
+        groupDirection: isHorizontal ? "row" : "column",
+        groupGap: parseTokenValue32(checkbox.spacing.gap),
+        groupWrap: isHorizontal
       }, rest), {
-        children
+        children: renderChildren()
       })
     );
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-var CopyFieldInput = React65.forwardRef(
+var CopyFieldInput = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onCopy,
@@ -6502,19 +6542,19 @@ var CopyFieldInput = React65.forwardRef(
       "editable",
       "defaultValue"
     ]);
-    const [internalValue, setInternalValue] = React65.useState(
+    const [internalValue, setInternalValue] = React66.useState(
       typeof defaultValue === "string" ? defaultValue : ""
     );
-    const [copied, setCopied] = React65.useState(false);
-    const timeoutRef = React65.useRef(
+    const [copied, setCopied] = React66.useState(false);
+    const timeoutRef = React66.useRef(
       void 0
     );
-    React65.useEffect(() => {
+    React66.useEffect(() => {
       if (defaultValue !== void 0 && value === void 0) {
         setInternalValue(typeof defaultValue === "string" ? defaultValue : "");
       }
     }, [defaultValue, value]);
-    React65.useEffect(() => {
+    React66.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -6574,14 +6614,14 @@ var CopyFieldInput = React65.forwardRef(
   }
 );
 CopyFieldInput.displayName = "CopyField.Field";
-var parseTokenValue32 = (value) => parseFloat(value);
-var StyledRoot8 = styled50(View)(({ theme: theme2 }) => {
+var parseTokenValue33 = (value) => parseFloat(value);
+var StyledRoot8 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
-    gap: parseTokenValue32(spacing.gap)
+    gap: parseTokenValue33(spacing.gap)
   };
 });
-var CopyFieldRoot = React65.forwardRef(
+var CopyFieldRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -6649,20 +6689,20 @@ var useCopyField = (options = {}) => {
     onCopy: handleCopy
   };
 };
-var FilterTabContext = React65.createContext({
+var FilterTabContext = React66.createContext({
   size: "sm",
   selectedValues: [],
   toggle: () => {
   }
 });
-var parseTokenValue33 = (value) => parseFloat(value);
-var StyledRoot9 = styled50(View)(({ rootGap }) => ({
+var parseTokenValue34 = (value) => parseFloat(value);
+var StyledRoot9 = styled51(View)(({ rootGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rootGap,
   flexWrap: "nowrap"
 }));
-var StyledItem2 = styled50(Pressable)(
+var StyledItem2 = styled51(Pressable)(
   ({
     itemHeight,
     itemMinWidth,
@@ -6688,7 +6728,7 @@ var StyledItem2 = styled50(Pressable)(
     flexShrink: 0
   })
 );
-var FilterTabItem = React65.forwardRef(
+var FilterTabItem = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -6708,16 +6748,16 @@ var FilterTabItem = React65.forwardRef(
       "accessibilityLabel"
     ]);
     const theme2 = useTheme();
-    const { size, selectedValues, toggle } = React65.useContext(FilterTabContext);
+    const { size, selectedValues, toggle } = React66.useContext(FilterTabContext);
     const isSelected = selectedValues.includes(value);
     const isIconOnly = !!IconOnlyIcon && !label;
     const isActive = isSelected && !disabled;
     const { tabItem } = theme2.tokens.components.filterTabs;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
-    const height = parseTokenValue33(
+    const height = parseTokenValue34(
       size === "lg" ? tabItem.size.large.height : tabItem.size.small.height
     );
-    const minWidth = parseTokenValue33(tabItem.size.small.minWidth);
+    const minWidth = parseTokenValue34(tabItem.size.small.minWidth);
     const iconColour = isActive ? tabItem.colour.icon.selected : tabItem.colour.icon.unselected;
     return /* @__PURE__ */ jsxs(
       StyledItem2,
@@ -6733,12 +6773,12 @@ var FilterTabItem = React65.forwardRef(
         },
         itemHeight: height,
         itemMinWidth: minWidth,
-        itemPaddingH: parseTokenValue33(tabItem.spacing.horizontalPadding),
-        itemBorderRadius: parseTokenValue33(tabItem.borderRadius.default),
+        itemPaddingH: parseTokenValue34(tabItem.spacing.horizontalPadding),
+        itemBorderRadius: parseTokenValue34(tabItem.borderRadius.default),
         itemBgColor: isActive ? tabItem.colour.background.selected : tabItem.colour.background.default,
         itemOpacity: disabled ? parseFloat(tabItem.opacity.disabled.default) : 1,
         isIconOnly,
-        style: { gap: parseTokenValue33(dimensions3.spacing["2xs"]) }
+        style: { gap: parseTokenValue34(dimensions3.spacing["2xs"]) }
       }, rest), {
         children: [
           isIconOnly && IconOnlyIcon && /* @__PURE__ */ jsx(
@@ -6782,7 +6822,7 @@ var FilterTabItem = React65.forwardRef(
   }
 );
 FilterTabItem.displayName = "FilterTab.Item";
-var FilterTabRoot = React65.forwardRef(
+var FilterTabRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       size = "sm",
@@ -6802,9 +6842,9 @@ var FilterTabRoot = React65.forwardRef(
     const theme2 = useTheme();
     const { filterTabs } = theme2.tokens.components;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React65.useState(defaultValue);
+    const [internalValue, setInternalValue] = React66.useState(defaultValue);
     const selectedValues = isControlled ? controlledValue : internalValue;
-    const toggle = React65.useCallback(
+    const toggle = React66.useCallback(
       (itemValue) => {
         let next;
         if (multiple) {
@@ -6817,7 +6857,7 @@ var FilterTabRoot = React65.forwardRef(
       },
       [selectedValues, isControlled, onValueChange, multiple]
     );
-    const contextValue = React65.useMemo(
+    const contextValue = React66.useMemo(
       () => ({ size, selectedValues, toggle }),
       [size, selectedValues, toggle]
     );
@@ -6825,7 +6865,7 @@ var FilterTabRoot = React65.forwardRef(
       StyledRoot9,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue33(filterTabs.filterTab.spacing.gap)
+        rootGap: parseTokenValue34(filterTabs.filterTab.spacing.gap)
       }, rest), {
         children
       })
@@ -6836,8 +6876,8 @@ FilterTabRoot.displayName = "FilterTab";
 var FilterTab = Object.assign(FilterTabRoot, {
   Item: FilterTabItem
 });
-var parseTokenValue34 = (value) => parseFloat(value);
-var StyledFieldWrapper = styled50(View)(
+var parseTokenValue35 = (value) => parseFloat(value);
+var StyledFieldWrapper = styled51(View)(
   ({
     fieldBgColor,
     fieldBorderColor,
@@ -6861,7 +6901,7 @@ var StyledFieldWrapper = styled50(View)(
     overflow: "hidden"
   }, fullWidth && { flex: 1 })
 );
-var StyledTextInput = styled50(TextInput)(
+var StyledTextInput = styled51(TextInput)(
   ({
     inputColor,
     inputFontFamily,
@@ -6882,12 +6922,12 @@ var StyledTextInput = styled50(TextInput)(
     fontSize: inputFontSize
   }), hasInlineHelp ? { position: "relative", top: -8 } : {})
 );
-var StyledRow = styled50(View)(({ rowGap }) => ({
+var StyledRow = styled51(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rowGap
 }));
-var NumberFieldInput = React65.forwardRef(
+var NumberFieldInput = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       fieldSize = "lg",
@@ -6934,16 +6974,16 @@ var NumberFieldInput = React65.forwardRef(
     const theme2 = useTheme();
     const tokens3 = theme2.tokens.components.numberField;
     const inputTokens3 = theme2.tokens.components.inputs;
-    const [isFocused, setIsFocused] = React65.useState(false);
-    const [isEdited, setIsEdited] = React65.useState(false);
-    const initialValueRef = React65.useRef((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
+    const [isFocused, setIsFocused] = React66.useState(false);
+    const [isEdited, setIsEdited] = React66.useState(false);
+    const initialValueRef = React66.useRef((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
     const isLarge = fieldSize === "lg";
     const sizeTokens = isLarge ? tokens3.spacing.large : tokens3.spacing.small;
     const buttonSize = isLarge ? "lg" : "sm";
     const fieldSizeTokens = isLarge ? tokens3.size.large : tokens3.size.small;
-    const fieldMinWidth = parseTokenValue34(fieldSizeTokens.minWidth);
-    const fieldHeight = parseTokenValue34(fieldSizeTokens.height);
-    const fieldPaddingHorizontal = parseTokenValue34(
+    const fieldMinWidth = parseTokenValue35(fieldSizeTokens.minWidth);
+    const fieldHeight = parseTokenValue35(fieldSizeTokens.height);
+    const fieldPaddingHorizontal = parseTokenValue35(
       inputTokens3.spacing.field.horizontalPadding
     );
     const getBorderColor = () => {
@@ -6953,14 +6993,14 @@ var NumberFieldInput = React65.forwardRef(
       if (isEdited) return tokens3.colour.field.border.edited;
       return tokens3.colour.field.border.default;
     };
-    const handleFocus = React65.useCallback(
+    const handleFocus = React66.useCallback(
       (e) => {
         setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [onFocus]
     );
-    const handleBlur = React65.useCallback(
+    const handleBlur = React66.useCallback(
       (e) => {
         setIsFocused(false);
         if (value != null && onChangeText) {
@@ -6979,7 +7019,7 @@ var NumberFieldInput = React65.forwardRef(
     const numericValue = value != null ? Number(value) : Number(defaultValue != null ? defaultValue : 0);
     const isAtMin = min != null && numericValue <= min;
     const isAtMax = max != null && numericValue >= max;
-    const handleChangeText = React65.useCallback(
+    const handleChangeText = React66.useCallback(
       (text) => {
         setIsEdited(text !== initialValueRef.current);
         onChangeText == null ? void 0 : onChangeText(text);
@@ -6988,7 +7028,7 @@ var NumberFieldInput = React65.forwardRef(
     );
     const typographyToken = fieldSize === "lg" ? tokens3.typography.field.large : tokens3.typography.field.small;
     const resolvedInputFontFamily = typographyToken.fontFamily && typographyToken.fontWeight ? resolveFont(typographyToken.fontFamily, typographyToken.fontWeight).fontFamily : typographyToken.fontFamily;
-    return /* @__PURE__ */ jsxs(StyledRow, { rowGap: parseTokenValue34(sizeTokens.group.gap), children: [
+    return /* @__PURE__ */ jsxs(StyledRow, { rowGap: parseTokenValue35(sizeTokens.group.gap), children: [
       showDecrementButton && /* @__PURE__ */ jsx(
         IconButton,
         {
@@ -7006,7 +7046,7 @@ var NumberFieldInput = React65.forwardRef(
         {
           fieldBgColor: tokens3.colour.field.background.default,
           fieldBorderColor: getBorderColor(),
-          fieldBorderRadius: parseTokenValue34(tokens3.borderRadius.field.default),
+          fieldBorderRadius: parseTokenValue35(tokens3.borderRadius.field.default),
           fieldMinWidth,
           fieldHeight,
           fieldPaddingHorizontal,
@@ -7019,7 +7059,7 @@ var NumberFieldInput = React65.forwardRef(
                 inputColor: tokens3.colour.field.text.default,
                 inputFontFamily: resolvedInputFontFamily,
                 inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
-                inputFontSize: parseTokenValue34(typographyToken.fontSize),
+                inputFontSize: parseTokenValue35(typographyToken.fontSize),
                 hasInlineHelp: !!inlineHelpText,
                 keyboardType: "numeric",
                 editable: !disabled,
@@ -7071,14 +7111,14 @@ var NumberFieldInput = React65.forwardRef(
   }
 );
 NumberFieldInput.displayName = "NumberField.Input";
-var parseTokenValue35 = (value) => parseFloat(value);
-var StyledRoot10 = styled50(View)(({ rootGap, fullWidth }) => __spreadValues({
+var parseTokenValue36 = (value) => parseFloat(value);
+var StyledRoot10 = styled51(View)(({ rootGap, fullWidth }) => __spreadValues({
   gap: rootGap
 }, fullWidth ? { width: "100%" } : { alignItems: "center" }));
-var StyledLabelGroup = styled50(View)(({ labelGap }) => ({
+var StyledLabelGroup = styled51(View)(({ labelGap }) => ({
   gap: labelGap
 }));
-var NumberField = React65.forwardRef(
+var NumberField = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -7123,13 +7163,13 @@ var NumberField = React65.forwardRef(
       StyledRoot10,
       {
         ref,
-        rootGap: parseTokenValue35(sizeTokens.gap),
+        rootGap: parseTokenValue36(sizeTokens.gap),
         fullWidth,
         children: [
           (label || smallLabel) && /* @__PURE__ */ jsxs(
             StyledLabelGroup,
             {
-              labelGap: parseTokenValue35(
+              labelGap: parseTokenValue36(
                 theme2.tokens.components.inputs.spacing.label.gap
               ),
               children: [
@@ -7197,9 +7237,9 @@ var NumberField = React65.forwardRef(
 );
 NumberField.displayName = "NumberField";
 var HIT_SLOP = 12;
-var PasswordFieldInput = React65.forwardRef((_a, ref) => {
+var PasswordFieldInput = React66.forwardRef((_a, ref) => {
   var _b = _a, { onValueChange, value, state, editable } = _b, inputFieldProps = __objRest(_b, ["onValueChange", "value", "state", "editable"]);
-  const [showPassword, setShowPassword] = React65.useState(false);
+  const [showPassword, setShowPassword] = React66.useState(false);
   const handleValueChange = (newValue) => {
     onValueChange == null ? void 0 : onValueChange(newValue);
   };
@@ -7238,13 +7278,13 @@ var PasswordFieldInput = React65.forwardRef((_a, ref) => {
   );
 });
 PasswordFieldInput.displayName = "PasswordField.Field";
-var parseTokenValue36 = (value) => parseFloat(value);
-var StyledErrorRow2 = styled50(View)(({ gap }) => ({
+var parseTokenValue37 = (value) => parseFloat(value);
+var StyledErrorRow2 = styled51(View)(({ gap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap
 }));
-var PasswordFieldError = React65.forwardRef((_a, ref) => {
+var PasswordFieldError = React66.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   const theme2 = useTheme();
   const { listItem } = theme2.tokens.components.validationList;
@@ -7253,7 +7293,7 @@ var PasswordFieldError = React65.forwardRef((_a, ref) => {
     StyledErrorRow2,
     __spreadProps(__spreadValues({
       ref,
-      gap: parseTokenValue36(listItem.spacing.gap)
+      gap: parseTokenValue37(listItem.spacing.gap)
     }, rest), {
       children: [
         /* @__PURE__ */ jsx(Icon, { icon: Cancel_default, size: "xs", customColour: listItem.colour.icon.error }),
@@ -7270,20 +7310,20 @@ var PasswordFieldError = React65.forwardRef((_a, ref) => {
   );
 });
 PasswordFieldError.displayName = "PasswordField.Error";
-var parseTokenValue37 = (value) => parseFloat(value);
-var StyledRequirementsList = styled50(View)(
+var parseTokenValue38 = (value) => parseFloat(value);
+var StyledRequirementsList = styled51(View)(
   ({ listGap }) => ({
     gap: listGap
   })
 );
-var StyledRequirementItem = styled50(View)(
+var StyledRequirementItem = styled51(View)(
   ({ itemGap }) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: itemGap
   })
 );
-var PasswordFieldRequirements = React65.forwardRef((_a, ref) => {
+var PasswordFieldRequirements = React66.forwardRef((_a, ref) => {
   var _b = _a, { requirements } = _b, rest = __objRest(_b, ["requirements"]);
   const theme2 = useTheme();
   const { listItem, list } = theme2.tokens.components.validationList;
@@ -7298,14 +7338,14 @@ var PasswordFieldRequirements = React65.forwardRef((_a, ref) => {
     StyledRequirementsList,
     __spreadProps(__spreadValues({
       ref,
-      listGap: parseTokenValue37(list.spacing.gap)
+      listGap: parseTokenValue38(list.spacing.gap)
     }, rest), {
       children: normalizedRequirements.map((requirement, index) => {
         const iconColour = requirement.satisfied ? listItem.colour.icon.success : listItem.colour.icon.error;
         return /* @__PURE__ */ jsxs(
           StyledRequirementItem,
           {
-            itemGap: parseTokenValue37(listItem.spacing.gap),
+            itemGap: parseTokenValue38(listItem.spacing.gap),
             children: [
               /* @__PURE__ */ jsx(
                 Icon,
@@ -7332,14 +7372,14 @@ var PasswordFieldRequirements = React65.forwardRef((_a, ref) => {
   );
 });
 PasswordFieldRequirements.displayName = "PasswordField.Requirements";
-var parseTokenValue38 = (value) => parseFloat(value);
-var StyledRoot11 = styled50(View)(({ theme: theme2 }) => {
+var parseTokenValue39 = (value) => parseFloat(value);
+var StyledRoot11 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
-    gap: parseTokenValue38(spacing.gap)
+    gap: parseTokenValue39(spacing.gap)
   };
 });
-var PasswordFieldRoot = React65.forwardRef(
+var PasswordFieldRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -7446,20 +7486,20 @@ function usePasswordField({
     showRequirements
   });
 }
-var parseTokenValue39 = (value) => parseFloat(value);
-var StyledRoot12 = styled50(View)(({ rootGap }) => ({
+var parseTokenValue40 = (value) => parseFloat(value);
+var StyledRoot12 = styled51(View)(({ rootGap }) => ({
   flexDirection: "column",
   alignItems: "stretch",
   gap: rootGap,
   width: "100%"
 }));
-var StyledHeader2 = styled50(View)({
+var StyledHeader2 = styled51(View)({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledTrack = styled50(View)(({ trackHeight, trackMinWidth, trackBorderRadius, trackBgColor }) => ({
+var StyledTrack = styled51(View)(({ trackHeight, trackMinWidth, trackBorderRadius, trackBgColor }) => ({
   position: "relative",
   width: "100%",
   minWidth: trackMinWidth,
@@ -7468,13 +7508,13 @@ var StyledTrack = styled50(View)(({ trackHeight, trackMinWidth, trackBorderRadiu
   backgroundColor: trackBgColor,
   overflow: "hidden"
 }));
-var StyledIndicator = styled50(View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
+var StyledIndicator = styled51(View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
   height: "100%",
   borderRadius: indicatorBorderRadius,
   backgroundColor: indicatorBgColor
 }));
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-var Progress = React65.forwardRef(
+var Progress = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value = 0,
@@ -7508,14 +7548,14 @@ var Progress = React65.forwardRef(
     const showHeader = Boolean(label) || Boolean(description);
     const typographyForSize = size === "lg" ? typography.large : typography.small;
     const trackSize = { lg: track.size.large, sm: track.size.small }[size];
-    const trackHeight = parseTokenValue39(trackSize.height);
-    const trackMinWidth = parseTokenValue39(trackSize.mindWidth);
-    const trackBorderRadius = parseTokenValue39(borderRadius.track.default);
-    const indicatorBorderRadius = parseTokenValue39(
+    const trackHeight = parseTokenValue40(trackSize.height);
+    const trackMinWidth = parseTokenValue40(trackSize.mindWidth);
+    const trackBorderRadius = parseTokenValue40(borderRadius.track.default);
+    const indicatorBorderRadius = parseTokenValue40(
       borderRadius.indicator.default
     );
     const indicatorBgColor = colour === "secondary" ? indicator.colour.background.secondary : indicator.colour.background.primary;
-    return /* @__PURE__ */ jsxs(StyledRoot12, __spreadProps(__spreadValues({ ref, rootGap: parseTokenValue39(spacing.gap) }, rest), { children: [
+    return /* @__PURE__ */ jsxs(StyledRoot12, __spreadProps(__spreadValues({ ref, rootGap: parseTokenValue40(spacing.gap) }, rest), { children: [
       showHeader && /* @__PURE__ */ jsxs(StyledHeader2, { children: [
         label ? /* @__PURE__ */ jsx(
           Typography,
@@ -7564,8 +7604,8 @@ var Progress = React65.forwardRef(
   }
 );
 Progress.displayName = "Progress";
-var parseTokenValue40 = (value) => parseFloat(value);
-var StyledRadioRoot = styled50(Pressable)(
+var parseTokenValue41 = (value) => parseFloat(value);
+var StyledRadioRoot = styled51(Pressable)(
   ({
     radioGap,
     radioOpacity,
@@ -7584,7 +7624,7 @@ var StyledRadioRoot = styled50(Pressable)(
     opacity: radioOpacity
   }, radioPaddingVertical !== void 0 ? { paddingVertical: radioPaddingVertical } : {}), radioPaddingHorizontal !== void 0 ? { paddingHorizontal: radioPaddingHorizontal } : {}), radioMaxWidth !== void 0 ? { maxWidth: radioMaxWidth } : {}), radioBgColor ? { backgroundColor: radioBgColor } : {}), radioBorderWidth !== void 0 ? { borderWidth: radioBorderWidth, borderColor: radioBorderColor } : {}), radioBorderRadius !== void 0 ? { borderRadius: radioBorderRadius } : {})
 );
-var StyledRadioControl = styled50(View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
+var StyledRadioControl = styled51(View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
   width: controlSize,
   height: controlSize,
   minWidth: controlSize,
@@ -7595,29 +7635,29 @@ var StyledRadioControl = styled50(View)(({ controlSize, controlBorderWidth, cont
   alignItems: "center",
   justifyContent: "center"
 }));
-var StyledIndicator2 = styled50(View)(({ indicatorSize, indicatorBgColor }) => ({
+var StyledIndicator2 = styled51(View)(({ indicatorSize, indicatorBgColor }) => ({
   width: indicatorSize,
   height: indicatorSize,
   borderRadius: indicatorSize / 2,
   backgroundColor: indicatorBgColor
 }));
-var StyledTextContent = styled50(View)(({ textContentGap }) => ({
+var StyledTextContent = styled51(View)(({ textContentGap }) => ({
   // Take the row's remaining width so long label/subText wraps within the tile
   // instead of pushing the trailing asset past the tile's edge.
   flex: 1,
   flexDirection: "column",
   gap: textContentGap
 }));
-var StyledAssetWrapper = styled50(View)({
+var StyledAssetWrapper = styled51(View)({
   alignSelf: "center"
 });
-var StyledTagWrapper = styled50(View)(
+var StyledTagWrapper = styled51(View)(
   ({ tagTopPadding }) => ({
     alignItems: "flex-start",
     paddingTop: tagTopPadding
   })
 );
-var Radio = React65.forwardRef(
+var Radio = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "standalone",
@@ -7649,9 +7689,9 @@ var Radio = React65.forwardRef(
       if (disabled) return;
       onSelect == null ? void 0 : onSelect(value);
     };
-    const controlSize = parseTokenValue40(radio.size.control.default);
-    const indicatorSize = parseTokenValue40(radio.size.indicator.default);
-    const borderWidthVal = parseTokenValue40(radio.borderWidth.default);
+    const controlSize = parseTokenValue41(radio.size.control.default);
+    const indicatorSize = parseTokenValue41(radio.size.indicator.default);
+    const borderWidthVal = parseTokenValue41(radio.borderWidth.default);
     const isTile = variant === "tile";
     return /* @__PURE__ */ jsxs(
       StyledRadioRoot,
@@ -7661,17 +7701,17 @@ var Radio = React65.forwardRef(
         disabled,
         accessibilityRole: "radio",
         accessibilityState: { selected, disabled },
-        radioGap: parseTokenValue40(
+        radioGap: parseTokenValue41(
           isTile ? radio.radioTile.spacing.gap : spacing.gap
         ),
         radioOpacity: disabled ? parseFloat(radio.opacity.disabled) : 1,
-        radioPaddingVertical: isTile ? parseTokenValue40(radio.radioTile.spacing.verticalPadding) : void 0,
-        radioPaddingHorizontal: isTile ? parseTokenValue40(radio.radioTile.spacing.horizontalPadding) : void 0,
-        radioMaxWidth: isTile ? parseTokenValue40(radio.radioTile.size.maxWidth) : void 0,
+        radioPaddingVertical: isTile ? parseTokenValue41(radio.radioTile.spacing.verticalPadding) : void 0,
+        radioPaddingHorizontal: isTile ? parseTokenValue41(radio.radioTile.spacing.horizontalPadding) : void 0,
+        radioMaxWidth: isTile ? parseTokenValue41(radio.radioTile.size.maxWidth) : void 0,
         radioBgColor: isTile ? selected ? radio.radioTile.colour.background.selected : radio.radioTile.colour.background.default : void 0,
-        radioBorderWidth: isTile ? parseTokenValue40(radio.radioTile.borderWidth.default) : void 0,
+        radioBorderWidth: isTile ? parseTokenValue41(radio.radioTile.borderWidth.default) : void 0,
         radioBorderColor: isTile ? selected ? radio.radioTile.colour.border.selected : radio.radioTile.colour.border.default : void 0,
-        radioBorderRadius: isTile ? parseTokenValue40(radio.radioTile.borderRadius.default) : void 0,
+        radioBorderRadius: isTile ? parseTokenValue41(radio.radioTile.borderRadius.default) : void 0,
         style: typeof style === "function" ? void 0 : style
       }, rest), {
         children: [
@@ -7693,7 +7733,7 @@ var Radio = React65.forwardRef(
           (label || subText || tag) && /* @__PURE__ */ jsxs(
             StyledTextContent,
             {
-              textContentGap: parseTokenValue40(spacing.content.gap),
+              textContentGap: parseTokenValue41(spacing.content.gap),
               children: [
                 label && /* @__PURE__ */ jsx(Typography, { token: typography.label, color: colour.text.title, children: label }),
                 subText && /* @__PURE__ */ jsx(
@@ -7707,7 +7747,7 @@ var Radio = React65.forwardRef(
                 tag && /* @__PURE__ */ jsx(
                   StyledTagWrapper,
                   {
-                    tagTopPadding: parseTokenValue40(spacing.content.tag.topPadding),
+                    tagTopPadding: parseTokenValue41(spacing.content.tag.topPadding),
                     children: /* @__PURE__ */ jsx(Tag, __spreadValues({}, tag))
                   }
                 )
@@ -7721,16 +7761,16 @@ var Radio = React65.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var RadioTile = React65.forwardRef(
+var RadioTile = React66.forwardRef(
   (props, ref) => /* @__PURE__ */ jsx(Radio, __spreadProps(__spreadValues({ ref }, props), { variant: "tile" }))
 );
 RadioTile.displayName = "RadioTile";
-var parseTokenValue41 = (value) => parseFloat(value);
-var StyledRadioGroup = styled50(View)(({ groupDirection, groupGap }) => ({
+var parseTokenValue42 = (value) => parseFloat(value);
+var StyledRadioGroup = styled51(View)(({ groupDirection, groupGap }) => ({
   flexDirection: groupDirection,
   gap: groupGap
 }));
-var RadioGroupRoot = React65.forwardRef(
+var RadioGroupRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name: _name,
@@ -7757,11 +7797,11 @@ var RadioGroupRoot = React65.forwardRef(
     const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
     const derivedDefaultValue = defaultValue != null ? defaultValue : optionsFirstValue;
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React65.useState(
+    const [internalValue, setInternalValue] = React66.useState(
       derivedDefaultValue != null ? derivedDefaultValue : ""
     );
     const currentValue = isControlled ? value : internalValue;
-    const handleSelect = React65.useCallback(
+    const handleSelect = React66.useCallback(
       (newValue) => {
         if (!isControlled) {
           setInternalValue(newValue);
@@ -7782,9 +7822,9 @@ var RadioGroupRoot = React65.forwardRef(
           option.value
         ));
       }
-      return React65.Children.map(children, (child) => {
-        if (!React65.isValidElement(child)) return child;
-        return React65.cloneElement(child, {
+      return React66.Children.map(children, (child) => {
+        if (!React66.isValidElement(child)) return child;
+        return React66.cloneElement(child, {
           selected: currentValue === child.props.value,
           onSelect: handleSelect,
           disabled: disabled || child.props.disabled
@@ -7797,7 +7837,7 @@ var RadioGroupRoot = React65.forwardRef(
         ref,
         accessibilityRole: "radiogroup",
         groupDirection: orientation === "horizontal" ? "row" : "column",
-        groupGap: parseTokenValue41(radio.spacing.gap)
+        groupGap: parseTokenValue42(radio.spacing.gap)
       }, rest), {
         children: renderChildren()
       })
@@ -7809,11 +7849,11 @@ var RadioGroup = Object.assign(RadioGroupRoot, {
   Radio,
   Tile: RadioTile
 });
-var SearchFieldInput = React65.forwardRef((_a, ref) => {
+var SearchFieldInput = React66.forwardRef((_a, ref) => {
   var _b = _a, { onClear, onValueChange, value, state } = _b, inputFieldProps = __objRest(_b, ["onClear", "onValueChange", "value", "state"]);
-  const [internalValue, setInternalValue] = React65.useState("");
-  const inputRef = React65.useRef(null);
-  React65.useImperativeHandle(ref, () => inputRef.current);
+  const [internalValue, setInternalValue] = React66.useState("");
+  const inputRef = React66.useRef(null);
+  React66.useImperativeHandle(ref, () => inputRef.current);
   const handleValueChange = (newValue) => {
     setInternalValue(newValue);
     onValueChange == null ? void 0 : onValueChange(newValue);
@@ -7852,14 +7892,14 @@ var SearchFieldInput = React65.forwardRef((_a, ref) => {
   );
 });
 SearchFieldInput.displayName = "SearchField.Field";
-var parseTokenValue42 = (value) => parseFloat(value);
-var StyledRoot13 = styled50(View)(({ theme: theme2 }) => {
+var parseTokenValue43 = (value) => parseFloat(value);
+var StyledRoot13 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
-    gap: parseTokenValue42(spacing.gap)
+    gap: parseTokenValue43(spacing.gap)
   };
 });
-var SearchFieldRoot = React65.forwardRef(
+var SearchFieldRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -7929,8 +7969,8 @@ function useSearchField({
     onClear: handleClear
   };
 }
-var parseTokenValue43 = (value) => parseFloat(value);
-var StyledSegmentItem = styled50(Pressable)(
+var parseTokenValue44 = (value) => parseFloat(value);
+var StyledSegmentItem = styled51(Pressable)(
   ({
     itemHeight,
     itemMinWidth,
@@ -7950,14 +7990,14 @@ var StyledSegmentItem = styled50(Pressable)(
     opacity: itemOpacity
   }, itemFlex !== void 0 ? { flex: itemFlex } : { flexShrink: 0 })
 );
-var StyledIntrinsicClip = styled50(View)(({ clipBorderRadius, clipBgColor, clipWidth }) => __spreadValues({
+var StyledIntrinsicClip = styled51(View)(({ clipBorderRadius, clipBgColor, clipWidth }) => __spreadValues({
   overflow: "hidden",
   borderRadius: clipBorderRadius,
   backgroundColor: clipBgColor,
   alignSelf: "flex-start",
   maxWidth: "100%"
 }, clipWidth !== void 0 ? { width: clipWidth } : {}));
-var StyledScrollIndicator = styled50(Pressable)(
+var StyledScrollIndicator = styled51(Pressable)(
   ({
     indicatorSide,
     indicatorBorderRadius,
@@ -7989,7 +8029,7 @@ var ScrollIndicatorGradient = ({
   side,
   color
 }) => {
-  const uid = React65.useId();
+  const uid = React66.useId();
   const gradientId = `sc-scroll-indicator-${side}-${uid}`;
   const isTrailing = side === "trailing";
   return /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, pointerEvents: "none", children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
@@ -8013,7 +8053,7 @@ var ScrollIndicatorGradient = ({
     /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
   ] }) });
 };
-var StyledContainer2 = styled50(View)(
+var StyledContainer2 = styled51(View)(
   ({
     containerGap,
     containerPaddingVertical,
@@ -8061,10 +8101,10 @@ var SegmentedControlItemBase = ({
       disabled,
       accessibilityRole: "button",
       accessibilityState: { selected, disabled },
-      itemHeight: parseTokenValue43(size.small.height),
-      itemMinWidth: parseTokenValue43(size.small.minWidth),
-      itemPaddingHorizontal: parseTokenValue43(spacing.horizontalPadding),
-      itemBorderRadius: parseTokenValue43(borderRadius.default),
+      itemHeight: parseTokenValue44(size.small.height),
+      itemMinWidth: parseTokenValue44(size.small.minWidth),
+      itemPaddingHorizontal: parseTokenValue44(spacing.horizontalPadding),
+      itemBorderRadius: parseTokenValue44(borderRadius.default),
       itemBgColor: selected ? colour.background.selected : "transparent",
       itemOpacity: disabled ? parseFloat(opacity.disabled.default) : 1,
       itemFlex: layout === "fixed" ? 1 : void 0,
@@ -8072,7 +8112,7 @@ var SegmentedControlItemBase = ({
     }
   );
 };
-var SegmentedControlItem = React65.forwardRef(
+var SegmentedControlItem = React66.forwardRef(
   (_props, _ref) => {
     return null;
   }
@@ -8088,10 +8128,10 @@ var IntrinsicTrack = (_a) => {
     "renderItems",
     "forwardedRef"
   ]);
-  const scrollRef = React65.useRef(null);
-  const [containerWidth, setContainerWidth] = React65.useState(0);
-  const [contentWidth, setContentWidth] = React65.useState(0);
-  const [scrollX, setScrollX] = React65.useState(0);
+  const scrollRef = React66.useRef(null);
+  const [containerWidth, setContainerWidth] = React66.useState(0);
+  const [contentWidth, setContentWidth] = React66.useState(0);
+  const [scrollX, setScrollX] = React66.useState(0);
   const epsilon = 2;
   const maxScroll = Math.max(0, contentWidth - containerWidth);
   const canScrollLeft = scrollX > epsilon;
@@ -8187,7 +8227,7 @@ var IntrinsicTrack = (_a) => {
     })
   );
 };
-var SegmentedControlRoot = React65.forwardRef(
+var SegmentedControlRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       options,
@@ -8211,18 +8251,18 @@ var SegmentedControlRoot = React65.forwardRef(
     const { spacing, borderRadius, colour } = theme2.tokens.components.segmentedControl;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
-    const childrenArray = React65.Children.toArray(children);
+    const childrenArray = React66.Children.toArray(children);
     const firstChildValue = childrenArray.map((child) => {
-      if (!React65.isValidElement(child)) return void 0;
+      if (!React66.isValidElement(child)) return void 0;
       return child.props.value;
     }).find((v) => typeof v === "string");
     const derivedDefaultValue = (_b2 = defaultValue != null ? defaultValue : optionsFirstValue) != null ? _b2 : firstChildValue;
     const isControlled = typeof value === "string";
-    const [uncontrolledValue, setUncontrolledValue] = React65.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React66.useState(
       () => derivedDefaultValue != null ? derivedDefaultValue : ""
     );
     const currentValue = isControlled ? value : uncontrolledValue;
-    const handleSelect = React65.useCallback(
+    const handleSelect = React66.useCallback(
       (newValue) => {
         if (!isControlled) {
           setUncontrolledValue(newValue);
@@ -8248,7 +8288,7 @@ var SegmentedControlRoot = React65.forwardRef(
         ));
       }
       return childrenArray.map((child) => {
-        if (!React65.isValidElement(child)) return child;
+        if (!React66.isValidElement(child)) return child;
         const childProps = child.props;
         return /* @__PURE__ */ jsx(
           SegmentedControlItemBase,
@@ -8266,14 +8306,14 @@ var SegmentedControlRoot = React65.forwardRef(
       });
     };
     const containerProps = {
-      containerGap: parseTokenValue43(spacing.gap),
-      containerPaddingVertical: parseTokenValue43(spacing.verticalPadding),
-      containerPaddingHorizontal: parseTokenValue43(spacing.horizontalPadding),
-      containerBorderRadius: parseTokenValue43(borderRadius.default),
+      containerGap: parseTokenValue44(spacing.gap),
+      containerPaddingVertical: parseTokenValue44(spacing.verticalPadding),
+      containerPaddingHorizontal: parseTokenValue44(spacing.horizontalPadding),
+      containerBorderRadius: parseTokenValue44(borderRadius.default),
       containerBgColor: colour.background.default,
       containerFullWidth: layout === "fixed",
-      scrollIndicatorPaddingOuter: parseTokenValue43(dimensions3.spacing["2xl"]),
-      scrollIndicatorPaddingInner: parseTokenValue43(dimensions3.spacing.sm)
+      scrollIndicatorPaddingOuter: parseTokenValue44(dimensions3.spacing["2xl"]),
+      scrollIndicatorPaddingInner: parseTokenValue44(dimensions3.spacing.sm)
     };
     if (layout === "intrinsic") {
       return /* @__PURE__ */ jsx(
@@ -8292,8 +8332,8 @@ SegmentedControlRoot.displayName = "SegmentedControl";
 var SegmentedControl = Object.assign(SegmentedControlRoot, {
   Item: SegmentedControlItem
 });
-var parseTokenValue44 = (value) => parseFloat(value);
-var StyledTriggerWrapper = styled50(Animated.View)(({
+var parseTokenValue45 = (value) => parseFloat(value);
+var StyledTriggerWrapper = styled51(Animated.View)(({
   theme: theme2,
   state: _state
 }) => {
@@ -8301,25 +8341,25 @@ var StyledTriggerWrapper = styled50(Animated.View)(({
   return {
     flexDirection: "row",
     alignItems: "center",
-    gap: parseTokenValue44(spacing.field.gap),
-    minWidth: parseTokenValue44(size.field.minWidth),
+    gap: parseTokenValue45(spacing.field.gap),
+    minWidth: parseTokenValue45(size.field.minWidth),
     width: "100%",
-    height: parseTokenValue44(size.field.height),
+    height: parseTokenValue45(size.field.height),
     backgroundColor: colour.field.background.default,
-    borderRadius: parseTokenValue44(borderRadius.field.default)
+    borderRadius: parseTokenValue45(borderRadius.field.default)
   };
 });
-var StyledIconWrapper2 = styled50(View)({
+var StyledIconWrapper2 = styled51(View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledArrowIcon = styled50(Animated.View)({
+var StyledArrowIcon = styled51(Animated.View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var SelectFieldTrigger = React65.forwardRef(
+var SelectFieldTrigger = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       state = "default",
@@ -8339,10 +8379,10 @@ var SelectFieldTrigger = React65.forwardRef(
     const theme2 = useTheme();
     const { colour, borderWidth, spacing } = theme2.tokens.components.inputs;
     const hasState = state === "error" || state === "success";
-    const baseBorderWidth = parseTokenValue44(borderWidth.field.default);
-    const selectedBorderWidth = parseTokenValue44(borderWidth.field.selected);
-    const baseVerticalPadding = parseTokenValue44(spacing.field.verticalPadding);
-    const baseHorizontalPadding = parseTokenValue44(
+    const baseBorderWidth = parseTokenValue45(borderWidth.field.default);
+    const selectedBorderWidth = parseTokenValue45(borderWidth.field.selected);
+    const baseVerticalPadding = parseTokenValue45(spacing.field.verticalPadding);
+    const baseHorizontalPadding = parseTokenValue45(
       spacing.field.horizontalPadding
     );
     const borderDelta = selectedBorderWidth - baseBorderWidth;
@@ -8418,7 +8458,7 @@ var SelectFieldTrigger = React65.forwardRef(
   }
 );
 SelectFieldTrigger.displayName = "SelectField.Trigger";
-var SelectFieldValue = React65.forwardRef(
+var SelectFieldValue = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { placeholder } = _b, rest = __objRest(_b, ["placeholder"]);
     const theme2 = useTheme();
@@ -8435,34 +8475,34 @@ var SelectFieldValue = React65.forwardRef(
   }
 );
 SelectFieldValue.displayName = "SelectField.Value";
-var parseTokenValue45 = (value) => parseFloat(value);
-var StyledContentShadow = styled50(View)(({ theme: theme2 }) => {
+var parseTokenValue46 = (value) => parseFloat(value);
+var StyledContentShadow = styled51(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   const shadow = dropdown.list.dropshadow.default;
   return {
-    borderRadius: parseTokenValue45(dropdown.list.borderRadius.default),
+    borderRadius: parseTokenValue46(dropdown.list.borderRadius.default),
     shadowColor: shadow.color,
     shadowOffset: {
-      width: parseTokenValue45(shadow.offsetX),
-      height: parseTokenValue45(shadow.offsetY)
+      width: parseTokenValue46(shadow.offsetX),
+      height: parseTokenValue46(shadow.offsetY)
     },
     shadowOpacity: 1,
-    shadowRadius: parseTokenValue45(shadow.blur),
+    shadowRadius: parseTokenValue46(shadow.blur),
     elevation: 8
   };
 });
-var StyledContentInner = styled50(View)(({ theme: theme2 }) => {
+var StyledContentInner = styled51(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   const { colour } = theme2.tokens.components.inputs;
   return {
     backgroundColor: colour.field.background.default,
-    borderRadius: parseTokenValue45(dropdown.list.borderRadius.default),
-    minWidth: parseTokenValue45(dropdown.list.size.minWidth),
-    maxHeight: parseTokenValue45(dropdown.list.size.maxHeight),
+    borderRadius: parseTokenValue46(dropdown.list.borderRadius.default),
+    minWidth: parseTokenValue46(dropdown.list.size.minWidth),
+    maxHeight: parseTokenValue46(dropdown.list.size.maxHeight),
     overflow: "hidden"
   };
 });
-var SelectFieldContent = React65.forwardRef((_a, ref) => {
+var SelectFieldContent = React66.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   const theme2 = useTheme();
   const { spacing } = theme2.tokens.components.inputs;
@@ -8473,7 +8513,7 @@ var SelectFieldContent = React65.forwardRef((_a, ref) => {
       {
         side: "bottom",
         align: "start",
-        sideOffset: parseTokenValue45(spacing.gap),
+        sideOffset: parseTokenValue46(spacing.gap),
         alignOffset: 0,
         asChild: true,
         children: /* @__PURE__ */ jsx(Slot, { ref, children: /* @__PURE__ */ jsx(StyledContentShadow, __spreadProps(__spreadValues({}, rest), { children: /* @__PURE__ */ jsx(StyledContentInner, { children: /* @__PURE__ */ jsx(SelectPrimitive3.Viewport, { children: /* @__PURE__ */ jsx(
@@ -8490,54 +8530,54 @@ var SelectFieldContent = React65.forwardRef((_a, ref) => {
   ] });
 });
 SelectFieldContent.displayName = "SelectField.Content";
-var parseTokenValue46 = (value) => parseFloat(value);
-var StyledItem3 = styled50(Pressable)(({ theme: theme2 }) => {
+var parseTokenValue47 = (value) => parseFloat(value);
+var StyledItem3 = styled51(Pressable)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     flexDirection: "row",
     alignItems: "center",
-    gap: parseTokenValue46(dropdown.listItem.content.gap),
-    height: parseTokenValue46(dropdown.listItem.size.height),
-    paddingVertical: parseTokenValue46(dropdown.listItem.spacing.verticalPadding),
-    paddingHorizontal: parseTokenValue46(
+    gap: parseTokenValue47(dropdown.listItem.content.gap),
+    height: parseTokenValue47(dropdown.listItem.size.height),
+    paddingVertical: parseTokenValue47(dropdown.listItem.spacing.verticalPadding),
+    paddingHorizontal: parseTokenValue47(
       dropdown.listItem.spacing.horiztonalPadding
     ),
     backgroundColor: dropdown.listItem.colour.background.default
   };
 });
-var StyledIconWrapper3 = styled50(View)({
+var StyledIconWrapper3 = styled51(View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledContentWrapper = styled50(View)(({ theme: theme2 }) => {
+var StyledContentWrapper = styled51(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     flexDirection: "row",
     alignItems: "center",
-    gap: parseTokenValue46(dropdown.listItem.content.gap),
+    gap: parseTokenValue47(dropdown.listItem.content.gap),
     flex: 1,
     minWidth: 0
   };
 });
-var StyledTextWrapper2 = styled50(View)({
+var StyledTextWrapper2 = styled51(View)({
   flex: 1,
   minWidth: 0
 });
-var StyledItemText = styled50(Text)(({ theme: theme2 }) => {
+var StyledItemText = styled51(Text)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     color: dropdown.listItem.colour.text.placeholder.default
   };
 });
-var StyledHintText = styled50(Text)(({ theme: theme2 }) => {
+var StyledHintText = styled51(Text)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     color: dropdown.listItem.colour.text.hint.default,
     flexShrink: 0
   };
 });
-var SelectFieldItem = React65.forwardRef(
+var SelectFieldItem = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, leadingIcon, hintText, children, disabled, isSelected } = _b, rest = __objRest(_b, ["value", "leadingIcon", "hintText", "children", "disabled", "isSelected"]);
     const theme2 = useTheme();
@@ -8572,24 +8612,24 @@ var SelectFieldItem = React65.forwardRef(
   }
 );
 SelectFieldItem.displayName = "SelectField.Item";
-var parseTokenValue47 = (value) => parseFloat(value);
-var StyledNoResults = styled50(View)(({ theme: theme2 }) => {
+var parseTokenValue48 = (value) => parseFloat(value);
+var StyledNoResults = styled51(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
-    paddingVertical: parseTokenValue47(dropdown.listItem.spacing.verticalPadding),
-    paddingHorizontal: parseTokenValue47(
+    paddingVertical: parseTokenValue48(dropdown.listItem.spacing.verticalPadding),
+    paddingHorizontal: parseTokenValue48(
       dropdown.listItem.spacing.horiztonalPadding
     ),
     alignItems: "center"
   };
 });
-var StyledRoot14 = styled50(View)(({ theme: theme2 }) => {
+var StyledRoot14 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
-    gap: parseTokenValue47(spacing.gap)
+    gap: parseTokenValue48(spacing.gap)
   };
 });
-var SelectFieldRoot = React65.forwardRef(
+var SelectFieldRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -8624,15 +8664,15 @@ var SelectFieldRoot = React65.forwardRef(
       "searchPlaceholder",
       "noResultsText"
     ]);
-    const [isOpen, setIsOpen] = React65.useState(false);
-    const [showContent, setShowContent] = React65.useState(false);
-    const [internalValue, setInternalValue] = React65.useState(
+    const [isOpen, setIsOpen] = React66.useState(false);
+    const [showContent, setShowContent] = React66.useState(false);
+    const [internalValue, setInternalValue] = React66.useState(
       defaultValue != null ? defaultValue : null
     );
-    const [searchQuery, setSearchQuery] = React65.useState("");
-    const [clearKey, setClearKey] = React65.useState(0);
-    const searchInputRef = React65.useRef(null);
-    React65.useEffect(() => {
+    const [searchQuery, setSearchQuery] = React66.useState("");
+    const [clearKey, setClearKey] = React66.useState(0);
+    const searchInputRef = React66.useRef(null);
+    React66.useEffect(() => {
       if (!isOpen) {
         setShowContent(false);
         return;
@@ -8665,8 +8705,8 @@ var SelectFieldRoot = React65.forwardRef(
         keyboardSub.remove();
       };
     }, [isOpen, searchable]);
-    const isCompound = React65.Children.toArray(children).some(
-      (child) => React65.isValidElement(child) && child.type === SelectFieldContent
+    const isCompound = React66.Children.toArray(children).some(
+      (child) => React66.isValidElement(child) && child.type === SelectFieldContent
     );
     if (isCompound) {
       return /* @__PURE__ */ jsx(StyledRoot14, __spreadProps(__spreadValues({ ref }, rest), { children }));
@@ -8681,11 +8721,11 @@ var SelectFieldRoot = React65.forwardRef(
       if (!open) setSearchQuery("");
     };
     const currentValue = value !== void 0 ? value : internalValue;
-    const allItems = React65.Children.toArray(children);
+    const allItems = React66.Children.toArray(children);
     const filteredItems = searchable ? allItems.filter((child) => {
       var _a2;
       if (!searchQuery) return true;
-      if (React65.isValidElement(child) && child.type === SelectFieldItem) {
+      if (React66.isValidElement(child) && child.type === SelectFieldItem) {
         const label2 = String(
           (_a2 = child.props.children) != null ? _a2 : ""
         );
@@ -8754,10 +8794,10 @@ var SelectFieldRoot = React65.forwardRef(
           ] })),
           showContent && /* @__PURE__ */ jsxs(SelectFieldContent, { children: [
             filteredItems.map((child) => {
-              if (React65.isValidElement(child) && child.type === SelectFieldItem) {
+              if (React66.isValidElement(child) && child.type === SelectFieldItem) {
                 const selectedValue = currentValue && typeof currentValue === "object" && "value" in currentValue ? currentValue.value : currentValue;
                 const childProps = child.props;
-                return React65.cloneElement(
+                return React66.cloneElement(
                   child,
                   {
                     isSelected: childProps.value === selectedValue
@@ -8822,7 +8862,7 @@ var { dimensions } = semantics;
 var parseSize = (value) => {
   return parseInt(value.replace("px", ""), 10);
 };
-var Wrapper = styled50(View)({
+var Wrapper = styled51(View)({
   borderWidth: parseSize(inputTokens.borderWidth.field.selected),
   borderColor: inputTokens.colour.field.border.selected,
   borderRadius: parseSize(inputTokens.borderRadius.field.default),
@@ -8834,29 +8874,29 @@ var Wrapper = styled50(View)({
   alignItems: "center",
   justifyContent: "space-between"
 });
-var SelectIcon = styled50(Animated10.View)({
+var SelectIcon = styled51(Animated10.View)({
   position: "absolute",
   right: 0,
   marginRight: 0
 });
-var InputText2 = styled50(Text)({
+var InputText2 = styled51(Text)({
   color: inputTokens.colour.field.text.default,
   fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
   fontWeight: inputTokens.field.placeholder.default.fontWeight,
   flex: 1
 });
-var PlaceholderText = styled50(Text)({
+var PlaceholderText = styled51(Text)({
   color: inputTokens.colour.field.text.placeholder,
   fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
   fontWeight: inputTokens.field.placeholder.default.fontWeight,
   flex: 1
 });
-var ModalOverlay = styled50(View)({
+var ModalOverlay = styled51(View)({
   flex: 1,
   backgroundColor: "rgba(0, 0, 0, 0.32)",
   justifyContent: "flex-end"
 });
-var AndroidDialog = styled50(View)({
+var AndroidDialog = styled51(View)({
   backgroundColor: inputTokens.colour.field.background.default,
   borderTopLeftRadius: parseSize(dimensions.borderRadius.lg),
   borderTopRightRadius: parseSize(dimensions.borderRadius.lg),
@@ -8866,14 +8906,14 @@ var AndroidDialog = styled50(View)({
   paddingBottom: parseSize(dimensions.spacing.xl),
   paddingHorizontal: parseSize(dimensions.spacing.md)
 });
-var DialogTitle = styled50(Text)({
+var DialogTitle = styled51(Text)({
   fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
   fontWeight: inputTokens.text.label.fontWeight,
   color: inputTokens.colour.field.text.default,
   marginBottom: parseSize(dimensions.spacing.md),
   marginLeft: parseSize(dimensions.spacing.xs)
 });
-var AndroidOptionRow = styled50(View)({
+var AndroidOptionRow = styled51(View)({
   flexDirection: "row",
   alignItems: "center",
   paddingVertical: parseSize(dimensions.spacing.md),
@@ -8881,7 +8921,7 @@ var AndroidOptionRow = styled50(View)({
   borderBottomWidth: parseSize(dimensions.borderWidth.sm),
   borderBottomColor: themeTokens.primitives.colour.brand.brown[2]
 });
-var RadioOuter = styled50(View)({
+var RadioOuter = styled51(View)({
   width: parseSize(dimensions.spacing.lg),
   height: parseSize(dimensions.spacing.lg),
   borderRadius: parseSize(dimensions.spacing.lg) / 2,
@@ -8891,13 +8931,13 @@ var RadioOuter = styled50(View)({
   justifyContent: "center",
   marginRight: parseSize(dimensions.spacing.sm)
 });
-var RadioInner = styled50(View)({
+var RadioInner = styled51(View)({
   width: parseSize(dimensions.spacing.md) / 2,
   height: parseSize(dimensions.spacing.md) / 2,
   borderRadius: parseSize(dimensions.spacing.md) / 4,
   backgroundColor: inputTokens.colour.field.border.selected
 });
-var AndroidOptionText = styled50(Text)(
+var AndroidOptionText = styled51(Text)(
   ({ isSelected }) => ({
     fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
     fontWeight: isSelected ? inputTokens.text.label.fontWeight : inputTokens.field.placeholder.default.fontWeight,
@@ -8924,7 +8964,7 @@ var useIconAnimation = () => {
     iconAnimationStyles
   };
 };
-var NativeSelectPicker = React65.forwardRef(
+var NativeSelectPicker = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       items,
@@ -9071,19 +9111,19 @@ var NativeSelectPicker = React65.forwardRef(
   }
 );
 NativeSelectPicker.displayName = "NativeSelectPicker";
-var parseTokenValue48 = (value) => parseFloat(value);
-var StyledLabelRow2 = styled50(View)(({ labelRowGap }) => ({
+var parseTokenValue49 = (value) => parseFloat(value);
+var StyledLabelRow2 = styled51(View)(({ labelRowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelRowGap
 }));
-var StyledLabelSlot = styled50(View)(({ labelSlotGap }) => ({
+var StyledLabelSlot = styled51(View)(({ labelSlotGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelSlotGap,
   flexShrink: 0
 }));
-var Slider = React65.forwardRef(
+var Slider = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value: controlledValue,
@@ -9118,10 +9158,10 @@ var Slider = React65.forwardRef(
     const { slider, buttons } = theme2.tokens.components;
     const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = React65.useState(defaultValue);
+    const [internalValue, setInternalValue] = React66.useState(defaultValue);
     const currentValue = isControlled ? controlledValue : internalValue;
-    const thumbSize = parseTokenValue48(buttons.size.md.height);
-    const trackHeight = parseTokenValue48(slider.sizing.track.height);
+    const thumbSize = parseTokenValue49(buttons.size.md.height);
+    const trackHeight = parseTokenValue49(slider.sizing.track.height);
     const isWeb = Platform.OS === "web";
     const [trackLayoutWidth, setTrackLayoutWidth] = useState(0);
     const webFraction = max > min ? (currentValue - min) / (max - min) : 0;
@@ -9216,8 +9256,8 @@ var Slider = React65.forwardRef(
     };
     const hasLeading = leadingIcon !== void 0 || leadingLabel !== void 0;
     const hasTrailing = trailingIcon !== void 0 || trailingLabel !== void 0;
-    const labelGap = parseTokenValue48(slider.sliderField.spacing.label.gap);
-    const roundBorderRadius = parseTokenValue48(dimensions3.borderRadius.round);
+    const labelGap = parseTokenValue49(slider.sliderField.spacing.label.gap);
+    const roundBorderRadius = parseTokenValue49(dimensions3.borderRadius.round);
     const thumbIconColor = buttons.iconButton.filledButton.colour.icon.primary.default;
     const thumbContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -9242,15 +9282,15 @@ var Slider = React65.forwardRef(
     const thumbStyle = {
       width: thumbSize,
       height: thumbSize,
-      borderRadius: parseTokenValue48(buttons.borderRadius.default),
+      borderRadius: parseTokenValue49(buttons.borderRadius.default),
       backgroundColor: buttons.iconButton.filledButton.colour.background.primary.default,
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center"
     };
     const outerStyle = {
-      gap: parseTokenValue48(slider.sliderField.spacing.gap),
-      minWidth: parseTokenValue48(slider.sizing.minWidth),
+      gap: parseTokenValue49(slider.sliderField.spacing.gap),
+      minWidth: parseTokenValue49(slider.sizing.minWidth),
       opacity: disabled ? parseFloat(buttons.opacity.disabled) : 1
     };
     const leadingSlot = hasLeading && /* @__PURE__ */ jsxs(StyledLabelSlot, { labelSlotGap: labelGap, children: [
@@ -9288,7 +9328,7 @@ var Slider = React65.forwardRef(
       height: trackHeight,
       borderRadius: roundBorderRadius,
       backgroundColor: slider.colour.track.background.default,
-      borderWidth: parseTokenValue48(dimensions3.borderWidth.sm),
+      borderWidth: parseTokenValue49(dimensions3.borderWidth.sm),
       borderColor: slider.colour.track.border.default
     };
     const indicatorBaseStyle = {
@@ -9412,8 +9452,8 @@ var ICON_MAP = {
   warning: Error_default,
   info: Info_default
 };
-var parseTokenValue49 = (value) => parseFloat(value);
-var StyledInlineRoot = styled50(View)(
+var parseTokenValue50 = (value) => parseFloat(value);
+var StyledInlineRoot = styled51(View)(
   ({ rootPaddingH, rootPaddingV, rootGap, rootBorderRadius, rootBgColor }) => ({
     flexDirection: "row",
     alignItems: "flex-start",
@@ -9424,7 +9464,7 @@ var StyledInlineRoot = styled50(View)(
     backgroundColor: rootBgColor
   })
 );
-var StyledToastRoot = styled50(View)(
+var StyledToastRoot = styled51(View)(
   ({
     rootPaddingH,
     rootPaddingV,
@@ -9451,7 +9491,7 @@ var StyledToastRoot = styled50(View)(
     elevation: 4
   })
 );
-var StyledSystemRoot = styled50(View)(
+var StyledSystemRoot = styled51(View)(
   ({
     rootPaddingH,
     rootPaddingTop,
@@ -9471,37 +9511,37 @@ var StyledSystemRoot = styled50(View)(
     width: "100%"
   })
 );
-var StyledContents = styled50(View)(({ contentsGap }) => ({
+var StyledContents = styled51(View)(({ contentsGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   flex: 1,
   minWidth: 0,
   gap: contentsGap
 }));
-var StyledCopyRow = styled50(View)(({ copyGap }) => ({
+var StyledCopyRow = styled51(View)(({ copyGap }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: copyGap,
   width: "100%"
 }));
-var StyledInlineCopy = styled50(View)(({ copyGap }) => ({
+var StyledInlineCopy = styled51(View)(({ copyGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: copyGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledLinkWrapper = styled50(View)(({ linkPaddingLeft }) => ({
+var StyledLinkWrapper = styled51(View)(({ linkPaddingLeft }) => ({
   paddingLeft: linkPaddingLeft,
   width: "100%"
 }));
-var StyledCloseButton = styled50(Pressable)({
+var StyledCloseButton = styled51(Pressable)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
   padding: 0
 });
-var Notification = React65.forwardRef(
+var Notification = React66.forwardRef(
   (props, ref) => {
     const _a = props, {
       variant = "inline",
@@ -9537,10 +9577,10 @@ var Notification = React65.forwardRef(
           ref,
           accessible: true,
           accessibilityRole: "summary",
-          rootPaddingH: parseTokenValue49(sizeTokens.horizontalPadding),
-          rootPaddingTop: parseTokenValue49(sizeTokens.topPadding),
-          rootPaddingBottom: parseTokenValue49(sizeTokens.bottomPadding),
-          rootGap: parseTokenValue49(sizeTokens.content.gap),
+          rootPaddingH: parseTokenValue50(sizeTokens.horizontalPadding),
+          rootPaddingTop: parseTokenValue50(sizeTokens.topPadding),
+          rootPaddingBottom: parseTokenValue50(sizeTokens.bottomPadding),
+          rootGap: parseTokenValue50(sizeTokens.content.gap),
           rootBgColor: bgMap[type],
           rootAlignCenter: isLarge
         }, rest), {
@@ -9565,7 +9605,7 @@ var Notification = React65.forwardRef(
             link && /* @__PURE__ */ jsx(
               StyledLinkWrapper,
               {
-                linkPaddingLeft: parseTokenValue49(sizeTokens.content.gap),
+                linkPaddingLeft: parseTokenValue50(sizeTokens.content.gap),
                 children: /* @__PURE__ */ jsx(
                   Link,
                   {
@@ -9589,12 +9629,12 @@ var Notification = React65.forwardRef(
           ref,
           accessible: true,
           accessibilityRole: "alert",
-          rootPaddingH: parseTokenValue49(toast.spacing.horizontalPadding),
-          rootPaddingV: parseTokenValue49(toast.spacing.verticalPadding),
-          rootGap: parseTokenValue49(toast.spacing.gap),
-          rootBorderRadius: parseTokenValue49(toast.borderRadius.default),
+          rootPaddingH: parseTokenValue50(toast.spacing.horizontalPadding),
+          rootPaddingV: parseTokenValue50(toast.spacing.verticalPadding),
+          rootGap: parseTokenValue50(toast.spacing.gap),
+          rootBorderRadius: parseTokenValue50(toast.borderRadius.default),
           rootBgColor: toast.colour.background.default,
-          rootBorderWidth: parseTokenValue49(toast.borderWidth.default),
+          rootBorderWidth: parseTokenValue50(toast.borderWidth.default),
           rootBorderColor: toast.colour.border.default,
           rootShadowColor: toast.shaddow.default.color
         }, rest), {
@@ -9602,9 +9642,9 @@ var Notification = React65.forwardRef(
             /* @__PURE__ */ jsxs(
               StyledContents,
               {
-                contentsGap: parseTokenValue49(toast.content.spacing.gap),
+                contentsGap: parseTokenValue50(toast.content.spacing.gap),
                 children: [
-                  /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue49(toast.copy.spacing.gap), children: [
+                  /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue50(toast.copy.spacing.gap), children: [
                     showIcon && /* @__PURE__ */ jsx(
                       Icon,
                       {
@@ -9626,7 +9666,7 @@ var Notification = React65.forwardRef(
                   link && /* @__PURE__ */ jsx(
                     StyledLinkWrapper,
                     {
-                      linkPaddingLeft: parseTokenValue49(
+                      linkPaddingLeft: parseTokenValue50(
                         toast.link.spacing.leftPadding
                       ),
                       children: /* @__PURE__ */ jsx(
@@ -9664,14 +9704,14 @@ var Notification = React65.forwardRef(
         ref,
         accessible: true,
         accessibilityRole: "alert",
-        rootPaddingH: parseTokenValue49(spacing.horizontalPadding),
-        rootPaddingV: parseTokenValue49(spacing.verticalPadding),
-        rootGap: parseTokenValue49(spacing.gap),
-        rootBorderRadius: parseTokenValue49(borderRadius.default),
+        rootPaddingH: parseTokenValue50(spacing.horizontalPadding),
+        rootPaddingV: parseTokenValue50(spacing.verticalPadding),
+        rootGap: parseTokenValue50(spacing.gap),
+        rootBorderRadius: parseTokenValue50(borderRadius.default),
         rootBgColor: bgMap[type]
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
+          /* @__PURE__ */ jsx(StyledContents, { contentsGap: parseTokenValue50(content.spacing.gap), children: /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue50(content.spacing.gap), children: [
             showIcon && /* @__PURE__ */ jsx(
               Icon,
               {
@@ -9684,7 +9724,7 @@ var Notification = React65.forwardRef(
             /* @__PURE__ */ jsxs(
               StyledInlineCopy,
               {
-                copyGap: parseTokenValue49(content.copy.spacing.gap),
+                copyGap: parseTokenValue50(content.copy.spacing.gap),
                 children: [
                   title && /* @__PURE__ */ jsx(
                     Typography,
@@ -9705,7 +9745,7 @@ var Notification = React65.forwardRef(
                   link && /* @__PURE__ */ jsx(
                     StyledLinkWrapper,
                     {
-                      linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
+                      linkPaddingLeft: parseTokenValue50(content.copy.spacing.gap),
                       children: /* @__PURE__ */ jsx(
                         Link,
                         {
@@ -9737,7 +9777,7 @@ var Notification = React65.forwardRef(
   }
 );
 Notification.displayName = "Notification";
-var parseTokenValue50 = (value) => parseFloat(value);
+var parseTokenValue51 = (value) => parseFloat(value);
 var SCALE_STEP = 0.06;
 var SPRING_CONFIG = { damping: 20, stiffness: 260, mass: 0.5 };
 var CARD_ENTERING = FadeInDown.duration(200).easing(Easing$1.inOut(Easing$1.quad));
@@ -9749,7 +9789,7 @@ var CARD_BASE_STYLE = {
   right: 0,
   transformOrigin: "50% 100%"
 };
-var StyledRoot15 = styled50(View)(({ rootBottom, rootPaddingH }) => ({
+var StyledRoot15 = styled51(View)(({ rootBottom, rootPaddingH }) => ({
   position: "absolute",
   left: 0,
   right: 0,
@@ -9757,7 +9797,7 @@ var StyledRoot15 = styled50(View)(({ rootBottom, rootPaddingH }) => ({
   paddingHorizontal: rootPaddingH,
   alignItems: "stretch"
 }));
-var StyledStack = styled50(View)({
+var StyledStack = styled51(View)({
   position: "relative",
   width: "100%"
 });
@@ -9768,7 +9808,7 @@ var StackedCard = ({
   onDismiss
 }) => {
   const depthSV = useSharedValue(depth);
-  React65.useEffect(() => {
+  React66.useEffect(() => {
     depthSV.value = withSpring(depth, SPRING_CONFIG);
   }, [depth, depthSV]);
   const animatedStyle = useAnimatedStyle(() => ({
@@ -9799,13 +9839,13 @@ var StackedCard = ({
     }
   );
 };
-var StackedNotifications = React65.forwardRef((_a, ref) => {
+var StackedNotifications = React66.forwardRef((_a, ref) => {
   var _b = _a, { items, onDismiss, bottomOffset } = _b, rest = __objRest(_b, ["items", "onDismiss", "bottomOffset"]);
   const theme2 = useTheme();
   const { spacing } = theme2.tokens.semantics.dimensions;
-  const [dismissed, setDismissed] = React65.useState(/* @__PURE__ */ new Set());
+  const [dismissed, setDismissed] = React66.useState(/* @__PURE__ */ new Set());
   const idsKey = items.map((item) => item.id).join("|");
-  React65.useEffect(() => {
+  React66.useEffect(() => {
     setDismissed((prev) => {
       if (prev.size === 0) return prev;
       const present = new Set(items.map((item) => item.id));
@@ -9818,11 +9858,11 @@ var StackedNotifications = React65.forwardRef((_a, ref) => {
       return changed ? next : prev;
     });
   }, [idsKey]);
-  const activeItems = React65.useMemo(
+  const activeItems = React66.useMemo(
     () => items.filter((item) => !dismissed.has(item.id)),
     [items, dismissed]
   );
-  const layers = React65.useMemo(
+  const layers = React66.useMemo(
     () => activeItems.slice(-3).reverse(),
     [activeItems]
   );
@@ -9834,15 +9874,15 @@ var StackedNotifications = React65.forwardRef((_a, ref) => {
     });
     onDismiss == null ? void 0 : onDismiss(id);
   };
-  const rootBottom = bottomOffset != null ? bottomOffset : parseTokenValue50(spacing.lg);
-  const peekStep = parseTokenValue50(spacing.xs);
+  const rootBottom = bottomOffset != null ? bottomOffset : parseTokenValue51(spacing.lg);
+  const peekStep = parseTokenValue51(spacing.xs);
   return /* @__PURE__ */ jsx(
     StyledRoot15,
     __spreadProps(__spreadValues({
       ref,
       pointerEvents: "box-none",
       rootBottom,
-      rootPaddingH: parseTokenValue50(spacing.md)
+      rootPaddingH: parseTokenValue51(spacing.md)
     }, rest), {
       children: /* @__PURE__ */ jsx(StyledStack, { children: layers.map((item, depth) => /* @__PURE__ */ jsx(
         StackedCard,
@@ -9858,16 +9898,16 @@ var StackedNotifications = React65.forwardRef((_a, ref) => {
   );
 });
 StackedNotifications.displayName = "StackedNotifications";
-var parseTokenValue51 = (value) => parseFloat(value);
+var parseTokenValue52 = (value) => parseFloat(value);
 var NIB_OFFSET = {
   left: 24,
   middle: 146,
   right: 268
 };
-var Container2 = styled50(View)(({ $width }) => ({
+var Container2 = styled51(View)(({ $width }) => ({
   width: $width
 }));
-var StyledBody = styled50(View)(
+var StyledBody = styled51(View)(
   ({
     bgColor,
     borderColor,
@@ -9966,7 +10006,7 @@ function NibTriangle({
     }
   );
 }
-var Tooltip = React65.forwardRef(
+var Tooltip = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { text, alignment = "middle", position = "bottom", children } = _b, props = __objRest(_b, ["text", "alignment", "position", "children"]);
     const theme2 = useTheme();
@@ -9980,9 +10020,9 @@ var Tooltip = React65.forwardRef(
       width
     } = theme2.tokens.components.tooltip;
     const [open, setOpen] = useState(false);
-    const tooltipWidth = parseTokenValue51(width);
-    const nibWidth = parseTokenValue51(nibToken.width);
-    const nibHeight = parseTokenValue51(nibToken.height);
+    const tooltipWidth = parseTokenValue52(width);
+    const nibWidth = parseTokenValue52(nibToken.width);
+    const nibHeight = parseTokenValue52(nibToken.height);
     const nibHalfWidth = nibWidth / 2;
     const nibOuterHeight = nibHeight + 1;
     const nibX = NIB_OFFSET[alignment];
@@ -9991,11 +10031,11 @@ var Tooltip = React65.forwardRef(
     const side = position === "bottom" ? "top" : "bottom";
     const bgColor = colour.background.default;
     const borderColor = colour.border.default;
-    const borderW = parseTokenValue51(borderWidth.default);
-    const borderR = parseTokenValue51(borderRadius.default);
-    const topPad = parseTokenValue51(spacing.topPadding);
-    const bottomPad = parseTokenValue51(spacing.bottomPadding);
-    const horizontalPad = parseTokenValue51(spacing.horizontalPading);
+    const borderW = parseTokenValue52(borderWidth.default);
+    const borderR = parseTokenValue52(borderRadius.default);
+    const topPad = parseTokenValue52(spacing.topPadding);
+    const bottomPad = parseTokenValue52(spacing.bottomPadding);
+    const horizontalPad = parseTokenValue52(spacing.horizontalPading);
     const nibRow = /* @__PURE__ */ jsx(View, { style: { height: nibOuterHeight, position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsx(
       NibTriangle,
       {
@@ -10054,8 +10094,8 @@ var Tooltip = React65.forwardRef(
       return bubble;
     }
     if (Platform.OS === "web") {
-      const child = React65.isValidElement(children) ? children : null;
-      const trigger = child ? React65.cloneElement(child, {
+      const child = React66.isValidElement(children) ? children : null;
+      const trigger = child ? React66.cloneElement(child, {
         onPress: () => {
           var _a2, _b2;
           (_b2 = (_a2 = child.props).onPress) == null ? void 0 : _b2.call(_a2);
@@ -10096,8 +10136,8 @@ var Tooltip = React65.forwardRef(
   }
 );
 Tooltip.displayName = "Tooltip";
-var parseTokenValue52 = (value) => parseFloat(value);
-var StyledInsightRoot = styled50(View)(
+var parseTokenValue53 = (value) => parseFloat(value);
+var StyledInsightRoot = styled51(View)(
   ({
     rootGap,
     rootPaddingH,
@@ -10124,7 +10164,7 @@ var StyledInsightRoot = styled50(View)(
     minWidth: rootMinWidth
   })
 );
-var StyledInsightContent = styled50(View)(
+var StyledInsightContent = styled51(View)(
   ({ contentGap }) => ({
     flex: 1,
     flexDirection: "column",
@@ -10132,7 +10172,7 @@ var StyledInsightContent = styled50(View)(
     gap: contentGap
   })
 );
-var MessageCardInsight = React65.forwardRef(
+var MessageCardInsight = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "standalone", icon, illustration, title, children } = _b, rest = __objRest(_b, ["variant", "icon", "illustration", "title", "children"]);
     const theme2 = useTheme();
@@ -10141,26 +10181,26 @@ var MessageCardInsight = React65.forwardRef(
     const isSupporting = variant === "supporting";
     const supporting = insightCard.spacing.supporting;
     const standalone = insightCard.spacing.standalone;
-    const radiusStandalone = parseTokenValue52(
+    const radiusStandalone = parseTokenValue53(
       insightCard.borderRadius.standalone.default
     );
-    const radiusSupporting = parseTokenValue52(
+    const radiusSupporting = parseTokenValue53(
       insightCard.borderRadius.supporting.bottom
     );
     return /* @__PURE__ */ jsxs(
       StyledInsightRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue52(
+        rootGap: parseTokenValue53(
           isSupporting ? supporting.gap : standalone.gap
         ),
-        rootPaddingH: parseTokenValue52(
+        rootPaddingH: parseTokenValue53(
           isSupporting ? semanticSpacing.md : standalone.horizontalPadding
         ),
-        rootPaddingTop: parseTokenValue52(
+        rootPaddingTop: parseTokenValue53(
           isSupporting ? supporting.topPadding : standalone.verticalPadding
         ),
-        rootPaddingBottom: parseTokenValue52(
+        rootPaddingBottom: parseTokenValue53(
           isSupporting ? supporting.bottomPadding : standalone.verticalPadding
         ),
         rootBorderTopLeftRadius: isSupporting ? 0 : radiusStandalone,
@@ -10168,7 +10208,7 @@ var MessageCardInsight = React65.forwardRef(
         rootBorderBottomLeftRadius: isSupporting ? radiusSupporting : radiusStandalone,
         rootBorderBottomRightRadius: isSupporting ? radiusSupporting : radiusStandalone,
         rootBgColor: insightCard.colour.background.default,
-        rootMinWidth: parseTokenValue52(insightCard.size.minWidth),
+        rootMinWidth: parseTokenValue53(insightCard.size.minWidth),
         accessible: true,
         accessibilityRole: "summary"
       }, rest), {
@@ -10177,7 +10217,7 @@ var MessageCardInsight = React65.forwardRef(
           /* @__PURE__ */ jsxs(
             StyledInsightContent,
             {
-              contentGap: parseTokenValue52(standalone.content.gap),
+              contentGap: parseTokenValue53(standalone.content.gap),
               children: [
                 title && /* @__PURE__ */ jsx(
                   Typography,
@@ -10204,7 +10244,7 @@ var MessageCardInsight = React65.forwardRef(
   }
 );
 MessageCardInsight.displayName = "MessageCard.Insight";
-var StyledBannerRoot = styled50(View)(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
+var StyledBannerRoot = styled51(View)(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rootGap,
@@ -10212,7 +10252,7 @@ var StyledBannerRoot = styled50(View)(({ rootGap, rootPadding, rootBorderRadius,
   borderRadius: rootBorderRadius,
   backgroundColor: rootBgColor
 }));
-var StyledBannerImage = styled50(View)(({ imageRadius, imageBgColor }) => ({
+var StyledBannerImage = styled51(View)(({ imageRadius, imageBgColor }) => ({
   flexShrink: 0,
   width: 108,
   height: 108,
@@ -10220,14 +10260,14 @@ var StyledBannerImage = styled50(View)(({ imageRadius, imageBgColor }) => ({
   overflow: "hidden",
   backgroundColor: imageBgColor
 }));
-var StyledBannerIllustrationSlot = styled50(View)({
+var StyledBannerIllustrationSlot = styled51(View)({
   flexShrink: 0,
   width: 108,
   height: 108,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledBannerContents = styled50(View)(
+var StyledBannerContents = styled51(View)(
   ({ contentsGap }) => ({
     flex: 1,
     flexDirection: "column",
@@ -10237,13 +10277,13 @@ var StyledBannerContents = styled50(View)(
     minWidth: 0
   })
 );
-var StyledBannerCopy = styled50(View)(({ copyGap }) => ({
+var StyledBannerCopy = styled51(View)(({ copyGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: copyGap,
   width: "100%"
 }));
-var MessageCardBanner = React65.forwardRef(
+var MessageCardBanner = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       colourScheme = "primary",
@@ -10269,21 +10309,21 @@ var MessageCardBanner = React65.forwardRef(
       StyledBannerRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue52(dimensions3.spacing.md),
-        rootPadding: parseTokenValue52(dimensions3.spacing.md),
-        rootBorderRadius: parseTokenValue52(dimensions3.borderRadius.md),
+        rootGap: parseTokenValue53(dimensions3.spacing.md),
+        rootPadding: parseTokenValue53(dimensions3.spacing.md),
+        rootBorderRadius: parseTokenValue53(dimensions3.borderRadius.md),
         rootBgColor: bgColor,
         accessible: true,
         accessibilityRole: "summary"
       }, rest), {
         children: [
-          (media == null ? void 0 : media.type) === "illustration" ? /* @__PURE__ */ jsx(StyledBannerIllustrationSlot, { children: React65.createElement(media.illustration, {
+          (media == null ? void 0 : media.type) === "illustration" ? /* @__PURE__ */ jsx(StyledBannerIllustrationSlot, { children: React66.createElement(media.illustration, {
             width: 108,
             height: 108
           }) }) : (media == null ? void 0 : media.type) === "image" ? /* @__PURE__ */ jsx(
             StyledBannerImage,
             {
-              imageRadius: parseTokenValue52(dimensions3.borderRadius.sm),
+              imageRadius: parseTokenValue53(dimensions3.borderRadius.sm),
               imageBgColor: colour.background.surface.secondary,
               children: /* @__PURE__ */ jsx(
                 Image,
@@ -10299,12 +10339,12 @@ var MessageCardBanner = React65.forwardRef(
           /* @__PURE__ */ jsxs(
             StyledBannerContents,
             {
-              contentsGap: parseTokenValue52(dimensions3.spacing.xs),
+              contentsGap: parseTokenValue53(dimensions3.spacing.xs),
               children: [
                 /* @__PURE__ */ jsxs(
                   StyledBannerCopy,
                   {
-                    copyGap: parseTokenValue52(dimensions3.spacing["3xs"]),
+                    copyGap: parseTokenValue53(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 })
@@ -10335,7 +10375,7 @@ var MessageCard = {
   Insight: MessageCardInsight,
   Banner: MessageCardBanner
 };
-var parseTokenValue53 = (value) => parseFloat(value);
+var parseTokenValue54 = (value) => parseFloat(value);
 var slideEaseOut = Easing$1.out(Easing$1.quad);
 var MONTH_SLIDE_ENTERING = {
   forward: FadeInRight.duration(250).easing(slideEaseOut),
@@ -10376,14 +10416,14 @@ function defaultGetDateState(date) {
 function getDefaultMonthLabel(year, month, locale) {
   return format(new Date(year, month, 1), "MMMM yyyy", { locale });
 }
-var StyledContainer3 = styled50(View)(({ containerMaxWidth }) => ({
+var StyledContainer3 = styled51(View)(({ containerMaxWidth }) => ({
   flexDirection: "column",
   // Fill the parent by default (capped by maxWidth) so consumers don't need a
   // wrapper. Overridable via the `style` prop.
   width: "100%",
   maxWidth: containerMaxWidth
 }));
-var StyledMonthHeader = styled50(View)(
+var StyledMonthHeader = styled51(View)(
   ({ headerGap, datesGap }) => ({
     flexDirection: "row",
     alignItems: "center",
@@ -10392,24 +10432,24 @@ var StyledMonthHeader = styled50(View)(
     marginBottom: datesGap
   })
 );
-var StyledWeekRow = styled50(View)(({ weekGap }) => ({
+var StyledWeekRow = styled51(View)(({ weekGap }) => ({
   flexDirection: "row",
   // Gap between the week-day header and the month header.
   marginBottom: weekGap
 }));
-var StyledWeekCell = styled50(View)({
+var StyledWeekCell = styled51(View)({
   flex: 1,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledDatesGrid = styled50(View)(({ rowGap }) => ({
+var StyledDatesGrid = styled51(View)(({ rowGap }) => ({
   flexDirection: "column",
   gap: rowGap
 }));
-var StyledDateRow = styled50(View)({
+var StyledDateRow = styled51(View)({
   flexDirection: "row"
 });
-var StyledDateCell = styled50(View)(
+var StyledDateCell = styled51(View)(
   ({ cellHeight }) => ({
     flex: 1,
     height: cellHeight,
@@ -10417,7 +10457,7 @@ var StyledDateCell = styled50(View)(
     justifyContent: "center"
   })
 );
-var StyledIndicator3 = styled50(View)(
+var StyledIndicator3 = styled51(View)(
   ({
     indicatorSize,
     indicatorBorderRadius,
@@ -10437,7 +10477,7 @@ var StyledIndicator3 = styled50(View)(
     justifyContent: "center"
   })
 );
-var DatePicker = React65.forwardRef(
+var DatePicker = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       year,
@@ -10496,17 +10536,17 @@ var DatePicker = React65.forwardRef(
     } = useMemo(
       () => ({
         // Gap between the week-day header and the month header.
-        weekGap: parseTokenValue53(datePicker.spacing.gap),
+        weekGap: parseTokenValue54(datePicker.spacing.gap),
         // Gap between the month header and the dates grid.
-        datesGap: parseTokenValue53(theme2.tokens.semantics.dimensions.spacing.md),
-        containerMaxWidth: parseTokenValue53(dt.size.width) * 7,
-        headerGap: parseTokenValue53(datePicker.month.spacing.gap),
-        cellHeight: parseTokenValue53(dt.size.height),
-        indicatorSize: parseTokenValue53(dt.size.indicator),
-        indicatorBorderRadius: parseTokenValue53(dt.borderRadius.indicator),
-        selectedBorderWidth: parseTokenValue53(dt.borderWidth.indicator.selected),
-        disabledOpacity: parseTokenValue53(dt.opacity.disabled),
-        rowGap: parseTokenValue53(datePicker.dates.spacing.gap)
+        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)
       }),
       [datePicker, dt, theme2]
     );
@@ -10784,26 +10824,26 @@ var buildPointerPath = (r) => {
     "Z"
   ].join(" ");
 };
-var parseTokenValue54 = (value) => parseFloat(value);
-var StyledRoot16 = styled50(View)(({ rootGap }) => ({
+var parseTokenValue55 = (value) => parseFloat(value);
+var StyledRoot16 = styled51(View)(({ rootGap }) => ({
   flexDirection: "column",
   gap: rootGap,
   width: "100%"
 }));
-var StyledRow2 = styled50(View)(({ rowGap }) => ({
+var StyledRow2 = styled51(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: rowGap,
   width: "100%"
 }));
-var StyledItemStack = styled50(View)(({ stackGap }) => ({
+var StyledItemStack = styled51(View)(({ stackGap }) => ({
   flexDirection: "column",
   alignItems: "center",
   gap: stackGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledPictureButton = styled50(Pressable)(
+var StyledPictureButton = styled51(Pressable)(
   ({
     buttonBorderRadius,
     buttonBorderWidth,
@@ -10830,14 +10870,14 @@ var StyledPictureButton = styled50(Pressable)(
     overflow: "hidden"
   })
 );
-var StyledPointer = styled50(Svg)(
+var StyledPointer = styled51(Svg)(
   ({ pointerVisible }) => ({
     width: POINTER_WIDTH,
     height: POINTER_HEIGHT,
     opacity: pointerVisible ? 1 : 0
   })
 );
-var PictureSelector = React65.forwardRef(
+var PictureSelector = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -10864,7 +10904,7 @@ var PictureSelector = React65.forwardRef(
     const { pictureSelector } = theme2.tokens.components;
     const { pictureButton } = pictureSelector;
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React65.useState(defaultValue);
+    const [internalValue, setInternalValue] = React66.useState(defaultValue);
     const selectedValue = isControlled ? value : internalValue;
     const selectedItem = items.find((item) => item.value === selectedValue);
     const hasInsight = Boolean(
@@ -10874,21 +10914,21 @@ var PictureSelector = React65.forwardRef(
       if (!isControlled) setInternalValue(nextValue);
       onValueChange == null ? void 0 : onValueChange(nextValue);
     };
-    const rootGap = parseTokenValue54(pictureSelector.spacing.container.gap);
-    const rowGap = parseTokenValue54(pictureSelector.spacing.buttons.gap);
-    const stackGap = parseTokenValue54(pictureButton.spacing.container.gap);
-    const buttonPadding = parseTokenValue54(pictureButton.spacing.padding);
-    const buttonBorderRadius = parseTokenValue54(
+    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(
       pictureButton.borderRadius.default
     );
-    const borderWidthDefault = parseTokenValue54(
+    const borderWidthDefault = parseTokenValue55(
       pictureButton.borderWidth.default
     );
-    const borderWidthActive = parseTokenValue54(pictureButton.borderWidth.active);
+    const borderWidthActive = parseTokenValue55(pictureButton.borderWidth.active);
     const pointerPath = buildPointerPath(
-      parseTokenValue54(pictureButton.pointer.borderRadius.default)
+      parseTokenValue55(pictureButton.pointer.borderRadius.default)
     );
-    const resolvedMinWidth = itemMinWidth != null ? itemMinWidth : parseTokenValue54(pictureButton.size.minWidth);
+    const resolvedMinWidth = itemMinWidth != null ? itemMinWidth : parseTokenValue55(pictureButton.size.minWidth);
     const resolvedMinHeight = itemMinHeight != null ? itemMinHeight : resolvedMinWidth;
     return /* @__PURE__ */ jsxs(
       StyledRoot16,
@@ -10981,15 +11021,15 @@ var DEFAULT_UNIT_LABELS = {
   seconds: { singular: "sec", plural: "secs" }
 };
 var resolveLabel = (label, value) => typeof label === "string" ? label : value === 1 ? label.singular : label.plural;
-var parseTokenValue55 = (value) => parseFloat(value);
+var parseTokenValue56 = (value) => parseFloat(value);
 var pad = (value) => String(Math.max(0, Math.floor(value))).padStart(2, "0");
-var StackedRoot = styled50(View)(({ rootGap }) => ({
+var StackedRoot = styled51(View)(({ rootGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   alignSelf: "flex-start",
   gap: rootGap
 }));
-var StackedItem = styled50(View)(
+var StackedItem = styled51(View)(
   ({
     itemGap,
     itemVerticalPadding,
@@ -11007,7 +11047,7 @@ var StackedItem = styled50(View)(
     borderRadius: itemBorderRadius
   })
 );
-var StackedCountBox = styled50(View)(({ countPaddingTop, countBgColor, countBorderRadius }) => ({
+var StackedCountBox = styled51(View)(({ countPaddingTop, countBgColor, countBorderRadius }) => ({
   alignItems: "center",
   justifyContent: "center",
   // TODO: Add token — fixed count box dimensions are not yet tokenised.
@@ -11017,7 +11057,7 @@ var StackedCountBox = styled50(View)(({ countPaddingTop, countBgColor, countBord
   backgroundColor: countBgColor,
   borderRadius: countBorderRadius
 }));
-var InlineRoot = styled50(View)(
+var InlineRoot = styled51(View)(
   ({
     rootGap,
     rootVerticalPadding,
@@ -11037,18 +11077,18 @@ var InlineRoot = styled50(View)(
     overflow: "hidden"
   })
 );
-var InlineGroup = styled50(View)(({ groupGap }) => ({
+var InlineGroup = styled51(View)(({ groupGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "flex-end",
   gap: groupGap
 }));
-var InlineCount = styled50(View)(({ countGap }) => ({
+var InlineCount = styled51(View)(({ countGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: countGap
 }));
-var Countdown = React65.forwardRef(
+var Countdown = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       layout = "stacked",
@@ -11111,28 +11151,28 @@ var Countdown = React65.forwardRef(
         InlineRoot,
         __spreadProps(__spreadValues({
           ref,
-          rootGap: parseTokenValue55(countdown.spacing.gap),
-          rootVerticalPadding: parseTokenValue55(
+          rootGap: parseTokenValue56(countdown.spacing.gap),
+          rootVerticalPadding: parseTokenValue56(
             countdown.spacing.verticalPadding
           ),
-          rootHorizontalPadding: parseTokenValue55(
+          rootHorizontalPadding: parseTokenValue56(
             countdown.spacing.horizontalPadding
           ),
           rootBgColor: countdown.colour.background.default,
-          rootBorderRadius: parseTokenValue55(countdown.borderRadius.default)
+          rootBorderRadius: parseTokenValue56(countdown.borderRadius.default)
         }, rest), {
           children: [
             label != null && /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "bold", size: "md", color: "primary", children: label }),
             /* @__PURE__ */ jsx(
               InlineGroup,
               {
-                groupGap: parseTokenValue55(countdown.countdownGroup.spacing.gap),
-                children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
+                groupGap: parseTokenValue56(countdown.countdownGroup.spacing.gap),
+                children: units.map((unit, index) => /* @__PURE__ */ jsxs(React66.Fragment, { children: [
                   index > 0 && colon(`colon-${unit.key}`),
                   /* @__PURE__ */ jsxs(
                     InlineCount,
                     {
-                      countGap: parseTokenValue55(countdown.count.spacing.gap),
+                      countGap: parseTokenValue56(countdown.count.spacing.gap),
                       children: [
                         /* @__PURE__ */ jsx(
                           Typography,
@@ -11168,33 +11208,33 @@ var Countdown = React65.forwardRef(
       StackedRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue55(countdown.spacing.gap)
+        rootGap: parseTokenValue56(countdown.spacing.gap)
       }, rest), {
-        children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
+        children: units.map((unit, index) => /* @__PURE__ */ jsxs(React66.Fragment, { children: [
           index > 0 && colon(`colon-${unit.key}`),
           /* @__PURE__ */ jsxs(
             StackedItem,
             {
-              itemGap: parseTokenValue55(countdownItem.spacing.gap),
-              itemVerticalPadding: parseTokenValue55(
+              itemGap: parseTokenValue56(countdownItem.spacing.gap),
+              itemVerticalPadding: parseTokenValue56(
                 countdownItem.spacing.verticalPadding
               ),
-              itemHorizontalPadding: parseTokenValue55(
+              itemHorizontalPadding: parseTokenValue56(
                 countdownItem.spacing.horizontalPadding
               ),
               itemBgColor: countdownItem.colour.background.default,
-              itemBorderRadius: parseTokenValue55(
+              itemBorderRadius: parseTokenValue56(
                 countdownItem.borderRadius.default
               ),
               children: [
                 /* @__PURE__ */ jsx(
                   StackedCountBox,
                   {
-                    countPaddingTop: parseTokenValue55(
+                    countPaddingTop: parseTokenValue56(
                       countdownItem.count.spacing.paddingTop
                     ),
                     countBgColor: countdownItem.count.colour.background.default,
-                    countBorderRadius: parseTokenValue55(
+                    countBorderRadius: parseTokenValue56(
                       countdownItem.count.borderRadius.default
                     ),
                     children: /* @__PURE__ */ jsx(
@@ -11224,41 +11264,41 @@ var Countdown = React65.forwardRef(
   }
 );
 Countdown.displayName = "Countdown";
-var parseTokenValue56 = (value) => {
+var parseTokenValue57 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var BadgeContainer = styled50(View)(({ theme: theme2 }) => {
+var BadgeContainer = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const { sizing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
   return {
     display: "flex",
     flexDirection: "row",
-    gap: parseTokenValue56(spacing["2xs"]),
+    gap: parseTokenValue57(spacing["2xs"]),
     alignItems: "center",
     justifyContent: "center",
-    height: parseTokenValue56(sizing["2xl"]),
-    paddingRight: parseTokenValue56(spacing.xs),
+    height: parseTokenValue57(sizing["2xl"]),
+    paddingRight: parseTokenValue57(spacing.xs),
     backgroundColor: colour.background.container.brand,
-    borderTopRightRadius: parseTokenValue56(borderRadius.xs),
-    borderBottomRightRadius: parseTokenValue56(borderRadius.xs)
+    borderTopRightRadius: parseTokenValue57(borderRadius.xs),
+    borderBottomRightRadius: parseTokenValue57(borderRadius.xs)
   };
 });
-var BadgeIcon = styled50(View)(({ theme: theme2 }) => {
+var BadgeIcon = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const sizing = theme2.tokens.semantics.dimensions.sizing;
   return {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: parseTokenValue56(sizing.md),
-    height: parseTokenValue56(sizing.md),
-    marginLeft: parseTokenValue56(spacing.xs),
+    width: parseTokenValue57(sizing.md),
+    height: parseTokenValue57(sizing.md),
+    marginLeft: parseTokenValue57(spacing.xs),
     flexShrink: 0
   };
 });
-var Badge2 = React65.forwardRef(
+var Badge2 = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { icon, text } = _b, rest = __objRest(_b, ["icon", "text"]);
     return /* @__PURE__ */ jsxs(BadgeContainer, __spreadProps(__spreadValues({ ref }, rest), { children: [
@@ -11268,7 +11308,7 @@ var Badge2 = React65.forwardRef(
   }
 );
 Badge2.displayName = "ProductListingCard.Badge";
-var StyledGrid = styled50(View)(({ theme: theme2 }) => {
+var StyledGrid = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "grid",
@@ -11276,7 +11316,7 @@ var StyledGrid = styled50(View)(({ theme: theme2 }) => {
     "grid-row-gap": spacing.xl
   };
 });
-var Grid = React65.forwardRef(
+var Grid = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, xs = 1, md = 2, lg = 3 } = _b, rest = __objRest(_b, ["children", "xs", "md", "lg"]);
     const { width } = useWindowDimensions();
@@ -11303,69 +11343,69 @@ var Grid = React65.forwardRef(
   }
 );
 Grid.displayName = "ProductListingCard.Grid";
-var parseTokenValue57 = (value) => {
+var parseTokenValue58 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var StyledRoot17 = styled50(Pressable)(({ theme: theme2 }) => {
+var StyledRoot17 = styled51(Pressable)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
     flexDirection: "column",
-    gap: parseTokenValue57(spacing.md),
+    gap: parseTokenValue58(spacing.md),
     alignItems: "flex-start",
     width: "100%"
   };
 });
-var ImageContainer = styled50(View)(({ theme: theme2 }) => ({
+var ImageContainer = styled51(View)(({ theme: theme2 }) => ({
   position: "relative",
   width: "100%",
   aspectRatio: 1,
   overflow: "hidden",
-  borderRadius: parseTokenValue57(
+  borderRadius: parseTokenValue58(
     theme2.tokens.semantics.dimensions.borderRadius.md
   )
 }));
-var StyledImage2 = styled50(Image)({
+var StyledImage2 = styled51(Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var BadgeContainer2 = styled50(View)(({ theme: theme2 }) => ({
+var BadgeContainer2 = styled51(View)(({ theme: theme2 }) => ({
   position: "absolute",
-  top: parseTokenValue57(theme2.tokens.semantics.dimensions.spacing.md),
+  top: parseTokenValue58(theme2.tokens.semantics.dimensions.spacing.md),
   left: 0
 }));
-var ContentContainer = styled50(View)(({ theme: theme2 }) => {
+var ContentContainer = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
     flexDirection: "column",
-    gap: parseTokenValue57(spacing.md),
+    gap: parseTokenValue58(spacing.md),
     alignItems: "flex-start",
     width: "100%"
   };
 });
-var DetailsContainer = styled50(View)({
+var DetailsContainer = styled51(View)({
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
   width: "100%"
 });
-var CategoryWrapper = styled50(View)(({ theme: theme2 }) => {
+var CategoryWrapper = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
-    marginBottom: parseTokenValue57(spacing["3xs"])
+    marginBottom: parseTokenValue58(spacing["3xs"])
   };
 });
-var TitleContainer = styled50(View)({
+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 = styled50(View)(({ theme: theme2 }) => {
+var PricingContainer = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -11375,7 +11415,7 @@ var PricingContainer = styled50(View)(({ theme: theme2 }) => {
     width: "100%"
   };
 });
-var _ProductListingCard = React65.forwardRef(
+var _ProductListingCard = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       image,
@@ -11417,7 +11457,7 @@ var _ProductListingCard = React65.forwardRef(
             accessibilityLabel: imageAlt,
             accessible: true
           }
-        ) : React65.isValidElement(image) ? image : /* @__PURE__ */ jsx(
+        ) : React66.isValidElement(image) ? image : /* @__PURE__ */ jsx(
           StyledImage2,
           {
             source: image,
@@ -11455,14 +11495,14 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled50(View, {
+var StyledCardContainer = styled51(View, {
   shouldForwardProp: (prop) => prop !== "showBanner"
 })(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
-  const spacingMd = parseTokenValue8(spacing.md);
-  const spacingXl = parseTokenValue8(spacing.xl);
-  const radiusMd = parseTokenValue8(borderRadius.md);
+  const spacingMd = parseTokenValue9(spacing.md);
+  const spacingXl = parseTokenValue9(spacing.xl);
+  const radiusMd = parseTokenValue9(borderRadius.md);
   return {
     flexDirection: "row",
     width: "100%",
@@ -11486,7 +11526,7 @@ var StyledCardContainer = styled50(View, {
     flex: 1
   };
 });
-var StyledImage3 = styled50(View)(({ theme: theme2, imageBackgroundColor, thumbnailWidth = 148 }) => ({
+var StyledImage3 = styled51(View)(({ theme: theme2, imageBackgroundColor, thumbnailWidth = 148 }) => ({
   flexShrink: 0,
   backgroundColor: imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
   overflow: "hidden",
@@ -11496,24 +11536,24 @@ var StyledImage3 = styled50(View)(({ theme: theme2, imageBackgroundColor, thumbn
   minHeight: thumbnailWidth,
   position: "relative"
 }));
-var StyledContentArea = styled50(View)(({ theme: theme2 }) => {
+var StyledContentArea = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
-  const paddingValue = parseTokenValue8(spacing.md);
+  const paddingValue = parseTokenValue9(spacing.md);
   return {
     flex: 1,
     paddingHorizontal: paddingValue,
     paddingVertical: paddingValue,
-    gap: parseTokenValue8(spacing.xs),
+    gap: parseTokenValue9(spacing.xs),
     justifyContent: "space-between"
   };
 });
-var StyledTextContainer = styled50(View)(() => ({
+var StyledTextContainer = styled51(View)(() => ({
   gap: 2
 }));
-var StyledBannerWrapper = styled50(View)(({ theme: theme2 }) => {
+var StyledBannerWrapper = styled51(View)(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
-  const radiusMd = parseTokenValue8(borderRadius.md);
-  const spacingMd = parseTokenValue8(spacing.md);
+  const radiusMd = parseTokenValue9(borderRadius.md);
+  const spacingMd = parseTokenValue9(spacing.md);
   return {
     width: "100%",
     // Tuck the banner up to overlap with card bottom; the 27px notification padding
@@ -11524,16 +11564,16 @@ var StyledBannerWrapper = styled50(View)(({ theme: theme2 }) => {
     paddingBottom: spacingMd
   };
 });
-var StyledRootWrapper = styled50(View)(() => {
+var StyledRootWrapper = styled51(View)(() => {
   return {
     flexDirection: "column",
     width: "100%"
   };
 });
-var StyledNotification = styled50(Notification)(({ theme: theme2 }) => {
+var StyledNotification = styled51(Notification)(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
-  const spacingMd = parseTokenValue8(spacing.md);
-  const radiusMd = parseTokenValue8(borderRadius.md);
+  const spacingMd = parseTokenValue9(spacing.md);
+  const radiusMd = parseTokenValue9(borderRadius.md);
   return {
     paddingHorizontal: spacingMd,
     // 27px top padding (Figma) leaves a small cream reveal above the text once
@@ -11547,11 +11587,11 @@ var StyledNotification = styled50(Notification)(({ theme: theme2 }) => {
     borderBottomRightRadius: radiusMd
   };
 });
-var StyledNoneBanner = styled50(View)(({ theme: theme2 }) => {
+var StyledNoneBanner = styled51(View)(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
-  const spacingMd = parseTokenValue8(spacing.md);
-  const radiusMd = parseTokenValue8(borderRadius.md);
+  const spacingMd = parseTokenValue9(spacing.md);
+  const radiusMd = parseTokenValue9(borderRadius.md);
   return {
     paddingHorizontal: spacingMd,
     paddingTop: 27,
@@ -11563,7 +11603,7 @@ var StyledNoneBanner = styled50(View)(({ theme: theme2 }) => {
     borderBottomRightRadius: radiusMd
   };
 });
-var ProductDisplayCard = React65.forwardRef(
+var ProductDisplayCard = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       title,
@@ -11693,9 +11733,9 @@ var ProductDisplayCard = React65.forwardRef(
   }
 );
 ProductDisplayCard.displayName = "ProductDisplayCard";
-var TabNavigationContext = React65.createContext(void 0);
+var TabNavigationContext = React66.createContext(void 0);
 var useTabNavigationContext = () => {
-  const context = React65.useContext(TabNavigationContext);
+  const context = React66.useContext(TabNavigationContext);
   if (!context) {
     throw new Error(
       "TabNavigation.List, TabNavigation.Tab and TabNavigation.Panel must be used within a TabNavigation component."
@@ -11703,13 +11743,13 @@ var useTabNavigationContext = () => {
   }
   return context;
 };
-var parseTokenValue58 = (value) => parseFloat(value);
-var StyledFixedList = styled50(View)({
+var parseTokenValue59 = (value) => parseFloat(value);
+var StyledFixedList = styled51(View)({
   flexDirection: "row",
   alignItems: "stretch",
   width: "100%"
 });
-var StyledTab = styled50(Pressable)(
+var StyledTab = styled51(Pressable)(
   ({
     tabHeight,
     tabMinWidth,
@@ -11734,7 +11774,7 @@ var StyledTab = styled50(Pressable)(
     borderBottomColor: tabBorderColor
   }, tabFlex !== void 0 ? { flex: tabFlex } : { flexShrink: 0 })
 );
-var TabNavigationList = React65.forwardRef(
+var TabNavigationList = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
     const { layout } = useTabNavigationContext();
@@ -11753,7 +11793,7 @@ var TabNavigationList = React65.forwardRef(
   }
 );
 TabNavigationList.displayName = "TabNavigation.List";
-var TabNavigationTab = React65.forwardRef(
+var TabNavigationTab = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, disabled = false, icon, avatar, children } = _b, rest = __objRest(_b, ["value", "disabled", "icon", "avatar", "children"]);
     const { layout } = useTabNavigationContext();
@@ -11769,13 +11809,13 @@ var TabNavigationTab = React65.forwardRef(
       StyledTab,
       __spreadProps(__spreadValues({
         ref,
-        tabHeight: parseTokenValue58(tabitem.size.height),
-        tabMinWidth: parseTokenValue58(tabitem.size.minWidth),
-        tabPaddingTop: parseTokenValue58(spacing.topPadding),
-        tabPaddingBottom: parseTokenValue58(spacing.bottomPadding),
-        tabPaddingHorizontal: parseTokenValue58(spacing.horizontalPadding),
-        tabGap: parseTokenValue58(spacing.gap),
-        tabBorderWidth: parseTokenValue58(borderWidth.default),
+        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),
         tabBorderColor: borderColour,
         tabFlex: layout === "fixed" ? 1 : void 0
       }, rest), {
@@ -11789,7 +11829,7 @@ var TabNavigationTab = React65.forwardRef(
   }
 );
 TabNavigationTab.displayName = "TabNavigation.Tab";
-var TabNavigationPanel = React65.forwardRef(
+var TabNavigationPanel = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { value, children } = _b, rest = __objRest(_b, ["value", "children"]);
     const { animation } = useTabNavigationContext();
@@ -11797,7 +11837,7 @@ var TabNavigationPanel = React65.forwardRef(
   }
 );
 TabNavigationPanel.displayName = "TabNavigation.Panel";
-var TabNavigationRoot = React65.forwardRef(
+var TabNavigationRoot = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -11815,11 +11855,11 @@ var TabNavigationRoot = React65.forwardRef(
       "children"
     ]);
     const isControlled = typeof value === "string";
-    const [uncontrolledValue, setUncontrolledValue] = React65.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React66.useState(
       () => defaultValue != null ? defaultValue : ""
     );
     const currentValue = isControlled ? value : uncontrolledValue;
-    const handleValueChange = React65.useCallback(
+    const handleValueChange = React66.useCallback(
       (newValue) => {
         if (!isControlled) {
           setUncontrolledValue(newValue);
@@ -11828,7 +11868,7 @@ var TabNavigationRoot = React65.forwardRef(
       },
       [isControlled, onValueChange]
     );
-    const contextValue = React65.useMemo(
+    const contextValue = React66.useMemo(
       () => ({ layout, animation }),
       [layout, animation]
     );
@@ -11857,6 +11897,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, 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, 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