@butternutbox/pawprint-native 0.10.10 → 0.11.0

package/dist/index.js

@@ -15,10 +15,9 @@ 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';
 import Svg, { Path, Defs, LinearGradient, Stop, Rect, G, ClipPath } from 'react-native-svg';
 import * as SwitchPrimitive from '@rn-primitives/switch';
-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 Animated10, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useSharedValue, useAnimatedStyle, ComplexAnimationBuilder, withSpring } 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';
 import * as ProgressPrimitive from '@rn-primitives/progress';
 import * as SelectPrimitive3 from '@rn-primitives/select';
 import * as SliderPrimitive from '@rn-primitives/slider';
@@ -9833,90 +9832,85 @@ var Checkbox = React65.forwardRef(
     const isControlled = controlledChecked !== void 0;
     const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
     const isChecked = isControlled ? controlledChecked : internalChecked;
-    const handleCheckedChange = (checked) => {
+    const handlePress = () => {
+      if (disabled) return;
+      const next = !isChecked;
       if (!isControlled) {
-        setInternalChecked(checked);
+        setInternalChecked(next);
       }
-      onCheckedChange == null ? void 0 : onCheckedChange(checked);
+      onCheckedChange == null ? void 0 : onCheckedChange(next);
     };
     const isTile = variant === "tile";
     const controlSize = parseTokenValue30(checkbox.size.control.default);
-    return /* @__PURE__ */ jsx(
-      CheckboxPrimitive.Root,
-      {
-        checked: isChecked,
-        onCheckedChange: handleCheckedChange,
+    return /* @__PURE__ */ jsxs(
+      StyledRootPressable,
+      __spreadProps(__spreadValues({
+        ref,
+        onPress: handlePress,
         disabled,
-        asChild: true,
-        children: /* @__PURE__ */ jsxs(
-          StyledRootPressable,
-          __spreadProps(__spreadValues({
-            ref,
-            rootFlexAlign: isTile ? "center" : "flex-start",
-            rootGap: parseTokenValue30(
-              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,
-            rootBgColor: isTile ? isChecked ? checkbox.checkboxTile.colour.background.selected : checkbox.checkboxTile.colour.background.default : void 0,
-            rootBorderWidth: isTile ? parseTokenValue30(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,
-            style: typeof style === "function" ? void 0 : style
-          }, rest), {
-            children: [
-              /* @__PURE__ */ jsx(
-                StyledControl,
-                {
-                  controlSize,
-                  controlBorderWidth: parseTokenValue30(
-                    checkbox.control.border.default
-                  ),
-                  controlBorderColor: isChecked ? checkbox.colour.background.selected : checkbox.colour.border.default,
-                  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" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                StyledContent2,
-                {
-                  contentGap: parseTokenValue30(checkbox.spacing.content.gap),
-                  children: [
-                    label && /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        token: checkbox.typography.label,
-                        color: checkbox.colour.text.title,
-                        children: label
-                      }
-                    ),
-                    subText && /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        token: checkbox.typography.subText,
-                        color: checkbox.colour.text.subtext,
-                        children: subText
-                      }
-                    )
-                  ]
-                }
+        accessibilityRole: "checkbox",
+        accessibilityState: { checked: isChecked, disabled },
+        rootFlexAlign: isTile ? "center" : "flex-start",
+        rootGap: parseTokenValue30(
+          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,
+        rootBgColor: isTile ? isChecked ? checkbox.checkboxTile.colour.background.selected : checkbox.checkboxTile.colour.background.default : void 0,
+        rootBorderWidth: isTile ? parseTokenValue30(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,
+        style: typeof style === "function" ? void 0 : style
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx(
+            StyledControl,
+            {
+              controlSize,
+              controlBorderWidth: parseTokenValue30(checkbox.control.border.default),
+              controlBorderColor: isChecked ? checkbox.colour.background.selected : checkbox.colour.border.default,
+              controlBorderRadius: parseTokenValue30(dimensions3.borderRadius.xs),
+              controlBgColor: isChecked ? checkbox.colour.background.selected : "transparent",
+              children: isChecked && /* @__PURE__ */ jsx(Icon, { icon: Check_default, size: "xs", colour: "alt" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            StyledContent2,
+            {
+              contentGap: parseTokenValue30(checkbox.spacing.content.gap),
+              children: [
+                label && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    token: checkbox.typography.label,
+                    color: checkbox.colour.text.title,
+                    children: label
+                  }
+                ),
+                subText && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    token: checkbox.typography.subText,
+                    color: checkbox.colour.text.subtext,
+                    children: subText
+                  }
+                )
+              ]
+            }
+          ),
+          isTile && illustration && /* @__PURE__ */ jsx(
+            StyledIllustration,
+            {
+              illustrationSize: parseTokenValue30(
+                checkbox.checkboxTile.size.illustration.default
               ),
-              isTile && illustration && /* @__PURE__ */ jsx(
-                StyledIllustration,
-                {
-                  illustrationSize: parseTokenValue30(
-                    checkbox.checkboxTile.size.illustration.default
-                  ),
-                  children: illustration
-                }
-              )
-            ]
-          })
-        )
-      }
+              children: illustration
+            }
+          )
+        ]
+      })
     );
   }
 );
@@ -10535,7 +10529,7 @@ NumberFieldInput.displayName = "NumberField.Input";
 var parseTokenValue35 = (value) => parseFloat(value);
 var StyledRoot10 = styled50(View)(({ rootGap, fullWidth }) => __spreadValues({
   gap: rootGap
-}, fullWidth && { width: "100%" }));
+}, fullWidth ? { width: "100%" } : { alignItems: "center" }));
 var StyledLabelGroup = styled50(View)(({ labelGap }) => ({
   gap: labelGap
 }));
