@ornikar/kitt-universal 9.4.0 → 9.7.0

package/dist/index-node-14.17.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const kittIcons = require('@ornikar/kitt-icons');
+const nativeBase = require('native-base');
+const React = require('react');
 const reactNative = require('react-native');
+const Animated = require('react-native-reanimated');
 const styled = require('styled-components/native');
-const React = require('react');
 const jsxRuntime = require('react/jsx-runtime');
-const nativeBase = require('native-base');
-const Animated = require('react-native-reanimated');
+const kittIcons = require('@ornikar/kitt-icons');
 const twemojiParser = require('twemoji-parser');
 const WebBrowser = require('expo-web-browser');
 const DateTimePicker = require('@react-native-community/datetimepicker');
@@ -23,42 +23,183 @@ const addons = require('@storybook/addons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
-const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
+const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 const DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
 const Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
 
-const defaultIconSize = 20;
-const IconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Icon__IconContainer",
-  componentId: "kitt-universal__sc-usm0ol-0"
-})(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
-  $color
-}) => $color, ({
-  $size
-}) => $size, ({
-  $size
-}) => $size, ({
-  $align = 'auto'
-}) => $align);
-function Icon({
-  icon,
-  size = defaultIconSize,
-  align,
-  color
-}) {
-  const clonedIcon = /*#__PURE__*/React.cloneElement(icon, {
-    color
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
-    $align: align,
-    $size: size,
-    $color: color,
-    children: clonedIcon
-  });
+const Stack = nativeBase.Stack;
+const VStack = nativeBase.VStack;
+const HStack = nativeBase.HStack;
+
+function warn(message) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(message);
+  }
+}
+function deprecatedMessage(symbol, deprecation, replaceBy) {
+  const replaceMessage = replaceBy === undefined ? '' : `, please use ${replaceBy} instead`;
+  warn(`[Deprecation] in ${symbol}: ${deprecation} is deprecated${replaceMessage}.`);
+}
+function deprecatedInComponent(component, deprecation, replaceBy) {
+  deprecatedMessage(`<${component} />`, deprecation, replaceBy);
 }
 
