@ornikar/kitt-universal 21.0.2 → 22.0.0

package/dist/index-node-18.18.es.mjs

@@ -857,9 +857,6 @@ const typography = {
     warning: colors.warning
   },
   types: {
-    get header() {
-      throw new Error('typography.types.header is deprecated, use typography.type.headings instead');
-    },
     headings: {
       fontFamily: {
         native: {
@@ -893,9 +890,6 @@ const typography = {
         'heading-xxs': createTypographyConfig(16, 1.3)
       }
     },
-    get 'headers-impact'() {
-      throw new Error('typography.types.headers-impact is deprecated, use typography.type.headings-impact instead');
-    },
     'headings-impact': {
       fontFamily: {
         native: {
@@ -1681,7 +1675,9 @@ function ActionCardContentWrapper({
       style: sharedTransform
     },
     _web: {
-      style: sharedTransform
+      style: {
+        transform: `translateY(${translateY}px)`
+      }
     },
     width: "100%",
     backgroundColor: `kitt.actionCard.${themeName}.${state}.backgroundColor`,
@@ -2054,7 +2050,7 @@ const createHeading = (level, defaultBase) => {
       accessibilityRole: "header",
       base: defaultBase,
       ...props,
-      accessibilityLevel: level
+      "aria-level": level
     });
   }
   TypographyHeading.displayName = `TypographyHeading${level}`;
@@ -2376,35 +2372,14 @@ const useNativeAnimation$3 = ({
   const {
     scale
   } = theme.kitt.button;
-  const animatedStyles = useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        backgroundColor: interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
-        transform: [{
-          scale: withSpring(pressed.value ? scale.base.active : scale.base.default)
-        }]
-      };
-    };
-    _f._closure = {
-      interpolateColor,
-      color,
-      backgroundColor,
-      pressedBackgroundColor,
-      withSpring,
-      pressed,
-      scale: {
-        base: {
-          active: scale.base.active,
-          default: scale.base.default
-        }
-      }
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
+      transform: [{
+        scale: withSpring(pressed.value ? scale.base.active : scale.base.default)
+      }]
     };
-    _f.asString = "function _f(){const{interpolateColor,color,backgroundColor,pressedBackgroundColor,withSpring,pressed,scale}=jsThis._closure;{return{backgroundColor:interpolateColor(color.value,[0,1],[backgroundColor,pressedBackgroundColor]),transform:[{scale:withSpring(pressed.value?scale.base.active:scale.base.default)}]};}}";
-    _f.__workletHash = 5368461229978;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Button/hooks/useNativeAnimation.ts (31:42)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
+  });
   return {
     onPressIn: () => {
       color.value = withSpring(1);
@@ -2733,7 +2708,7 @@ function AvatarContent({
       width: size,
       height: size,
       alt: alt,
-      accessibilityLabel: alt
+      "aria-label": alt
     });
   }
   if (firstname && lastname) {
@@ -2964,56 +2939,22 @@ function NativeOpacityAnimation$2({
       onExited();
     }
   }
-  const opacityStyle = useAnimatedStyle(function () {
-    const _f = function () {
-      const {
+  const opacityStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.cardModal.animation.overlay;
+    const [x1, y1, x2, y2] = easing;
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
         duration,
-        easing
-      } = theme.kitt.cardModal.animation.overlay;
-      const [x1, y1, x2, y2] = easing;
-      return {
-        opacity: withTiming(visible ? 1 : 0, {
-          duration,
-          easing: Easing$1.bezier(x1, y1, x2, y2)
-        }, function () {
-          const _f = function (isFinished) {
-            if (!isFinished) return;
-            runOnJS(handleAnimationFinished)();
-          };
-          _f._closure = {
-            runOnJS,
-            handleAnimationFinished
-          };
-          _f.asString = "function _f(isFinished){const{runOnJS,handleAnimationFinished}=jsThis._closure;{if(!isFinished)return;runOnJS(handleAnimationFinished)();}}";
-          _f.__workletHash = 14707844242190;
-          _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/CardModal/CardModalAnimation/NativeOpacityAnimation.tsx (32:96)";
-          return _f;
-        }())
-      };
-    };
-    _f._closure = {
-      theme: {
-        kitt: {
-          cardModal: {
-            animation: {
-              overlay: theme.kitt.cardModal.animation.overlay
-            }
-          }
-        }
-      },
-      withTiming,
-      visible,
-      Easing: {
-        bezier: Easing$1.bezier
-      },
-      runOnJS,
-      handleAnimationFinished
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }, isFinished => {
+        if (!isFinished) return;
+        runOnJS(handleAnimationFinished)();
+      })
     };
-    _f.asString = "function _f(){const{theme,withTiming,visible,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.cardModal.animation.overlay;const[x1,y1,x2,y2]=easing;return{opacity:withTiming(visible?1:0,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();})};}}";
-    _f.__workletHash = 14370179131905;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/CardModal/CardModalAnimation/NativeOpacityAnimation.tsx (27:40)";
-    return _f;
-  }());
+  });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [StyleSheet.absoluteFillObject, opacityStyle],
     children: children
@@ -3036,69 +2977,34 @@ function NativeRotationAnimation$1({
     }
     if (!visible && hasRunAnimationRef.current) onExited();
   }
-  const animatedStyle = useAnimatedStyle(function () {
-    const _f = function () {
-      const {
-        duration,
-        easing
-      } = theme.kitt.cardModal.animation.content;
-      const [x1, y1, x2, y2] = easing;
-      rotation.value = withTiming(visible ? 0 : 5, {
+  const animatedStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.cardModal.animation.content;
+    const [x1, y1, x2, y2] = easing;
+    rotation.value = withTiming(visible ? 0 : 5, {
+      duration,
+      easing: Easing$1.bezier(x1, y1, x2, y2)
+    }, isFinished => {
+      if (!isFinished) return;
+      runOnJS(handleAnimationFinished)();
+    });
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
         duration,
         easing: Easing$1.bezier(x1, y1, x2, y2)
-      }, function () {
-        const _f = function (isFinished) {
-          if (!isFinished) return;
-          runOnJS(handleAnimationFinished)();
-        };
-        _f._closure = {
-          runOnJS,
-          handleAnimationFinished
-        };
-        _f.asString = "function _f(isFinished){const{runOnJS,handleAnimationFinished}=jsThis._closure;{if(!isFinished)return;runOnJS(handleAnimationFinished)();}}";
-        _f.__workletHash = 14707844242190;
-        _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/CardModal/CardModalAnimation/NativeRotationAnimation.tsx (41:102)";
-        return _f;
-      }());
-      return {
-        opacity: withTiming(visible ? 1 : 0, {
+      }),
+      transform: [{
+        scale: withTiming(visible ? 1 : 0.8, {
           duration,
           easing: Easing$1.bezier(x1, y1, x2, y2)
-        }),
-        transform: [{
-          scale: withTiming(visible ? 1 : 0.8, {
-            duration,
-            easing: Easing$1.bezier(x1, y1, x2, y2)
-          })
-        }, {
-          rotateZ: `${rotation.value}deg`
-        }]
-      };
-    };
-    _f._closure = {
-      theme: {
-        kitt: {
-          cardModal: {
-            animation: {
-              content: theme.kitt.cardModal.animation.content
-            }
-          }
-        }
-      },
-      rotation,
-      withTiming,
-      visible,
-      Easing: {
-        bezier: Easing$1.bezier
-      },
-      runOnJS,
-      handleAnimationFinished
+        })
+      }, {
+        rotateZ: `${rotation.value}deg`
+      }]
     };
-    _f.asString = "function _f(){const{theme,rotation,withTiming,visible,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.cardModal.animation.content;const[x1,y1,x2,y2]=easing;rotation.value=withTiming(visible?0:5,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();});return{opacity:withTiming(visible?1:0,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)}),transform:[{scale:withTiming(visible?1:0.8,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)})},{rotateZ:rotation.value+\"deg\"}]};}}";
-    _f.__workletHash = 14560674497944;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/CardModal/CardModalAnimation/NativeRotationAnimation.tsx (36:41)";
-    return _f;
-  }());
+  });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [animatedStyle],
     children: children
