@butternutbox/pawprint-native 0.6.0 → 0.7.0

package/dist/index.js

@@ -1,15 +1,15 @@
 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 styled60 from '@emotion/native';
+import styled51 from '@emotion/native';
 export { default as styled } from '@emotion/native';
 import React60, { 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, Platform, Modal, Linking, Clipboard, Alert } from 'react-native';
+import { Text, View, Animated, Pressable, TextInput, Easing, StyleSheet, useWindowDimensions, PanResponder, Image, ScrollView, ActionSheetIOS, TouchableOpacity, Platform, Modal, TouchableWithoutFeedback, FlatList, Linking, Clipboard, Alert } from 'react-native';
 import Svg, { Path, Defs, LinearGradient, Stop, Rect, G, ClipPath } from 'react-native-svg';
 import * as SwitchPrimitive from '@rn-primitives/switch';
-import Animated9, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useSharedValue, useAnimatedStyle, ComplexAnimationBuilder } from 'react-native-reanimated';
+import Animated10, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useSharedValue, useAnimatedStyle, ComplexAnimationBuilder } from 'react-native-reanimated';
 import { Slot } from '@rn-primitives/slot';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as CheckboxPrimitive from '@rn-primitives/checkbox';
@@ -203,7 +203,7 @@ var VARIANT_DEFAULTS = {
   heading: { size: "md" },
   display: { size: "lg" }
 };