+const hasVariant = (button, variant) => {
+  return variant in button;
+};
+
+function getVariantValuesIfExist(theme, type, variant) {
+  const button = theme.kitt.button[type];
+
+  if (hasVariant(button, variant)) {
+    return button[variant];
+  }
+
+  return theme.kitt.button[type].default;
+}
+
+const StyledPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "AnimatedButtonPressable__StyledPressable",
+  componentId: "kitt-universal__sc-175vyve-0"
+})(["", ""], ({
+  $isStretch
+}) => {
+  if ($isStretch) return undefined;
+  return 'align-self: flex-start;';
+});
+const StyledAnimatedView = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
+  displayName: "AnimatedButtonPressable__StyledAnimatedView",
+  componentId: "kitt-universal__sc-175vyve-1"
+})(["border-radius:", "px;"], ({
+  theme
+}) => theme.kitt.button.borderRadius);
+const AnimatedButtonPressable = /*#__PURE__*/React.forwardRef(({
+  children,
+  disabled,
+  accessibilityRole,
+  $type,
+  $variant,
+  $isStretch,
+  href,
+  hrefAttrs,
+  testID,
+  onPress
+}, ref) => {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const pressed = Animated.useSharedValue(0);
+  const color = Animated.useSharedValue(0);
+  const {
+    backgroundColor,
+    pressedBackgroundColor
+  } = getVariantValuesIfExist(theme, $type, $variant);
+  const {
+    scale
+  } = theme.kitt.button;
+  const scaleStyles = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      return {
+        backgroundColor: Animated.interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
+        transform: [{
+          scale: Animated.withSpring(pressed.value ? scale.base.active : scale.base.default)
+        }]
+      };
+    };
+
+    _f._closure = {
+      interpolateColor: Animated.interpolateColor,
+      color,
+      backgroundColor,
+      pressedBackgroundColor,
+      withSpring: Animated.withSpring,
+      pressed,
+      scale: {
+        base: {
+          active: scale.base.active,
+          default: 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/AnimatedButtonPressable.tsx (56:41)";
+    _f.__optimalization = 2;
+    return _f;
+  }());
+
+  const handlePressInOut = pressIn => {
+    color.value = Animated.withSpring(pressIn ? 1 : 0);
+    pressed.value = pressIn ? 1 : 0;
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsx(StyledPressable, {
+    ref: ref,
+    disabled: disabled,
+    accessibilityRole: accessibilityRole,
+    testID: testID,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    $isStretch: $isStretch,
+    $type: $type,
+    onPress: onPress,
+    onPressIn: () => {
+      handlePressInOut(true);
+    },
+    onPressOut: () => {
+      handlePressInOut(false);
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledAnimatedView, {
+      style: disabled ? [{
+        transform: [{
+          scale: 1
+        }]
+      }] : [scaleStyles],
+      children: children
+    })
+  });
+});
+
+const BaseStyledButtonPressable = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "BaseStyledButtonPressable",
+  componentId: "kitt-universal__sc-4k8lse-0"
+})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], ({
+  theme
+}) => theme.kitt.button.minWidth, ({
+  theme,
+  $isStretch
+}) => $isStretch ? '100%' : `${theme.kitt.button.maxWidth}px`, ({
+  $isStretch
+}) => $isStretch ? '100%' : 'auto', ({
+  theme
+}) => theme.kitt.button.minHeight, ({
+  theme
+}) => theme.kitt.button.borderRadius, ({
+  theme,
+  $isDisabled,
+  $type,
+  $variant
+}) => {
+  if ($isDisabled) return theme.kitt.button.disabled.default.backgroundColor;
+  if (reactNative.Platform.OS !== 'web') return 'transparent';
+  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
+}, ({
+  theme,
+  $size,
+  $isDisabled
+}) => {
+  const {
+    large,
+    default: defaultPadding,
+    disabled: disabledPadding,
+    xLarge
+  } = theme.kitt.button.contentPadding;
+  if ($size === 'large') return large;
+  if ($size === 'xlarge') return xLarge;
+  if ($isDisabled) return disabledPadding;
+  return defaultPadding;
+});
+
 const KittBreakpoints = {
   /**
    * min-width: 0
@@ -275,257 +416,39 @@ Typography.h3 = createHeading(3, 'header3');
 /** @deprecated use Typography.Header4 */
 
 Typography.h4 = createHeading(4, 'header4');
-/** @deprecated use Typography.Header6 */
-
-Typography.h5 = createHeading(5, 'header5');
-
-const getInitials = (firstname, lastname) => `${firstname[0]}${lastname[0]}`.toUpperCase();
-
-const StyledAvatarView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Avatar__StyledAvatarView",
-  componentId: "kitt-universal__sc-9miubv-0"
-})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
-  theme,
-  $isRound,
-  $size,
-  $sizeVariant
-}) => {
-  if ($isRound) return `${$size / 2}px`;
-  return `${$sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius}px`;
-}, ({
-  theme,
-  $isLight
-}) => $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
-  $size
-}) => $size, ({
-  $size
-}) => $size);
-
-function AvatarContent({
-  size,
-  src,
-  firstname,
-  lastname,
-  alt,
-  isLight,
-  sizeVariant
-}) {
-  if (src) {
-    return /*#__PURE__*/jsxRuntime.jsx(reactNative.Image, {
-      source: {
-        uri: src
-      },
-      style: {
-        width: size,
-        height: size
-      },
-      accessibilityLabel: alt
-    });
-  }
-
-  if (firstname && lastname) {
-    return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: sizeVariant === 'large' ? 'body-large' : 'body-small',
-      variant: sizeVariant === 'large' ? 'bold' : 'regular',
-      color: isLight ? 'black' : 'white',
-      children: getInitials(firstname, lastname)
-    });
-  }
-
-  return /*#__PURE__*/jsxRuntime.jsx(Icon, {
-    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.UserIcon, {}),
-    color: isLight ? 'black' : 'white',
-    size: size / 2
-  });
-}
-
-function Avatar({
-  size = 40,
-  round,
-  light,
-  sizeVariant,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
-    $size: size,
-    $isRound: round,
-    $isLight: light,
-    $sizeVariant: sizeVariant,
-    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
-      size: size,
-      isLight: light,
-      sizeVariant: sizeVariant,
-      ...props
-    })
-  });
-}
-
-function warn(message) {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn(message);
-  }
-}
-function deprecatedMessage(symbol, deprecation, replaceBy) {
-  const replaceMessage = replaceBy === undefined ? '' : `, please use ${replaceBy} instead`;
-  warn(`[Deprecation] in ${symbol}: ${deprecation} is deprecated${replaceMessage}.`);
-}
-function deprecatedInComponent(component, deprecation, replaceBy) {
-  deprecatedMessage(`<${component} />`, deprecation, replaceBy);
-}
-
-const hasVariant = (button, variant) => {
-  return variant in button;
-};
-
-function getVariantValuesIfExist(theme, type, variant) {
-  const button = theme.kitt.button[type];
-
-  if (hasVariant(button, variant)) {
-    return button[variant];
-  }
-
-  return theme.kitt.button[type].default;
-}
-
-const StyledPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
-  displayName: "AnimatedButtonPressable__StyledPressable",
-  componentId: "kitt-universal__sc-175vyve-0"
-})(["", ""], ({
-  $isStretch
-}) => {
-  if ($isStretch) return undefined;
-  return 'align-self: flex-start;';
-});
-const StyledAnimatedView = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
-  displayName: "AnimatedButtonPressable__StyledAnimatedView",
-  componentId: "kitt-universal__sc-175vyve-1"
-})(["border-radius:", "px;"], ({
-  theme
-}) => theme.kitt.button.borderRadius);
-const AnimatedButtonPressable = /*#__PURE__*/React.forwardRef(({
-  children,
-  disabled,
-  accessibilityRole,
-  $type,
-  $variant,
-  $isStretch,
-  href,
-  hrefAttrs,
-  testID,
-  onPress
-}, ref) => {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const pressed = Animated.useSharedValue(0);
-  const color = Animated.useSharedValue(0);
-  const {
-    backgroundColor,
-    pressedBackgroundColor
-  } = getVariantValuesIfExist(theme, $type, $variant);
-  const {
-    scale
-  } = theme.kitt.button;
-  const scaleStyles = Animated.useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        backgroundColor: Animated.interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
-        transform: [{
-          scale: Animated.withSpring(pressed.value ? scale.base.active : scale.base.default)
-        }]
-      };
-    };
-
-    _f._closure = {
-      interpolateColor: Animated.interpolateColor,
-      color,
-      backgroundColor,
-      pressedBackgroundColor,
-      withSpring: Animated.withSpring,
-      pressed,
-      scale: {
-        base: {
-          active: scale.base.active,
-          default: 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/AnimatedButtonPressable.tsx (56:41)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
-
-  const handlePressInOut = pressIn => {
-    color.value = Animated.withSpring(pressIn ? 1 : 0);
-    pressed.value = pressIn ? 1 : 0;
-  };
-
-  return /*#__PURE__*/jsxRuntime.jsx(StyledPressable, {
-    ref: ref,
-    disabled: disabled,
-    accessibilityRole: accessibilityRole,
-    testID: testID,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    $isStretch: $isStretch,
-    $type: $type,
-    onPress: onPress,
-    onPressIn: () => {
-      handlePressInOut(true);
-    },
-    onPressOut: () => {
-      handlePressInOut(false);
-    },
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledAnimatedView, {
-      style: disabled ? [{
-        transform: [{
-          scale: 1
-        }]
-      }] : [scaleStyles],
-      children: children
-    })
-  });
-});
+/** @deprecated use Typography.Header6 */
 