@@ -3390,70 +3296,28 @@ const useNativeAnimation$2 = ({
 }) => {
   const theme = useTheme();
   const pressed = useSharedValue(Boolean(isPressedInternal));
-  const progress = useDerivedValue(function () {
-    const _f = function () {
-      return withTiming(pressed.value ? 1 : 0, {
-        duration: theme.kitt.choices.item.transition.duration
-      });
-    };
-    _f._closure = {
-      withTiming,
-      pressed,
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              transition: {
-                duration: theme.kitt.choices.item.transition.duration
-              }
-            }
-          }
-        }
-      }
+  const progress = useDerivedValue(() => {
+    return withTiming(pressed.value ? 1 : 0, {
+      duration: theme.kitt.choices.item.transition.duration
+    });
+  });
+  const backgroundStyles = useAnimatedStyle(() => {
+    const {
+      default: defaultBg,
+      pressed: pressedBg,
+      selected: selectedBg,
+      disabled: disabledBg
+    } = theme.kitt.choices.item.backgroundColor;
+    if (disabled) return {
+      backgroundColor: disabledBg
     };
-    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
-    _f.__workletHash = 1120030177160;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/hooks/useNativeAnimation.tsx (31:35)";
-    return _f;
-  }());
-  const backgroundStyles = useAnimatedStyle(function () {
-    const _f = function () {
-      const {
-        default: defaultBg,
-        pressed: pressedBg,
-        selected: selectedBg,
-        disabled: disabledBg
-      } = theme.kitt.choices.item.backgroundColor;
-      if (disabled) return {
-        backgroundColor: disabledBg
-      };
-      if (selected) return {
-        backgroundColor: selectedBg
-      };
-      return {
-        backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
-      };
+    if (selected) return {
+      backgroundColor: selectedBg
     };
-    _f._closure = {
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              backgroundColor: theme.kitt.choices.item.backgroundColor
-            }
-          }
-        }
-      },
-      disabled,
-      selected,
-      interpolateColor,
-      progress
+    return {
+      backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
     };