-var StyledText = styled60(Text)({});
+var StyledText = styled51(Text)({});
 var Typography = React60.forwardRef(
   (props, ref) => {
     const theme2 = useTheme();
@@ -287,7 +287,7 @@ var Typography = React60.forwardRef(
 );
 Typography.displayName = "Typography";
 var parseTokenValue2 = (value) => parseFloat(value);
-var StyledIconRoot = styled60(View)(({ iconDimension }) => ({
+var StyledIconRoot = styled51(View)(({ iconDimension }) => ({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
@@ -3829,7 +3829,7 @@ var SIZE_MAP = {
   lg: "large"
 };
 var parseTokenValue3 = (value) => parseFloat(value);
-var StyledRoot = styled60(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];
@@ -3850,12 +3850,12 @@ var StyledRoot = styled60(AvatarPrimitive.Root)(({ theme: theme2, size, border }
     borderStyle: "solid"
   });
 });
-var StyledImage = styled60(AvatarPrimitive.Image)({
+var StyledImage = styled51(AvatarPrimitive.Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var StyledFallback = styled60(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
+var StyledFallback = styled51(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
   const { background, text } = theme2.tokens.semantics.colour;
   return {
     display: "flex",
@@ -3867,7 +3867,7 @@ var StyledFallback = styled60(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
     color: text.primary
   };
 });
-var StyledIcon = styled60(Icon)(({
+var StyledIcon = styled51(Icon)(({
   theme: theme2,
   avatarSize
 }) => {
@@ -3931,7 +3931,7 @@ var AvatarRoot = React60.forwardRef(
 AvatarRoot.displayName = "Avatar";
 var Avatar = AvatarRoot;
 var parseTokenValue4 = (value) => parseFloat(value);
-var Container = styled60(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 {
@@ -4000,7 +4000,7 @@ var CarouselControls = React60.forwardRef(
 );
 CarouselControls.displayName = "CarouselControls";
 var parseTokenValue5 = (value) => parseFloat(value);
-var StyledBadge = styled60(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,
@@ -4114,7 +4114,7 @@ var Badge = React60.forwardRef(
 );
 Badge.displayName = "Badge";
 var parseTokenValue6 = (value) => parseFloat(value);
-var StyledSpinner = styled60(View)({});
+var StyledSpinner = styled51(View)({});
 var Spinner = React60.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "md", variant = "dark", style } = _b, rest = __objRest(_b, ["size", "variant", "style"]);
@@ -4180,12 +4180,12 @@ var sizeToTypographyKey = {
   md: "medium",
   sm: "small"
 };
-var IconWrapper = styled60(View)({
+var IconWrapper = styled51(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var StyledButton = styled60(Pressable)(
+var StyledButton = styled51(Pressable)(
   ({
     buttonHeight,
     buttonMinWidth,
@@ -4213,11 +4213,11 @@ var StyledButton = styled60(Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {}), buttonFullWidth ? { width: "100%" } : {})
 );
-var StyledTextWrapper = styled60(View)(({ textOpacity }) => ({
+var StyledTextWrapper = styled51(View)(({ textOpacity }) => ({
   opacity: textOpacity,
   flexShrink: 0
 }));
-var StyledSpinnerWrapper = styled60(View)({
+var StyledSpinnerWrapper = styled51(View)({
   position: "absolute",
   alignItems: "center",
   justifyContent: "center"
@@ -4341,7 +4341,7 @@ Button.displayName = "Button";
 
 // src/utils/token.ts
 var parseTokenValue8 = (value) => parseFloat(value);
-var StyledHint = styled60(View)(({
+var StyledHint = styled51(View)(({
   theme: theme2,
   hintVariant
 }) => {
@@ -4378,7 +4378,7 @@ var sizeToIconSizeToken = {
   md: "lg",
   sm: "md"
 };
-var StyledIconButton = styled60(Pressable)(
+var StyledIconButton = styled51(Pressable)(
   ({
     buttonDimension,
     buttonBorderRadius,
@@ -4397,12 +4397,12 @@ var StyledIconButton = styled60(Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {})
 );
-var StyledIconWrapper = styled60(View)(({ iconDimension, iconOpacity }) => ({
+var StyledIconWrapper = styled51(View)(({ iconDimension, iconOpacity }) => ({
   width: iconDimension,
   height: iconDimension,
   opacity: iconOpacity
 }));
-var StyledSpinnerWrapper2 = styled60(View)({
+var StyledSpinnerWrapper2 = styled51(View)({
   position: "absolute",
   alignItems: "center",
   justifyContent: "center"
@@ -4510,7 +4510,7 @@ var IconButton = React60.forwardRef(
 );
 IconButton.displayName = "IconButton";
 var parseTokenValue10 = (value) => parseFloat(value);
-var StyledRoot2 = styled60(View)(({ illustrationHeight }) => ({
+var StyledRoot2 = styled51(View)(({ illustrationHeight }) => ({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
@@ -4547,7 +4547,7 @@ var Illustration = React60.forwardRef(
 );
 Illustration.displayName = "Illustration";
 var parseTokenValue11 = (value) => parseFloat(value);
-var StyledLabelRow = styled60(View)(({ labelGap }) => ({
+var StyledLabelRow = styled51(View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
@@ -4795,7 +4795,7 @@ var VolumeUp = (props, ref) => /* @__PURE__ */ jsx(Svg, __spreadProps2(__spreadV
 var ForwardRef612 = forwardRef(VolumeUp);
 ForwardRef612.category = "core";
 var parseTokenValue12 = (value) => parseFloat(value);
-var StyledInputWrapper = styled60(Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
+var StyledInputWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled, containerWidth, containerHeight }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
   return {
     flexDirection: "row",
@@ -4809,7 +4809,7 @@ var StyledInputWrapper = styled60(Animated.View)(({ theme: theme2, isDisabled, c
     flexShrink: containerWidth !== void 0 ? 0 : void 0
   };
 });
-var StyledInput = styled60(TextInput)(({ theme: theme2 }) => {
+var StyledInput = styled51(TextInput)(({ theme: theme2 }) => {
   const { colour, field } = theme2.tokens.components.inputs;
   const placeholderTypography = field.placeholder.default;
   return __spreadValues({
@@ -4829,11 +4829,11 @@ var StyledInput = styled60(TextInput)(({ theme: theme2 }) => {
     outlineColor: "transparent"
   });
 });
-var StyledFocusRing = styled60(View)({
+var StyledFocusRing = styled51(View)({
   position: "absolute",
   pointerEvents: "none"
 });
-var StyledIconSlot = styled60(View)({
+var StyledIconSlot = styled51(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
@@ -4994,7 +4994,7 @@ var InputField = React60.forwardRef(
   }
 );
 InputField.displayName = "Input.Field";
-var StyledDescriptionRow = styled60(View)({
+var StyledDescriptionRow = styled51(View)({
   flexDirection: "row",
   alignItems: "center"
 });
@@ -5014,7 +5014,7 @@ var InputDescription = React60.forwardRef(
   }
 );
 InputDescription.displayName = "Input.Description";
-var StyledErrorRow = styled60(View)({
+var StyledErrorRow = styled51(View)({
   flexDirection: "row",
   alignItems: "center"
 });
@@ -5035,7 +5035,7 @@ var InputError = React60.forwardRef(
 );
 InputError.displayName = "Input.Error";
 var parseTokenValue13 = (value) => parseFloat(value);
-var StyledRoot3 = styled60(View)(({ theme: theme2 }) => {
+var StyledRoot3 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue13(spacing.gap)
@@ -7678,7 +7678,7 @@ function registerLogo(brand, variant, component) {
   }
   LOGOS[brand][variant] = component;
 }
-var StyledRoot4 = styled60(View)({
+var StyledRoot4 = styled51(View)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
@@ -7706,7 +7706,7 @@ var Logo = React60.forwardRef(
 );
 Logo.displayName = "Logo";
 var parseTokenValue14 = (value) => parseFloat(value);
-var StyledFieldGroup = styled60(View)(({ theme: theme2 }) => {
+var StyledFieldGroup = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     flexDirection: "row",
@@ -7714,7 +7714,7 @@ var StyledFieldGroup = styled60(View)(({ theme: theme2 }) => {
     gap: parseTokenValue14(spacing.field.gap)
   };
 });
-var StyledFieldTextWrapper = styled60(View)({
+var StyledFieldTextWrapper = styled51(View)({
   flexShrink: 0,
   justifyContent: "center"
 });
@@ -7753,7 +7753,7 @@ var NumberInputField = React60.forwardRef((_a, ref) => {
 });
 NumberInputField.displayName = "NumberInput.Field";
 var parseTokenValue15 = (value) => parseFloat(value);
-var StyledRoot5 = styled60(View)(({ theme: theme2 }) => {
+var StyledRoot5 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue15(spacing.gap)
@@ -7807,13 +7807,13 @@ var NumberInput = Object.assign(NumberInputRoot, {
   Error: InputError
 });
 var parseTokenValue16 = (value) => parseFloat(value);
-var StyledContainer = styled60(View)(({ switchGap, switchOpacity }) => ({
+var StyledContainer = styled51(View)(({ switchGap, switchOpacity }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: switchGap,
   opacity: switchOpacity
 }));
-var StyledControlTrack = styled60(View)(
+var StyledControlTrack = styled51(View)(
   ({
     switchChecked,
     controlWidth,
@@ -7839,14 +7839,14 @@ var StyledControlTrack = styled60(View)(
     justifyContent: "center"
   })
 );
-var StyledThumb = styled60(Animated.View)(({ thumbSize, thumbBgColor }) => ({
+var StyledThumb = styled51(Animated.View)(({ thumbSize, thumbBgColor }) => ({
   width: thumbSize,
   height: thumbSize,
   borderRadius: thumbSize / 2,
   backgroundColor: thumbBgColor,
   position: "absolute"
 }));
-var StyledContent = styled60(View)(({ contentGap }) => ({
+var StyledContent = styled51(View)(({ contentGap }) => ({
   gap: contentGap
 }));
 var Switch = React60.forwardRef(
@@ -7952,7 +7952,7 @@ var Switch = React60.forwardRef(
 );
 Switch.displayName = "Switch";
 var parseTokenValue17 = (value) => parseFloat(value);
-var StyledTag = styled60(View)(({ theme: theme2, tagVariant, tagSize }) => {
+var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
   const { sizing, spacing, colour, badge } = theme2.tokens.components.tags;
   const backgroundColorMap = {
     primary: colour.primary.background,
@@ -8025,21 +8025,21 @@ var Tag = React60.forwardRef(
 );
 Tag.displayName = "Tag";
 var parseTokenValue18 = (value) => parseFloat(value);
-var StyledTextAreaWrapper = styled60(Animated.View)(({ theme: theme2, isDisabled }) => {
+var StyledTextAreaWrapper = styled51(Animated.View)(({ theme: theme2, isDisabled }) => {
   const { spacing, colour, borderRadius, size } = theme2.tokens.components.inputs;
-  const { dimensions } = theme2.tokens.semantics;
+  const { dimensions: dimensions3 } = theme2.tokens.semantics;
   return {
     flexDirection: "column",
     gap: parseTokenValue18(spacing.field.gap),
     width: "100%",
     minWidth: parseTokenValue18(size.field.minWidth),
-    minHeight: parseTokenValue18(dimensions.sizing["3xl"]),
+    minHeight: parseTokenValue18(dimensions3.sizing["3xl"]),
     backgroundColor: isDisabled ? colour.field.background.inactive : colour.field.background.default,
     borderRadius: parseTokenValue18(borderRadius.field.default),
     position: "relative"
   };
 });
-var StyledTextArea = styled60(TextInput)(({ theme: theme2 }) => {
+var StyledTextArea = styled51(TextInput)(({ theme: theme2 }) => {
   const { colour } = theme2.tokens.components.inputs;
   return __spreadValues({
     flex: 1,
@@ -8054,17 +8054,17 @@ var StyledTextArea = styled60(TextInput)(({ theme: theme2 }) => {
     outlineColor: "transparent"
   });
 });
-var StyledFocusRing2 = styled60(View)({
+var StyledFocusRing2 = styled51(View)({
   position: "absolute",
   pointerEvents: "none"
 });
-var TextAreaContainer = styled60(View)({
+var TextAreaContainer = styled51(View)({
   position: "relative",
   width: "100%",
   flex: 1,
   flexDirection: "column"
 });
-var IconWrapper2 = styled60(View)(({ side }) => {
+var IconWrapper2 = styled51(View)(({ side }) => {
   return {
     position: "absolute",
     top: 0,
@@ -8100,7 +8100,7 @@ var TextAreaField = React60.forwardRef(
     ]);
     const theme2 = useTheme();
     const { spacing, colour, borderWidth, borderRadius, size } = theme2.tokens.components.inputs;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const focusBorderColor = theme2.tokens.semantics.colour.border.focus;
     const [isFocused, setIsFocused] = useState(false);
     const internalInputRef = useRef(null);
@@ -8181,8 +8181,8 @@ var TextAreaField = React60.forwardRef(
     const fieldHeight = parseTokenValue18(size.field.height);
     const textAreaMinHeight = fieldHeight;
     const iconGap = parseTokenValue18(spacing.field.gap);
-    const leadingIconSize = parseTokenValue18(dimensions.sizing.xl);
-    const trailingIconSize = parseTokenValue18(dimensions.sizing.md);
+    const leadingIconSize = parseTokenValue18(dimensions3.sizing.xl);
+    const trailingIconSize = parseTokenValue18(dimensions3.sizing.md);
     const leadingIconPadding = leadingIconSize + iconGap;
     const trailingIconPadding = trailingIconSize + iconGap;
     return /* @__PURE__ */ jsx(Pressable, { onPress: handleWrapperPress, children: /* @__PURE__ */ jsxs(
@@ -8251,18 +8251,18 @@ var TextAreaField = React60.forwardRef(
 );
 TextAreaField.displayName = "TextArea.Field";
 var parseTokenValue19 = (value) => parseFloat(value);
-var StyledLabelWrapper = styled60(View)({
+var StyledLabelWrapper = styled51(View)({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledLabel = styled60(View)(({ labelGap }) => ({
+var StyledLabel = styled51(View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
 }));
-var StyledCharCountWrapper = styled60(View)(({ charCountGap, charCountPadding }) => ({
+var StyledCharCountWrapper = styled51(View)(({ charCountGap, charCountPadding }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: charCountGap,
@@ -8326,7 +8326,7 @@ var TextAreaLabel = React60.forwardRef(
 );
 TextAreaLabel.displayName = "TextArea.Label";
 var parseTokenValue20 = (value) => parseFloat(value);
-var StyledRoot6 = styled60(View)(({ theme: theme2 }) => {
+var StyledRoot6 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue20(spacing.gap)
@@ -8421,25 +8421,25 @@ var AccordionContext = React60.createContext({
   size: "small"
 });
 var parseTokenValue21 = (value) => parseFloat(value);
-var StyledRoot7 = styled60(View)(({ rootGap }) => ({
+var StyledRoot7 = styled51(View)(({ rootGap }) => ({
   width: "100%",
   flexDirection: "column",
   gap: rootGap
 }));
-var StyledItem = styled60(View)({
+var StyledItem = styled51(View)({
   flexDirection: "column"
 });
-var StyledTrigger = styled60(Pressable)(({ triggerOpacity }) => ({
+var StyledTrigger = styled51(Pressable)(({ triggerOpacity }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%",
   opacity: triggerOpacity
 }));
-var StyledPanel = styled60(View)(({ panelGap }) => ({
+var StyledPanel = styled51(View)(({ panelGap }) => ({
   marginTop: panelGap
 }));
-var StyledDivider = styled60(View)(({ dividerColor, dividerMarginTop }) => ({
+var StyledDivider = styled51(View)(({ dividerColor, dividerMarginTop }) => ({
   height: 1,
   backgroundColor: dividerColor,
   marginTop: dividerMarginTop
@@ -8695,7 +8695,7 @@ var Animated5 = React60.forwardRef(
     const delayMs = delay !== void 0 && delay > 0 ? Math.round(delay * 1e3) : 0;
     const entering = delayMs > 0 ? buildDelayedEntering(variant, delayMs) : ENTERING[variant];
     return /* @__PURE__ */ jsx(
-      Animated9.View,
+      Animated10.View,
       __spreadProps(__spreadValues({
         ref,
         entering,
@@ -8763,7 +8763,7 @@ var OPEN_DURATION = 320;
 var CLOSE_DURATION = 220;
 var DISMISS_THRESHOLD = 80;
 var parseTokenValue22 = (value) => parseFloat(value);
-var StyledPanel2 = styled60(View)(
+var StyledPanel2 = styled51(View)(
   ({
     panelBorderRadius,
     panelBgColor,
@@ -8800,7 +8800,7 @@ var DrawerContent = React60.forwardRef(
     var _a2;
     const theme2 = useTheme();
     const { drawer, modal } = theme2.tokens.components;
-    const { colour, dimensions } = theme2.tokens.semantics;
+    const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = useWindowDimensions();
     const maxHeight = windowHeight * 0.9;
@@ -8972,7 +8972,7 @@ var DrawerContent = React60.forwardRef(
             panelBgColor: colour.background.container.default,
             panelMaxWidth: parseTokenValue22(drawer.size.maxWidth),
             panelFlex: panelHeight > 0 ? 1 : void 0,
-            panelBorderWidth: parseTokenValue22(dimensions.borderWidth.sm),
+            panelBorderWidth: parseTokenValue22(dimensions3.borderWidth.sm),
             panelBorderColor: colour.border.default,
             panelShadowColor: modal.shadow.color,
             panelShadowOffsetY: parseTokenValue22(modal.shadow.offsetY),
@@ -8998,7 +8998,7 @@ var styles = StyleSheet.create({
   }
 });
 var parseTokenValue23 = (value) => parseFloat(value);
-var StyledWrapper = styled60(View)(
+var StyledWrapper = styled51(View)(
   ({ grabberPaddingTop }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -9007,7 +9007,7 @@ var StyledWrapper = styled60(View)(
     paddingBottom: grabberPaddingTop
   })
 );
-var StyledBar = styled60(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+var StyledBar = styled51(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
   width: barWidth,
   height: barHeight,
   borderRadius: barBorderRadius,
@@ -9088,7 +9088,7 @@ var styles2 = StyleSheet.create({
   }
 });
 var parseTokenValue25 = (value) => parseFloat(value);
-var StyledGrabberWrapper = styled60(View)(
+var StyledGrabberWrapper = styled51(View)(
   ({ grabberPaddingTop }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -9096,13 +9096,13 @@ var StyledGrabberWrapper = styled60(View)(
     paddingTop: grabberPaddingTop
   })
 );
-var StyledGrabberBar = styled60(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+var StyledGrabberBar = styled51(View)(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
   width: barWidth,
   height: barHeight,
   borderRadius: barBorderRadius,
   backgroundColor: barColor
 }));
-var StyledHeader = styled60(View)(
+var StyledHeader = styled51(View)(
   ({
     headerPaddingHorizontal,
     headerPaddingBottom,
@@ -9122,7 +9122,7 @@ var StyledHeader = styled60(View)(
     borderBottomColor: headerBorderColor
   } : {}), headerBgColor ? { backgroundColor: headerBgColor } : {})
 );
-var StyledImageContainer = styled60(View)(({ imageHeight, imageBorderRadius }) => ({
+var StyledImageContainer = styled51(View)(({ imageHeight, imageBorderRadius }) => ({
   position: "relative",
   width: "100%",
   height: imageHeight,
@@ -9130,20 +9130,20 @@ var StyledImageContainer = styled60(View)(({ imageHeight, imageBorderRadius }) =
   overflow: "hidden",
   flexShrink: 0
 }));
-var StyledImageCloseWrapper = styled60(View)(({ closeTop, closeRight }) => ({
+var StyledImageCloseWrapper = styled51(View)(({ closeTop, closeRight }) => ({
   position: "absolute",
   top: closeTop,
   right: closeRight,
   zIndex: 1
 }));
-var StyledTitleRow = styled60(View)(({ rowGap }) => ({
+var StyledTitleRow = styled51(View)(({ rowGap }) => ({
   flexDirection: "row",
   gap: rowGap,
   alignItems: "flex-start",
   width: "100%",
   flexShrink: 0
 }));
-var StyledTitleContent = styled60(View)(
+var StyledTitleContent = styled51(View)(
   ({ contentGap }) => ({
     flexDirection: "column",
     gap: contentGap,
@@ -9169,7 +9169,7 @@ var DrawerHeader = React60.forwardRef(
     var _a2, _b2, _c, _d, _e, _f;
     const theme2 = useTheme();
     const { drawer, grabber } = theme2.tokens.components;
-    const { colour, dimensions } = theme2.tokens.semantics;
+    const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const dragContext = useDrawerDragContext();
     const contextValue = useMemo(() => ({ variant }), [variant]);
     const { closeChild, otherChildren } = splitChildren(children);
@@ -9220,7 +9220,7 @@ var DrawerHeader = React60.forwardRef(
         ),
         headerPaddingBottom: parseTokenValue25(headerSpacing.bottomPadding),
         headerGap: parseTokenValue25(headerSpacing.gap),
-        headerBorderBottomWidth: variant === "titleAndText" ? parseTokenValue25(dimensions.borderWidth.sm) : void 0,
+        headerBorderBottomWidth: variant === "titleAndText" ? parseTokenValue25(dimensions3.borderWidth.sm) : void 0,
         headerBorderColor: variant === "titleAndText" ? colour.border.default : void 0,
         headerBgColor: variant === "fullBleed" ? drawer.drawerHeader.colour.background.fullBleed : void 0
       }, props), {
@@ -9237,7 +9237,7 @@ var DrawerHeader = React60.forwardRef(
                 {
                   barWidth: parseTokenValue25(grabber.size.bar.width),
                   barHeight: parseTokenValue25(grabber.size.bar.height),
-                  barBorderRadius: parseTokenValue25(dimensions.borderRadius.round),
+                  barBorderRadius: parseTokenValue25(dimensions3.borderRadius.round),
                   barColor: grabber.colour.background.default
                 }
               )
@@ -9283,7 +9283,7 @@ var DrawerDescription = React60.forwardRef(
 );
 DrawerDescription.displayName = "Drawer.Description";
 var parseTokenValue26 = (value) => parseFloat(value);
-var StyledScrollView = styled60(ScrollView)(
+var StyledScrollView = styled51(ScrollView)(
   ({
     bodyPaddingHorizontal,
     bodyPaddingRight,
@@ -9340,7 +9340,7 @@ var DrawerBody = React60.forwardRef(
 );
 DrawerBody.displayName = "Drawer.Body";
 var parseTokenValue27 = (value) => parseFloat(value);
-var StyledFooter = styled60(View)(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
+var StyledFooter = styled51(View)(({ footerPaddingTop, footerPaddingHorizontal, footerPaddingBottom }) => ({
   flexShrink: 0,
   paddingTop: footerPaddingTop,
   paddingHorizontal: footerPaddingHorizontal,
@@ -9452,7 +9452,7 @@ var styles3 = StyleSheet.create({
   }
 });
 var parseTokenValue28 = (value) => parseFloat(value);
-var StyledDockRoot = styled60(View)(
+var StyledDockRoot = styled51(View)(
   ({
     dockBgColor,
     dockBorderTopWidth,
@@ -9470,7 +9470,7 @@ var StyledDockRoot = styled60(View)(
     paddingHorizontal: dockPaddingHorizontal
   })
 );
-var StyledStackedInner = styled60(View)(
+var StyledStackedInner = styled51(View)(
   ({ innerGap }) => ({
     alignItems: "center",
     gap: innerGap,
@@ -9478,7 +9478,7 @@ var StyledStackedInner = styled60(View)(
     maxWidth: 520
   })
 );
-var StyledButtonGroup = styled60(View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
+var StyledButtonGroup = styled51(View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
   flexDirection: groupDirection,
   alignItems: groupAlign,
   justifyContent: groupJustify,
@@ -9490,7 +9490,7 @@ var ButtonDock = React60.forwardRef(
     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, typography } = theme2.tokens.semantics;
+    const { dimensions: dimensions3, typography } = theme2.tokens.semantics;
     const isStacked = variant === "stacked";
     const groupGap = parseTokenValue28(
       isStacked ? buttonGroup.spacing.stacked.gap : buttonGroup.spacing.sideBySide.gap
@@ -9500,7 +9500,7 @@ var ButtonDock = React60.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         dockBgColor: buttonDock.colour.background,
-        dockBorderTopWidth: parseTokenValue28(dimensions.borderWidth.sm),
+        dockBorderTopWidth: parseTokenValue28(dimensions3.borderWidth.sm),
         dockBorderTopColor: buttonDock.colour.border,
         dockPaddingVertical: parseTokenValue28(
           buttonDock.spacing[variant].mobile.topPadding
@@ -9552,17 +9552,17 @@ var ButtonDock = React60.forwardRef(
 );
 ButtonDock.displayName = "ButtonDock";
 var parseTokenValue29 = (value) => parseFloat(value);
-var StyledGroupRoot = styled60(View)(({ rootGap }) => ({
+var StyledGroupRoot = styled51(View)(({ rootGap }) => ({
   gap: rootGap,
   alignItems: "center",
   width: "100%"
 }));
-var StyledButtonRow = styled60(View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
+var StyledButtonRow = styled51(View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
   flexDirection: rowDirection,
   width: "100%",
   gap: rowGap
 }, rowAlign ? { alignItems: rowAlign } : {}));
-var StyledChildSlot = styled60(View)(
+var StyledChildSlot = styled51(View)(
   ({ slotInline }) => __spreadValues({}, slotInline ? { flex: 1, minWidth: 0 } : { width: "100%", alignSelf: "stretch" })
 );
 var ButtonGroup = React60.forwardRef(
@@ -9614,7 +9614,7 @@ var ButtonGroup = React60.forwardRef(
 );
 ButtonGroup.displayName = "ButtonGroup";
 var parseTokenValue30 = (value) => parseFloat(value);
-var StyledRootPressable = styled60(Pressable)(
+var StyledRootPressable = styled51(Pressable)(
   ({
     rootFlexAlign,
     rootGap,
@@ -9633,7 +9633,7 @@ var StyledRootPressable = styled60(Pressable)(
     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 } : {})
 );
-var StyledControl = styled60(View)(
+var StyledControl = styled51(View)(
   ({
     controlSize,
     controlBorderWidth,
@@ -9652,13 +9652,13 @@ var StyledControl = styled60(View)(
     justifyContent: "center"
   })
 );
-var StyledContent2 = styled60(View)(({ contentGap }) => ({
+var StyledContent2 = styled51(View)(({ contentGap }) => ({
   flexDirection: "column",
   gap: contentGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledIllustration = styled60(View)(({ illustrationSize }) => ({
+var StyledIllustration = styled51(View)(({ illustrationSize }) => ({
   flexShrink: 0,
   width: illustrationSize,
   height: illustrationSize,
@@ -9689,7 +9689,7 @@ var Checkbox = React60.forwardRef(
     ]);
     const theme2 = useTheme();
     const { checkbox } = theme2.tokens.components;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledChecked !== void 0;
     const [internalChecked, setInternalChecked] = React60.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
@@ -9735,7 +9735,7 @@ var Checkbox = React60.forwardRef(
                     checkbox.control.border.default
                   ),
                   controlBorderColor: isChecked ? checkbox.colour.background.selected : checkbox.colour.border.default,
-                  controlBorderRadius: parseTokenValue30(dimensions.borderRadius.xs),
+                  controlBorderRadius: parseTokenValue30(dimensions3.borderRadius.xs),
                   controlBgColor: isChecked ? checkbox.colour.background.selected : "transparent",
                   children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ jsx(Icon, { icon: Check_default, size: "xs", colour: "alt" }) })
                 }
@@ -9782,7 +9782,7 @@ var Checkbox = React60.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var parseTokenValue31 = (value) => parseFloat(value);
-var StyledGroup = styled60(View)(({ groupDirection, groupGap }) => ({
+var StyledGroup = styled51(View)(({ groupDirection, groupGap }) => ({
   flexDirection: groupDirection,
   gap: groupGap
 }));
@@ -9896,7 +9896,7 @@ var CopyFieldInput = React60.forwardRef(
 );
 CopyFieldInput.displayName = "CopyField.Field";
 var parseTokenValue32 = (value) => parseFloat(value);
-var StyledRoot8 = styled60(View)(({ theme: theme2 }) => {
+var StyledRoot8 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue32(spacing.gap)
@@ -9977,13 +9977,13 @@ var FilterTabContext = React60.createContext({
   }
 });
 var parseTokenValue33 = (value) => parseFloat(value);
-var StyledRoot9 = styled60(View)(({ rootGap }) => ({
+var StyledRoot9 = styled51(View)(({ rootGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rootGap,
   flexWrap: "nowrap"
 }));
-var StyledItem2 = styled60(Pressable)(
+var StyledItem2 = styled51(Pressable)(
   ({
     itemHeight,
     itemMinWidth,
@@ -10034,7 +10034,7 @@ var FilterTabItem = React60.forwardRef(
     const isIconOnly = !!IconOnlyIcon && !label;
     const isActive = isSelected && !disabled;
     const { tabItem } = theme2.tokens.components.filterTabs;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const height = parseTokenValue33(
       size === "lg" ? tabItem.size.large.height : tabItem.size.small.height
     );
@@ -10059,7 +10059,7 @@ var FilterTabItem = React60.forwardRef(
         itemBgColor: isActive ? tabItem.colour.background.selected : tabItem.colour.background.default,
         itemOpacity: disabled ? parseFloat(tabItem.opacity.disabled.default) : 1,
         isIconOnly,
-        style: { gap: parseTokenValue33(dimensions.spacing["2xs"]) }
+        style: { gap: parseTokenValue33(dimensions3.spacing["2xs"]) }
       }, rest), {
         children: [
           isIconOnly && IconOnlyIcon && /* @__PURE__ */ jsx(
@@ -10158,7 +10158,7 @@ var FilterTab = Object.assign(FilterTabRoot, {
   Item: FilterTabItem
 });
 var parseTokenValue34 = (value) => parseFloat(value);
-var StyledFieldWrapper = styled60(View)(
+var StyledFieldWrapper = styled51(View)(
   ({
     fieldBgColor,
     fieldBorderColor,
@@ -10179,7 +10179,7 @@ var StyledFieldWrapper = styled60(View)(
     overflow: "hidden"
   })
 );
-var StyledTextInput = styled60(TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
+var StyledTextInput = styled51(TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
   textAlign: "center",
   outlineStyle: "none",
   padding: 0,
@@ -10193,7 +10193,7 @@ var StyledTextInput = styled60(TextInput)(({ inputColor, inputFontFamily, inputF
   fontSize: inputFontSize,
   lineHeight: 0
 }));
-var StyledRow = styled60(View)(({ rowGap }) => ({
+var StyledRow = styled51(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   alignSelf: "center",
@@ -10241,7 +10241,7 @@ var NumberFieldInput = React60.forwardRef(
     var _a2;
     const theme2 = useTheme();
     const tokens3 = theme2.tokens.components.numberField;
-    const inputTokens = theme2.tokens.components.inputs;
+    const inputTokens3 = theme2.tokens.components.inputs;
     const [isFocused, setIsFocused] = React60.useState(false);
     const [isEdited, setIsEdited] = React60.useState(false);
     const initialValueRef = React60.useRef((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
@@ -10252,11 +10252,11 @@ var NumberFieldInput = React60.forwardRef(
     const fieldMinWidth = parseTokenValue34(fieldSizeTokens.minWidth);
     const fieldHeight = parseTokenValue34(fieldSizeTokens.height);
     const fieldPaddingHorizontal = parseTokenValue34(
-      inputTokens.spacing.field.horizontalPadding
+      inputTokens3.spacing.field.horizontalPadding
     );
     const getBorderColor = () => {
-      if (state === "error") return inputTokens.colour.field.border.error;
-      if (state === "success") return inputTokens.colour.field.border.success;
+      if (state === "error") return inputTokens3.colour.field.border.error;
+      if (state === "success") return inputTokens3.colour.field.border.success;
       if (isFocused) return tokens3.colour.field.border.selected;
       if (isEdited) return tokens3.colour.field.border.edited;
       return tokens3.colour.field.border.default;
@@ -10355,11 +10355,11 @@ var NumberFieldInput = React60.forwardRef(
 );
 NumberFieldInput.displayName = "NumberField.Input";
 var parseTokenValue35 = (value) => parseFloat(value);
-var StyledRoot10 = styled60(View)(({ rootGap }) => ({
+var StyledRoot10 = styled51(View)(({ rootGap }) => ({
   alignItems: "center",
   gap: rootGap
 }));
-var StyledLabelGroup = styled60(View)(({ labelGap }) => ({
+var StyledLabelGroup = styled51(View)(({ labelGap }) => ({
   gap: labelGap
 }));
 var NumberField = React60.forwardRef(
@@ -10508,7 +10508,7 @@ var PasswordFieldInput = React60.forwardRef((_a, ref) => {
 });
 PasswordFieldInput.displayName = "PasswordField.Field";
 var parseTokenValue36 = (value) => parseFloat(value);
-var StyledErrorRow2 = styled60(View)(({ gap }) => ({
+var StyledErrorRow2 = styled51(View)(({ gap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap
@@ -10540,12 +10540,12 @@ var PasswordFieldError = React60.forwardRef((_a, ref) => {
 });
 PasswordFieldError.displayName = "PasswordField.Error";
 var parseTokenValue37 = (value) => parseFloat(value);
-var StyledRequirementsList = styled60(View)(
+var StyledRequirementsList = styled51(View)(
   ({ listGap }) => ({
     gap: listGap
   })
 );
-var StyledRequirementItem = styled60(View)(
+var StyledRequirementItem = styled51(View)(
   ({ itemGap }) => ({
     flexDirection: "row",
     alignItems: "center",
@@ -10602,7 +10602,7 @@ var PasswordFieldRequirements = React60.forwardRef((_a, ref) => {
 });
 PasswordFieldRequirements.displayName = "PasswordField.Requirements";
 var parseTokenValue38 = (value) => parseFloat(value);
-var StyledRoot11 = styled60(View)(({ theme: theme2 }) => {
+var StyledRoot11 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue38(spacing.gap)
@@ -10716,19 +10716,19 @@ function usePasswordField({
   });
 }
 var parseTokenValue39 = (value) => parseFloat(value);
-var StyledRoot12 = styled60(View)(({ rootGap }) => ({
+var StyledRoot12 = styled51(View)(({ rootGap }) => ({
   flexDirection: "column",
   alignItems: "stretch",
   gap: rootGap,
   width: "100%"
 }));
-var StyledHeader2 = styled60(View)({
+var StyledHeader2 = styled51(View)({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledTrack = styled60(View)(({ trackHeight, trackMinWidth, trackBorderRadius, trackBgColor }) => ({
+var StyledTrack = styled51(View)(({ trackHeight, trackMinWidth, trackBorderRadius, trackBgColor }) => ({
   position: "relative",
   width: "100%",
   minWidth: trackMinWidth,
@@ -10737,7 +10737,7 @@ var StyledTrack = styled60(View)(({ trackHeight, trackMinWidth, trackBorderRadiu
   backgroundColor: trackBgColor,
   overflow: "hidden"
 }));
-var StyledIndicator = styled60(View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
+var StyledIndicator = styled51(View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
   height: "100%",
   borderRadius: indicatorBorderRadius,
   backgroundColor: indicatorBgColor
@@ -10834,7 +10834,7 @@ var Progress = React60.forwardRef(
 );
 Progress.displayName = "Progress";
 var parseTokenValue40 = (value) => parseFloat(value);
-var StyledRadioRoot = styled60(Pressable)(
+var StyledRadioRoot = styled51(Pressable)(
   ({
     radioGap,
     radioOpacity,
@@ -10853,7 +10853,7 @@ var StyledRadioRoot = styled60(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 = styled60(View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
+var StyledRadioControl = styled51(View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
   width: controlSize,
   height: controlSize,
   minWidth: controlSize,
@@ -10864,20 +10864,20 @@ var StyledRadioControl = styled60(View)(({ controlSize, controlBorderWidth, cont
   alignItems: "center",
   justifyContent: "center"
 }));
-var StyledIndicator2 = styled60(View)(({ indicatorSize, indicatorBgColor }) => ({
+var StyledIndicator2 = styled51(View)(({ indicatorSize, indicatorBgColor }) => ({
   width: indicatorSize,
   height: indicatorSize,
   borderRadius: indicatorSize / 2,
   backgroundColor: indicatorBgColor
 }));
-var StyledTextContent = styled60(View)(({ textContentGap }) => ({
+var StyledTextContent = styled51(View)(({ textContentGap }) => ({
   flexDirection: "column",
   gap: textContentGap
 }));
-var StyledAssetWrapper = styled60(View)({
+var StyledAssetWrapper = styled51(View)({
   alignSelf: "center"
 });
-var StyledTagWrapper = styled60(View)(
+var StyledTagWrapper = styled51(View)(
   ({ tagTopPadding }) => ({
     alignItems: "flex-start",
     paddingTop: tagTopPadding
@@ -10988,7 +10988,7 @@ var Radio = React60.forwardRef(
 );
 Radio.displayName = "Radio";
 var parseTokenValue41 = (value) => parseFloat(value);
-var StyledRadioGroup = styled60(View)(({ groupDirection, groupGap }) => ({
+var StyledRadioGroup = styled51(View)(({ groupDirection, groupGap }) => ({
   flexDirection: groupDirection,
   gap: groupGap
 }));
@@ -11114,7 +11114,7 @@ var SearchFieldInput = React60.forwardRef((_a, ref) => {
 });
 SearchFieldInput.displayName = "SearchField.Field";
 var parseTokenValue42 = (value) => parseFloat(value);
-var StyledRoot13 = styled60(View)(({ theme: theme2 }) => {
+var StyledRoot13 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue42(spacing.gap)
@@ -11191,7 +11191,7 @@ function useSearchField({
   };
 }
 var parseTokenValue43 = (value) => parseFloat(value);
-var StyledSegmentItem = styled60(Pressable)(
+var StyledSegmentItem = styled51(Pressable)(
   ({
     itemHeight,
     itemMinWidth,
@@ -11211,14 +11211,14 @@ var StyledSegmentItem = styled60(Pressable)(
     opacity: itemOpacity
   }, itemFlex !== void 0 ? { flex: itemFlex } : { flexShrink: 0 })
 );
-var StyledIntrinsicClip = styled60(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 = styled60(Pressable)(
+var StyledScrollIndicator = styled51(Pressable)(
   ({
     indicatorSide,
     indicatorBorderRadius,
@@ -11274,7 +11274,7 @@ var ScrollIndicatorGradient = ({
     /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
   ] }) });
 };
-var StyledContainer2 = styled60(View)(
+var StyledContainer2 = styled51(View)(
   ({
     containerGap,
     containerPaddingVertical,
@@ -11470,7 +11470,7 @@ var SegmentedControlRoot = React60.forwardRef(
     var _a2, _b2;
     const theme2 = useTheme();
     const { spacing, borderRadius, colour } = theme2.tokens.components.segmentedControl;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
     const childrenArray = React60.Children.toArray(children);
     const firstChildValue = childrenArray.map((child) => {
@@ -11533,8 +11533,8 @@ var SegmentedControlRoot = React60.forwardRef(
       containerBorderRadius: parseTokenValue43(borderRadius.default),
       containerBgColor: colour.background.default,
       containerFullWidth: layout === "fixed",
-      scrollIndicatorPaddingOuter: parseTokenValue43(dimensions.spacing["2xl"]),
-      scrollIndicatorPaddingInner: parseTokenValue43(dimensions.spacing.sm)
+      scrollIndicatorPaddingOuter: parseTokenValue43(dimensions3.spacing["2xl"]),
+      scrollIndicatorPaddingInner: parseTokenValue43(dimensions3.spacing.sm)
     };
     if (layout === "intrinsic") {
       return /* @__PURE__ */ jsx(
@@ -11554,7 +11554,7 @@ var SegmentedControl = Object.assign(SegmentedControlRoot, {
   Item: SegmentedControlItem
 });
 var parseTokenValue44 = (value) => parseFloat(value);
-var StyledTriggerWrapper = styled60(Animated.View)(({
+var StyledTriggerWrapper = styled51(Animated.View)(({
   theme: theme2,
   state: _state
 }) => {
@@ -11570,12 +11570,12 @@ var StyledTriggerWrapper = styled60(Animated.View)(({
     borderRadius: parseTokenValue44(borderRadius.field.default)
   };
 });
-var StyledIconWrapper2 = styled60(View)({
+var StyledIconWrapper2 = styled51(View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledArrowIcon = styled60(Animated.View)({
+var StyledArrowIcon = styled51(Animated.View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
@@ -11661,7 +11661,7 @@ var SelectFieldTrigger = React60.forwardRef(
   }
 );
 SelectFieldTrigger.displayName = "SelectField.Trigger";
-var StyledValue = styled60(Text)(({ theme: theme2 }) => {
+var StyledValue = styled51(Text)(({ theme: theme2 }) => {
   const { colour } = theme2.tokens.components.inputs;
   return {
     flex: 1,
@@ -11680,7 +11680,7 @@ SelectFieldValue.displayName = "SelectField.Value";
 var parseTokenValue45 = (value) => parseFloat(value);
 var DROPDOWN_OFFSET_X = -32;
 var DROPDOWN_OFFSET_Y = -94;
-var StyledContentShadow = styled60(View)(({ theme: theme2 }) => {
+var StyledContentShadow = styled51(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   const shadow = dropdown.list.dropshadow.default;
   return {
@@ -11699,7 +11699,7 @@ var StyledContentShadow = styled60(View)(({ theme: theme2 }) => {
     ]
   };
 });
-var StyledContentInner = styled60(View)(({ theme: theme2 }) => {
+var StyledContentInner = styled51(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   const { colour } = theme2.tokens.components.inputs;
   return {
@@ -11728,7 +11728,7 @@ var SelectFieldContent = React60.forwardRef((_a, ref) => {
 });
 SelectFieldContent.displayName = "SelectField.Content";
 var parseTokenValue46 = (value) => parseFloat(value);
-var StyledItem3 = styled60(Pressable)(({ theme: theme2 }) => {
+var StyledItem3 = styled51(Pressable)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     flexDirection: "row",
@@ -11742,12 +11742,12 @@ var StyledItem3 = styled60(Pressable)(({ theme: theme2 }) => {
     backgroundColor: dropdown.listItem.colour.background.default
   };
 });
-var StyledIconWrapper3 = styled60(View)({
+var StyledIconWrapper3 = styled51(View)({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledContentWrapper = styled60(View)(({ theme: theme2 }) => {
+var StyledContentWrapper = styled51(View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     flexDirection: "row",
@@ -11757,17 +11757,17 @@ var StyledContentWrapper = styled60(View)(({ theme: theme2 }) => {
     minWidth: 0
   };
 });
-var StyledTextWrapper2 = styled60(View)({
+var StyledTextWrapper2 = styled51(View)({
   flex: 1,
   minWidth: 0
 });
-var StyledItemText = styled60(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 = styled60(Text)(({ theme: theme2 }) => {
+var StyledHintText = styled51(Text)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     color: dropdown.listItem.colour.text.hint.default,
@@ -11810,7 +11810,7 @@ var SelectFieldItem = React60.forwardRef(
 );
 SelectFieldItem.displayName = "SelectField.Item";
 var parseTokenValue47 = (value) => parseFloat(value);
-var StyledRoot14 = styled60(View)(({ theme: theme2 }) => {
+var StyledRoot14 = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.components.inputs;
   return {
     gap: parseTokenValue47(spacing.gap)
@@ -11943,13 +11943,269 @@ function useSelectField(options = {}) {
     onValueChange: handleValueChange
   }, validationRule && { state, error });
 }
+var themeTokens = DEFAULT_THEME_OPTIONS.tokens;
+var { components, semantics } = themeTokens;
+var inputTokens = components.inputs;
+var { dimensions } = semantics;
+var parseSize = (value) => {
+  return parseInt(value.replace("px", ""), 10);
+};
+var Wrapper = styled51(View)({
+  borderWidth: parseSize(inputTokens.borderWidth.field.selected),
+  borderColor: inputTokens.colour.field.border.selected,
+  borderRadius: parseSize(inputTokens.borderRadius.field.default),
+  backgroundColor: inputTokens.colour.field.background.default,
+  paddingHorizontal: parseSize(inputTokens.spacing.field.horizontalPadding),
+  paddingVertical: parseSize(inputTokens.spacing.field.verticalPadding),
+  height: parseSize(inputTokens.size.field.height),
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between"
+});
+var SelectIcon = styled51(Animated10.View)({
+  position: "absolute",
+  right: 0,
+  marginRight: 0
+});
+var InputText = 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 = 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 = styled51(View)({
+  flex: 1,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+  justifyContent: "flex-end"
+});
+var AndroidDialog = styled51(View)({
+  backgroundColor: inputTokens.colour.field.background.default,
+  borderTopLeftRadius: parseSize(dimensions.borderRadius.lg),
+  borderTopRightRadius: parseSize(dimensions.borderRadius.lg),
+  maxHeight: "80%",
+  minHeight: "40%",
+  paddingTop: parseSize(dimensions.spacing.md),
+  paddingBottom: parseSize(dimensions.spacing.xl),
+  paddingHorizontal: parseSize(dimensions.spacing.md)
+});
+var DialogTitle = styled51(Text)({
+  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+  fontWeight: inputTokens.text.label.fontWeight,
+  color: inputTokens.colour.field.text.default,
+  marginBottom: parseSize(dimensions.spacing.md),
+  marginLeft: parseSize(dimensions.spacing.xs)
+});
+var AndroidOptionRow = styled51(View)({
+  flexDirection: "row",
+  alignItems: "center",
+  paddingVertical: parseSize(dimensions.spacing.md),
+  paddingHorizontal: parseSize(dimensions.spacing.sm),
+  borderBottomWidth: parseSize(dimensions.borderWidth.sm),
+  borderBottomColor: themeTokens.primitives.colour.brand.brown[2]
+});
+var RadioOuter = styled51(View)({
+  width: parseSize(dimensions.spacing.lg),
+  height: parseSize(dimensions.spacing.lg),
+  borderRadius: parseSize(dimensions.spacing.lg) / 2,
+  borderWidth: parseSize(dimensions.borderWidth.md),
+  borderColor: inputTokens.colour.field.border.selected,
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: parseSize(dimensions.spacing.sm)
+});
+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 = styled51(Text)(
+  ({ isSelected }) => ({
+    fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+    fontWeight: isSelected ? inputTokens.text.label.fontWeight : inputTokens.field.placeholder.default.fontWeight,
+    color: inputTokens.colour.field.text.default,
+    flex: 1
+  })
+);
+var themeTokens2 = DEFAULT_THEME_OPTIONS.tokens;
+var { components: components2, semantics: semantics2 } = themeTokens2;
+var inputTokens2 = components2.inputs;
+var { dimensions: dimensions2 } = semantics2;
+var parseSize2 = (value) => {
+  return parseInt(value.replace("px", ""), 10);
+};
+var useIconAnimation = () => {
+  const iconRotation = useSharedValue(0);
+  const iconAnimationStyles = useAnimatedStyle(() => {
+    "worklet";
+    return {
+      transform: [{ rotate: `${iconRotation.value}deg` }]
+    };
+  });
+  return {
+    iconAnimationStyles
+  };
+};
+var NativeSelectPicker = React60.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      items,
+      value,
+      placeholder,
+      onValueChange,
+      disabled = false,
+      hideIcon = false
+    } = _b, rest = __objRest(_b, [
+      "items",
+      "value",
+      "placeholder",
+      "onValueChange",
+      "disabled",
+      "hideIcon"
+    ]);
+    var _a2;
+    const [isOpen, setIsOpen] = useState(false);
+    const { iconAnimationStyles } = useIconAnimation();
+    const hasPlaceholder = placeholder && Object.keys(placeholder).length > 0 && placeholder.label !== void 0;
+    const allItems = useMemo(() => {
+      var _a3;
+      if (hasPlaceholder) {
+        return [
+          {
+            label: placeholder.label,
+            value: (_a3 = placeholder.value) != null ? _a3 : "",
+            key: "__placeholder__"
+          },
+          ...items
+        ];
+      }
+      return items;
+    }, [items, hasPlaceholder, placeholder]);
+    const selectedItem = allItems.find((item) => item.value === value);
+    const displayLabel = (_a2 = selectedItem == null ? void 0 : selectedItem.label) != null ? _a2 : hasPlaceholder ? placeholder.label : "";
+    const handleOpenIOS = useCallback(() => {
+      if (disabled) return;
+      const options = [...allItems.map((item) => item.label), "Cancel"];
+      const cancelButtonIndex = options.length - 1;
+      ActionSheetIOS.showActionSheetWithOptions(
+        {
+          options,
+          cancelButtonIndex
+        },
+        (buttonIndex) => {
+          if (buttonIndex !== cancelButtonIndex) {
+            onValueChange(allItems[buttonIndex].value);
+          }
+        }
+      );
+    }, [disabled, allItems, onValueChange]);
+    const handleOpenAndroid = useCallback(() => {
+      if (!disabled) {
+        setIsOpen(true);
+      }
+    }, [disabled]);
+    const handleClose = useCallback(() => {
+      setIsOpen(false);
+    }, []);
+    const handleSelect = useCallback(
+      (itemValue) => {
+        onValueChange(itemValue);
+        setIsOpen(false);
+      },
+      [onValueChange]
+    );
+    return /* @__PURE__ */ jsxs(Wrapper, __spreadProps(__spreadValues({ ref }, rest), { children: [
+      /* @__PURE__ */ jsxs(
+        TouchableOpacity,
+        {
+          activeOpacity: 0.8,
+          onPress: Platform.OS === "ios" ? handleOpenIOS : handleOpenAndroid,
+          disabled,
+          hitSlop: {
+            top: parseSize2(dimensions2.spacing.md),
+            right: parseSize2(dimensions2.spacing.md),
+            bottom: parseSize2(dimensions2.spacing.md),
+            left: parseSize2(dimensions2.spacing.md)
+          },
+          accessibilityRole: "button",
+          style: { flexDirection: "row", alignItems: "center" },
+          children: [
+            /* @__PURE__ */ jsx(InputText, { numberOfLines: 1, children: displayLabel || /* @__PURE__ */ jsx(PlaceholderText, { children: (placeholder == null ? void 0 : placeholder.label) || "Select" }) }),
+            !hideIcon && /* @__PURE__ */ jsx(SelectIcon, { style: [iconAnimationStyles], children: /* @__PURE__ */ jsx(
+              KeyboardArrowDown_default,
+              {
+                width: parseSize2(dimensions2.spacing.xl),
+                height: parseSize2(dimensions2.spacing.xl),
+                color: inputTokens2.colour.field.text.default
+              }
+            ) })
+          ]
+        }
+      ),
+      Platform.OS === "android" && /* @__PURE__ */ jsx(
+        Modal,
+        {
+          visible: isOpen,
+          transparent: true,
+          animationType: "fade",
+          onRequestClose: handleClose,
+          children: /* @__PURE__ */ jsx(
+            TouchableWithoutFeedback,
+            {
+              accessibilityRole: "button",
+              onPress: handleClose,
+              children: /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsx(TouchableWithoutFeedback, { children: /* @__PURE__ */ jsxs(AndroidDialog, { children: [
+                /* @__PURE__ */ jsx(DialogTitle, { children: "Select an option" }),
+                /* @__PURE__ */ jsx(
+                  FlatList,
+                  {
+                    data: allItems,
+                    keyExtractor: (item, index) => {
+                      var _a3, _b2;
+                      return (_b2 = (_a3 = item.key) == null ? void 0 : _a3.toString()) != null ? _b2 : `${item.value}-${index}`;
+                    },
+                    renderItem: ({ item }) => {
+                      const isSelected = item.value === value;
+                      return /* @__PURE__ */ jsx(
+                        TouchableOpacity,
+                        {
+                          onPress: () => handleSelect(item.value),
+                          activeOpacity: 0.7,
+                          accessibilityRole: "button",
+                          children: /* @__PURE__ */ jsxs(AndroidOptionRow, { children: [
+                            /* @__PURE__ */ jsx(RadioOuter, { children: isSelected && /* @__PURE__ */ jsx(RadioInner, {}) }),
+                            /* @__PURE__ */ jsx(AndroidOptionText, { isSelected, children: item.label })
+                          ] })
+                        }
+                      );
+                    },
+                    style: {
+                      maxHeight: parseSize2(dimensions2.spacing["8xl"])
+                    }
+                  }
+                )
+              ] }) }) })
+            }
+          )
+        }
+      )
+    ] }));
+  }
+);
+NativeSelectPicker.displayName = "NativeSelectPicker";
 var parseTokenValue48 = (value) => parseFloat(value);
-var StyledLabelRow2 = styled60(View)(({ labelRowGap }) => ({
+var StyledLabelRow2 = styled51(View)(({ labelRowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelRowGap
 }));
-var StyledLabelSlot = styled60(View)(({ labelSlotGap }) => ({
+var StyledLabelSlot = styled51(View)(({ labelSlotGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelSlotGap,
@@ -11988,7 +12244,7 @@ var Slider = React60.forwardRef(
     ]);
     const theme2 = useTheme();
     const { slider, buttons } = theme2.tokens.components;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions: dimensions3 } = theme2.tokens.semantics;
     const isControlled = controlledValue !== void 0;
     const [internalValue, setInternalValue] = React60.useState(defaultValue);
     const currentValue = isControlled ? controlledValue : internalValue;
@@ -12089,7 +12345,7 @@ var Slider = React60.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(dimensions.borderRadius.round);
+    const roundBorderRadius = parseTokenValue48(dimensions3.borderRadius.round);
     const thumbIconColor = buttons.iconButton.filledButton.colour.icon.primary.default;
     const thumbContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -12160,7 +12416,7 @@ var Slider = React60.forwardRef(
       height: trackHeight,
       borderRadius: roundBorderRadius,
       backgroundColor: slider.colour.track.background.default,
-      borderWidth: parseTokenValue48(dimensions.borderWidth.sm),
+      borderWidth: parseTokenValue48(dimensions3.borderWidth.sm),
       borderColor: slider.colour.track.border.default
     };
     const indicatorBaseStyle = {
@@ -12255,9 +12511,9 @@ var Slider = React60.forwardRef(
                 onLayout: handleNativeLayout,
                 children: [
                   /* @__PURE__ */ jsx(View, { style: trackBackgroundStyle }),
-                  /* @__PURE__ */ jsx(Animated9.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
+                  /* @__PURE__ */ jsx(Animated10.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
                   /* @__PURE__ */ jsx(
-                    Animated9.View,
+                    Animated10.View,
                     {
                       style: [
                         __spreadProps(__spreadValues({}, thumbStyle), { position: "absolute", left: 0 }),
@@ -12285,7 +12541,7 @@ var ICON_MAP = {
   info: Info_default
 };
 var parseTokenValue49 = (value) => parseFloat(value);
-var StyledInlineRoot = styled60(View)(
+var StyledInlineRoot = styled51(View)(
   ({ rootPaddingH, rootPaddingV, rootGap, rootBorderRadius, rootBgColor }) => ({
     flexDirection: "row",
     alignItems: "flex-start",
@@ -12296,7 +12552,7 @@ var StyledInlineRoot = styled60(View)(
     backgroundColor: rootBgColor
   })
 );
-var StyledToastRoot = styled60(View)(
+var StyledToastRoot = styled51(View)(
   ({
     rootPaddingH,
     rootPaddingV,
@@ -12323,7 +12579,7 @@ var StyledToastRoot = styled60(View)(
     elevation: 4
   })
 );
-var StyledSystemRoot = styled60(View)(
+var StyledSystemRoot = styled51(View)(
   ({
     rootPaddingH,
     rootPaddingTop,
@@ -12343,31 +12599,31 @@ var StyledSystemRoot = styled60(View)(
     width: "100%"
   })
 );
-var StyledContents = styled60(View)(({ contentsGap }) => ({
+var StyledContents = styled51(View)(({ contentsGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   flex: 1,
   minWidth: 0,
   gap: contentsGap
 }));
-var StyledCopyRow = styled60(View)(({ copyGap }) => ({
+var StyledCopyRow = styled51(View)(({ copyGap }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: copyGap,
   width: "100%"
 }));
-var StyledInlineCopy = styled60(View)(({ copyGap }) => ({
+var StyledInlineCopy = styled51(View)(({ copyGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: copyGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledLinkWrapper = styled60(View)(({ linkPaddingLeft }) => ({
+var StyledLinkWrapper = styled51(View)(({ linkPaddingLeft }) => ({
   paddingLeft: linkPaddingLeft,
   width: "100%"
 }));
-var StyledCloseButton = styled60(Pressable)({
+var StyledCloseButton = styled51(Pressable)({
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
@@ -12613,10 +12869,10 @@ var NIB_OFFSET = {
   middle: 146,
   right: 268
 };
-var Container2 = styled60(View)(({ $width }) => ({
+var Container2 = styled51(View)(({ $width }) => ({
   width: $width
 }));
-var StyledBody = styled60(View)(
+var StyledBody = styled51(View)(
   ({
     bgColor,
     borderColor,
@@ -12846,7 +13102,7 @@ var Tooltip = React60.forwardRef(
 );
 Tooltip.displayName = "Tooltip";
 var parseTokenValue51 = (value) => parseFloat(value);
-var StyledInsightRoot = styled60(View)(
+var StyledInsightRoot = styled51(View)(
   ({
     rootGap,
     rootPaddingH,
@@ -12873,7 +13129,7 @@ var StyledInsightRoot = styled60(View)(
     minWidth: rootMinWidth
   })
 );
-var StyledInsightContent = styled60(View)(
+var StyledInsightContent = styled51(View)(
   ({ contentGap }) => ({
     flex: 1,
     flexDirection: "column",
@@ -12953,7 +13209,7 @@ var MessageCardInsight = React60.forwardRef(
   }
 );
 MessageCardInsight.displayName = "MessageCard.Insight";
-var StyledBannerRoot = styled60(View)(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
+var StyledBannerRoot = styled51(View)(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: rootGap,
@@ -12961,7 +13217,7 @@ var StyledBannerRoot = styled60(View)(({ rootGap, rootPadding, rootBorderRadius,
   borderRadius: rootBorderRadius,
   backgroundColor: rootBgColor
 }));
-var StyledBannerImage = styled60(View)(({ imageRadius, imageBgColor }) => ({
+var StyledBannerImage = styled51(View)(({ imageRadius, imageBgColor }) => ({
   flexShrink: 0,
   width: 108,
   height: 108,
@@ -12969,14 +13225,14 @@ var StyledBannerImage = styled60(View)(({ imageRadius, imageBgColor }) => ({
   overflow: "hidden",
   backgroundColor: imageBgColor
 }));
-var StyledBannerIllustrationSlot = styled60(View)({
+var StyledBannerIllustrationSlot = styled51(View)({
   flexShrink: 0,
   width: 108,
   height: 108,
   alignItems: "center",
   justifyContent: "center"
 });
-var StyledBannerContents = styled60(View)(
+var StyledBannerContents = styled51(View)(
   ({ contentsGap }) => ({
     flex: 1,
     flexDirection: "column",
@@ -12986,7 +13242,7 @@ var StyledBannerContents = styled60(View)(
     minWidth: 0
   })
 );
-var StyledBannerCopy = styled60(View)(({ copyGap }) => ({
+var StyledBannerCopy = styled51(View)(({ copyGap }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: copyGap,
@@ -13012,15 +13268,15 @@ var MessageCardBanner = React60.forwardRef(
       "onLinkPress"
     ]);
     const theme2 = useTheme();
-    const { colour, dimensions } = theme2.tokens.semantics;
+    const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const bgColor = colourScheme === "secondary" ? colour.background.container.secondary : colour.background.container.alt;
     return /* @__PURE__ */ jsxs(
       StyledBannerRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue51(dimensions.spacing.md),
-        rootPadding: parseTokenValue51(dimensions.spacing.md),
-        rootBorderRadius: parseTokenValue51(dimensions.borderRadius.md),
+        rootGap: parseTokenValue51(dimensions3.spacing.md),
+        rootPadding: parseTokenValue51(dimensions3.spacing.md),
+        rootBorderRadius: parseTokenValue51(dimensions3.borderRadius.md),
         rootBgColor: bgColor,
         accessible: true,
         accessibilityRole: "summary"
@@ -13032,7 +13288,7 @@ var MessageCardBanner = React60.forwardRef(
           }) }) : (media == null ? void 0 : media.type) === "image" ? /* @__PURE__ */ jsx(
             StyledBannerImage,
             {
-              imageRadius: parseTokenValue51(dimensions.borderRadius.sm),
+              imageRadius: parseTokenValue51(dimensions3.borderRadius.sm),
               imageBgColor: colour.background.surface.secondary,
               children: /* @__PURE__ */ jsx(
                 Image,
@@ -13048,12 +13304,12 @@ var MessageCardBanner = React60.forwardRef(
           /* @__PURE__ */ jsxs(
             StyledBannerContents,
             {
-              contentsGap: parseTokenValue51(dimensions.spacing.xs),
+              contentsGap: parseTokenValue51(dimensions3.spacing.xs),
               children: [
                 /* @__PURE__ */ jsxs(
                   StyledBannerCopy,
                   {
-                    copyGap: parseTokenValue51(dimensions.spacing["3xs"]),
+                    copyGap: parseTokenValue51(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 })
@@ -13125,22 +13381,22 @@ function defaultGetDateState(date) {
 function getDefaultMonthLabel(year, month, locale) {
   return format(new Date(year, month, 1), "MMMM yyyy", { locale });
 }
-var StyledContainer3 = styled60(View)(({ containerGap, containerMaxWidth }) => ({
+var StyledContainer3 = styled51(View)(({ containerGap, containerMaxWidth }) => ({
   flexDirection: "column",
   gap: containerGap,
   maxWidth: containerMaxWidth
 }));
-var StyledMonthHeader = styled60(View)(
+var StyledMonthHeader = styled51(View)(
   ({ headerGap }) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: headerGap
   })
 );
-var StyledWeekRow = styled60(View)({
+var StyledWeekRow = styled51(View)({
   flexDirection: "row"
 });
-var StyledWeekCell = styled60(View)(
+var StyledWeekCell = styled51(View)(
   ({ cellHeight }) => ({
     flex: 1,
     alignItems: "center",
@@ -13148,14 +13404,14 @@ var StyledWeekCell = styled60(View)(
     height: cellHeight
   })
 );
-var StyledDatesGrid = styled60(View)(({ rowGap }) => ({
+var StyledDatesGrid = styled51(View)(({ rowGap }) => ({
   flexDirection: "column",
   gap: rowGap
 }));
-var StyledDateRow = styled60(View)({
+var StyledDateRow = styled51(View)({
   flexDirection: "row"
 });
-var StyledDateCell = styled60(View)(
+var StyledDateCell = styled51(View)(
   ({ cellHeight }) => ({
     flex: 1,
     height: cellHeight,
@@ -13163,7 +13419,7 @@ var StyledDateCell = styled60(View)(
     justifyContent: "center"
   })
 );
-var StyledIndicator3 = styled60(View)(
+var StyledIndicator3 = styled51(View)(
   ({
     indicatorSize,
     indicatorBorderRadius,
@@ -13409,7 +13665,7 @@ var DatePicker = React60.forwardRef(
             ) })
           ] }),
           /* @__PURE__ */ jsx(
-            Animated9.View,
+            Animated10.View,
             {
               entering: MONTH_SLIDE_ENTERING[slideDir],
               exiting: MONTH_SLIDE_EXITING[slideDir],
@@ -13528,25 +13784,25 @@ var buildPointerPath = (r) => {
   ].join(" ");
 };
 var parseTokenValue53 = (value) => parseFloat(value);
-var StyledRoot15 = styled60(View)(({ rootGap }) => ({
+var StyledRoot15 = styled51(View)(({ rootGap }) => ({
   flexDirection: "column",
   gap: rootGap,
   width: "100%"
 }));
-var StyledRow2 = styled60(View)(({ rowGap }) => ({
+var StyledRow2 = styled51(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "flex-start",
   gap: rowGap,
   width: "100%"
 }));
-var StyledItemStack = styled60(View)(({ stackGap }) => ({
+var StyledItemStack = styled51(View)(({ stackGap }) => ({
   flexDirection: "column",
   alignItems: "center",
   gap: stackGap,
   flex: 1,
   minWidth: 0
 }));
-var StyledPictureButton = styled60(Pressable)(
+var StyledPictureButton = styled51(Pressable)(
   ({
     buttonBorderRadius,
     buttonBorderWidth,
@@ -13573,7 +13829,7 @@ var StyledPictureButton = styled60(Pressable)(
     overflow: "hidden"
   })
 );
-var StyledPointer = styled60(Svg)(
+var StyledPointer = styled51(Svg)(
   ({ pointerVisible }) => ({
     width: POINTER_WIDTH,
     height: POINTER_HEIGHT,
@@ -13726,13 +13982,13 @@ var DEFAULT_UNIT_LABELS = {
 var resolveLabel = (label, value) => typeof label === "string" ? label : value === 1 ? label.singular : label.plural;
 var parseTokenValue54 = (value) => parseFloat(value);
 var pad = (value) => String(Math.max(0, Math.floor(value))).padStart(2, "0");
-var StackedRoot = styled60(View)(({ rootGap }) => ({
+var StackedRoot = styled51(View)(({ rootGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   alignSelf: "flex-start",
   gap: rootGap
 }));
-var StackedItem = styled60(View)(
+var StackedItem = styled51(View)(
   ({
     itemGap,
     itemVerticalPadding,
@@ -13750,7 +14006,7 @@ var StackedItem = styled60(View)(
     borderRadius: itemBorderRadius
   })
 );
-var StackedCountBox = styled60(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.
@@ -13760,7 +14016,7 @@ var StackedCountBox = styled60(View)(({ countPaddingTop, countBgColor, countBord
   backgroundColor: countBgColor,
   borderRadius: countBorderRadius
 }));
-var InlineRoot = styled60(View)(
+var InlineRoot = styled51(View)(
   ({
     rootGap,
     rootVerticalPadding,
@@ -13780,13 +14036,13 @@ var InlineRoot = styled60(View)(
     overflow: "hidden"
   })
 );
-var InlineGroup = styled60(View)(({ groupGap }) => ({
+var InlineGroup = styled51(View)(({ groupGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "flex-end",
   gap: groupGap
 }));
-var InlineCount = styled60(View)(({ countGap }) => ({
+var InlineCount = styled51(View)(({ countGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: countGap
@@ -13971,7 +14227,7 @@ var parseTokenValue55 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var BadgeContainer = styled60(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;
@@ -13988,7 +14244,7 @@ var BadgeContainer = styled60(View)(({ theme: theme2 }) => {
     borderBottomRightRadius: parseTokenValue55(borderRadius.xs)
   };
 });
-var BadgeIcon = styled60(View)(({ theme: theme2 }) => {
+var BadgeIcon = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const sizing = theme2.tokens.semantics.dimensions.sizing;
   return {
@@ -14011,7 +14267,7 @@ var Badge2 = React60.forwardRef(
   }
 );
 Badge2.displayName = "ProductListingCard.Badge";
-var StyledGrid = styled60(View)(({ theme: theme2 }) => {
+var StyledGrid = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "grid",
@@ -14050,7 +14306,7 @@ var parseTokenValue56 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var StyledRoot16 = styled60(Pressable)(({ theme: theme2 }) => {
+var StyledRoot16 = styled51(Pressable)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14060,18 +14316,18 @@ var StyledRoot16 = styled60(Pressable)(({ theme: theme2 }) => {
     width: "100%"
   };
 });
-var ImageContainer = styled60(View)({
+var ImageContainer = styled51(View)({
   position: "relative",
   width: "100%",
   aspectRatio: 1,
   overflow: "hidden"
 });
-var StyledImage2 = styled60(Image)({
+var StyledImage2 = styled51(Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var BadgeContainer2 = styled60(View)(({ theme: theme2 }) => {
+var BadgeContainer2 = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const { sizing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
@@ -14091,7 +14347,7 @@ var BadgeContainer2 = styled60(View)(({ theme: theme2 }) => {
     borderBottomRightRadius: parseTokenValue56(borderRadius.sm)
   };
 });
-var ContentContainer = styled60(View)(({ theme: theme2 }) => {
+var ContentContainer = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14101,19 +14357,19 @@ var ContentContainer = styled60(View)(({ theme: theme2 }) => {
     width: "100%"
   };
 });
-var DetailsContainer = styled60(View)({
+var DetailsContainer = styled51(View)({
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
   width: "100%"
 });
-var CategoryWrapper = styled60(View)(({ theme: theme2 }) => {
+var CategoryWrapper = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     marginBottom: parseTokenValue56(spacing["3xs"])
   };
 });
-var TitleContainer = styled60(View)(({ theme: theme2 }) => {
+var TitleContainer = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14122,13 +14378,13 @@ var TitleContainer = styled60(View)(({ theme: theme2 }) => {
     marginBottom: parseTokenValue56(spacing.xs)
   };
 });
-var SizeWrapper = styled60(View)(({ theme: theme2 }) => {
+var SizeWrapper = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     marginBottom: parseTokenValue56(spacing.md)
   };
 });
-var PricingContainer = styled60(View)(({ theme: theme2 }) => {
+var PricingContainer = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
@@ -14211,7 +14467,7 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled60(View)(({
+var StyledCardContainer = styled51(View)(({
   theme: theme2,
   borderless
 }) => {
@@ -14239,7 +14495,7 @@ var StyledCardContainer = styled60(View)(({
     zIndex: 1
   });
 });
-var StyledImage3 = styled60(View)(
+var StyledImage3 = styled51(View)(
   ({
     theme: theme2,
     imageBackgroundColor,
@@ -14255,7 +14511,7 @@ var StyledImage3 = styled60(View)(
     position: "relative"
   })
 );
-var StyledQuantityBadge = styled60(View)(({ theme: theme2 }) => {
+var StyledQuantityBadge = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   const borderRadius = theme2.tokens.semantics.dimensions.borderRadius;
   const { colour } = theme2.tokens.semantics;
@@ -14273,7 +14529,7 @@ var StyledQuantityBadge = styled60(View)(({ theme: theme2 }) => {
     zIndex: 2
   };
 });
-var StyledContentArea = styled60(View)(({
+var StyledContentArea = styled51(View)(({
   theme: theme2,
   borderless
 }) => {
@@ -14287,23 +14543,23 @@ var StyledContentArea = styled60(View)(({
     justifyContent: "space-between"
   };
 });
-var StyledTextContainer = styled60(View)(() => ({
+var StyledTextContainer = styled51(View)(() => ({
   gap: 2
 }));
-var StyledBannerWrapper = styled60(View)(() => ({
+var StyledBannerWrapper = styled51(View)(() => ({
   width: "100%",
   marginTop: -48,
   paddingTop: 24,
   paddingBottom: 16
 }));
-var StyledRootWrapper = styled60(View)(() => {
+var StyledRootWrapper = styled51(View)(() => {
   return {
     flexDirection: "column",
     width: "100%",
     height: "100%"
   };
 });
-var StyledNotification = styled60(Notification)(({ theme: theme2 }) => {
+var StyledNotification = styled51(Notification)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   return {
     top: parseTokenValue8(spacing.md),
@@ -14442,12 +14698,12 @@ var useTabNavigationContext = () => {
   return context;
 };
 var parseTokenValue57 = (value) => parseFloat(value);
-var StyledFixedList = styled60(View)({
+var StyledFixedList = styled51(View)({
   flexDirection: "row",
   alignItems: "stretch",
   width: "100%"
 });
-var StyledTab = styled60(Pressable)(
+var StyledTab = styled51(Pressable)(
   ({
     tabHeight,
     tabMinWidth,
@@ -14591,6 +14847,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, Link, Logo, MessageCard, MessageCardBanner, MessageCardInsight, Notification, NumberField, NumberInput, NumberInputField, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, 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, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, Link, Logo, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, 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