-const BaseStyledButtonPressable = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "BaseStyledButtonPressable",
-  componentId: "kitt-universal__sc-4k8lse-0"
-})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], ({
-  theme
-}) => theme.kitt.button.minWidth, ({
-  theme,
-  $isStretch
-}) => $isStretch ? '100%' : `${theme.kitt.button.maxWidth}px`, ({
-  $isStretch
-}) => $isStretch ? '100%' : 'auto', ({
-  theme
-}) => theme.kitt.button.minHeight, ({
-  theme
-}) => theme.kitt.button.borderRadius, ({
-  theme,
-  $isDisabled,
-  $type,
-  $variant
-}) => {
-  if ($isDisabled) return theme.kitt.button.disabled.default.backgroundColor;
-  if (reactNative.Platform.OS !== 'web') return 'transparent';
-  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
-}, ({
-  theme,
-  $size,
-  $isDisabled
-}) => {
-  const {
-    large,
-    default: defaultPadding,
-    disabled: disabledPadding,
-    xLarge
-  } = theme.kitt.button.contentPadding;
-  if ($size === 'large') return large;
-  if ($size === 'xlarge') return xLarge;
-  if ($isDisabled) return disabledPadding;
-  return defaultPadding;
-});
+Typography.h5 = createHeading(5, 'header5');
+
+const defaultIconSize = 20;
+const IconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Icon__IconContainer",
+  componentId: "kitt-universal__sc-usm0ol-0"
+})(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
+  $color
+}) => $color, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size, ({
+  $align = 'auto'
+}) => $align);
+function Icon({
+  icon,
+  size = defaultIconSize,
+  align,
+  color
+}) {
+  const clonedIcon = /*#__PURE__*/React.cloneElement(icon, {
+    color
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
+    $align: align,
+    $size: size,
+    $color: color,
+    children: clonedIcon
+  });
+}
 
 function TypographyIconSpecifiedColor({
   color,
@@ -674,7 +597,7 @@ function ButtonContentChildren({
   };
   return /*#__PURE__*/jsxRuntime.jsxs(StyledChildrenWithIcon, {
     children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, { ...buttonIconSharedProps,
-      testID: "button-left-icon",
+      testID: "button.ButtonContent.leftButtonIcon",
       icon: icon
     }) : null, /*#__PURE__*/jsxRuntime.jsx(StyledButtonText, {
       base: "body",
@@ -820,7 +743,244 @@ const Button = /*#__PURE__*/React.forwardRef(({
       }), reactNative.Platform.OS !== 'web' && disabled ? /*#__PURE__*/jsxRuntime.jsx(StyledDisabled, {}) : null]
     })
   });
-});
+});
+
+function SpinningIcon({
+  icon,
+  color
+}) {
+  if (process.env.NODE_ENV !== 'production' && !color) {
+    throw new Error(`Invalid color passed to SpinningIcon: ${String(color)}`);
+  }
+
+  const clonedIcon = /*#__PURE__*/React.cloneElement(icon, {
+    color
+  });
+  const animationRef = React.useRef(new reactNative.Animated.Value(0));
+  const rotation = animationRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === 'test') return undefined;
+    const animation = reactNative.Animated.loop(reactNative.Animated.timing(animationRef.current, {
+      toValue: 1,
+      duration: 1100,
+      easing: reactNative.Easing.linear,
+      useNativeDriver: true
+    }));
+    animation.start();
+    return () => {
+      if (process.env.NODE_ENV === 'test') return undefined;
+      animation.stop();
+      return undefined;
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Animated.View, {
+    style: {
+      transform: [{
+        rotate: rotation
+      }]
+    },
+    children: clonedIcon
+  });
+}
+
+function LoaderIcon({
+  color
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
+    color: color,
+    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.ArcIcon, {})
+  });
+}
+
+const View = nativeBase.View;
+const ScrollView = nativeBase.ScrollView;
+const Pressable = nativeBase.Pressable;
+
+function matchWindowSize({
+  width,
+  height
+}, {
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
+}) {
+  const hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
+  const hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
+  return hasWidthMatched && hasHeightMatched;
+}
+function useMatchWindowSize(options) {
+  const {
+    width,
+    height
+  } = reactNative.useWindowDimensions();
+  return matchWindowSize({
+    width,
+    height
+  }, options);
+}
+
+function ActionsItem({
+  as,
+  onPress,
+  disabled,
+  icon,
+  ...props
+}) {
+  const isMedium = useMatchWindowSize({
+    minWidth: KittBreakpoints.MEDIUM
+  });
+  const [isLoading, setIsLoading] = React.useState(false);
+  const mountedRef = React.useRef(false); // effect just for tracking mounted state, as onPress can unmount the ActionButton
+
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    children: /*#__PURE__*/jsxRuntime.jsx(as, { ...props,
+      stretch: !isMedium ? true : undefined,
+      disabled: isLoading ? true : disabled,
+      icon: isLoading ? /*#__PURE__*/jsxRuntime.jsx(LoaderIcon, {}) : icon,
+      onPress: e => {
+        (async () => {
+          if (!onPress) return;
+          setIsLoading(true);
+
+          try {
+            await onPress(e);
+
+            if (mountedRef.current) {
+              setIsLoading(false);
+            }
+          } catch (err) {
+            if (mountedRef.current) {
+              setIsLoading(false);
+            }
+
+            throw err;
+          }
+        })();
+      }
+    })
+  });
+}
+
+function ActionsButton({ ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(ActionsItem, {
+    as: Button,
+    ...props
+  });
+}
+
+function Actions({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Stack, {
+    alignItems: {
+      base: 'stretch',
+      medium: 'center'
+    },
+    direction: {
+      base: 'column',
+      medium: 'row'
+    },
+    flex: 1,
+    ...props,
+    space: "kitt.3",
+    children: children
+  });
+}
+Actions.Button = ActionsButton;
+Actions.Item = ActionsItem;
+
+const getInitials = (firstname, lastname) => `${firstname[0]}${lastname[0]}`.toUpperCase();
+
+const StyledAvatarView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Avatar__StyledAvatarView",
+  componentId: "kitt-universal__sc-9miubv-0"
+})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
+  theme,
+  $isRound,
+  $size,
+  $sizeVariant
+}) => {
+  if ($isRound) return `${$size / 2}px`;
+  return `${$sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius}px`;
+}, ({
+  theme,
+  $isLight
+}) => $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size);
+
+function AvatarContent({
+  size,
+  src,
+  firstname,
+  lastname,
+  alt,
+  isLight,
+  sizeVariant
+}) {
+  if (src) {
+    return /*#__PURE__*/jsxRuntime.jsx(reactNative.Image, {
+      source: {
+        uri: src
+      },
+      style: {
+        width: size,
+        height: size
+      },
+      accessibilityLabel: alt
+    });
+  }
+
+  if (firstname && lastname) {
+    return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: sizeVariant === 'large' ? 'body-large' : 'body-small',
+      variant: sizeVariant === 'large' ? 'bold' : 'regular',
+      color: isLight ? 'black' : 'white',
+      children: getInitials(firstname, lastname)
+    });
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, {
+    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.UserIcon, {}),
+    color: isLight ? 'black' : 'white',
+    size: size / 2
+  });
+}
+
+function Avatar({
+  size = 40,
+  round,
+  light,
+  sizeVariant,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
+    $size: size,
+    $isRound: round,
+    $isLight: light,
+    $sizeVariant: sizeVariant,
+    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
+      size: size,
+      isLight: light,
+      sizeVariant: sizeVariant,
+      ...props
+    })
+  });
+}
 
 const Container$5 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Card__Container",