-    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
-    _f.__workletHash = 15506726129309;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/hooks/useNativeAnimation.tsx (35:44)";
-    return _f;
-  }());
+  });
   return {
     onPressIn: () => {
       pressed.value = true;
@@ -3624,7 +3488,7 @@ function Choices({
   return /*#__PURE__*/jsx(ChoicesContainer, {
     direction: direction,
     testID: testID,
-    nativeID: id,
+    id: id,
     children: childrenArray.map((child, index) => {
       const element = /*#__PURE__*/cloneElement(child, {
         selected: isForm ? child.props.value === currentValue : undefined,
@@ -3664,56 +3528,22 @@ function NativeOpacityAnimation$1({
       onExited();
     }
   }
-  const opacityStyle = useAnimatedStyle(function () {
-    const _f = function () {
-      const {
+  const opacityStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.dialogModal.animation.overlay;
+    const [x1, y1, x2, y2] = easing;
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
         duration,
-        easing
-      } = theme.kitt.dialogModal.animation.overlay;
-      const [x1, y1, x2, y2] = easing;
-      return {
-        opacity: withTiming(visible ? 1 : 0, {
-          duration,
-          easing: Easing$1.bezier(x1, y1, x2, y2)
-        }, function () {
-          const _f = function (isFinished) {
-            if (!isFinished) return;
-            runOnJS(handleAnimationFinished)();
-          };
-          _f._closure = {
-            runOnJS,
-            handleAnimationFinished
-          };
-          _f.asString = "function _f(isFinished){const{runOnJS,handleAnimationFinished}=jsThis._closure;{if(!isFinished)return;runOnJS(handleAnimationFinished)();}}";
-          _f.__workletHash = 14707844242190;
-          _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/DialogModal/DialogModalAnimation/NativeOpacityAnimation.tsx (32:96)";
-          return _f;
-        }())
-      };
-    };
-    _f._closure = {
-      theme: {
-        kitt: {
-          dialogModal: {
-            animation: {
-              overlay: theme.kitt.dialogModal.animation.overlay
-            }
-          }
-        }
-      },
-      withTiming,
-      visible,
-      Easing: {
-        bezier: Easing$1.bezier
-      },
-      runOnJS,
-      handleAnimationFinished
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }, isFinished => {
+        if (!isFinished) return;
+        runOnJS(handleAnimationFinished)();
+      })
     };
-    _f.asString = "function _f(){const{theme,withTiming,visible,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.dialogModal.animation.overlay;const[x1,y1,x2,y2]=easing;return{opacity:withTiming(visible?1:0,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();})};}}";
-    _f.__workletHash = 3254948230845;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/DialogModal/DialogModalAnimation/NativeOpacityAnimation.tsx (27:40)";
-    return _f;
-  }());
+  });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [StyleSheet.absoluteFillObject, opacityStyle],
     children: children
@@ -3736,69 +3566,34 @@ function NativeRotationAnimation({
     }
     if (!visible && hasRunAnimationRef.current) onExited();
   }
-  const animatedStyle = useAnimatedStyle(function () {
-    const _f = function () {
-      const {
-        duration,
-        easing
-      } = theme.kitt.dialogModal.animation.content;
-      const [x1, y1, x2, y2] = easing;
-      rotation.value = withTiming(visible ? 0 : 5, {
+  const animatedStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.dialogModal.animation.content;
+    const [x1, y1, x2, y2] = easing;
+    rotation.value = withTiming(visible ? 0 : 5, {
+      duration,
+      easing: Easing$1.bezier(x1, y1, x2, y2)
+    }, isFinished => {
+      if (!isFinished) return;
+      runOnJS(handleAnimationFinished)();
+    });
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
         duration,
         easing: Easing$1.bezier(x1, y1, x2, y2)
-      }, function () {
-        const _f = function (isFinished) {
-          if (!isFinished) return;
-          runOnJS(handleAnimationFinished)();
-        };
-        _f._closure = {
-          runOnJS,
-          handleAnimationFinished
-        };
-        _f.asString = "function _f(isFinished){const{runOnJS,handleAnimationFinished}=jsThis._closure;{if(!isFinished)return;runOnJS(handleAnimationFinished)();}}";
-        _f.__workletHash = 14707844242190;
-        _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/DialogModal/DialogModalAnimation/NativeRotationAnimation.tsx (41:102)";
-        return _f;
-      }());
-      return {
-        opacity: withTiming(visible ? 1 : 0, {
+      }),
+      transform: [{
+        scale: withTiming(visible ? 1 : 0.8, {
           duration,
           easing: Easing$1.bezier(x1, y1, x2, y2)
-        }),
-        transform: [{
-          scale: withTiming(visible ? 1 : 0.8, {
-            duration,
-            easing: Easing$1.bezier(x1, y1, x2, y2)
-          })
-        }, {
-          rotateZ: `${rotation.value}deg`
-        }]
-      };
-    };
-    _f._closure = {
-      theme: {
-        kitt: {
-          dialogModal: {
-            animation: {
-              content: theme.kitt.dialogModal.animation.content
-            }
-          }
-        }
-      },
-      rotation,
-      withTiming,
-      visible,
-      Easing: {
-        bezier: Easing$1.bezier
-      },
-      runOnJS,
-      handleAnimationFinished
+        })
+      }, {
+        rotateZ: `${rotation.value}deg`
+      }]
     };
-    _f.asString = "function _f(){const{theme,rotation,withTiming,visible,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.dialogModal.animation.content;const[x1,y1,x2,y2]=easing;rotation.value=withTiming(visible?0:5,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();});return{opacity:withTiming(visible?1:0,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)}),transform:[{scale:withTiming(visible?1:0.8,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)})},{rotateZ:rotation.value+\"deg\"}]};}}";
-    _f.__workletHash = 14448961480868;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/DialogModal/DialogModalAnimation/NativeRotationAnimation.tsx (36:41)";
-    return _f;
-  }());
+  });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [animatedStyle],
     children: children
@@ -3962,7 +3757,7 @@ function Emoji({
     testID: testID,
     size: size,
     alt: emojiData.text,
-    accessibilityLabel: emojiData.text,
+    "aria-label": emojiData.text,
     source: {
       uri: emojiData.url
     },
@@ -4141,7 +3936,7 @@ const InputText = /*#__PURE__*/forwardRef(({
   autoCorrect = true,
   textContentType = 'none',
   autoComplete = 'off',
-  keyboardType = 'default',
+  inputMode = 'none',
   multiline,
   onSubmitEditing,
   ...props
@@ -4155,11 +3950,11 @@ const InputText = /*#__PURE__*/forwardRef(({
     children: [/*#__PURE__*/jsx(Input, {
       ref: ref,
       multiline: multiline,
-      nativeID: id,
+      id: id,
       isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
       isHovered: internalForceState ? internalForceState === 'hover' : undefined,
       isFocused: internalForceState ? internalForceState === 'focus' : undefined,
-      keyboardType: keyboardType,
+      inputMode: inputMode,
       autoComplete: autoComplete,
       autoCorrect: autoCorrect,
       textContentType: textContentType,
@@ -4548,7 +4343,7 @@ const Checkbox = /*#__PURE__*/forwardRef(({
   const theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, {
     ref: ref,
-    nativeID: id,
+    id: id,
     testID: testID,
     accessibilityRole: "checkbox",
     accessibilityState: {
@@ -4623,10 +4418,10 @@ const Checkbox = /*#__PURE__*/forwardRef(({
   });
 });
 
-function getReturnKeyTypeForNumericInput(returnKeyType) {
-  // returnKey is only displayed on number input on iOS if value is done
+function getEnterKeyHintForNumericInput(enterKeyHint) {
+  // enterKeyHint is only displayed on number input on iOS if value is done
   if (Platform.OS === 'ios') return 'done';
-  return returnKeyType;
+  return enterKeyHint;
 }
 
 function prefixWithZero$1(value, maxLength = 2) {
@@ -4836,7 +4631,7 @@ const InputPart = /*#__PURE__*/forwardRef(({
   isFocusedInternal,
   isHoveredInternal,
   isPressedInternal,
-  returnKeyType,
+  enterKeyHint,
   onChange,
   onBlur,
   onSubmitEditing
@@ -4853,8 +4648,8 @@ const InputPart = /*#__PURE__*/forwardRef(({
     value: value,
     placeholder: placeholder,
     disabled: disabled,
-    keyboardType: "numeric",
-    returnKeyType: returnKeyType,
+    inputMode: "numeric",
+    enterKeyHint: enterKeyHint,
     textAlign: "center",
     onChange: onChange,
     onBlur: onBlur,
@@ -4888,7 +4683,7 @@ const KeyboardDatePicker = /*#__PURE__*/forwardRef(({
   isFocusedInternal,
   isHoveredInternal,
   isPressedInternal,
-  returnKeyType,
+  enterKeyHint,
   onChange,
   onBlur,
   onFocus,
@@ -4937,7 +4732,7 @@ const KeyboardDatePicker = /*#__PURE__*/forwardRef(({
   };
   return /*#__PURE__*/jsx(View, {
     testID: testID,
-    nativeID: id,
+    id: id,
     children: /*#__PURE__*/jsxs(HStack, {
       space: "kitt.2",
       children: [/*#__PURE__*/jsx(PartContainer, {
@@ -4949,7 +4744,7 @@ const KeyboardDatePicker = /*#__PURE__*/forwardRef(({
           ...sharedInputPartProps,
           placeholder: placeholder?.day,
           value: state.displayedDay,
-          returnKeyType: getReturnKeyTypeForNumericInput('next'),
+          enterKeyHint: getEnterKeyHintForNumericInput('next'),
           onChange: e => {
             const nextDay = stringToNumber(e.nativeEvent.text);
             dispatch({
@@ -4977,7 +4772,7 @@ const KeyboardDatePicker = /*#__PURE__*/forwardRef(({
           ...sharedInputPartProps,
           placeholder: placeholder?.month,
           value: state.displayedMonth,
-          returnKeyType: getReturnKeyTypeForNumericInput('next'),
+          enterKeyHint: getEnterKeyHintForNumericInput('next'),
           onChange: e => {
             const nextMonth = stringToNumber(e.nativeEvent.text);
             dispatch({
@@ -5005,7 +4800,7 @@ const KeyboardDatePicker = /*#__PURE__*/forwardRef(({
           ...sharedInputPartProps,
           placeholder: placeholder?.year,
           value: state.displayedYear,
-          returnKeyType: returnKeyType ? getReturnKeyTypeForNumericInput(returnKeyType) : undefined,
+          enterKeyHint: enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined,
           onChange: e => {
             const nextYear = stringToNumber(e.nativeEvent.text);
             dispatch({
@@ -5050,14 +4845,16 @@ const PressableDateInputs = /*#__PURE__*/forwardRef(({
     flexDirection: "row",
     position: "relative",
     alignSelf: createResponsiveStyleFromProp(stretch, undefined, 'baseline'),
-    nativeID: id,
+    id: id,
     disabled: disabled,
     testID: testID,
     onPress: onPress,
     children: /*#__PURE__*/jsxs(View, {
       position: "relative",
       width: createResponsiveStyleFromProp(stretch, '100%'),
-      pointerEvents: "none",
+      style: {
+        pointerEvents: 'none'
+      },
       children: [/*#__PURE__*/jsxs(HStack, {
         space: "kitt.2",
         width: createResponsiveStyleFromProp(stretch, '100%'),
@@ -5327,7 +5124,7 @@ const NativeUIDatePicker = /*#__PURE__*/forwardRef(({
 
 const DatePicker = /*#__PURE__*/forwardRef(({
   fillMode = 'native',
-  returnKeyType,
+  enterKeyHint,
   value,
   onSubmitEditing,
   ...props
@@ -5339,7 +5136,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
       ref: ref,
       ...props,
       value: currentValue,
-      returnKeyType: returnKeyType,
+      enterKeyHint: enterKeyHint,
       onSubmitEditing: onSubmitEditing
     });
   }
@@ -5648,9 +5445,7 @@ function InputAddressOption({
 }) {
   const sharedTransform = {
     style: {
-      transform: [{
-        translateY: 4
-      }]
+      transform: 'translateY(4)'
     }
   };
   return /*#__PURE__*/jsx(Autocomplete.Option, {
@@ -5748,7 +5543,7 @@ const InputEmail = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(InputText, {
     ref: ref,
     autoComplete: "email",
-    keyboardType: "email-address",
+    inputMode: "email",
     textContentType: "emailAddress",
     autoCapitalize: "none",
     ...props
@@ -5855,7 +5650,7 @@ function prefixWithZero(value, phoneNumberLength) {
   return value.padStart(phoneNumberLength, '0');
 }
 const InputPhone = /*#__PURE__*/forwardRef(({
-  returnKeyType,
+  enterKeyHint,
   autoComplete = 'tel',
   phoneNumberLength = 10,
   value,
@@ -5863,13 +5658,13 @@ const InputPhone = /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const [currentValue, setCurrentValue] = useState(value);
-  const currentReturnKeyType = returnKeyType ? getReturnKeyTypeForNumericInput(returnKeyType) : undefined;
+  const currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, {
     ref: ref,
     ...props,
     value: currentValue,
-    keyboardType: "phone-pad",
-    returnKeyType: currentReturnKeyType,
+    inputMode: "tel",
+    enterKeyHint: currentEnterKeyHint,
     autoComplete: autoComplete,
     textContentType: "telephoneNumber",
     onChange: event => {
@@ -5948,7 +5743,7 @@ function Label({
   const isWeb = Platform.OS === 'web';
   return /*#__PURE__*/jsx(Typography.Text, {
     base: "body",
-    nativeID: isWeb ? undefined : id,
+    id: isWeb ? undefined : id,
     children: isWeb ? /*#__PURE__*/jsx("label", {
       id: id,
       htmlFor: htmlFor,
@@ -5971,7 +5766,7 @@ function InnerCircle({
     backgroundColor: "kitt.forms.radio.innerCircle.backgroundColor",
     _web: {
       style: {
-        transform: sharedTransform,
+        transform: `scale(${isChecked ? 1 : 0}))`,
         transitionProperty: 'all',
         transitionDuration: theme.kitt.forms.radio.transition.duration,
         transitionTimingFunction: theme.kitt.forms.radio.transition.timingFunction
@@ -6075,7 +5870,7 @@ const Radio = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/jsx(Pressable, {
     ref: ref,
     testID: testID,
-    nativeID: id,
+    id: id,
     disabled: disabled,
     accessibilityRole: "radio",
     "aria-checked": checked,
@@ -6187,56 +5982,24 @@ const useNativeAnimation$1 = ({
     default: borderColor,
     pressed: pressedBorderColor
   } = theme.kitt.forms.radioButtonGroup.item.borderColor;
-  const animatedStyles = useAnimatedStyle(function () {
-    const _f = function () {
-      if (isDisabled) {
-        return {
-          backgroundColor: theme.kitt.forms.radioButtonGroup.item.backgroundColor.disabled,
-          borderColor: theme.kitt.forms.radioButtonGroup.item.borderColor.disabled
-        };
-      }
-      if (isSelected) {
-        return {
-          backgroundColor: pressedBackgroundColor,
-          borderColor: pressedBorderColor
-        };
-      }
+  const animatedStyles = useAnimatedStyle(() => {
+    if (isDisabled) {
       return {
-        backgroundColor: interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
-        borderColor: interpolateColor(color.value, [0, 1], [borderColor, pressedBorderColor])
+        backgroundColor: theme.kitt.forms.radioButtonGroup.item.backgroundColor.disabled,
+        borderColor: theme.kitt.forms.radioButtonGroup.item.borderColor.disabled
       };
+    }
+    if (isSelected) {
+      return {
+        backgroundColor: pressedBackgroundColor,
+        borderColor: pressedBorderColor
+      };
+    }
+    return {
+      backgroundColor: interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
+      borderColor: interpolateColor(color.value, [0, 1], [borderColor, pressedBorderColor])
     };
-    _f._closure = {
-      isDisabled,
-      theme: {
-        kitt: {
-          forms: {
-            radioButtonGroup: {
-              item: {
-                backgroundColor: {
-                  disabled: theme.kitt.forms.radioButtonGroup.item.backgroundColor.disabled
-                },
-                borderColor: {
-                  disabled: theme.kitt.forms.radioButtonGroup.item.borderColor.disabled
-                }
-              }
-            }
-          }
-        }
-      },
-      isSelected,
-      pressedBackgroundColor,
-      pressedBorderColor,
-      interpolateColor,
-      color,
-      backgroundColor,
-      borderColor
-    };
-    _f.asString = "function _f(){const{isDisabled,theme,isSelected,pressedBackgroundColor,pressedBorderColor,interpolateColor,color,backgroundColor,borderColor}=jsThis._closure;{if(isDisabled){return{backgroundColor:theme.kitt.forms.radioButtonGroup.item.backgroundColor.disabled,borderColor:theme.kitt.forms.radioButtonGroup.item.borderColor.disabled};}if(isSelected){return{backgroundColor:pressedBackgroundColor,borderColor:pressedBorderColor};}return{backgroundColor:interpolateColor(color.value,[0,1],[backgroundColor,pressedBackgroundColor]),borderColor:interpolateColor(color.value,[0,1],[borderColor,pressedBorderColor])};}}";
-    _f.__workletHash = 1728775972872;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/forms/RadioButtonGroup/hooks/useNativeAnimation.ts (31:42)";
-    return _f;
-  }());
+  });
   return {
     onPressIn: () => {
       color.value = withSpring(1);
@@ -6462,42 +6225,19 @@ function NativeOpacityAnimation({
   children
 }) {
   const theme = useTheme();
-  const opacityStyle = useAnimatedStyle(function () {
-    const _f = function () {
-      const {
+  const opacityStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.fullscreenModal.animation.overlay;
+    const [x1, y1, x2, y2] = easing;
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
         duration,
-        easing
-      } = theme.kitt.fullscreenModal.animation.overlay;
-      const [x1, y1, x2, y2] = easing;
-      return {
-        opacity: withTiming(visible ? 1 : 0, {
-          duration,
-          easing: Easing$1.bezier(x1, y1, x2, y2)
-        })
-      };
-    };
-    _f._closure = {
-      theme: {
-        kitt: {
-          fullscreenModal: {
-            animation: {
-              overlay: theme.kitt.fullscreenModal.animation.overlay
-            }
-          }
-        }
-      },
-      withTiming,
-      visible,
-      Easing: {
-        bezier: Easing$1.bezier
-      }
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      })
     };
-    _f.asString = "function _f(){const{theme,withTiming,visible,Easing}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.fullscreenModal.animation.overlay;const[x1,y1,x2,y2]=easing;return{opacity:withTiming(visible?1:0,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)})};}}";
-    _f.__workletHash = 7884472191878;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/FullscreenModal/components/NativeOpacityAnimation.tsx (14:40)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
+  });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [StyleSheet.absoluteFillObject, opacityStyle],
     children: children
@@ -6524,59 +6264,24 @@ function NativeSlideInAnimation({
     // Since animation callback is called on component mount, we must make sure that the animation has been runed once to call it an exit
     if (!visible && hasRunAnimationRef.current) onExited();
   }
-  const translateStyle = useAnimatedStyle(function () {
-    const _f = function () {
-      const {
-        duration,
-        easing
-      } = theme.kitt.fullscreenModal.animation.content;
-      const [x1, y1, x2, y2] = easing;
-      return {
-        transform: [{
-          translateY: withTiming(visible ? 0 : wHeight, {
-            duration,
-            easing: Easing$1.bezier(x1, y1, x2, y2)
-          }, function () {
-            const _f = function (isFinished) {
-              if (!isFinished) return;
-              runOnJS(handleAnimationFinished)();
-            };
-            _f._closure = {
-              runOnJS,
-              handleAnimationFinished
-            };
-            _f.asString = "function _f(isFinished){const{runOnJS,handleAnimationFinished}=jsThis._closure;{if(!isFinished)return;runOnJS(handleAnimationFinished)();}}";
-            _f.__workletHash = 14707844242190;
-            _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/FullscreenModal/components/NativeSlideInAnimation.tsx (45:12)";
-            return _f;
-          }())
-        }]
-      };
-    };
-    _f._closure = {
-      theme: {
-        kitt: {
-          fullscreenModal: {
-            animation: {
-              content: theme.kitt.fullscreenModal.animation.content
-            }
-          }
-        }
-      },
-      withTiming,
-      visible,
-      wHeight,
-      Easing: {
-        bezier: Easing$1.bezier
-      },
-      runOnJS,
-      handleAnimationFinished
+  const translateStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.fullscreenModal.animation.content;
+    const [x1, y1, x2, y2] = easing;
+    return {
+      transform: [{
+        translateY: withTiming(visible ? 0 : wHeight, {
+          duration,
+          easing: Easing$1.bezier(x1, y1, x2, y2)
+        }, isFinished => {
+          if (!isFinished) return;
+          runOnJS(handleAnimationFinished)();
+        })
+      }]
     };
-    _f.asString = "function _f(){const{theme,withTiming,visible,wHeight,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.fullscreenModal.animation.content;const[x1,y1,x2,y2]=easing;return{transform:[{translateY:withTiming(visible?0:wHeight,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();})}]};}}";
-    _f.__workletHash = 16793352522068;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/FullscreenModal/components/NativeSlideInAnimation.tsx (35:42)";
-    return _f;
-  }());
+  });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [{
       transform: [{
@@ -6886,52 +6591,18 @@ function useNativeAnimation({
 }) {
   const theme = useTheme();
   const pressed = useSharedValue(!!isPressed);
-  const opacityStyles = useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        opacity: withSpring(pressed.value ? 1 : 0)
-      };
-    };
-    _f._closure = {
-      withSpring,
-      pressed
-    };
-    _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
-    _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/hooks/useNativeAnimation.ts (24:41)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
-  const scaleStyles = useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        transform: [{
-          scale: withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base.default)
-        }]
-      };
+  const opacityStyles = useAnimatedStyle(() => {
+    return {
+      opacity: withSpring(pressed.value ? 1 : 0)
     };
-    _f._closure = {
-      withSpring,
-      pressed,
-      theme: {
-        kitt: {
-          iconButton: {
-            scale: {
-              base: {
-                active: theme.kitt.iconButton.scale.base.active,
-                default: theme.kitt.iconButton.scale.base.default
-              }
-            }
-          }
-        }
-      }
+  });
+  const scaleStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        scale: withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base.default)
+      }]
     };
-    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
-    _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/hooks/useNativeAnimation.ts (30:39)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
+  });
   return {
     opacityStyles,
     scaleStyles,
@@ -6961,7 +6632,7 @@ function IconButton({
   color = 'black',
   disabled,
   testID,
-  accessibilityLabel,
+  ariaLabel,
   accessibilityRole = 'button',
   isHoveredInternal,
   isPressedInternal,
@@ -6982,14 +6653,12 @@ function IconButton({
     disabled: disabled,
     width: "kitt.iconButton.width",
     height: "kitt.iconButton.height",
-    accessibilityLabel: accessibilityLabel,
+    "aria-label": ariaLabel,
     accessibilityRole: accessibilityRole,
     _web: {
       style: {
         backfaceVisibility: 'hidden',
-        transform: [{
-          translate3d: '0'
-        }]
+        transform: 'translate3d(0px)'
       }
     },
     borderRadius: "kitt.iconButton.borderRadius",
@@ -9266,21 +8935,11 @@ function AnimatedLoaderCircle({
   } = theme.kitt.pageLoader;
   const centerCoord = size * 0.5;
   const circlePerimeter = 2 * Math.PI * (size * 0.5 - strokeWidth);
-  const strokeAnimation = useAnimatedProps(function () {
-    const _f = function () {
-      return {
-        strokeDashoffset: circlePerimeter - circlePerimeter * progress.value
-      };
-    };
-    _f._closure = {
-      circlePerimeter,
-      progress
+  const strokeAnimation = useAnimatedProps(() => {
+    return {
+      strokeDashoffset: circlePerimeter - circlePerimeter * progress.value
     };
-    _f.asString = "function _f(){const{circlePerimeter,progress}=jsThis._closure;{return{strokeDashoffset:circlePerimeter-circlePerimeter*progress.value};}}";
-    _f.__workletHash = 1345639818356;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/PageLoader/AnimatedLoaderCircle.tsx (23:43)";
-    return _f;
-  }());
+  });
   return /*#__PURE__*/jsx(AnimatedCircle, {
     "transform-origin": "center center",
     strokeWidth: strokeWidth,
@@ -9345,23 +9004,13 @@ function AnimatedFillCircleContainer({
       easing: Easing$1.linear
     }), isInfinitAnimation$1));
   }, [progress, animation, duration]);
-  const rotationStyles = useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        transform: [{
-          rotate: `${360 * progress.value}deg`
-        }]
-      };
-    };
-    _f._closure = {
-      progress
+  const rotationStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        rotate: `${360 * progress.value}deg`
+      }]
     };
-    _f.asString = "function _f(){const{progress}=jsThis._closure;{return{transform:[{rotate:360*progress.value+\"deg\"}]};}}";
-    _f.__workletHash = 16553090406738;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/PageLoader/AnimatedFillCircleContainer.tsx (36:42)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [StyleSheet.absoluteFill, rotationStyles],
     children: children
@@ -9709,25 +9358,13 @@ function SkeletonContent({
       }), -1);
     }
   }, [sharedX, width, isLoading, theme]);
-  const linearGradientStyle = useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        transform: [{
-          translateX: interpolate(sharedX.value, [0, 1], [-width, width])
-        }]
-      };
-    };
-    _f._closure = {
-      interpolate,
-      sharedX,
-      width
+  const linearGradientStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateX: interpolate(sharedX.value, [0, 1], [-width, width])
+      }]
     };
-    _f.asString = "function _f(){const{interpolate,sharedX,width}=jsThis._closure;{return{transform:[{translateX:interpolate(sharedX.value,[0,1],[-width,width])}]};}}";
-    _f.__workletHash = 1670955855244;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Skeleton/SkeletonContent.tsx (36:47)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   return /*#__PURE__*/jsx(View, {
     height: "100%",
     width: "100%",
@@ -10601,9 +10238,6 @@ const Arrow = /*#__PURE__*/forwardRef(({
   display
 }, ref) => {
   const theme = useTheme();
-  const transformStyle = [{
-    rotate: position === 'bottom' ? '180deg' : '0deg'
-  }];
   return /*#__PURE__*/jsx(View, {
     ref: ref,
     display: display || {
@@ -10615,7 +10249,7 @@ const Arrow = /*#__PURE__*/forwardRef(({
     left: left,
     top: top,
     style: {
-      transform: transformStyle
+      transform: `rotate(${position === 'bottom' ? '180deg' : '0deg'})`
     },
     children: /*#__PURE__*/jsx(SvgArrowinline, {
       color: theme.kitt.tooltip.backgroundColor,
@@ -10723,32 +10357,14 @@ function Tooltip({
   const [floatingWidth, setFloatingWidth] = useState(undefined);
   const pressableRectRef = useRef(undefined);
   const pressed = useSharedValue(defaultVisible);
-  const animatedStyles = useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        opacity: withSpring(pressed.value ? theme.kitt.tooltip.opacity : 0),
-        transform: [{
-          scale: withSpring(pressed.value ? 1 : 0.8)
-        }]
-      };
-    };
-    _f._closure = {
-      withSpring,
-      pressed,
-      theme: {
-        kitt: {
-          tooltip: {
-            opacity: theme.kitt.tooltip.opacity
-          }
-        }
-      }
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: withSpring(pressed.value ? theme.kitt.tooltip.opacity : 0),
+      transform: [{
+        scale: withSpring(pressed.value ? 1 : 0.8)
+      }]
     };
-    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{opacity:withSpring(pressed.value?theme.kitt.tooltip.opacity:0),transform:[{scale:withSpring(pressed.value?1:0.8)}]};}}";
-    _f.__workletHash = 1087298059737;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Tooltip/Tooltip.tsx (112:42)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
+  });
   const {
     x,
     y,
@@ -10914,7 +10530,6 @@ function TypographyEmoji({
     emoji: emoji,
     alignSelf: "center",
     _web: {
-      // @ts-expect-error -- transform expects number, but string works on web
       style: {
         transform: 'translateY(20%)'
       },