@butternutbox/pawprint-native 0.23.3 → 0.24.1

package/dist/index.d.cts

@@ -1413,8 +1413,18 @@ type ProgressOwnProps = {
     label?: React.ReactNode;
     description?: React.ReactNode;
     getValueLabel?: (value: number, max: number) => string;
+    animate?: boolean;
 };
 type ProgressProps = ProgressOwnProps & Omit<ViewProps, keyof ProgressOwnProps>;
+/**
+ * Timing the indicator eases with. Exported so a consumer overlaying something
+ * on the track (a marker, a mascot) can run its own animation off the same
+ * config and stay pinned to the leading edge of the fill.
+ */
+declare const PROGRESS_ANIMATION: {
+    readonly duration: 450;
+    readonly easing: react_native_reanimated.EasingFunction;
+};
 /**
  * A horizontal progress bar that visualises the completion of a determinate
  * task. Supports an optional label (top-left) and description (top-right),
@@ -1429,6 +1439,8 @@ type ProgressProps = ProgressOwnProps & Omit<ViewProps, keyof ProgressOwnProps>;
  * @param {React.ReactNode} [label] - Label rendered in the top-left above the track.
  * @param {React.ReactNode} [description] - Helper text rendered in the top-right above the track.
  * @param {(value: number, max: number) => string} [getValueLabel] - Accessible value label.
+ * @param {boolean} [animate=true] - Ease the indicator to its new width instead of
+ * snapping. Ignored when the OS has reduced motion enabled.
  *
  * @example
  * ```tsx
@@ -2494,4 +2506,4 @@ declare const useDrawerKeyboardAvoidance: (minPadding?: number) => {
     contentContainerStyle: StyleProp<ViewStyle>;
 };
 
-export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };

package/dist/index.d.ts

@@ -1413,8 +1413,18 @@ type ProgressOwnProps = {
     label?: React.ReactNode;
     description?: React.ReactNode;
     getValueLabel?: (value: number, max: number) => string;
+    animate?: boolean;
 };
 type ProgressProps = ProgressOwnProps & Omit<ViewProps, keyof ProgressOwnProps>;
+/**
+ * Timing the indicator eases with. Exported so a consumer overlaying something
+ * on the track (a marker, a mascot) can run its own animation off the same
+ * config and stay pinned to the leading edge of the fill.
+ */
+declare const PROGRESS_ANIMATION: {
+    readonly duration: 450;
+    readonly easing: react_native_reanimated.EasingFunction;
+};
 /**
  * A horizontal progress bar that visualises the completion of a determinate
  * task. Supports an optional label (top-left) and description (top-right),
@@ -1429,6 +1439,8 @@ type ProgressProps = ProgressOwnProps & Omit<ViewProps, keyof ProgressOwnProps>;
  * @param {React.ReactNode} [label] - Label rendered in the top-left above the track.
  * @param {React.ReactNode} [description] - Helper text rendered in the top-right above the track.
  * @param {(value: number, max: number) => string} [getValueLabel] - Accessible value label.
+ * @param {boolean} [animate=true] - Ease the indicator to its new width instead of
+ * snapping. Ignored when the OS has reduced motion enabled.
  *
  * @example
  * ```tsx
@@ -2494,4 +2506,4 @@ declare const useDrawerKeyboardAvoidance: (minPadding?: number) => {
     contentContainerStyle: StyleProp<ViewStyle>;
 };
 
-export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };

package/dist/index.js

@@ -15,7 +15,7 @@ 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, withSpring } from 'react-native-reanimated';
+import Animated10, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useReducedMotion, useSharedValue, withTiming, useAnimatedStyle, ComplexAnimationBuilder, withSpring } from 'react-native-reanimated';
 import { Slot } from '@rn-primitives/slot';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as ProgressPrimitive from '@rn-primitives/progress';
@@ -7863,6 +7863,10 @@ function usePasswordField({
     showRequirements
   });
 }
+var PROGRESS_ANIMATION = {
+  duration: 450,
+  easing: Easing$1.inOut(Easing$1.cubic)
+};
 var parseTokenValue40 = (value) => parseFloat(value);
 var StyledRoot12 = styled51(View)(({ rootGap }) => ({
   flexDirection: "column",
@@ -7885,7 +7889,7 @@ var StyledTrack = styled51(View)(({ trackHeight, trackMinWidth, trackBorderRadiu
   backgroundColor: trackBgColor,
   overflow: "hidden"
 }));
-var StyledIndicator = styled51(View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
+var StyledIndicator = styled51(Animated10.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
   height: "100%",
   borderRadius: indicatorBorderRadius,
   backgroundColor: indicatorBgColor
@@ -7900,7 +7904,8 @@ var Progress = React66.forwardRef(
       colour = "primary",
       label,
       description,
-      getValueLabel
+      getValueLabel,
+      animate = true
     } = _b, rest = __objRest(_b, [
       "value",
       "max",
@@ -7908,7 +7913,8 @@ var Progress = React66.forwardRef(
       "colour",
       "label",
       "description",
-      "getValueLabel"
+      "getValueLabel",
+      "animate"
     ]);
     const theme2 = useTheme();
     const {
@@ -7924,6 +7930,15 @@ var Progress = React66.forwardRef(
     const percent = clampedValue / safeMax * 100;
     const showHeader = Boolean(label) || Boolean(description);
     const typographyForSize = size === "lg" ? typography.large : typography.small;
+    const reducedMotion = useReducedMotion();
+    const shouldAnimate = animate && !reducedMotion;
+    const fill = useSharedValue(percent);
+    React66.useEffect(() => {
+      fill.value = shouldAnimate ? withTiming(percent, PROGRESS_ANIMATION) : percent;
+    }, [fill, percent, shouldAnimate]);
+    const indicatorStyle = useAnimatedStyle(() => ({
+      width: `${fill.value}%`
+    }));
     const trackSize = { lg: track.size.large, sm: track.size.small }[size];
     const trackHeight = parseTokenValue40(trackSize.height);
     const trackMinWidth = parseTokenValue40(trackSize.mindWidth);
@@ -7970,7 +7985,7 @@ var Progress = React66.forwardRef(
                 {
                   indicatorBorderRadius,
                   indicatorBgColor,
-                  style: { width: `${percent}%` }
+                  style: indicatorStyle
                 }
               ) })
             }
@@ -10233,8 +10248,11 @@ var CARD_BASE_STYLE = {
   position: "absolute",
   bottom: 0,
   left: 0,
-  right: 0,
-  transformOrigin: "50% 100%"
+  right: 0
+};
+var DEPTH_LAYER_STYLE = {
+  transformOrigin: "50% 100%",
+  width: "100%"
 };
 var StyledRoot15 = styled51(View)(({ rootBottom, rootPaddingH }) => ({
   position: "absolute",
@@ -10248,17 +10266,34 @@ var StyledStack = styled51(View)({
   position: "relative",
   width: "100%"
 });
+var computeBackfillIds = (layers, prevActiveIds, prevLayerIds) => {
+  const ids = /* @__PURE__ */ new Set();
+  layers.forEach((item) => {
+    if (prevActiveIds.has(item.id) && !prevLayerIds.has(item.id)) {
+      ids.add(item.id);
+    }
+  });
+  return ids;
+};
 var StackedCard = ({
   item,
   depth,
   revealStep,
-  onDismiss
+  onDismiss,
+  isBackfill
 }) => {
-  const depthSV = useSharedValue(depth);
+  const isBackfillRef = React66.useRef(isBackfill);
+  const wasBackfill = isBackfillRef.current;
+  const depthSV = useSharedValue(wasBackfill ? depth + 1 : depth);
+  const opacitySV = useSharedValue(wasBackfill ? 0 : 1);
   React66.useEffect(() => {
     depthSV.value = withSpring(depth, SPRING_CONFIG);
   }, [depth, depthSV]);
-  const animatedStyle = useAnimatedStyle(() => ({
+  React66.useEffect(() => {
+    if (wasBackfill) opacitySV.value = withSpring(1, SPRING_CONFIG);
+  }, []);
+  const depthStyle = useAnimatedStyle(() => ({
+    opacity: opacitySV.value,
     transform: [
       { translateY: depthSV.value * revealStep },
       { scale: 1 - depthSV.value * SCALE_STEP }
@@ -10268,13 +10303,13 @@ var StackedCard = ({
   return /* @__PURE__ */ jsx(
     Animated10.View,
     {
-      entering: CARD_ENTERING,
+      entering: wasBackfill ? void 0 : 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(
+      style: [CARD_BASE_STYLE, { zIndex: -depth }],
+      children: /* @__PURE__ */ jsx(Animated10.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsx(
         Notification,
         {
           variant: "toast",
@@ -10282,7 +10317,7 @@ var StackedCard = ({
           onClose: isFront ? () => onDismiss == null ? void 0 : onDismiss(item.id) : void 0,
           children: item.message
         }
-      )
+      ) })
     }
   );
 };
@@ -10313,6 +10348,20 @@ var StackedNotifications = React66.forwardRef((_a, ref) => {
     () => activeItems.slice(-3).reverse(),
     [activeItems]
   );
+  const prevActiveIdsRef = React66.useRef(/* @__PURE__ */ new Set());
+  const prevLayerIdsRef = React66.useRef(/* @__PURE__ */ new Set());
+  const backfillIds = React66.useMemo(
+    () => computeBackfillIds(
+      layers,
+      prevActiveIdsRef.current,
+      prevLayerIdsRef.current
+    ),
+    [layers]
+  );
+  React66.useEffect(() => {
+    prevActiveIdsRef.current = new Set(activeItems.map((item) => item.id));
+    prevLayerIdsRef.current = new Set(layers.map((item) => item.id));
+  }, [activeItems, layers]);
   const handleDismiss = (id) => {
     setDismissed((prev) => {
       const next = new Set(prev);
@@ -10337,7 +10386,8 @@ var StackedNotifications = React66.forwardRef((_a, ref) => {
           item,
           depth,
           revealStep: peekStep,
-          onDismiss: handleDismiss
+          onDismiss: handleDismiss,
+          isBackfill: backfillIds.has(item.id)
         },
         item.id
       )) })
@@ -12486,6 +12536,6 @@ var TabNavigation = Object.assign(TabNavigationRoot, {
   Panel: TabNavigationPanel
 });
 
-export { Accordion, Animated5 as Animated, Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, Animated5 as Animated, Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PROGRESS_ANIMATION, 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, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map