@@ -848,6 +1008,90 @@ function Card({
   });
 }
 
+const useNativeAnimation = ({
+  selected,
+  disabled,
+  isPressedInternal
+}) => {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const pressed = Animated.useSharedValue(Boolean(isPressedInternal));
+  const progress = Animated.useDerivedValue(function () {
+    const _f = function () {
+      return Animated.withTiming(pressed.value ? 1 : 0, {
+        duration: theme.kitt.choices.item.transition.duration
+      });
+    };
+
+    _f._closure = {
+      withTiming: Animated.withTiming,
+      pressed,
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              transition: {
+                duration: theme.kitt.choices.item.transition.duration
+              }
+            }
+          }
+        }
+      }
+    };
+    _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 = Animated.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: Animated.interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
+      };
+    };
+
+    _f._closure = {
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              backgroundColor: theme.kitt.choices.item.backgroundColor
+            }
+          }
+        }
+      },
+      disabled,
+      selected,
+      interpolateColor: Animated.interpolateColor,
+      progress
+    };
+    _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;
+    },
+    onPressOut: () => {
+      pressed.value = false;
+    },
+    backgroundStyles
+  };
+};
+
 function getCurrentTextColor({
   isDisabled,
   isSelected,
@@ -882,7 +1126,7 @@ const DisabledBorder = /*#__PURE__*/styled__default(reactNative.View).withConfig
   } = theme.kitt.choices.item.disabled.border;
   return styled.css(["border:", "px solid ", ";"], width, color);
 });