@@ -10599,6 +10593,7 @@ var NumberField = React65.forwardRef(
                   {
                     token: typoTokens.label,
                     color: tokens3.colour.text.label,
+                    align: "center",
                     children: label
                   }
                 ),
@@ -10607,6 +10602,7 @@ var NumberField = React65.forwardRef(
                   {
                     token: typoTokens.smallLabel,
                     color: tokens3.colour.text.description,
+                    align: "center",
                     children: smallLabel
                   }
                 )
@@ -10636,6 +10632,7 @@ var NumberField = React65.forwardRef(
             {
               token: size === "lg" ? tokens3.typography.large.secondaryContent : tokens3.typography.small.smallLabel,
               color: tokens3.colour.text.description,
+              align: "center",
               children: description
             }
           ),
@@ -10644,6 +10641,7 @@ var NumberField = React65.forwardRef(
             {
               token: size === "lg" ? tokens3.typography.large.secondaryContent : tokens3.typography.small.smallLabel,
               color: theme2.tokens.components.inputs.colour.description.error,
+              align: "center",
               children: error
             }
           )
@@ -13195,6 +13193,127 @@ var Notification = React65.forwardRef(
 );
 Notification.displayName = "Notification";
 var parseTokenValue50 = (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));
+var CARD_EXITING = FadeOutDown.duration(200);
+var CARD_BASE_STYLE = {
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  transformOrigin: "50% 100%"
+};
+var StyledRoot15 = styled50(View)(({ rootBottom, rootPaddingH }) => ({
+  position: "absolute",
+  left: 0,
+  right: 0,
+  bottom: rootBottom,
+  paddingHorizontal: rootPaddingH,
+  alignItems: "stretch"
+}));
+var StyledStack = styled50(View)({
+  position: "relative",
+  width: "100%"
+});
+var StackedCard = ({
+  item,
+  depth,
+  revealStep,
+  onDismiss
+}) => {
+  const depthSV = useSharedValue(depth);
+  React65.useEffect(() => {
+    depthSV.value = withSpring(depth, SPRING_CONFIG);
+  }, [depth, depthSV]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateY: depthSV.value * revealStep },
+      { scale: 1 - depthSV.value * SCALE_STEP }
+    ]
+  }));
+  const isFront = depth === 0;
+  return /* @__PURE__ */ jsx(
+    Animated10.View,
+    {
+      entering: CARD_ENTERING,
+      exiting: CARD_EXITING,
+      pointerEvents: isFront ? "auto" : "none",
+      accessibilityElementsHidden: !isFront,
+      importantForAccessibility: isFront ? "auto" : "no-hide-descendants",
+      style: [CARD_BASE_STYLE, { zIndex: -depth }, animatedStyle],
+      children: /* @__PURE__ */ jsx(
+        Notification,
+        {
+          variant: "toast",
+          type: item.type,
+          onClose: isFront ? () => onDismiss == null ? void 0 : onDismiss(item.id) : void 0,
+          children: item.message
+        }
+      )
+    }
+  );
+};
+var StackedNotifications = React65.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 idsKey = items.map((item) => item.id).join("|");
+  React65.useEffect(() => {
+    setDismissed((prev) => {
+      if (prev.size === 0) return prev;
+      const present = new Set(items.map((item) => item.id));
+      let changed = false;
+      const next = /* @__PURE__ */ new Set();
+      prev.forEach((id) => {
+        if (present.has(id)) next.add(id);
+        else changed = true;
+      });
+      return changed ? next : prev;
+    });
+  }, [idsKey]);
+  const activeItems = React65.useMemo(
+    () => items.filter((item) => !dismissed.has(item.id)),
+    [items, dismissed]
+  );
+  const layers = React65.useMemo(
+    () => activeItems.slice(-3).reverse(),
+    [activeItems]
+  );
+  const handleDismiss = (id) => {
+    setDismissed((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+    onDismiss == null ? void 0 : onDismiss(id);
+  };
+  const rootBottom = bottomOffset != null ? bottomOffset : parseTokenValue50(spacing.lg);
+  const peekStep = parseTokenValue50(spacing.xs);
+  return /* @__PURE__ */ jsx(
+    StyledRoot15,
+    __spreadProps(__spreadValues({
+      ref,
+      pointerEvents: "box-none",
+      rootBottom,
+      rootPaddingH: parseTokenValue50(spacing.md)
+    }, rest), {
+      children: /* @__PURE__ */ jsx(StyledStack, { children: layers.map((item, depth) => /* @__PURE__ */ jsx(
+        StackedCard,
+        {
+          item,
+          depth,
+          revealStep: peekStep,
+          onDismiss: handleDismiss
+        },
+        item.id
+      )) })
+    })
+  );
+});
+StackedNotifications.displayName = "StackedNotifications";
+var parseTokenValue51 = (value) => parseFloat(value);
 var NIB_OFFSET = {
   left: 24,
   middle: 146,
@@ -13316,9 +13435,9 @@ var Tooltip = React65.forwardRef(
       width
     } = theme2.tokens.components.tooltip;
     const [open, setOpen] = useState(false);
-    const tooltipWidth = parseTokenValue50(width);
-    const nibWidth = parseTokenValue50(nibToken.width);
-    const nibHeight = parseTokenValue50(nibToken.height);
+    const tooltipWidth = parseTokenValue51(width);
+    const nibWidth = parseTokenValue51(nibToken.width);
+    const nibHeight = parseTokenValue51(nibToken.height);
     const nibHalfWidth = nibWidth / 2;
     const nibOuterHeight = nibHeight + 1;
     const nibX = NIB_OFFSET[alignment];
@@ -13327,11 +13446,11 @@ var Tooltip = React65.forwardRef(
     const side = position === "bottom" ? "top" : "bottom";
     const bgColor = colour.background.default;
     const borderColor = colour.border.default;
-    const borderW = parseTokenValue50(borderWidth.default);
-    const borderR = parseTokenValue50(borderRadius.default);
-    const topPad = parseTokenValue50(spacing.topPadding);
-    const bottomPad = parseTokenValue50(spacing.bottomPadding);
-    const horizontalPad = parseTokenValue50(spacing.horizontalPading);
+    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 nibRow = /* @__PURE__ */ jsx(View, { style: { height: nibOuterHeight, position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsx(
       NibTriangle,
       {
@@ -13432,7 +13551,7 @@ var Tooltip = React65.forwardRef(
   }
 );
 Tooltip.displayName = "Tooltip";
-var parseTokenValue51 = (value) => parseFloat(value);
+var parseTokenValue52 = (value) => parseFloat(value);
 var StyledInsightRoot = styled50(View)(
   ({
     rootGap,
@@ -13477,26 +13596,26 @@ var MessageCardInsight = React65.forwardRef(
     const isSupporting = variant === "supporting";
     const supporting = insightCard.spacing.supporting;
     const standalone = insightCard.spacing.standalone;
-    const radiusStandalone = parseTokenValue51(
+    const radiusStandalone = parseTokenValue52(
       insightCard.borderRadius.standalone.default
     );
-    const radiusSupporting = parseTokenValue51(
+    const radiusSupporting = parseTokenValue52(
       insightCard.borderRadius.supporting.bottom
     );
     return /* @__PURE__ */ jsxs(
       StyledInsightRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue51(
+        rootGap: parseTokenValue52(
           isSupporting ? supporting.gap : standalone.gap
         ),
-        rootPaddingH: parseTokenValue51(
+        rootPaddingH: parseTokenValue52(
           isSupporting ? semanticSpacing.md : standalone.horizontalPadding
         ),
-        rootPaddingTop: parseTokenValue51(
+        rootPaddingTop: parseTokenValue52(
           isSupporting ? supporting.topPadding : standalone.verticalPadding
         ),
-        rootPaddingBottom: parseTokenValue51(
+        rootPaddingBottom: parseTokenValue52(
           isSupporting ? supporting.bottomPadding : standalone.verticalPadding
         ),
         rootBorderTopLeftRadius: isSupporting ? 0 : radiusStandalone,
@@ -13504,7 +13623,7 @@ var MessageCardInsight = React65.forwardRef(
         rootBorderBottomLeftRadius: isSupporting ? radiusSupporting : radiusStandalone,
         rootBorderBottomRightRadius: isSupporting ? radiusSupporting : radiusStandalone,
         rootBgColor: insightCard.colour.background.default,
-        rootMinWidth: parseTokenValue51(insightCard.size.minWidth),
+        rootMinWidth: parseTokenValue52(insightCard.size.minWidth),
         accessible: true,
         accessibilityRole: "summary"
       }, rest), {
@@ -13513,7 +13632,7 @@ var MessageCardInsight = React65.forwardRef(
           /* @__PURE__ */ jsxs(
             StyledInsightContent,
             {
-              contentGap: parseTokenValue51(standalone.content.gap),
+              contentGap: parseTokenValue52(standalone.content.gap),
               children: [
                 title && /* @__PURE__ */ jsx(
                   Typography,
@@ -13605,9 +13724,9 @@ var MessageCardBanner = React65.forwardRef(
       StyledBannerRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue51(dimensions3.spacing.md),
-        rootPadding: parseTokenValue51(dimensions3.spacing.md),
-        rootBorderRadius: parseTokenValue51(dimensions3.borderRadius.md),
+        rootGap: parseTokenValue52(dimensions3.spacing.md),
+        rootPadding: parseTokenValue52(dimensions3.spacing.md),
+        rootBorderRadius: parseTokenValue52(dimensions3.borderRadius.md),
         rootBgColor: bgColor,
         accessible: true,
         accessibilityRole: "summary"
@@ -13619,7 +13738,7 @@ var MessageCardBanner = React65.forwardRef(
           }) }) : (media == null ? void 0 : media.type) === "image" ? /* @__PURE__ */ jsx(
             StyledBannerImage,
             {
-              imageRadius: parseTokenValue51(dimensions3.borderRadius.sm),
+              imageRadius: parseTokenValue52(dimensions3.borderRadius.sm),
               imageBgColor: colour.background.surface.secondary,
               children: /* @__PURE__ */ jsx(
                 Image,
@@ -13635,12 +13754,12 @@ var MessageCardBanner = React65.forwardRef(
           /* @__PURE__ */ jsxs(
             StyledBannerContents,
             {
-              contentsGap: parseTokenValue51(dimensions3.spacing.xs),
+              contentsGap: parseTokenValue52(dimensions3.spacing.xs),
               children: [
                 /* @__PURE__ */ jsxs(
                   StyledBannerCopy,
                   {
-                    copyGap: parseTokenValue51(dimensions3.spacing["3xs"]),
+                    copyGap: parseTokenValue52(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 })
@@ -13671,7 +13790,7 @@ var MessageCard = {
   Insight: MessageCardInsight,
   Banner: MessageCardBanner
 };
-var parseTokenValue52 = (value) => parseFloat(value);
+var parseTokenValue53 = (value) => parseFloat(value);
 var slideEaseOut = Easing$1.out(Easing$1.quad);
 var MONTH_SLIDE_ENTERING = {
   forward: FadeInRight.duration(250).easing(slideEaseOut),
@@ -13832,17 +13951,17 @@ var DatePicker = React65.forwardRef(
     } = useMemo(
       () => ({
         // Gap between the week-day header and the month header.
-        weekGap: parseTokenValue52(datePicker.spacing.gap),
+        weekGap: parseTokenValue53(datePicker.spacing.gap),
         // Gap between the month header and the dates grid.
-        datesGap: parseTokenValue52(theme2.tokens.semantics.dimensions.spacing.md),
-        containerMaxWidth: parseTokenValue52(dt.size.width) * 7,
-        headerGap: parseTokenValue52(datePicker.month.spacing.gap),
-        cellHeight: parseTokenValue52(dt.size.height),
-        indicatorSize: parseTokenValue52(dt.size.indicator),
-        indicatorBorderRadius: parseTokenValue52(dt.borderRadius.indicator),
-        selectedBorderWidth: parseTokenValue52(dt.borderWidth.indicator.selected),
-        disabledOpacity: parseTokenValue52(dt.opacity.disabled),
-        rowGap: parseTokenValue52(datePicker.dates.spacing.gap)
+        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)
       }),
       [datePicker, dt, theme2]
     );
@@ -14120,8 +14239,8 @@ var buildPointerPath = (r) => {
     "Z"
   ].join(" ");
 };
-var parseTokenValue53 = (value) => parseFloat(value);
-var StyledRoot15 = styled50(View)(({ rootGap }) => ({
+var parseTokenValue54 = (value) => parseFloat(value);
+var StyledRoot16 = styled50(View)(({ rootGap }) => ({
   flexDirection: "column",
   gap: rootGap,
   width: "100%"
@@ -14210,24 +14329,24 @@ var PictureSelector = React65.forwardRef(
       if (!isControlled) setInternalValue(nextValue);
       onValueChange == null ? void 0 : onValueChange(nextValue);
     };
-    const rootGap = parseTokenValue53(pictureSelector.spacing.container.gap);
-    const rowGap = parseTokenValue53(pictureSelector.spacing.buttons.gap);
-    const stackGap = parseTokenValue53(pictureButton.spacing.container.gap);
-    const buttonPadding = parseTokenValue53(pictureButton.spacing.padding);
-    const buttonBorderRadius = parseTokenValue53(
+    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(
       pictureButton.borderRadius.default
     );
-    const borderWidthDefault = parseTokenValue53(
+    const borderWidthDefault = parseTokenValue54(
       pictureButton.borderWidth.default
     );
-    const borderWidthActive = parseTokenValue53(pictureButton.borderWidth.active);
+    const borderWidthActive = parseTokenValue54(pictureButton.borderWidth.active);
     const pointerPath = buildPointerPath(
-      parseTokenValue53(pictureButton.pointer.borderRadius.default)
+      parseTokenValue54(pictureButton.pointer.borderRadius.default)
     );
-    const resolvedMinWidth = itemMinWidth != null ? itemMinWidth : parseTokenValue53(pictureButton.size.minWidth);
+    const resolvedMinWidth = itemMinWidth != null ? itemMinWidth : parseTokenValue54(pictureButton.size.minWidth);
     const resolvedMinHeight = itemMinHeight != null ? itemMinHeight : resolvedMinWidth;
     return /* @__PURE__ */ jsxs(
-      StyledRoot15,
+      StyledRoot16,
       __spreadProps(__spreadValues({
         ref,
         rootGap,
@@ -14317,7 +14436,7 @@ var DEFAULT_UNIT_LABELS = {
   seconds: { singular: "sec", plural: "secs" }
 };
 var resolveLabel = (label, value) => typeof label === "string" ? label : value === 1 ? label.singular : label.plural;
-var parseTokenValue54 = (value) => parseFloat(value);
+var parseTokenValue55 = (value) => parseFloat(value);
 var pad = (value) => String(Math.max(0, Math.floor(value))).padStart(2, "0");
 var StackedRoot = styled50(View)(({ rootGap }) => ({
   flexDirection: "row",
@@ -14447,28 +14566,28 @@ var Countdown = React65.forwardRef(
         InlineRoot,
         __spreadProps(__spreadValues({
           ref,
-          rootGap: parseTokenValue54(countdown.spacing.gap),
-          rootVerticalPadding: parseTokenValue54(
+          rootGap: parseTokenValue55(countdown.spacing.gap),
+          rootVerticalPadding: parseTokenValue55(
             countdown.spacing.verticalPadding
           ),
-          rootHorizontalPadding: parseTokenValue54(
+          rootHorizontalPadding: parseTokenValue55(
             countdown.spacing.horizontalPadding
           ),
           rootBgColor: countdown.colour.background.default,
-          rootBorderRadius: parseTokenValue54(countdown.borderRadius.default)
+          rootBorderRadius: parseTokenValue55(countdown.borderRadius.default)
         }, rest), {
           children: [
             label != null && /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "bold", size: "md", color: "primary", children: label }),
             /* @__PURE__ */ jsx(
               InlineGroup,
               {
-                groupGap: parseTokenValue54(countdown.countdownGroup.spacing.gap),
+                groupGap: parseTokenValue55(countdown.countdownGroup.spacing.gap),
                 children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
                   index > 0 && colon(`colon-${unit.key}`),
                   /* @__PURE__ */ jsxs(
                     InlineCount,
                     {
-                      countGap: parseTokenValue54(countdown.count.spacing.gap),
+                      countGap: parseTokenValue55(countdown.count.spacing.gap),
                       children: [
                         /* @__PURE__ */ jsx(
                           Typography,
@@ -14504,33 +14623,33 @@ var Countdown = React65.forwardRef(
       StackedRoot,
       __spreadProps(__spreadValues({
         ref,
-        rootGap: parseTokenValue54(countdown.spacing.gap)
+        rootGap: parseTokenValue55(countdown.spacing.gap)
       }, rest), {
         children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
           index > 0 && colon(`colon-${unit.key}`),
           /* @__PURE__ */ jsxs(
             StackedItem,
             {
-              itemGap: parseTokenValue54(countdownItem.spacing.gap),
-              itemVerticalPadding: parseTokenValue54(
+              itemGap: parseTokenValue55(countdownItem.spacing.gap),
+              itemVerticalPadding: parseTokenValue55(
                 countdownItem.spacing.verticalPadding
               ),
-              itemHorizontalPadding: parseTokenValue54(
+              itemHorizontalPadding: parseTokenValue55(
                 countdownItem.spacing.horizontalPadding
               ),
               itemBgColor: countdownItem.colour.background.default,
-              itemBorderRadius: parseTokenValue54(
+              itemBorderRadius: parseTokenValue55(
                 countdownItem.borderRadius.default
               ),
               children: [
                 /* @__PURE__ */ jsx(
                   StackedCountBox,
                   {
-                    countPaddingTop: parseTokenValue54(
+                    countPaddingTop: parseTokenValue55(
                       countdownItem.count.spacing.paddingTop
                     ),
                     countBgColor: countdownItem.count.colour.background.default,
-                    countBorderRadius: parseTokenValue54(
+                    countBorderRadius: parseTokenValue55(
                       countdownItem.count.borderRadius.default
                     ),
                     children: /* @__PURE__ */ jsx(
@@ -14560,7 +14679,7 @@ var Countdown = React65.forwardRef(
   }
 );
 Countdown.displayName = "Countdown";
-var parseTokenValue55 = (value) => {
+var parseTokenValue56 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
@@ -14571,14 +14690,14 @@ var BadgeContainer = styled50(View)(({ theme: theme2 }) => {
   return {
     display: "flex",
     flexDirection: "row",
-    gap: parseTokenValue55(spacing["2xs"]),
+    gap: parseTokenValue56(spacing["2xs"]),
     alignItems: "center",
     justifyContent: "center",
-    height: parseTokenValue55(sizing["2xl"]),
-    paddingRight: parseTokenValue55(spacing.xs),
+    height: parseTokenValue56(sizing["2xl"]),
+    paddingRight: parseTokenValue56(spacing.xs),
     backgroundColor: colour.background.container.brand,
-    borderTopRightRadius: parseTokenValue55(borderRadius.xs),
-    borderBottomRightRadius: parseTokenValue55(borderRadius.xs)
+    borderTopRightRadius: parseTokenValue56(borderRadius.xs),
+    borderBottomRightRadius: parseTokenValue56(borderRadius.xs)
   };
 });
 var BadgeIcon = styled50(View)(({ theme: theme2 }) => {
@@ -14588,9 +14707,9 @@ var BadgeIcon = styled50(View)(({ theme: theme2 }) => {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: parseTokenValue55(sizing.md),
-    height: parseTokenValue55(sizing.md),
-    marginLeft: parseTokenValue55(spacing.xs),
+    width: parseTokenValue56(sizing.md),
+    height: parseTokenValue56(sizing.md),
+    marginLeft: parseTokenValue56(spacing.xs),
     flexShrink: 0
   };
 });
@@ -14639,16 +14758,16 @@ var Grid = React65.forwardRef(
   }
 );
 Grid.displayName = "ProductListingCard.Grid";
-var parseTokenValue56 = (value) => {
+var parseTokenValue57 = (value) => {
   if (typeof value === "number") return value;
   return parseFloat(value);
 };
-var StyledRoot16 = styled50(Pressable)(({ theme: theme2 }) => {
+var StyledRoot17 = styled50(Pressable)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
     display: "flex",
     flexDirection: "column",
-    gap: parseTokenValue56(spacing.md),
+    gap: parseTokenValue57(spacing.md),
     alignItems: "flex-start",
     width: "100%"
   };
@@ -14658,7 +14777,7 @@ var ImageContainer = styled50(View)(({ theme: theme2 }) => ({
   width: "100%",
   aspectRatio: 1,
   overflow: "hidden",
-  borderRadius: parseTokenValue56(
+  borderRadius: parseTokenValue57(
     theme2.tokens.semantics.dimensions.borderRadius.md
   )
 }));
@@ -14669,7 +14788,7 @@ var StyledImage2 = styled50(Image)({
 });
 var BadgeContainer2 = styled50(View)(({ theme: theme2 }) => ({
   position: "absolute",
-  top: parseTokenValue56(theme2.tokens.semantics.dimensions.spacing.md),
+  top: parseTokenValue57(theme2.tokens.semantics.dimensions.spacing.md),
   left: 0
 }));
 var ContentContainer = styled50(View)(({ theme: theme2 }) => {
@@ -14677,7 +14796,7 @@ var ContentContainer = styled50(View)(({ theme: theme2 }) => {
   return {
     display: "flex",
     flexDirection: "column",
-    gap: parseTokenValue56(spacing.md),
+    gap: parseTokenValue57(spacing.md),
     alignItems: "flex-start",
     width: "100%"
   };
@@ -14691,7 +14810,7 @@ var DetailsContainer = styled50(View)({
 var CategoryWrapper = styled50(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
-    marginBottom: parseTokenValue56(spacing["3xs"])
+    marginBottom: parseTokenValue57(spacing["3xs"])
   };
 });
 var TitleContainer = styled50(View)({
@@ -14744,7 +14863,7 @@ var _ProductListingCard = React65.forwardRef(
       "showPrice",
       "onPress"
     ]);
-    return /* @__PURE__ */ jsxs(StyledRoot16, __spreadProps(__spreadValues({ ref, onPress }, rest), { children: [
+    return /* @__PURE__ */ jsxs(StyledRoot17, __spreadProps(__spreadValues({ ref, onPress }, rest), { children: [
       /* @__PURE__ */ jsxs(ImageContainer, { children: [
         image && /* @__PURE__ */ jsx(View, { style: { flex: 1, width: "100%", height: "100%" }, children: typeof image === "string" ? /* @__PURE__ */ jsx(
           StyledImage2,
@@ -15039,7 +15158,7 @@ var useTabNavigationContext = () => {
   }
   return context;
 };
-var parseTokenValue57 = (value) => parseFloat(value);
+var parseTokenValue58 = (value) => parseFloat(value);
 var StyledFixedList = styled50(View)({
   flexDirection: "row",
   alignItems: "stretch",
@@ -15105,13 +15224,13 @@ var TabNavigationTab = React65.forwardRef(
       StyledTab,
       __spreadProps(__spreadValues({
         ref,
-        tabHeight: parseTokenValue57(tabitem.size.height),
-        tabMinWidth: parseTokenValue57(tabitem.size.minWidth),
-        tabPaddingTop: parseTokenValue57(spacing.topPadding),
-        tabPaddingBottom: parseTokenValue57(spacing.bottomPadding),
-        tabPaddingHorizontal: parseTokenValue57(spacing.horizontalPadding),
-        tabGap: parseTokenValue57(spacing.gap),
-        tabBorderWidth: parseTokenValue57(borderWidth.default),
+        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),
         tabBorderColor: borderColour,
         tabFlex: layout === "fixed" ? 1 : void 0
       }, rest), {
@@ -15193,6 +15312,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, 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, 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