react-native-molecules 0.5.0-beta.31 → 0.5.0-beta.32

package/components/Button/Button.tsx

@@ -220,7 +220,7 @@ export const ButtonIcon = memo(
                 type={type}
                 name={name}
                 size={iconSizeResolved}
-                color={disabled ? undefined : colorResolved}
+                color={disabled ? 'onSurfaceDisabled' : colorResolved}
                 style={[buttonIconStyles.root, textRelatedStyle, style]}
                 {...rest}
             />
@@ -268,7 +268,7 @@ export const ButtonActivityIndicator = memo(
         style,
         ...rest
     }: Omit<ActivityIndicatorProps, 'animating'>) => {
-        const { iconSize, variant, state } = useContext(ButtonContext);
+        const { iconSize, variant, state, disabled } = useContext(ButtonContext);
 
         const sizeResolved = sizeProp ?? iconSize;
         // Default to onPrimary for contained variants, primary for others
@@ -287,7 +287,7 @@ export const ButtonActivityIndicator = memo(
         return (
             <ActivityIndicator
                 size={sizeResolved}
-                color={colorResolved}
+                color={disabled ? 'onSurfaceDisabled' : colorResolved}
                 style={activityIndicatorStyle}
                 {...rest}
             />

package/components/DatePickerInline/AutoSizer.tsx

@@ -41,6 +41,6 @@ export default function AutoSizer({
 const styles = StyleSheet.create({
     autoSizer: {
         flex: 1,
-        overflow: 'hidden',
+        overflow: 'visible',
     },
 });

package/components/DatePickerInline/Swiper.tsx

@@ -12,11 +12,18 @@ import {
 } from 'react';
 
 import AutoSizer from './AutoSizer';
-import { beginOffset, estimatedMonthHeight, getInitialIndex, totalMonths } from './dateUtils';
+import {
+    beginOffset,
+    estimatedMonthHeight,
+    getGridCount,
+    getInitialIndex,
+    totalMonths,
+} from './dateUtils';
 import { addMonths, getRealIndex } from './dateUtils';
 import { getIndexFromVerticalOffset, getMonthHeight, getVerticalMonthsOffset } from './Month';
 import { useDatePickerInlineStore } from './store';
 import type { SwiperProps } from './SwiperUtils';
+import { weekSize } from './utils';
 import { montHeaderHeight } from './utils';
 
 function Swiper({ scrollMode, renderItem, renderHeader, renderFooter, initialIndex }: SwiperProps) {
@@ -59,7 +66,6 @@ const visibleHorizontalArray = (i: number) => [i - 1, i, i + 1];
 
 function HorizontalScroller({
     width,
-    height,
     initialIndex,
     renderItem,
 }: {
@@ -152,9 +158,10 @@ function HorizontalScroller({
     );
 
     const { containerStyle, innerContainerStyle, itemContainerStyle } = useMemo(() => {
+        const currentHeight = getGridCount(visibleIndexes[1]) * weekSize;
         return {
             containerStyle: {
-                height,
+                height: currentHeight,
                 width,
                 overflowX: 'auto',
                 overflowY: 'hidden',
@@ -165,7 +172,7 @@ function HorizontalScroller({
             },
             innerContainerStyle: {
                 width: width * 3,
-                height,
+                height: currentHeight,
                 position: 'relative',
             },
             itemContainerStyle: (vi: number) => ({
@@ -177,7 +184,7 @@ function HorizontalScroller({
                 scrollSnapAlign: 'start',
             }),
         };
-    }, [height, width]);
+    }, [visibleIndexes, width]);
 
     return (
         <div ref={parentRef} style={containerStyle as CSSProperties} onScroll={onScroll}>

package/components/DatePickerInline/dateUtils.tsx

@@ -133,7 +133,7 @@ export const gridCounts = new Array<number | undefined>(totalMonths);
 export function getGridCount(index: number) {
     const cHeight = gridCounts[index];
     if (cHeight) {
-        return cHeight + 1;
+        return cHeight;
     }
     const monthDate = addMonths(new Date(), getRealIndex(index));
     const h = getGridCountForDate(monthDate);

package/components/LoadingIndicator/LoadingIndicator.tsx

@@ -1,12 +1,10 @@
-import { interpolate as flubberInterpolate } from 'flubber';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useEffect } from 'react';
 import { View } from 'react-native';
 import Animated, {
     cancelAnimation,
     Easing,
+    useAnimatedProps,
     useAnimatedStyle,
-    useDerivedValue,
-    useFrameCallback,
     useSharedValue,
     withRepeat,
     withTiming,
@@ -14,100 +12,80 @@ import Animated, {
 import Svg, { Path } from 'react-native-svg';
 
 import {
-    cookie4Path,
-    cookie9Path,
-    loadingIndicatorStyles as componentStyles,
-    ovalPath,
-    pentagonPath,
-    pillPath,
-    type Props,
-    softBurstPath,
-    sunnyPath,
-    useProcessProps,
-} from './utils';
-
-// Animation constants matching the web version
-const ANIMATION_DURATION = 4550; // 4.55 seconds total cycle
-const PULSE_DURATION = 2275; // 2.275 seconds for pulse
-
-const SHAPE_PATHS = [
-    softBurstPath,
-    cookie9Path,
-    pentagonPath,
-    pillPath,
-    sunnyPath,
-    cookie4Path,
-    ovalPath,
-];
-
-// Number of pre-computed frames per transition for smooth animation
-const FRAMES_PER_TRANSITION = 30;
-const TOTAL_FRAMES = SHAPE_PATHS.length * FRAMES_PER_TRANSITION;
-
-// Material 3 Express Fast Spatial easing function
-// Original: cubic-bezier(0.42, 1.67, 0.21, 0.90)
-const expressFastSpatialEase = (t: number): number => {
+    normalizedCookie4Path,
+    normalizedCookie9Path,
+    normalizedOvalPath,
+    normalizedPentagonPath,
+    normalizedPillPath,
+    normalizedSoftBurstPath,
+    normalizedSunnyPath,
+} from './pathNormalize';
+import { loadingIndicatorStyles as componentStyles, type Props, useProcessProps } from './utils';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+// Pre-parse normalized paths to flat number arrays.
+// All normalized paths share the same command structure: M(2 nums) + N×C(6 nums) + Z,
+// so lerpPaths can reconstruct without a separate template.
+const SHAPE_NUMS: number[][] = [
+    normalizedSoftBurstPath,
+    normalizedCookie9Path,
+    normalizedPentagonPath,
+    normalizedPillPath,
+    normalizedSunnyPath,
+    normalizedCookie4Path,
+    normalizedOvalPath,
+    normalizedSoftBurstPath, // wrap-back for the final segment's `to`
+].map(d => (d.match(/-?(?:\d+\.?\d*|\.\d+)/g) ?? []).map(Number));
+
+const ANIMATION_DURATION = 4550;
+const PULSE_DURATION = 2275;
+const SEGMENT_COUNT = 7;
+const ROTATION_PER_SEGMENT = 1080 / SEGMENT_COUNT;
+
+// Worklet: approximates cubic-bezier(0.42, 1.67, 0.21, 0.90) via Newton-Raphson.
+// Output is clamped to [0,1] so overshoot stays visual-only.
+function expressFastSpatialEase(t: number): number {
     'worklet';
-    // Approximate cubic-bezier(0.42, 1.67, 0.21, 0.90) using a simplified function
-    // This creates the characteristic overshoot and fast settle
     const p1x = 0.42,
         p1y = 1.67,
         p2x = 0.21,
         p2y = 0.9;
-
-    // Simple cubic bezier approximation
     const cx = 3.0 * p1x;
     const bx = 3.0 * (p2x - p1x) - cx;
     const ax = 1.0 - cx - bx;
-
     const cy = 3.0 * p1y;
     const by = 3.0 * (p2y - p1y) - cy;
     const ay = 1.0 - cy - by;
-
-    // Sample the bezier curve
     const sampleX = (x: number) => ((ax * x + bx) * x + cx) * x;
     const sampleY = (x: number) => ((ay * x + by) * x + cy) * x;
-
-    // Newton-Raphson to find t for given x
     let guess = t;
     for (let i = 0; i < 4; i++) {
         const currentX = sampleX(guess) - t;
-        const currentSlope = (3.0 * ax * guess + 2.0 * bx) * guess + cx;
-        if (Math.abs(currentSlope) < 1e-6) break;
-        guess -= currentX / currentSlope;
+        const slope = (3.0 * ax * guess + 2.0 * bx) * guess + cx;
+        if (Math.abs(slope) < 1e-6) break;
+        guess -= currentX / slope;
     }
+    return Math.max(0, Math.min(1, sampleY(guess)));
+}
 
-    return sampleY(guess);
-};
-
-/**
- * Pre-compute all animation frames at initialization for smooth playback.
- * This avoids runtime flubber calls which can cause jank.
- */
-const precomputeFrames = (): string[] => {
-    const frames: string[] = [];
-
-    for (let i = 0; i < SHAPE_PATHS.length; i++) {
-        const fromPath = SHAPE_PATHS[i];
-        const toPath = SHAPE_PATHS[(i + 1) % SHAPE_PATHS.length];
-
-        // Create interpolator with higher precision
-        const interpolator = flubberInterpolate(fromPath, toPath, {
-            maxSegmentLength: 1, // Higher precision for smoother morphing
-        });
-
-        for (let j = 0; j < FRAMES_PER_TRANSITION; j++) {
-            const t = j / FRAMES_PER_TRANSITION;
-            // Apply easing to match CSS animation
-            const easedT = expressFastSpatialEase(t);
-            frames.push(interpolator(Math.max(0, Math.min(1, easedT))));
-        }
+// Worklet: lerp between two normalized path number arrays and serialize to a path string.
+function lerpPaths(from: number[], to: number[], t: number): string {
+    'worklet';
+    const cmdCount = (from.length - 2) / 6;
+    let d = `M${from[0] + (to[0] - from[0]) * t} ${from[1] + (to[1] - from[1]) * t}`;
+    for (let i = 0; i < cmdCount; i++) {
+        const b = 2 + i * 6;
+        d +=
+            `C${from[b] + (to[b] - from[b]) * t}` +
+            ` ${from[b + 1] + (to[b + 1] - from[b + 1]) * t}` +
+            ` ${from[b + 2] + (to[b + 2] - from[b + 2]) * t}` +
+            ` ${from[b + 3] + (to[b + 3] - from[b + 3]) * t}` +
+            ` ${from[b + 4] + (to[b + 4] - from[b + 4]) * t}` +
+            ` ${from[b + 5] + (to[b + 5] - from[b + 5]) * t}`;
     }
-
-    return frames;
-};
-
-const frames = precomputeFrames();
+    return `${d}Z`;
+}
 
 const LoadingIndicator = ({
     animating = true,
@@ -118,102 +96,55 @@ const LoadingIndicator = ({
     innerContainerProps,
     ...rest
 }: Props) => {
-    const [currentPath, setCurrentPath] = useState(frames[0]);
-
     const progress = useSharedValue(0);
     const pulseScale = useSharedValue(1);
-    // Track last frame to avoid redundant updates
-    const lastFrameRef = useSharedValue(-1);
 
-    componentStyles.useVariants({
-        variant: variant as 'contained',
-    });
+    componentStyles.useVariants({ variant: variant as 'contained' });
 
-    const { size, strokeColor } = useProcessProps({
-        variant,
-        size: sizeProp,
-        color: colorProp,
-    });
-
-    const updatePathFromFrame = useCallback((frameIndex: number) => {
-        const safeIndex = Math.max(0, Math.min(frameIndex, frames.length - 1));
-        setCurrentPath(prevPath => {
-            const newPath = frames[safeIndex];
-            return prevPath === newPath ? prevPath : newPath;
-        });
-    }, []);
-
-    useFrameCallback(() => {
-        'worklet';
-        const frameIndex = Math.floor(progress.value * TOTAL_FRAMES) % TOTAL_FRAMES;
-        if (frameIndex !== lastFrameRef.value) {
-            lastFrameRef.value = frameIndex;
-            updatePathFromFrame(frameIndex);
-        }
-    });
+    const { size, strokeColor } = useProcessProps({ variant, size: sizeProp, color: colorProp });
 
     useEffect(() => {
         if (animating) {
-            // Main morphing and rotation animation
             progress.value = 0;
             progress.value = withRepeat(
-                withTiming(1, {
-                    duration: ANIMATION_DURATION,
-                    easing: Easing.linear,
-                }),
-                -1, // Infinite repeat
-                false, // Don't reverse
+                withTiming(1, { duration: ANIMATION_DURATION, easing: Easing.linear }),
+                -1,
+                false,
             );
-
-            // Pulse animation
             pulseScale.value = 1;
             pulseScale.value = withRepeat(
-                withTiming(1.1, {
-                    duration: PULSE_DURATION,
-                    easing: Easing.inOut(Easing.ease),
-                }),
-                -1, // Infinite repeat
-                true, // Reverse (ping-pong effect)
+                withTiming(1.1, { duration: PULSE_DURATION, easing: Easing.inOut(Easing.ease) }),
+                -1,
+                true,
             );
         } else {
             cancelAnimation(progress);
             cancelAnimation(pulseScale);
             progress.value = 0;
             pulseScale.value = 1;
-            updatePathFromFrame(0);
         }
-
         return () => {
             cancelAnimation(progress);
             cancelAnimation(pulseScale);
         };
-    }, [animating, progress, pulseScale, updatePathFromFrame]);
+    }, [animating, progress, pulseScale]);
 
-    // Derived value for rotation with per-segment easing (matches CSS animation-timing-function per keyframe)
-    const rotation = useDerivedValue(() => {
-        'worklet';
-        const p = progress.value;
-        const segmentCount = SHAPE_PATHS.length;
-
-        // Determine which segment we're in
-        const scaledProgress = p * segmentCount;
-        const segmentIndex = Math.min(Math.floor(scaledProgress), segmentCount - 1);
-        const segmentProgress = scaledProgress - segmentIndex;
-
-        // Apply easing to this segment's progress
-        const easedSegmentProgress = expressFastSpatialEase(segmentProgress);
-
-        // Calculate rotation: base rotation for completed segments + eased progress within current segment
-        const rotationPerSegment = 1080 / segmentCount; // ~154.29 degrees per segment
-        const baseRotation = segmentIndex * rotationPerSegment;
-        const segmentRotation = easedSegmentProgress * rotationPerSegment;
-
-        return baseRotation + segmentRotation;
+    const animatedStyle = useAnimatedStyle(() => {
+        const scaledP = progress.value * SEGMENT_COUNT;
+        const segIdx = Math.min(Math.floor(scaledP), SEGMENT_COUNT - 1);
+        const easedT = expressFastSpatialEase(scaledP - segIdx);
+        const rotation = segIdx * ROTATION_PER_SEGMENT + easedT * ROTATION_PER_SEGMENT;
+        return {
+            transform: [{ scale: pulseScale.value }, { rotate: `${rotation}deg` }],
+        };
     });
 
-    const animatedStyle = useAnimatedStyle(() => {
+    const animatedProps = useAnimatedProps(() => {
+        const scaledP = progress.value * SEGMENT_COUNT;
+        const segIdx = Math.min(Math.floor(scaledP), SEGMENT_COUNT - 1);
+        const easedT = expressFastSpatialEase(scaledP - segIdx);
         return {
-            transform: [{ scale: pulseScale.value }, { rotate: `${rotation.value}deg` }],
+            d: lerpPaths(SHAPE_NUMS[segIdx], SHAPE_NUMS[segIdx + 1], easedT),
         };
     });
 
@@ -243,7 +174,7 @@ const LoadingIndicator = ({
                     animatedStyle,
                 ]}>
                 <Svg width={size} height={size} viewBox="0 0 38 38">
-                    <Path d={currentPath} fill={strokeColor} />
+                    <AnimatedPath animatedProps={animatedProps} fill={strokeColor} />
                 </Svg>
             </Animated.View>
         </View>

package/components/LoadingIndicator/LoadingIndicator.web.tsx

@@ -2,22 +2,35 @@ import { memo, useId } from 'react';
 import { View } from 'react-native';
 
 import {
-    cookie4Path,
-    cookie9Path,
-    expressFastSpatial,
-    loadingIndicatorStyles as componentStyles,
-    ovalPath,
-    pentagonPath,
-    pillPath,
-    type Props,
-    softBurstPath,
-    sunnyPath,
-    useProcessProps,
-} from './utils';
+    normalizedCookie4Path,
+    normalizedCookie9Path,
+    normalizedOvalPath,
+    normalizedPentagonPath,
+    normalizedPillPath,
+    normalizedSoftBurstPath,
+    normalizedSunnyPath,
+} from './pathNormalize';
+import { loadingIndicatorStyles as componentStyles, type Props, useProcessProps } from './utils';
+
+// 8 evenly-spaced keyframe beats matching the original CSS animation.
+const SMIL_KEY_TIMES = '0; 0.1428; 0.2857; 0.4285; 0.5714; 0.7142; 0.8571; 1';
+// Approximation of cubic-bezier(0.42, 1.67, 0.21, 0.90) clamped to [0,1]
+// because SMIL keySplines does not allow y-values outside that range.
+const SMIL_KEY_SPLINES = Array(7).fill('0.42 1 0.21 0.90').join('; ');
+
+const SHAPE_ROTATION_VALUES =
+    '0 19 19; 154.29 19 19; 308.57 19 19; 462.86 19 19; 617.14 19 19; 771.43 19 19; 925.71 19 19; 1080 19 19';
 
 /**
  * Material 3 Expressive Loading Indicator for Web.
- * Uses CSS 'd' attribute transitions for true shape morphing.
+ *
+ * Uses pure SMIL animations so both shape morphing and rotation work in Safari:
+ * - <animate attributeName="d"> for shape morphing
+ * - <animateTransform type="rotate"> with explicit center (19 19) for rotation
+ *
+ * CSS `d` property animation in @keyframes is not supported in Safari, and mixing
+ * CSS transform with SMIL on the same element causes the rotation pivot to shift
+ * as fill-box dimensions change during morphing.
  */
 const LoadingIndicator = ({
     animating = true,
@@ -40,6 +53,17 @@ const LoadingIndicator = ({
 
     if (!animating) return null;
 
+    const shapeValues = [
+        normalizedSoftBurstPath,
+        normalizedCookie9Path,
+        normalizedPentagonPath,
+        normalizedPillPath,
+        normalizedSunnyPath,
+        normalizedCookie4Path,
+        normalizedOvalPath,
+        normalizedSoftBurstPath,
+    ].join('; ');
+
     return (
         <View
             style={[
@@ -66,67 +90,34 @@ const LoadingIndicator = ({
                     width={size}
                     height={size}
                     viewBox="0 0 38 38">
-                    <path className={`m3-expressive-path-${id}`} fill={strokeColor} />
+                    <path d={normalizedSoftBurstPath} fill={strokeColor}>
+                        <animate
+                            attributeName="d"
+                            dur="4.55s"
+                            repeatCount="indefinite"
+                            calcMode="spline"
+                            keyTimes={SMIL_KEY_TIMES}
+                            keySplines={SMIL_KEY_SPLINES}
+                            values={shapeValues}
+                        />
+                        <animateTransform
+                            attributeName="transform"
+                            type="rotate"
+                            dur="4.55s"
+                            repeatCount="indefinite"
+                            calcMode="spline"
+                            keyTimes={SMIL_KEY_TIMES}
+                            keySplines={SMIL_KEY_SPLINES}
+                            values={SHAPE_ROTATION_VALUES}
+                        />
+                    </path>
                 </svg>
             </View>
             <style>
                 {`
                 .m3-expressive-svg-${id} {
-                    transform-origin: center;
                     display: block;
                 }
-
-                .m3-expressive-path-${id} {
-                    animation: m3-expressive-combined 4.55s linear infinite;
-                    transform-origin: center;
-                }
-
-                @keyframes m3-expressive-pulse-${id} {
-                    0%, 100% { transform: scale(1); }
-                    50% { transform: scale(1.1); }
-                }
-
-                @keyframes m3-expressive-combined {
-                    0% {
-                        animation-timing-function: ${expressFastSpatial};
-                        transform: rotate(0deg);
-                        d: path('${softBurstPath}');
-                    }
-                    14.28% {
-                        animation-timing-function: ${expressFastSpatial};
-                        transform: rotate(154.29deg);
-                        d: path('${cookie9Path}');
-                    }
-                    28.57% {
-                        animation-timing-function: ${expressFastSpatial};
-                        transform: rotate(308.57deg);
-                        d: path('${pentagonPath}');
-                    }
-                    42.85% {
-                        animation-timing-function: ${expressFastSpatial};
-                        transform: rotate(462.86deg);
-                        d: path('${pillPath}');
-                    }
-                    57.14% {
-                        animation-timing-function: ${expressFastSpatial};
-                        transform: rotate(617.14deg);
-                        d: path('${sunnyPath}');
-                    }
-                    71.42% {
-                        animation-timing-function: ${expressFastSpatial};
-                        transform: rotate(771.43deg);
-                        d: path('${cookie4Path}');
-                    }
-                    85.71% {
-                        animation-timing-function: ${expressFastSpatial};
-                        transform: rotate(925.71deg);
-                        d: path('${ovalPath}');
-                    }
-                    100% {
-                        transform: rotate(1080deg);
-                        d: path('${softBurstPath}');
-                    }
-                }
                 `}
             </style>
         </View>

package/components/LoadingIndicator/pathNormalize.ts

@@ -0,0 +1,236 @@
+// ---------------------------------------------------------------------------
+// Raw M3 Expressive shape paths (viewBox 0 0 38 38)
+// ---------------------------------------------------------------------------
+
+export const softBurstPath =
+    'M17.4683 2.83978C18.1732 1.72008 19.8268 1.72007 20.5317 2.83977L22.2214 5.52373C22.6848 6.25987 23.6197 6.55915 24.4338 6.23198L27.4021 5.0391C28.6404 4.54145 29.9781 5.49904 29.8804 6.8131L29.6461 9.96297C29.5819 10.8269 30.1597 11.6104 31.0135 11.8172L34.1265 12.571C35.4252 12.8855 35.9362 14.4349 35.0731 15.4414L33.0044 17.854C32.437 18.5158 32.437 19.4842 33.0044 20.146L35.0731 22.5586C35.9362 23.5651 35.4252 25.1145 34.1265 25.429L31.0135 26.1828C30.1597 26.3896 29.5819 27.1731 29.6461 28.037L29.8804 31.1869C29.9781 32.501 28.6404 33.4585 27.4021 32.9609L24.4338 31.768C23.6197 31.4408 22.6848 31.7401 22.2214 32.4763L20.5317 35.1602C19.8268 36.2799 18.1732 36.2799 17.4683 35.1602L15.7786 32.4763C15.3152 31.7401 14.3803 31.4408 13.5662 31.768L10.5979 32.9609C9.35964 33.4585 8.02187 32.501 8.1196 31.1869L8.35388 28.037C8.41814 27.1731 7.84033 26.3896 6.98651 26.1828L3.87348 25.429C2.57479 25.1145 2.0638 23.5651 2.92684 22.5586L4.99559 20.146C5.56299 19.4842 5.56299 18.5158 4.99559 17.854L2.92685 15.4414C2.0638 14.4349 2.57478 12.8855 3.87348 12.571L6.98651 11.8172C7.84033 11.6104 8.41814 10.8269 8.35388 9.96297L8.1196 6.81311C8.02187 5.49904 9.35964 4.54145 10.5979 5.0391L13.5662 6.23198C14.3803 6.55915 15.3152 6.25987 15.7786 5.52373L17.4683 2.83978Z';
+
+export const cookie9Path =
+    'M15.3091 3.60363C15.4924 3.454 15.584 3.37919 15.6677 3.31603C17.6389 1.82799 20.3611 1.82799 22.3323 3.31603C22.416 3.37919 22.5076 3.454 22.6909 3.60363C22.7727 3.67042 22.8136 3.70381 22.8541 3.7356C23.7818 4.46445 24.9191 4.87748 26.0993 4.91409C26.1508 4.91569 26.2037 4.91634 26.3094 4.91765C26.5462 4.92059 26.6646 4.92206 26.7694 4.92733C29.2381 5.05162 31.3234 6.79743 31.8748 9.20154C31.8982 9.30358 31.9202 9.41966 31.9642 9.65183C31.9838 9.75547 31.9937 9.80729 32.0042 9.85759C32.2452 11.0109 32.8504 12.0567 33.7309 12.8416C33.7693 12.8759 33.8094 12.9103 33.8895 12.9791C34.069 13.1332 34.1588 13.2102 34.2357 13.2815C36.0467 14.96 36.5194 17.6347 35.393 19.8299C35.3451 19.9231 35.2872 20.0262 35.1714 20.2322C35.1196 20.3242 35.0938 20.3702 35.0694 20.4155C34.5111 21.4536 34.3009 22.6429 34.4697 23.8088C34.4771 23.8597 34.4856 23.9117 34.5027 24.0158C34.5409 24.249 34.56 24.3656 34.573 24.4695C34.879 26.9168 33.5179 29.2689 31.2407 30.2281C31.1441 30.2688 31.0333 30.3106 30.8118 30.3942C30.7129 30.4315 30.6635 30.4501 30.6156 30.4692C29.5192 30.9063 28.592 31.6826 27.9701 32.684C27.943 32.7277 27.916 32.7731 27.862 32.8637C27.741 33.0669 27.6806 33.1685 27.6236 33.2564C26.2814 35.3273 23.7234 36.2563 21.3609 35.5306C21.2606 35.4998 21.1489 35.4608 20.9253 35.3827C20.8256 35.3479 20.7757 35.3305 20.7268 35.3144C19.6052 34.9461 18.3948 34.9461 17.2732 35.3144C17.2243 35.3305 17.1744 35.3479 17.0747 35.3827C16.8511 35.4608 16.7394 35.4998 16.6391 35.5306C14.2767 36.2563 11.7186 35.3273 10.3764 33.2564C10.3194 33.1685 10.259 33.0669 10.138 32.8637C10.084 32.7731 10.057 32.7277 10.0299 32.684C9.40803 31.6826 8.48083 30.9063 7.38436 30.4692C7.33654 30.4501 7.28709 30.4315 7.18821 30.3942C6.96669 30.3106 6.85593 30.2688 6.75928 30.2281C4.48205 29.2689 3.12097 26.9168 3.42698 24.4695C3.43997 24.3656 3.45908 24.249 3.4973 24.0158C3.51436 23.9117 3.52289 23.8597 3.53026 23.8088C3.69906 22.6429 3.48889 21.4536 2.93056 20.4155C2.90621 20.3702 2.88035 20.3242 2.82863 20.2322C2.71278 20.0262 2.65485 19.9231 2.60704 19.8299C1.48057 17.6347 1.95327 14.96 3.76433 13.2815C3.8412 13.2102 3.93096 13.1332 4.11047 12.9791C4.19061 12.9103 4.23068 12.8759 4.26908 12.8416C5.14958 12.0567 5.75476 11.0109 5.99583 9.8576C6.00634 9.80729 6.01617 9.75547 6.03582 9.65183C6.07984 9.41966 6.10185 9.30358 6.12525 9.20154C6.67662 6.79743 8.76192 5.05162 11.2306 4.92733C11.3354 4.92206 11.4538 4.92059 11.6906 4.91765C11.7963 4.91634 11.8492 4.91569 11.9007 4.91409C13.0809 4.87748 14.2182 4.46445 15.1459 3.7356C15.1864 3.70381 15.2273 3.67042 15.3091 3.60363Z';
+
+export const pentagonPath =
+    'M13.6481 4.93735C15.3067 3.72903 16.136 3.12486 17.022 2.82514C18.3035 2.39162 19.6965 2.39162 20.978 2.82514C21.864 3.12486 22.6933 3.72903 24.3519 4.93735L27.9794 7.58012L31.6049 10.0564C33.3249 11.2312 34.1849 11.8185 34.7598 12.5573C35.5914 13.6258 36.0282 14.9391 35.9986 16.2824C35.9781 17.211 35.6363 18.1817 34.9526 20.1232L33.529 24.1657L32.215 28.308C31.5983 30.2519 31.29 31.2239 30.7509 31.98C29.9712 33.0736 28.838 33.878 27.5341 34.2634C26.6327 34.5299 25.5936 34.5144 23.5154 34.4835L19 34.4162L14.4846 34.4835C12.4064 34.5144 11.3673 34.5299 10.4659 34.2634C9.16204 33.878 8.02882 33.0736 7.24909 31.98C6.71002 31.2239 6.40169 30.2519 5.78503 28.308L4.47101 24.1657L3.04741 20.1232C2.36372 18.1817 2.02187 17.211 2.00141 16.2824C1.97182 14.9391 2.40855 13.6258 3.24017 12.5573C3.8151 11.8185 4.67508 11.2312 6.39505 10.0564L10.0206 7.58012L13.6481 4.93735Z';
+
+export const pillPath =
+    'M11.9857 7.77706C17.0217 2.74098 25.1869 2.74098 30.2229 7.77706C35.259 12.8131 35.259 20.9783 30.2229 26.0143L26.0143 30.2229C20.9783 35.259 12.8131 35.259 7.77706 30.2229C2.74098 25.1869 2.74098 17.0217 7.77706 11.9857L11.9857 7.77706Z';
+
+export const sunnyPath =
+    'M28.1856 6.12375C29.2431 6.19561 29.7718 6.23154 30.1991 6.41844C30.8175 6.68887 31.3111 7.18252 31.5816 7.80088C31.7685 8.22823 31.8044 8.75694 31.8762 9.81438L32.0402 12.2275C32.0693 12.6552 32.0838 12.869 32.1303 13.0733C32.1975 13.3684 32.3142 13.6501 32.4754 13.9063C32.5869 14.0836 32.7279 14.2451 33.0097 14.5681L34.6001 16.3903C35.297 17.1889 35.6455 17.5881 35.8155 18.0225C36.0615 18.6509 36.0615 19.3491 35.8155 19.9775C35.6455 20.4119 35.297 20.8111 34.6001 21.6097L33.0097 23.4319C32.7279 23.7549 32.5869 23.9164 32.4754 24.0937C32.3142 24.3499 32.1975 24.6316 32.1303 24.9267C32.0838 25.131 32.0693 25.3448 32.0402 25.7725L31.8762 28.1856C31.8044 29.2431 31.7685 29.7718 31.5816 30.1991C31.3111 30.8175 30.8175 31.3111 30.1991 31.5816C29.7718 31.7685 29.2431 31.8044 28.1856 31.8762L25.7725 32.0402C25.3448 32.0693 25.131 32.0838 24.9267 32.1303C24.6316 32.1975 24.3499 32.3142 24.0937 32.4754C23.9164 32.5869 23.7549 32.7279 23.4319 33.0097L21.6097 34.6001C20.8111 35.297 20.4119 35.6455 19.9775 35.8155C19.3491 36.0615 18.6509 36.0615 18.0225 35.8155C17.5881 35.6455 17.1889 35.297 16.3903 34.6001L14.5681 33.0097C14.2451 32.7279 14.0836 32.5869 13.9063 32.4754C13.6501 32.3142 13.3684 32.1975 13.0733 32.1303C12.869 32.0838 12.6552 32.0693 12.2275 32.0402L9.81438 31.8762C8.75694 31.8044 8.22822 31.7685 7.80088 31.5816C7.18252 31.3111 6.68887 30.8175 6.41844 30.1991C6.23154 29.7718 6.19561 29.2431 6.12375 28.1856L5.95977 25.7725C5.93071 25.3448 5.91618 25.131 5.86969 24.9267C5.80251 24.6316 5.68584 24.3499 5.52463 24.0937C5.41306 23.9164 5.27213 23.7549 4.99027 23.4319L3.3999 21.6097C2.703 20.8111 2.35454 20.4119 2.18452 19.9775C1.93849 19.3491 1.93849 18.6509 2.18452 18.0225C2.35454 17.5881 2.703 17.1889 3.3999 16.3903L4.99027 14.5681C5.27213 14.2451 5.41306 14.0836 5.52463 13.9063C5.68584 13.6501 5.80251 13.3684 5.86969 13.0733C5.91618 12.869 5.93071 12.6552 5.95977 12.2275L6.12375 9.81438C6.19561 8.75694 6.23154 8.22823 6.41844 7.80088C6.68887 7.18252 7.18252 6.68887 7.80088 6.41844C8.22823 6.23154 8.75694 6.19561 9.81438 6.12375L12.2275 5.95977C12.6552 5.93071 12.869 5.91618 13.0733 5.86969C13.3684 5.80251 13.6501 5.68584 13.9063 5.52463C14.0836 5.41306 14.2451 5.27213 14.5681 4.99027L16.3903 3.3999C17.1889 2.703 17.5881 2.35454 18.0225 2.18452C18.6509 1.93849 19.3491 1.93849 19.9775 2.18452C20.4119 2.35454 20.8111 2.703 21.6097 3.3999L23.4319 4.99027C23.7549 5.27213 23.9164 5.41306 24.0937 5.52463C24.3499 5.68584 24.6316 5.80251 24.9267 5.86969C25.131 5.91618 25.3448 5.93071 25.7725 5.95977L28.1856 6.12375Z';
+
+export const cookie4Path =
+    'M22.8729 5.6207C28.8872 3.00862 34.9914 9.11282 32.3793 15.1271L31.9474 16.1214C31.1499 17.9576 31.1499 20.0424 31.9474 21.8786L32.3793 22.8729C34.9914 28.8872 28.8872 34.9914 22.8729 32.3793L21.8786 31.9474C20.0424 31.1499 17.9576 31.1499 16.1214 31.9474L15.1271 32.3793C9.11281 34.9914 3.00862 28.8872 5.6207 22.8729L6.05257 21.8786C6.85006 20.0424 6.85005 17.9576 6.05257 16.1214L5.6207 15.1271C3.00862 9.11281 9.11282 3.00862 15.1271 5.6207L16.1214 6.05257C17.9576 6.85005 20.0424 6.85005 21.8786 6.05257L22.8729 5.6207Z';
+
+export const ovalPath =
+    'M27.1309 27.1309C20.1705 34.0913 10.8877 36.0935 6.39707 31.6029C1.90648 27.1123 3.90867 17.8295 10.8691 10.8691C17.8295 3.90867 27.1123 1.90648 31.6029 6.39707C36.0935 10.8877 34.0913 20.1705 27.1309 27.1309Z';
+
+// ---------------------------------------------------------------------------
+// Normalization pipeline for cross-browser SMIL animation
+//
+// SMIL <animate attributeName="d"> requires all paths to have an identical
+// sequence of commands. The pipeline:
+//   1. Convert L commands to degenerate cubics (same visual shape, only C cmds).
+//   2. Split shorter paths up to the maximum command count via de Casteljau —
+//      preserves real geometry, avoids zero-length padding artefacts.
+//   3. Rotate each path's command sequence so it starts at the same angular
+//      position (-π/2, top of shape). Prevents SMIL from pairing spatially
+//      opposite commands, which collapses the morph through the centre.
+// ---------------------------------------------------------------------------
+
+interface Cmd {
+    t: string;
+    a: number[];
+}
+
+function tokenize(d: string): Cmd[] {
+    const out: Cmd[] = [];
+    const re = /([MLCZz])([^MLCZz]*)/g;
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(d)) !== null) {
+        const t = m[1].toUpperCase();
+        const a = m[2].trim()
+            ? m[2]
+                  .trim()
+                  .split(/[\s,]+/)
+                  .map(Number)
+            : [];
+        out.push({ t, a });
+    }
+    return out;
+}
+
+function lToC(cmds: Cmd[]): Cmd[] {
+    const out: Cmd[] = [];
+    let cx = 0,
+        cy = 0;
+    for (const { t, a } of cmds) {
+        if (t === 'M') {
+            [cx, cy] = a;
+            out.push({ t, a });
+        } else if (t === 'C') {
+            out.push({ t, a });
+            cx = a[4];
+            cy = a[5];
+        } else if (t === 'L') {
+            out.push({ t: 'C', a: [cx, cy, a[0], a[1], a[0], a[1]] });
+            cx = a[0];
+            cy = a[1];
+        } else {
+            out.push({ t, a });
+        }
+    }
+    return out;
+}
+
+function round4(n: number): number {
+    return Math.round(n * 10000) / 10000;
+}
+
+function splitCubic(p0x: number, p0y: number, a: number[]): [number[], number[]] {
+    const [x1, y1, x2, y2, x3, y3] = a;
+    const avg = (p: number, q: number) => (p + q) / 2;
+    const p01x = avg(p0x, x1),
+        p01y = avg(p0y, y1);
+    const p12x = avg(x1, x2),
+        p12y = avg(y1, y2);
+    const p23x = avg(x2, x3),
+        p23y = avg(y2, y3);
+    const p012x = avg(p01x, p12x),
+        p012y = avg(p01y, p12y);
+    const p123x = avg(p12x, p23x),
+        p123y = avg(p12y, p23y);
+    const midx = avg(p012x, p123x),
+        midy = avg(p012y, p123y);
+    return [
+        [round4(p01x), round4(p01y), round4(p012x), round4(p012y), round4(midx), round4(midy)],
+        [round4(p123x), round4(p123y), round4(p23x), round4(p23y), x3, y3],
+    ];
+}
+
+function splitAll(cmds: Cmd[]): Cmd[] {
+    const out: Cmd[] = [];
+    let cx = 0,
+        cy = 0;
+    for (const cmd of cmds) {
+        if (cmd.t === 'M') {
+            cx = cmd.a[0];
+            cy = cmd.a[1];
+            out.push(cmd);
+        } else if (cmd.t === 'C') {
+            const [l, ri] = splitCubic(cx, cy, cmd.a);
+            out.push({ t: 'C', a: l }, { t: 'C', a: ri });
+            cx = cmd.a[4];
+            cy = cmd.a[5];
+        } else {
+            out.push(cmd);
+        }
+    }
+    return out;
+}
+
+function splitN(cmds: Cmd[], n: number): Cmd[] {
+    const total = cmds.filter(c => c.t === 'C').length;
+    const stride = total / n;
+    const toSplit = new Set<number>();
+    for (let i = 0; i < n; i++) {
+        toSplit.add(Math.round(i * stride));
+    }
+    const out: Cmd[] = [];
+    let cx = 0,
+        cy = 0,
+        idx = 0;
+    for (const cmd of cmds) {
+        if (cmd.t === 'M') {
+            cx = cmd.a[0];
+            cy = cmd.a[1];
+            out.push(cmd);
+        } else if (cmd.t === 'C') {
+            if (toSplit.has(idx)) {
+                const [l, ri] = splitCubic(cx, cy, cmd.a);
+                out.push({ t: 'C', a: l }, { t: 'C', a: ri });
+            } else {
+                out.push(cmd);
+            }
+            cx = cmd.a[4];
+            cy = cmd.a[5];
+            idx++;
+        } else {
+            out.push(cmd);
+        }
+    }
+    return out;
+}
+
+function expandToCount(cmds: Cmd[], target: number): Cmd[] {
+    let cur = cmds;
+    while (true) {
+        const count = cur.filter(c => c.t === 'C').length;
+        if (count >= target) return cur;
+        const needed = target - count;
+        cur = needed >= count ? splitAll(cur) : splitN(cur, needed);
+    }
+}
+
+function serialize(cmds: Cmd[]): string {
+    return cmds.map(({ t, a }) => (a.length ? `${t}${a.join(' ')}` : t)).join('');
+}
+
+function rotateByR(cmds: Cmd[], rot: number): Cmd[] {
+    if (rot === 0) return cmds;
+    const draws = cmds.filter(c => c.t === 'C');
+    const n = draws.length;
+    const rotated = [...draws.slice(rot), ...draws.slice(0, rot)];
+    const prev = draws[(rot - 1 + n) % n];
+    return [{ t: 'M', a: [prev.a[4], prev.a[5]] }, ...rotated, { t: 'Z', a: [] }];
+}
+
+function alignToAngle(cmds: Cmd[], targetAngle: number, cx = 19, cy = 19): Cmd[] {
+    const draws = cmds.filter(c => c.t === 'C');
+    const n = draws.length;
+    const Mcmd = cmds.find(c => c.t === 'M')!;
+
+    let bestRot = 0,
+        bestDiff = Infinity;
+    for (let i = 0; i < n; i++) {
+        const sx = i === 0 ? Mcmd.a[0] : draws[i - 1].a[4];
+        const sy = i === 0 ? Mcmd.a[1] : draws[i - 1].a[5];
+        const angle = Math.atan2(sy - cy, sx - cx);
+        const diff = Math.abs(
+            ((((angle - targetAngle) % (2 * Math.PI)) + 3 * Math.PI) % (2 * Math.PI)) - Math.PI,
+        );
+        if (diff < bestDiff) {
+            bestDiff = diff;
+            bestRot = i;
+        }
+    }
+    return rotateByR(cmds, bestRot);
+}
+
+/**
+ * Normalize an array of SVG path strings so they all have the same command
+ * sequence and phase-aligned start points — a requirement for smooth SMIL
+ * `<animate attributeName="d">` morphing across all browsers including Safari.
+ */
+export function normalizePaths(paths: string[]): string[] {
+    const allCubic = paths.map(p => lToC(tokenize(p)));
+    const max = Math.max(...allCubic.map(c => c.filter(x => x.t === 'C').length));
+    const expanded = allCubic.map(c => expandToCount(c, max));
+    return expanded.map(c => serialize(alignToAngle(c, -Math.PI / 2)));
+}
+
+export const [
+    normalizedSoftBurstPath,
+    normalizedCookie9Path,
+    normalizedPentagonPath,
+    normalizedPillPath,
+    normalizedSunnyPath,
+    normalizedCookie4Path,
+    normalizedOvalPath,
+] = normalizePaths([
+    softBurstPath,
+    cookie9Path,
+    pentagonPath,
+    pillPath,
+    sunnyPath,
+    cookie4Path,
+    ovalPath,
+]);

package/components/LoadingIndicator/utils.ts

@@ -4,9 +4,6 @@ import { StyleSheet } from 'react-native-unistyles';
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { tokenStylesParser } from '../../utils/tokenStylesParser';
 
-/**
- * Props for the LoadingIndicator component.
- */
 export type Props = ViewProps & {
     /**
      * Whether the indicator is animating. When false, the indicator is hidden.
@@ -34,34 +31,6 @@ export type Props = ViewProps & {
     innerContainerProps?: ViewProps;
 };
 
-/* Soft Burst */
-export const softBurstPath =
-    'M17.4683 2.83978C18.1732 1.72008 19.8268 1.72007 20.5317 2.83977L22.2214 5.52373C22.6848 6.25987 23.6197 6.55915 24.4338 6.23198L27.4021 5.0391C28.6404 4.54145 29.9781 5.49904 29.8804 6.8131L29.6461 9.96297C29.5819 10.8269 30.1597 11.6104 31.0135 11.8172L34.1265 12.571C35.4252 12.8855 35.9362 14.4349 35.0731 15.4414L33.0044 17.854C32.437 18.5158 32.437 19.4842 33.0044 20.146L35.0731 22.5586C35.9362 23.5651 35.4252 25.1145 34.1265 25.429L31.0135 26.1828C30.1597 26.3896 29.5819 27.1731 29.6461 28.037L29.8804 31.1869C29.9781 32.501 28.6404 33.4585 27.4021 32.9609L24.4338 31.768C23.6197 31.4408 22.6848 31.7401 22.2214 32.4763L20.5317 35.1602C19.8268 36.2799 18.1732 36.2799 17.4683 35.1602L15.7786 32.4763C15.3152 31.7401 14.3803 31.4408 13.5662 31.768L10.5979 32.9609C9.35964 33.4585 8.02187 32.501 8.1196 31.1869L8.35388 28.037C8.41814 27.1731 7.84033 26.3896 6.98651 26.1828L3.87348 25.429C2.57479 25.1145 2.0638 23.5651 2.92684 22.5586L4.99559 20.146C5.56299 19.4842 5.56299 18.5158 4.99559 17.854L2.92685 15.4414C2.0638 14.4349 2.57478 12.8855 3.87348 12.571L6.98651 11.8172C7.84033 11.6104 8.41814 10.8269 8.35388 9.96297L8.1196 6.81311C8.02187 5.49904 9.35964 4.54145 10.5979 5.0391L13.5662 6.23198C14.3803 6.55915 15.3152 6.25987 15.7786 5.52373L17.4683 2.83978Z';
-
-/* 9-sided Cookie */
-export const cookie9Path =
-    'M15.3091 3.60363C15.4924 3.454 15.584 3.37919 15.6677 3.31603C17.6389 1.82799 20.3611 1.82799 22.3323 3.31603C22.416 3.37919 22.5076 3.454 22.6909 3.60363C22.7727 3.67042 22.8136 3.70381 22.8541 3.7356C23.7818 4.46445 24.9191 4.87748 26.0993 4.91409C26.1508 4.91569 26.2037 4.91634 26.3094 4.91765C26.5462 4.92059 26.6646 4.92206 26.7694 4.92733C29.2381 5.05162 31.3234 6.79743 31.8748 9.20154C31.8982 9.30358 31.9202 9.41966 31.9642 9.65183C31.9838 9.75547 31.9937 9.80729 32.0042 9.85759C32.2452 11.0109 32.8504 12.0567 33.7309 12.8416C33.7693 12.8759 33.8094 12.9103 33.8895 12.9791C34.069 13.1332 34.1588 13.2102 34.2357 13.2815C36.0467 14.96 36.5194 17.6347 35.393 19.8299C35.3451 19.9231 35.2872 20.0262 35.1714 20.2322C35.1196 20.3242 35.0938 20.3702 35.0694 20.4155C34.5111 21.4536 34.3009 22.6429 34.4697 23.8088C34.4771 23.8597 34.4856 23.9117 34.5027 24.0158C34.5409 24.249 34.56 24.3656 34.573 24.4695C34.879 26.9168 33.5179 29.2689 31.2407 30.2281C31.1441 30.2688 31.0333 30.3106 30.8118 30.3942C30.7129 30.4315 30.6635 30.4501 30.6156 30.4692C29.5192 30.9063 28.592 31.6826 27.9701 32.684C27.943 32.7277 27.916 32.7731 27.862 32.8637C27.741 33.0669 27.6806 33.1685 27.6236 33.2564C26.2814 35.3273 23.7234 36.2563 21.3609 35.5306C21.2606 35.4998 21.1489 35.4608 20.9253 35.3827C20.8256 35.3479 20.7757 35.3305 20.7268 35.3144C19.6052 34.9461 18.3948 34.9461 17.2732 35.3144C17.2243 35.3305 17.1744 35.3479 17.0747 35.3827C16.8511 35.4608 16.7394 35.4998 16.6391 35.5306C14.2767 36.2563 11.7186 35.3273 10.3764 33.2564C10.3194 33.1685 10.259 33.0669 10.138 32.8637C10.084 32.7731 10.057 32.7277 10.0299 32.684C9.40803 31.6826 8.48083 30.9063 7.38436 30.4692C7.33654 30.4501 7.28709 30.4315 7.18821 30.3942C6.96669 30.3106 6.85593 30.2688 6.75928 30.2281C4.48205 29.2689 3.12097 26.9168 3.42698 24.4695C3.43997 24.3656 3.45908 24.249 3.4973 24.0158C3.51436 23.9117 3.52289 23.8597 3.53026 23.8088C3.69906 22.6429 3.48889 21.4536 2.93056 20.4155C2.90621 20.3702 2.88035 20.3242 2.82863 20.2322C2.71278 20.0262 2.65485 19.9231 2.60704 19.8299C1.48057 17.6347 1.95327 14.96 3.76433 13.2815C3.8412 13.2102 3.93096 13.1332 4.11047 12.9791C4.19061 12.9103 4.23068 12.8759 4.26908 12.8416C5.14958 12.0567 5.75476 11.0109 5.99583 9.8576C6.00634 9.80729 6.01617 9.75547 6.03582 9.65183C6.07984 9.41966 6.10185 9.30358 6.12525 9.20154C6.67662 6.79743 8.76192 5.05162 11.2306 4.92733C11.3354 4.92206 11.4538 4.92059 11.6906 4.91765C11.7963 4.91634 11.8492 4.91569 11.9007 4.91409C13.0809 4.87748 14.2182 4.46445 15.1459 3.7356C15.1864 3.70381 15.2273 3.67042 15.3091 3.60363Z';
-
-/* Pentagon */
-export const pentagonPath =
-    'M13.6481 4.93735C15.3067 3.72903 16.136 3.12486 17.022 2.82514C18.3035 2.39162 19.6965 2.39162 20.978 2.82514C21.864 3.12486 22.6933 3.72903 24.3519 4.93735L27.9794 7.58012L31.6049 10.0564C33.3249 11.2312 34.1849 11.8185 34.7598 12.5573C35.5914 13.6258 36.0282 14.9391 35.9986 16.2824C35.9781 17.211 35.6363 18.1817 34.9526 20.1232L33.529 24.1657L32.215 28.308C31.5983 30.2519 31.29 31.2239 30.7509 31.98C29.9712 33.0736 28.838 33.878 27.5341 34.2634C26.6327 34.5299 25.5936 34.5144 23.5154 34.4835L19 34.4162L14.4846 34.4835C12.4064 34.5144 11.3673 34.5299 10.4659 34.2634C9.16204 33.878 8.02882 33.0736 7.24909 31.98C6.71002 31.2239 6.40169 30.2519 5.78503 28.308L4.47101 24.1657L3.04741 20.1232C2.36372 18.1817 2.02187 17.211 2.00141 16.2824C1.97182 14.9391 2.40855 13.6258 3.24017 12.5573C3.8151 11.8185 4.67508 11.2312 6.39505 10.0564L10.0206 7.58012L13.6481 4.93735Z';
-
-/* Pill */
-export const pillPath =
-    'M11.9857 7.77706C17.0217 2.74098 25.1869 2.74098 30.2229 7.77706C35.259 12.8131 35.259 20.9783 30.2229 26.0143L26.0143 30.2229C20.9783 35.259 12.8131 35.259 7.77706 30.2229C2.74098 25.1869 2.74098 17.0217 7.77706 11.9857L11.9857 7.77706Z';
-
-/* Sunny */
-export const sunnyPath =
-    'M28.1856 6.12375C29.2431 6.19561 29.7718 6.23154 30.1991 6.41844C30.8175 6.68887 31.3111 7.18252 31.5816 7.80088C31.7685 8.22823 31.8044 8.75694 31.8762 9.81438L32.0402 12.2275C32.0693 12.6552 32.0838 12.869 32.1303 13.0733C32.1975 13.3684 32.3142 13.6501 32.4754 13.9063C32.5869 14.0836 32.7279 14.2451 33.0097 14.5681L34.6001 16.3903C35.297 17.1889 35.6455 17.5881 35.8155 18.0225C36.0615 18.6509 36.0615 19.3491 35.8155 19.9775C35.6455 20.4119 35.297 20.8111 34.6001 21.6097L33.0097 23.4319C32.7279 23.7549 32.5869 23.9164 32.4754 24.0937C32.3142 24.3499 32.1975 24.6316 32.1303 24.9267C32.0838 25.131 32.0693 25.3448 32.0402 25.7725L31.8762 28.1856C31.8044 29.2431 31.7685 29.7718 31.5816 30.1991C31.3111 30.8175 30.8175 31.3111 30.1991 31.5816C29.7718 31.7685 29.2431 31.8044 28.1856 31.8762L25.7725 32.0402C25.3448 32.0693 25.131 32.0838 24.9267 32.1303C24.6316 32.1975 24.3499 32.3142 24.0937 32.4754C23.9164 32.5869 23.7549 32.7279 23.4319 33.0097L21.6097 34.6001C20.8111 35.297 20.4119 35.6455 19.9775 35.8155C19.3491 36.0615 18.6509 36.0615 18.0225 35.8155C17.5881 35.6455 17.1889 35.297 16.3903 34.6001L14.5681 33.0097C14.2451 32.7279 14.0836 32.5869 13.9063 32.4754C13.6501 32.3142 13.3684 32.1975 13.0733 32.1303C12.869 32.0838 12.6552 32.0693 12.2275 32.0402L9.81438 31.8762C8.75694 31.8044 8.22822 31.7685 7.80088 31.5816C7.18252 31.3111 6.68887 30.8175 6.41844 30.1991C6.23154 29.7718 6.19561 29.2431 6.12375 28.1856L5.95977 25.7725C5.93071 25.3448 5.91618 25.131 5.86969 24.9267C5.80251 24.6316 5.68584 24.3499 5.52463 24.0937C5.41306 23.9164 5.27213 23.7549 4.99027 23.4319L3.3999 21.6097C2.703 20.8111 2.35454 20.4119 2.18452 19.9775C1.93849 19.3491 1.93849 18.6509 2.18452 18.0225C2.35454 17.5881 2.703 17.1889 3.3999 16.3903L4.99027 14.5681C5.27213 14.2451 5.41306 14.0836 5.52463 13.9063C5.68584 13.6501 5.80251 13.3684 5.86969 13.0733C5.91618 12.869 5.93071 12.6552 5.95977 12.2275L6.12375 9.81438C6.19561 8.75694 6.23154 8.22823 6.41844 7.80088C6.68887 7.18252 7.18252 6.68887 7.80088 6.41844C8.22823 6.23154 8.75694 6.19561 9.81438 6.12375L12.2275 5.95977C12.6552 5.93071 12.869 5.91618 13.0733 5.86969C13.3684 5.80251 13.6501 5.68584 13.9063 5.52463C14.0836 5.41306 14.2451 5.27213 14.5681 4.99027L16.3903 3.3999C17.1889 2.703 17.5881 2.35454 18.0225 2.18452C18.6509 1.93849 19.3491 1.93849 19.9775 2.18452C20.4119 2.35454 20.8111 2.703 21.6097 3.3999L23.4319 4.99027C23.7549 5.27213 23.9164 5.41306 24.0937 5.52463C24.3499 5.68584 24.6316 5.80251 24.9267 5.86969C25.131 5.91618 25.3448 5.93071 25.7725 5.95977L28.1856 6.12375Z';
-
-/* 4-sided Cookie */
-export const cookie4Path =
-    'M22.8729 5.6207C28.8872 3.00862 34.9914 9.11282 32.3793 15.1271L31.9474 16.1214C31.1499 17.9576 31.1499 20.0424 31.9474 21.8786L32.3793 22.8729C34.9914 28.8872 28.8872 34.9914 22.8729 32.3793L21.8786 31.9474C20.0424 31.1499 17.9576 31.1499 16.1214 31.9474L15.1271 32.3793C9.11281 34.9914 3.00862 28.8872 5.6207 22.8729L6.05257 21.8786C6.85006 20.0424 6.85005 17.9576 6.05257 16.1214L5.6207 15.1271C3.00862 9.11281 9.11282 3.00862 15.1271 5.6207L16.1214 6.05257C17.9576 6.85005 20.0424 6.85005 21.8786 6.05257L22.8729 5.6207Z';
-
-/* Oval */
-export const ovalPath =
-    'M27.1309 27.1309C20.1705 34.0913 10.8877 36.0935 6.39707 31.6029C1.90648 27.1123 3.90867 17.8295 10.8691 10.8691C17.8295 3.90867 27.1123 1.90648 31.6029 6.39707C36.0935 10.8877 34.0913 20.1705 27.1309 27.1309Z';
-
 export const expressFastSpatial = 'cubic-bezier(0.42, 1.67, 0.21, 0.90)';
 
 export const useProcessProps = ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-molecules",
-  "version": "0.5.0-beta.31",
+  "version": "0.5.0-beta.32",
   "author": "Thet Aung <thetaung.dev@gmail.com>",
   "license": "MIT",
   "main": "index.ts",