-const ChoiceItemView = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
+const ChoiceItemView = /*#__PURE__*/styled__default(reactNative.Platform.OS === 'web' ? reactNative.View : Animated__default.View).withConfig({
   displayName: "ChoiceItem__ChoiceItemView",
   componentId: "kitt-universal__sc-wuv3y6-1"
 })(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], ({
@@ -944,74 +1188,15 @@ function ChoiceItem({
   onBlur,
   onFocus
 }) {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const pressed = Animated.useSharedValue(Boolean(isPressedInternal));
-  const progress = Animated.useDerivedValue(function () {
-    const _f = function () {
-      return Animated.withTiming(pressed.value ? 1 : 0, {
-        duration: theme.kitt.choices.item.transition.duration
-      });
-    };
-
-    _f._closure = {
-      withTiming: Animated.withTiming,
-      pressed,
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              transition: {
-                duration: theme.kitt.choices.item.transition.duration
-              }
-            }
-          }
-        }
-      }
-    };
-    _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/ChoiceItem.tsx (180:35)";
-    return _f;
-  }());
-  const backgroundStyles = Animated.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: Animated.interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
-      };
-    };
-
-    _f._closure = {
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              backgroundColor: theme.kitt.choices.item.backgroundColor
-            }
-          }
-        }
-      },
-      disabled,
-      selected,
-      interpolateColor: Animated.interpolateColor,
-      progress
-    };
-    _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/ChoiceItem.tsx (184:44)";
-    return _f;
-  }());
+  const {
+    onPressIn,
+    onPressOut,
+    backgroundStyles
+  } = useNativeAnimation({
+    selected,
+    disabled,
+    isPressedInternal
+  });
 
   const handleChange = () => {
     if (!onChange) return; // Checkbox can be toggled
@@ -1024,7 +1209,7 @@ function ChoiceItem({
     onChange(value);
   };
 
-  return /*#__PURE__*/jsxRuntime.jsx(nativeBase.Pressable, {
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
     disabled: disabled,
     accessibilityRole: type,
     accessibilityState: {
@@ -1038,12 +1223,8 @@ function ChoiceItem({
       handleChange();
       if (onBlur) onBlur(e);
     },
-    onPressIn: () => {
-      pressed.value = true;
-    },
-    onPressOut: () => {
-      pressed.value = false;
-    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
     children: ({
       isHovered,
       isPressed
@@ -1693,8 +1874,14 @@ const input = {
 };
 
 const inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 const inputTag = {
@@ -1951,30 +2138,6 @@ const theme = {
   navigationModal
 };
 
-function matchWindowSize({
-  width,
-  height
-}, {
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight
-}) {
-  const hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
-  const hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
-  return hasWidthMatched && hasHeightMatched;
-}
-function useMatchWindowSize(options) {
-  const {
-    width,
-    height
-  } = reactNative.useWindowDimensions();
-  return matchWindowSize({
-    width,
-    height
-  }, options);
-}
-
 // eslint-disable-next-line no-restricted-imports
 function createWindowSizeHelper(dimensions) {
   return {
@@ -2993,42 +3156,26 @@ function InputFeedback({
   });
 }
 
-const FieldContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputField__FieldContainer",
-  componentId: "kitt-universal__sc-13fkixs-0"
-})(["padding:5px 0 10px;"]);
-const FeedbackContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputField__FeedbackContainer",
-  componentId: "kitt-universal__sc-13fkixs-1"
-})(["", ";"], ({
-  theme
-}) => theme.responsive.ifWindowSizeMatches({
-  minWidth: KittBreakpoints.SMALL
-}, 'padding-top: 10px', 'padding-top: 5px'));
-const FieldLabelContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputField__FieldLabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-2"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
-const LabelContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputField__LabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-3"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.iconMarginLeft);
 function InputField({
   label,
   labelFeedback,
   input,
   feedback
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(LabelContainer, {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsxs(View, {
+    paddingTop: theme.kitt.forms.inputField.containerPaddingTop,
+    paddingBottom: theme.kitt.forms.inputField.containerPaddingBottom,
+    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingBottom: theme.kitt.forms.inputField.labelContainerPaddingBottom,
+      children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+        marginRight: theme.kitt.forms.inputField.labelFeedbackMarginLeft,
         children: label
       }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(FeedbackContainer, {
+    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      paddingTop: theme.kitt.forms.inputField.feedbackPaddingTop,
       children: feedback
     }) : null]
   });
@@ -3407,47 +3554,6 @@ function FullScreenModal({
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-function SpinningIcon({
-  icon,
-  color
-}) {
-  if (process.env.NODE_ENV !== 'production' && !color) {
-    throw new Error(`Invalid color passed to SpinningIcon: ${String(color)}`);
-  }
-
-  const clonedIcon = /*#__PURE__*/React.cloneElement(icon, {
-    color
-  });
-  const animationRef = React.useRef(new reactNative.Animated.Value(0));
-  const rotation = animationRef.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg']
-  });
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'test') return undefined;
-    const animation = reactNative.Animated.loop(reactNative.Animated.timing(animationRef.current, {
-      toValue: 1,
-      duration: 1100,
-      easing: reactNative.Easing.linear,
-      useNativeDriver: true
-    }));
-    animation.start();
-    return () => {
-      if (process.env.NODE_ENV === 'test') return undefined;
-      animation.stop();
-      return undefined;
-    };
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Animated.View, {
-    style: {
-      transform: [{
-        rotate: rotation
-      }]
-    },
-    children: clonedIcon
-  });
-}
-
 const ContentView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
@@ -3570,15 +3676,6 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-function LoaderIcon({
-  color
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
-    color: color,
-    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.ArcIcon, {})
-  });
-}
-
 function IconContent({
   type,
   color
@@ -3945,14 +4042,6 @@ function KittNativeBaseProvider({
   });
 }
 
-const Stack = nativeBase.Stack;
-const VStack = nativeBase.VStack;
-const HStack = nativeBase.HStack;
-
-const View = nativeBase.View;
-const ScrollView = nativeBase.ScrollView;
-const Pressable = nativeBase.Pressable;
-
 const ViewWithPadding = /*#__PURE__*/styled__default(reactNative.View).withConfig({
   displayName: "ContentPadding__ViewWithPadding",
   componentId: "kitt-universal__sc-1rprqcv-0"
@@ -5002,7 +5091,7 @@ function ModalDateTimePicker({
       }) : null, /*#__PURE__*/jsxRuntime.jsx(Modal.Body, {
         children: /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
           is24Hour: true,
-          testID: "date-picker-native-element",
+          testID: "timePicker.ModalDateTimePicker.dateTimeNativePicker",
           value: currentValue,
           mode: "time",
           display: reactNative.Platform.OS === 'ios' ? 'spinner' : 'default',
@@ -5096,7 +5185,7 @@ function TimePicker({
       children: displayedValue
     }), reactNative.Platform.OS === 'android' && isTimePickerModalVisible ? /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
       is24Hour: true,
-      testID: "date-picker-native-element",
+      testID: "timePicker.TimePicker.dateTimeNativePicker",
       value: dateTimePickerValue,
       mode: "time",
       display: "default",
@@ -5463,6 +5552,7 @@ function MatchWindowSize({
 }
 
 exports.useWindowSize = reactNative.useWindowDimensions;
+exports.Actions = Actions;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Card = Card;