@ornikar/kitt-universal 29.3.2 → 29.4.1-canary.2269ca599b5583fc6238639eb399d62b3abcf0a1.0

package/dist/index-node-22.17.es.web.css

@@ -1,4 +1,3 @@
-.kitt-u_spinningIcon_ssn8o83 > svg{-webkit-animation:spin-kitt-u_spinningIcon_ssn8o83 1.1s infinite linear;animation:spin-kitt-u_spinningIcon_ssn8o83 1.1s infinite linear;}@-webkit-keyframes spin-kitt-u_spinningIcon_ssn8o83{0%{-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg);}}@keyframes spin-kitt-u_spinningIcon_ssn8o83{0%{-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg);}}
 .kitt-u_overflowHidden_otm3u3{overflow:hidden;}
 .kitt-u_contentAnimationEnter_c11xxy4r{opacity:0;-webkit-transform:rotateZ(5deg) scale(0.8);-ms-transform:rotateZ(5deg) scale(0.8);transform:rotateZ(5deg) scale(0.8);}
 .kitt-u_contentAnimatioEnterActive_cl52117{opacity:1;-webkit-transform:rotateZ(0) scale(1);-ms-transform:rotateZ(0) scale(1);transform:rotateZ(0) scale(1);-webkit-transition:all 400ms cubic-bezier(0.77,0,0.175,1);transition:all 400ms cubic-bezier(0.77,0,0.175,1);}

package/dist/index-node-22.17.es.web.mjs

@@ -1,12 +1,12 @@
-import { useContext, createContext, forwardRef, useMemo, cloneElement, useState, useRef, useEffect, Children, useReducer, useCallback, Fragment as Fragment$1 } from 'react';
+import { useContext, createContext, forwardRef, useMemo, cloneElement, useRef, useEffect, useState, Children, useReducer, useCallback, Fragment as Fragment$1 } from 'react';
 import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useBreakpointValue as useBreakpointValue$1, useSx, Text, Input, NativeBaseProvider, extendTheme } from 'native-base';
 export { useClipboard, useContrastText, useMediaQuery, useSx, useToken } from 'native-base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SpinnerGapRegularIcon, UserRegularIcon, XRegularIcon, ArrowLeftRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
+import { Animated, Easing, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, StyleSheet, useWindowDimensions } from 'react-native';
+export { useWindowDimensions as useWindowSize } from 'react-native';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
-import { ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, StyleSheet, useWindowDimensions } from 'react-native';
-export { useWindowDimensions as useWindowSize } from 'react-native';
 import { parse } from '@twemoji/parser';
 import Downshift, { useSelect } from 'downshift';
 import { getDocumentAsync } from 'expo-document-picker';
@@ -14,7 +14,7 @@ import { launchImageLibraryAsync } from 'expo-image-picker';
 import { useDebouncedCallback } from 'use-debounce';
 import { Loader } from '@googlemaps/js-api-loader';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
-import Animated, { useAnimatedStyle, withSpring, withTiming, useSharedValue, interpolateColor, Easing, useAnimatedProps, withDelay, withRepeat, interpolate, runOnJS } from 'react-native-reanimated';
+import Animated$1, { useAnimatedStyle, withSpring, withTiming, useSharedValue, interpolateColor, Easing as Easing$1, useAnimatedProps, withDelay, withRepeat, interpolate, runOnJS } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
 import { useFloating, autoUpdate, offset, autoPlacement, shift, arrow } from '@floating-ui/react-dom';
@@ -2109,6 +2109,7 @@ const typography = {
     contentCaps: {
       fontFamily: {
         native: {
+          regular: 'GTStandardNarrow',
           bold: 'GTStandardNarrowBold'
         },
         web: {
@@ -3675,16 +3676,42 @@ const Button = /*#__PURE__*/forwardRef(({
   });
 });
 
-const spinningIcon = "kitt-u_spinningIcon_ssn8o83";
 function SpinningIcon({
   icon,
   color
 }) {
+  if (process.env.NODE_ENV !== 'production' && !color) {
+    throw new Error(`Invalid color passed to SpinningIcon: ${String(color)}`);
+  }
   const clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color
   });
-  return /*#__PURE__*/jsx("div", {
-    className: spinningIcon,
+  const animationRef = useRef(new Animated.Value(0));
+  const rotation = animationRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'test') return undefined;
+    const animation = Animated.loop(Animated.timing(animationRef.current, {
+      toValue: 1,
+      duration: 1100,
+      easing: Easing.linear,
+      useNativeDriver: "web" !== 'web'
+    }));
+    animation.start();
+    return () => {
+      if (process.env.NODE_ENV === 'test') return undefined;
+      animation.stop();
+      return undefined;
+    };
+  }, []);
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: {
+      transform: [{
+        rotate: rotation
+      }]
+    },
     children: clonedIcon
   });
 }
@@ -7094,7 +7121,7 @@ const TextArea = /*#__PURE__*/forwardRef(({
         base: "body-s",
         color: deepPurpleColorPalette['grey.5'],
         children: helper
-      }) : null, shouldDisplayLimit ? /*#__PURE__*/jsx(Animated.View, {
+      }) : null, shouldDisplayLimit ? /*#__PURE__*/jsx(Animated$1.View, {
         style: limitContainerAnimatedStyle,
         children: /*#__PURE__*/jsxs(HStack$1, {
           alignItems: "center",
@@ -7104,7 +7131,7 @@ const TextArea = /*#__PURE__*/forwardRef(({
             variant: "bold",
             color: deepPurpleColorPalette['grey.5'],
             children: [props.value?.length || 0, "/", limit]
-          }), /*#__PURE__*/jsx(Animated.View, {
+          }), /*#__PURE__*/jsx(Animated$1.View, {
             style: checkIconAnimatedStyle,
             children: /*#__PURE__*/jsx(TypographyIcon, {
               icon: /*#__PURE__*/jsx(CheckCircleFillIcon, {}),
@@ -7176,17 +7203,17 @@ function ToggleAnimated({
   useEffect(() => {
     marginLeftAnim.value = withTiming(value ? marginLeft : 0, {
       duration: 200,
-      easing: Easing.ease
+      easing: Easing$1.ease
     });
   }, [value, marginLeftAnim, marginLeft]);
   useEffect(() => {
     hoverAnim.value = withTiming(isHovered ? value ? -1 : 1 : 0, {
       duration: 200,
-      easing: Easing.ease
+      easing: Easing$1.ease
     });
     hoverBackgroundAnim.value = withTiming(isHovered ? 0 : 1, {
       duration: 200,
-      easing: Easing.ease
+      easing: Easing$1.ease
     });
   }, [isHovered, hoverAnim, value, hoverBackgroundAnim]);
   return /*#__PURE__*/jsx(View$1, {
@@ -7194,7 +7221,7 @@ function ToggleAnimated({
     borderColor: `kitt.forms.toggle.${variant}.${disabledState}.${state}.wrapperBorder.color`,
     borderWidth: `kitt.forms.toggle.${variant}.${disabledState}.${state}.wrapperBorder.width`,
     borderRadius: "full",
-    children: /*#__PURE__*/jsx(Animated.View, {
+    children: /*#__PURE__*/jsx(Animated$1.View, {
       style: [hoverBackgroundTranslate, {
         borderColor: theme.kitt.forms.toggle[variant][disabledState][state].border.color,
         borderWidth: theme.kitt.forms.toggle[variant][disabledState][state].border.width,
@@ -7203,7 +7230,7 @@ function ToggleAnimated({
         height: theme.kitt.forms.toggle[variant][disabledState][state].height[size],
         padding: size === 'medium' ? 3 : 4
       }],
-      children: /*#__PURE__*/jsx(Animated.View, {
+      children: /*#__PURE__*/jsx(Animated$1.View, {
         style: [buttonTranslate, hoverTranslate],
         children: /*#__PURE__*/jsx(View$1, {
           borderRadius: "full",
@@ -7968,7 +7995,7 @@ const useNativeAnimation = ({
         transform: [{
           translateY: withTiming(-4, {
             duration: TRANSLATE_Y_DURATION,
-            easing: Easing.linear
+            easing: Easing$1.linear
           })
         }, {
           scale: withTiming(1, {
@@ -7982,7 +8009,7 @@ const useNativeAnimation = ({
         transform: [{
           translateY: withTiming(-10, {
             duration: TRANSLATE_Y_DURATION,
-            easing: Easing.linear
+            easing: Easing$1.linear
           })
         }, {
           scale: withTiming(1.3, {
@@ -7995,7 +8022,7 @@ const useNativeAnimation = ({
       transform: [{
         translateY: withTiming(0, {
           duration: TRANSLATE_Y_DURATION,
-          easing: Easing.linear
+          easing: Easing$1.linear
         })
       }, {
         scale: withTiming(1, {
@@ -8052,7 +8079,7 @@ function StaticMapMarker$1({
     alignItems: "center",
     width: containerWidth,
     height: containerHeight,
-    children: [/*#__PURE__*/jsx(Animated.View, {
+    children: [/*#__PURE__*/jsx(Animated$1.View, {
       style: animatedStyle,
       children: variant === MapMarkerVariantEnum.MEETING_POINT ? /*#__PURE__*/jsx(SvgMeetingPointMarkerinline, {
         width: mpMarkerSvgWidth,
@@ -10954,7 +10981,7 @@ function Notification({
   });
 }
 
-const AnimatedCircle = Animated.createAnimatedComponent(Circle$1);
+const AnimatedCircle = Animated$1.createAnimatedComponent(Circle$1);
 function AnimatedLoaderCircle({
   color,
   progress
@@ -11002,7 +11029,7 @@ function AnimatedBackgroundCircle() {
     const [x1, y1, x2, y2] = fillEasingFunction;
     progress.value = withDelay(delay, withTiming(1, {
       duration: circleBackgroundFillDuration,
-      easing: Easing.bezier(x1, y1, x2, y2)
+      easing: Easing$1.bezier(x1, y1, x2, y2)
     }));
   }, [progress, animation]);
   return /*#__PURE__*/jsx(Svg, {
@@ -11032,7 +11059,7 @@ function AnimatedFillCircleContainer({
     } = animation;
     progress.value = withDelay(delay, withRepeat(withTiming(1, {
       duration,
-      easing: Easing.linear
+      easing: Easing$1.linear
     }), isInfinitAnimation$1));
   }, [progress, animation, duration]);
   const rotationStyles = useAnimatedStyle(() => {
@@ -11042,7 +11069,7 @@ function AnimatedFillCircleContainer({
       }]
     };
   }, [progress]);
-  return /*#__PURE__*/jsx(Animated.View, {
+  return /*#__PURE__*/jsx(Animated$1.View, {
     style: [StyleSheet.absoluteFill, rotationStyles],
     children: children
   });
@@ -11067,7 +11094,7 @@ function AnimatedFilledCircle() {
     const [x1, y1, x2, y2] = fillEasingFunction;
     progress.value = withDelay(delay, withRepeat(withTiming(0.8, {
       duration: filledCircleFillDuration,
-      easing: Easing.bezier(x1, y1, x2, y2)
+      easing: Easing$1.bezier(x1, y1, x2, y2)
     }), isInfinitAnimation, shouldReverse));
   }, [progress, animation]);
   return /*#__PURE__*/jsx(AnimatedFillCircleContainer, {
@@ -11443,7 +11470,7 @@ function SkeletonContent({
     if (isLoading) {
       sharedX.value = withRepeat(withTiming(1, {
         duration: theme.kitt.skeleton.animationDuration,
-        easing: Easing.inOut(Easing.ease)
+        easing: Easing$1.inOut(Easing$1.ease)
       }), -1);
     }
   }, [sharedX, width, isLoading, theme]);
@@ -11459,7 +11486,7 @@ function SkeletonContent({
     width: "100%",
     backgroundColor: "kitt.skeleton.backgroundColor",
     borderColor: "kitt.skeleton.flareColor",
-    children: /*#__PURE__*/jsx(Animated.View, {
+    children: /*#__PURE__*/jsx(Animated$1.View, {
       style: [StyleSheet.absoluteFill, linearGradientStyle],
       children: /*#__PURE__*/jsx(LinearGradient, {
         colors: [theme.kitt.skeleton.backgroundColor, theme.kitt.skeleton.flareColor, theme.kitt.skeleton.backgroundColor],
@@ -12574,7 +12601,7 @@ const typeToIcon = type => {
   }
 };
 
-const AnimatedView$1 = Animated.createAnimatedComponent(View);
+const AnimatedView$1 = Animated$1.createAnimatedComponent(View);
 function ToastComponent({
   title,
   description,
@@ -12606,7 +12633,7 @@ function ToastComponent({
       width.value = 100;
       width.value = withTiming(0, {
         duration: toastTimeout,
-        easing: Easing.bezier(0, 0, 0.58, 1)
+        easing: Easing$1.bezier(0, 0, 0.58, 1)
       }, () => {
         runOnJS(handleHideToast)();
       });
@@ -13178,7 +13205,7 @@ function useStepAnimations({
   };
 }
 
-const AnimatedView = Animated.createAnimatedComponent(View);
+const AnimatedView = Animated$1.createAnimatedComponent(View);
 function BorderlessStep({
   description,
   title,