@ornikar/kitt-universal 5.0.2 → 7.0.0

package/dist/index-browser-all.es.ios.js

@@ -1,13 +1,13 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import { Animated, Easing, useWindowDimensions, Image, Platform, Linking, View, Pressable, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1, TextInput, ActivityIndicator } from 'react-native';
+import { useWindowDimensions, Image, Platform, Linking, Pressable, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1, TextInput, View, Animated as Animated$1, Easing, ActivityIndicator } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import { useRef, useEffect, cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment as Fragment$1, Children } from 'react';
+import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, useRef, useEffect, Fragment as Fragment$1, Children } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import Animated$1, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withRepeat, withTiming, Easing as Easing$1, interpolate } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withRepeat, withTiming, Easing as Easing$1, interpolate } from 'react-native-reanimated';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { parse } from 'twemoji-parser';
 import { openBrowserAsync } from 'expo-web-browser';
@@ -19,71 +19,37 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { useFloating, offset, shift, flip } from '@floating-ui/react-native';
 import { makeDecorator } from '@storybook/addons';
 
-function SpinningIcon(_ref) {
-  var children = _ref.children;
-  var animationRef = useRef(new Animated.Value(0));
-  var rotation = animationRef.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg']
-  });
-  useEffect(function () {
-    if (process.env.TESTS) return undefined;
-    var animation = Animated.loop(Animated.timing(animationRef.current, {
-      toValue: 1,
-      duration: 1100,
-      easing: Easing.linear,
-      useNativeDriver: true
-    }));
-    animation.start();
-    return function () {
-      if (process.env.TESTS) return undefined;
-      animation.stop();
-      return undefined;
-    };
-  }, []);
-  return /*#__PURE__*/jsx(Animated.View, {
-    style: {
-      transform: [{
-        rotate: rotation
-      }]
-    },
-    children: children
-  });
-}
-
+var defaultIconSize = 20;
 var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Icon__IconContainer"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
-  var color = _ref.color;
-  return color;
+  var $color = _ref.$color;
+  return $color;
 }, function (_ref2) {
-  var size = _ref2.size;
-  return size;
+  var $size = _ref2.$size;
+  return $size;
 }, function (_ref3) {
-  var size = _ref3.size;
-  return size;
+  var $size = _ref3.$size;
+  return $size;
 }, function (_ref4) {
-  var _ref4$align = _ref4.align,
-      align = _ref4$align === void 0 ? 'auto' : _ref4$align;
-  return align;
+  var _ref4$$align = _ref4.$align,
+      $align = _ref4$$align === void 0 ? 'auto' : _ref4$$align;
+  return $align;
 });
 function Icon(_ref5) {
   var icon = _ref5.icon,
       _ref5$size = _ref5.size,
-      size = _ref5$size === void 0 ? 20 : _ref5$size,
-      spin = _ref5.spin,
+      size = _ref5$size === void 0 ? defaultIconSize : _ref5$size,
       align = _ref5.align,
       color = _ref5.color;
   var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
   return /*#__PURE__*/jsx(IconContainer$1, {
-    align: align,
-    size: size,
-    color: color,
-    children: spin ? /*#__PURE__*/jsx(SpinningIcon, {
-      children: clonedIcon
-    }) : clonedIcon
+    $align: align,
+    $size: size,
+    $color: color,
+    children: clonedIcon
   });
 }
 
@@ -136,10 +102,6 @@ var KittBreakpointsMax = {
 };
 
 var _excluded$h = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
-
-function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -232,14 +194,14 @@ function Typography(_ref4) {
   var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
-    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$q({
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread({
       $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$q({
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread({
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
@@ -252,13 +214,13 @@ function Typography(_ref4) {
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$q({
+  return /*#__PURE__*/jsx(Typography, _objectSpread({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$q({
+  return /*#__PURE__*/jsx(Typography, _objectSpread({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -266,7 +228,7 @@ function TypographyParagraph(props) {
 var createHeading = function (level, defaultBase) {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
-    return /*#__PURE__*/jsx(Typography, _objectSpread$q(_objectSpread$q({
+    return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({
       accessibilityRole: "header",
       base: defaultBase
     }, props), {}, {
@@ -302,11 +264,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$g = ["size", "base", "round", "light"];
-
-function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$g = ["size", "round", "light", "sizeVariant"];
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -317,9 +275,10 @@ var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
 })(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
   var theme = _ref.theme,
       $isRound = _ref.$isRound,
-      $size = _ref.$size;
+      $size = _ref.$size,
+      $sizeVariant = _ref.$sizeVariant;
   if ($isRound) return "".concat($size / 2, "px");
-  return "".concat(theme.kitt.avatar.borderRadius, "px");
+  return "".concat($sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius, "px");
 }, function (_ref2) {
   var theme = _ref2.theme,
       $isLight = _ref2.$isLight;
@@ -338,8 +297,8 @@ function AvatarContent(_ref5) {
       firstname = _ref5.firstname,
       lastname = _ref5.lastname,
       alt = _ref5.alt,
-      base = _ref5.base,
-      isLight = _ref5.isLight;
+      isLight = _ref5.isLight,
+      sizeVariant = _ref5.sizeVariant;
 
   if (src) {
     return /*#__PURE__*/jsx(Image, {
@@ -356,8 +315,8 @@ function AvatarContent(_ref5) {
 
   if (firstname && lastname) {
     return /*#__PURE__*/jsx(Typography.Text, {
-      base: base,
-      variant: "bold",
+      base: sizeVariant === 'large' ? 'body-large' : 'body',
+      variant: sizeVariant === 'large' ? 'bold' : 'regular',
       color: isLight ? 'black' : 'white',
       children: getInitials(firstname, lastname)
     });
@@ -373,24 +332,38 @@ function AvatarContent(_ref5) {
 function Avatar(_ref6) {
   var _ref6$size = _ref6.size,
       size = _ref6$size === void 0 ? 40 : _ref6$size,
-      _ref6$base = _ref6.base,
-      base = _ref6$base === void 0 ? 'body-small' : _ref6$base,
       round = _ref6.round,
       light = _ref6.light,
+      sizeVariant = _ref6.sizeVariant,
       props = _objectWithoutProperties(_ref6, _excluded$g);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$p({
+    $sizeVariant: sizeVariant,
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
       size: size,
-      base: base,
-      isLight: light
+      isLight: light,
+      sizeVariant: sizeVariant
     }, props))
   });
 }
 
+var hasVariant = function (button, variant) {
+  return variant in button;
+};
+
+function getVariantValuesIfExist(theme, type, variant) {
+  var button = theme.kitt.button[type];
+
+  if (hasVariant(button, variant)) {
+    return button[variant];
+  }
+
+  return theme.kitt.button[type]["default"];
+}
+
 var StyledPressable = /*#__PURE__*/styled.Pressable.withConfig({
   displayName: "AnimatedButtonPressable__StyledPressable"
 })(["", ""], function (_ref) {
@@ -398,7 +371,7 @@ var StyledPressable = /*#__PURE__*/styled.Pressable.withConfig({
   if ($isStretch) return undefined;
   return 'align-self: flex-start;';
 });
-var StyledAnimatedView = /*#__PURE__*/styled(Animated$1.View).withConfig({
+var StyledAnimatedView = /*#__PURE__*/styled(Animated.View).withConfig({
   displayName: "AnimatedButtonPressable__StyledAnimatedView"
 })(["border-radius:", "px;"], function (_ref2) {
   var theme = _ref2.theme;
@@ -409,6 +382,7 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref3, ref) {
       disabled = _ref3.disabled,
       accessibilityRole = _ref3.accessibilityRole,
       $type = _ref3.$type,
+      $variant = _ref3.$variant,
       $isStretch = _ref3.$isStretch,
       href = _ref3.href,
       hrefAttrs = _ref3.hrefAttrs,
@@ -417,9 +391,11 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var theme = /*#__PURE__*/useTheme();
   var pressed = useSharedValue(0);
   var color = useSharedValue(0);
-  var _theme$kitt$button$$t = theme.kitt.button[$type],
-      backgroundColor = _theme$kitt$button$$t.backgroundColor,
-      pressedBackgroundColor = _theme$kitt$button$$t.pressedBackgroundColor;
+
+  var _getVariantValuesIfEx = getVariantValuesIfExist(theme, $type, $variant),
+      backgroundColor = _getVariantValuesIfEx.backgroundColor,
+      pressedBackgroundColor = _getVariantValuesIfEx.pressedBackgroundColor;
+
   var scale = theme.kitt.button.scale;
   var scaleStyles = useAnimatedStyle(function () {
     var _f = function () {
@@ -447,7 +423,7 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     };
     _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 (53:41)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Button/AnimatedButtonPressable.tsx (56:41)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -508,10 +484,11 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
 }, function (_ref6) {
   var theme = _ref6.theme,
       $isDisabled = _ref6.$isDisabled,
-      $type = _ref6.$type;
-  if ($isDisabled) return theme.kitt.button.disabled.backgroundColor;
+      $type = _ref6.$type,
+      $variant = _ref6.$variant;
+  if ($isDisabled) return theme.kitt.button.disabled["default"].backgroundColor;
   if (Platform.OS !== 'web') return 'transparent';
-  return theme.kitt.button[$type].backgroundColor;
+  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
 }, function (_ref7) {
   var theme = _ref7.theme,
       $isLarge = _ref7.$isLarge,
@@ -528,23 +505,19 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
 var _excluded$f = ["color"],
     _excluded2$2 = ["color"];
 
-function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
       props = _objectWithoutProperties(_ref, _excluded$f);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread$o(_objectSpread$o({}, props), {}, {
+  return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
     color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
   }));
 }
 
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$o({
+  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
     color: color
   }, props));
 }
@@ -554,28 +527,24 @@ function TypographyIcon(_ref2) {
       props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
-    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$o({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
       color: color
     }, props));
   }
 
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$o({}, props));
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
 }
 
 function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$e = ["type", "isDisabled", "$isStretch", "icon", "children"];
-
-function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+var _excluded$e = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
-function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var getTextColorByType = function (type) {
+var getTextColorByType = function (type, variant) {
   switch (type) {
     case 'primary':
-      return 'white';
+      return variant === 'ghost' ? 'primary' : 'white';
 
     case 'white':
       return 'white';
@@ -626,14 +595,12 @@ var StyledIconContainer$1 = /*#__PURE__*/styled.View.withConfig({
 function ButtonIcon(_ref3) {
   var icon = _ref3.icon,
       color = _ref3.color,
-      spin = _ref3.spin,
       iconPosition = _ref3.iconPosition,
       testID = _ref3.testID;
   return /*#__PURE__*/jsx(StyledIconContainer$1, {
     $iconPosition: iconPosition,
     children: /*#__PURE__*/jsx(TypographyIcon, {
       icon: icon,
-      spin: spin,
       testID: testID,
       color: color
     })
@@ -647,7 +614,6 @@ function ButtonContentChildren(_ref4) {
   var type = _ref4.type,
       icon = _ref4.icon,
       iconPosition = _ref4.iconPosition,
-      iconSpin = _ref4.iconSpin,
       isDisabled = _ref4.isDisabled,
       color = _ref4.color,
       children = _ref4.children;
@@ -661,9 +627,8 @@ function ButtonContentChildren(_ref4) {
   var isWebSubtle = isSubtle(type) && Platform.OS === 'web' && !isDisabled;
 
   if (!children) {
-    return /*#__PURE__*/jsx(TypographyIcon, {
-      spin: iconSpin // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ,
+    return /*#__PURE__*/jsx(TypographyIcon // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    , {
       icon: icon,
       color: isWebSubtle ? 'inherit' : color
     });
@@ -671,12 +636,11 @@ function ButtonContentChildren(_ref4) {
 
   var buttonIconSharedProps = {
     type: type,
-    spin: iconSpin,
     iconPosition: iconPosition,
     color: isWebSubtle ? 'inherit' : color
   };
   return /*#__PURE__*/jsxs(StyledChildrenWithIcon, {
-    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$n(_objectSpread$n({}, buttonIconSharedProps), {}, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
       testID: "button-left-icon",
       icon: icon
     })) : null, /*#__PURE__*/jsx(StyledButtonText, {
@@ -687,7 +651,7 @@ function ButtonContentChildren(_ref4) {
       ,
       color: isWebSubtle ? undefined : color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$n(_objectSpread$n({}, buttonIconSharedProps), {}, {
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
       icon: icon
     })) : null]
   });
@@ -709,18 +673,19 @@ var ButtonContentContainer = /*#__PURE__*/styled.View.withConfig({
 });
 function ButtonContent(_ref7) {
   var type = _ref7.type,
+      variant = _ref7.variant,
       isDisabled = _ref7.isDisabled,
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
       props = _objectWithoutProperties(_ref7, _excluded$e);
 
-  var color = isDisabled ? 'black-light' : getTextColorByType(type);
+  var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
     $isSubtle: isSubtle(type),
     $isStretch: $isStretch,
     $isIconOnly: Boolean(!children && icon),
-    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$n(_objectSpread$n({
+    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread(_objectSpread({
       icon: icon,
       type: type,
       isDisabled: isDisabled,
@@ -738,7 +703,7 @@ var StyledDisabled = /*#__PURE__*/styled.View.withConfig({
   var _theme$kitt$button = theme.kitt.button,
       borderWidth = _theme$kitt$button.borderWidth,
       disabled = _theme$kitt$button.disabled;
-  return "".concat(borderWidth.disabled, "px solid ").concat(disabled.borderColor);
+  return "".concat(borderWidth.disabled, "px solid ").concat(disabled["default"].borderColor);
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.button.borderRadius;
@@ -748,19 +713,25 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
       disabled = _ref.disabled,
       stretch = _ref.stretch,
       large = _ref.large,
       icon = _ref.icon,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
-      iconSpin = _ref.iconSpin,
       testID = _ref.testID,
       href = _ref.href,
       hrefAttrs = _ref.hrefAttrs,
       _ref$accessibilityRol = _ref.accessibilityRole,
       accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
       onPress = _ref.onPress;
+
+  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && type !== 'primary') {
+    throw new Error('variant=ghost is only allowed with type=primary');
+  }
+
   return /*#__PURE__*/jsx(AnimatedButtonPressable, {
     ref: ref,
     accessibilityRole: accessibilityRole,
@@ -770,19 +741,21 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled: disabled,
     $isStretch: stretch,
     $type: type,
+    $variant: variant,
     onPress: onPress,
     children: /*#__PURE__*/jsxs(BaseStyledButtonPressable, {
       $type: type,
+      $variant: variant,
       $isStretch: stretch,
       $isLarge: large,
       $isDisabled: disabled,
       children: [/*#__PURE__*/jsx(ButtonContent, {
         type: type,
+        variant: variant,
         $isStretch: stretch,
         isDisabled: disabled,
         icon: icon,
         iconPosition: iconPosition,
-        iconSpin: iconSpin,
         children: children
       }), Platform.OS !== 'web' && disabled ? /*#__PURE__*/jsx(StyledDisabled, {}) : null]
     })
@@ -858,10 +831,6 @@ var defaultOpenLinkBehavior = {
 };
 
 var _excluded$d = ["as", "href", "openLinkBehavior", "onPress"];
-
-function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
@@ -870,9 +839,13 @@ function ExternalLink(_ref) {
       onPress = _ref.onPress,
       rest = _objectWithoutProperties(_ref, _excluded$d);
 
-  return /*#__PURE__*/jsx(Component, _objectSpread$m(_objectSpread$m({}, rest), {}, {
-    onPress: function handleOnPress() {
-      if (onPress) onPress();
+  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
+    onPress: function handleOnPress(e) {
+      if (onPress) {
+        onPress(e);
+        if (e !== null && e !== void 0 && e.defaultPrevented) return;
+      }
+
       if (!href) return;
 
       switch (openLinkBehavior["native"]) {
@@ -954,6 +927,9 @@ var avatar = {
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
+  },
+  large: {
+    borderRadius: 30
   }
 };
 
@@ -977,56 +953,77 @@ var button = {
     }
   },
   contentPadding: {
-    "default": '8px 16px 7px',
-    large: '12px 24px 11px',
-    disabled: '6px 14px 5px'
+    "default": '7px 16px 7px',
+    large: '11px 24px 11px',
+    disabled: '5px 14px 5px'
   },
   transition: {
     duration: '200ms',
     timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
   },
   "default": {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-    hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-    focusBorderColor: 'rgba(0, 0, 0, 0.1)'
+    "default": {
+      backgroundColor: 'rgba(0, 0, 0, 0.05)',
+      pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+      hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+      focusBorderColor: 'rgba(0, 0, 0, 0.1)'
+    }
   },
   primary: {
-    backgroundColor: colors.primary,
-    pressedBackgroundColor: colors.primaryLight,
-    hoverBackgroundColor: colors.primaryLight,
-    focusBorderColor: 'rgba(76, 52, 224, 0.2)'
+    "default": {
+      backgroundColor: colors.primary,
+      pressedBackgroundColor: colors.primaryLight,
+      hoverBackgroundColor: colors.primaryLight,
+      focusBorderColor: 'rgba(76, 52, 224, 0.2)'
+    },
+    ghost: {
+      backgroundColor: colors.uiBackgroundLight,
+      pressedBackgroundColor: colors.uiBackground,
+      hoverBackgroundColor: colors.hover,
+      focusBorderColor: 'rgba(255,255,255, 0.4)',
+      color: colors.primary,
+      hoverColor: colors.hover,
+      activeColor: colors.hover
+    }
   },
   white: {
-    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-    pressedBackgroundColor: 'rgba(255, 255, 255, 0.1)',
-    hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
-    focusBorderColor: 'rgba(255, 255, 255, 0.1)'
+    "default": {
+      backgroundColor: 'rgba(255, 255, 255, 0.05)',
+      pressedBackgroundColor: 'rgba(255, 255, 255, 0.1)',
+      hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
+      focusBorderColor: 'rgba(255, 255, 255, 0.1)'
+    }
   },
   subtle: {
-    backgroundColor: colors.transparent,
-    pressedBackgroundColor: colors.transparent,
-    hoverBackgroundColor: colors.transparent,
-    focusBorderColor: 'rgba(76, 52, 224, 0.2)',
-    color: colors.primary,
-    hoverColor: 'rgba(76, 52, 224, 0.8)',
-    activeColor: 'rgba(76, 52, 224, 0.8)'
+    "default": {
+      backgroundColor: colors.transparent,
+      pressedBackgroundColor: colors.transparent,
+      hoverBackgroundColor: colors.transparent,
+      focusBorderColor: 'rgba(76, 52, 224, 0.2)',
+      color: colors.primary,
+      hoverColor: 'rgba(76, 52, 224, 0.8)',
+      activeColor: 'rgba(76, 52, 224, 0.8)'
+    }
   },
   'subtle-dark': {
-    backgroundColor: colors.transparent,
-    pressedBackgroundColor: colors.transparent,
-    hoverBackgroundColor: colors.transparent,
-    focusBorderColor: 'rgba(0, 0, 0, 0.1)',
-    color: colors.black,
-    hoverColor: 'rgba(0, 0, 0, 0.8)',
-    activeColor: 'rgba(0, 0, 0, 0.8)'
+    "default": {
+      backgroundColor: colors.transparent,
+      pressedBackgroundColor: colors.transparent,
+      hoverBackgroundColor: colors.transparent,
+      focusBorderColor: 'rgba(0, 0, 0, 0.1)',
+      color: colors.black,
+      hoverColor: 'rgba(0, 0, 0, 0.8)',
+      activeColor: 'rgba(0, 0, 0, 0.8)'
+    }
   },
   disabled: {
-    backgroundColor: colors.disabled,
-    pressedBackgroundColor: colors.disabled,
-    hoverBackgroundColor: colors.disabled,
-    focusBorderColor: lateOceanColorPalette.black100,
-    borderColor: lateOceanColorPalette.black100
+    "default": {
+      backgroundColor: colors.disabled,
+      pressedBackgroundColor: colors.disabled,
+      hoverBackgroundColor: colors.disabled,
+      focusBorderColor: lateOceanColorPalette.black100,
+      borderColor: lateOceanColorPalette.black100
+    }
   }
 };
 
@@ -1306,14 +1303,14 @@ var iconButton = {
   },
   disabled: {
     scale: 1,
-    backgroundColor: button.disabled.backgroundColor,
-    borderColor: button.disabled.borderColor
+    backgroundColor: button.disabled["default"].backgroundColor,
+    borderColor: button.disabled["default"].borderColor
   },
   "default": {
-    pressedBackgroundColor: button["default"].pressedBackgroundColor
+    pressedBackgroundColor: button["default"]["default"].pressedBackgroundColor
   },
   white: {
-    pressedBackgroundColor: button.white.hoverBackgroundColor
+    pressedBackgroundColor: button.white["default"].hoverBackgroundColor
   }
 };
 
@@ -1324,6 +1321,10 @@ var listItem = {
   innerMargin: 8
 };
 
+var pageLoader = {
+  size: 60
+};
+
 var shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1414,19 +1415,20 @@ var theme = {
     lateOcean: lateOceanColorPalette
   },
   avatar: avatar,
+  breakpoints: breakpoints,
   button: button,
   card: card,
   feedbackMessage: feedbackMessage,
   forms: forms,
-  typography: typography,
-  tag: tag,
-  shadows: shadows,
   fullScreenModal: fullScreenModal,
   iconButton: iconButton,
   listItem: listItem,
-  tooltip: tooltip,
+  pageLoader: pageLoader,
+  shadows: shadows,
   skeleton: skeleton,
-  breakpoints: breakpoints
+  tag: tag,
+  tooltip: tooltip,
+  typography: typography
 };
 
 function matchWindowSize(_ref, _ref2) {
@@ -1646,10 +1648,6 @@ function DatePickerInputPart(_ref4) {
   });
 }
 
-function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function prefixWithZero(value) {
   return "".concat(value).padStart(2, '0');
 }
@@ -1703,14 +1701,14 @@ function DatePickerInputs(_ref4) {
     onPress: handleModalOpen,
     children: [/*#__PURE__*/jsx(PartContainer, {
       $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$l(_objectSpread$l({}, sharedPartProps), {}, {
+      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread(_objectSpread({}, sharedPartProps), {}, {
         partName: "day",
         value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
         placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.day
       }))
     }), /*#__PURE__*/jsx(PartContainer, {
       $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$l(_objectSpread$l({}, sharedPartProps), {}, {
+      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread(_objectSpread({}, sharedPartProps), {}, {
         partName: "month",
         value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
         placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.month
@@ -1718,7 +1716,7 @@ function DatePickerInputs(_ref4) {
     }), /*#__PURE__*/jsx(PartContainer, {
       $isLast: true,
       $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$l(_objectSpread$l({}, sharedPartProps), {}, {
+      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread(_objectSpread({}, sharedPartProps), {}, {
         partName: "year",
         value: currentValue ? currentValue.getFullYear() : undefined,
         placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.year
@@ -1728,10 +1726,6 @@ function DatePickerInputs(_ref4) {
 }
 
 var _excluded$c = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
-
-function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function DatePickerAndroid(_ref) {
   var onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
@@ -1748,7 +1742,7 @@ function DatePickerAndroid(_ref) {
     if (onBlur) onBlur();
   };
 
-  return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread$k({
+  return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
     handleModalOpen: function handleModalOpen() {
       setIsFocused(true);
       if (onFocus) onFocus();
@@ -1776,24 +1770,22 @@ function DatePickerAndroid(_ref) {
   }, props));
 }
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
 var OverlayPressable = /*#__PURE__*/styled(Pressable).withConfig({
   displayName: "Overlay__OverlayPressable"
 })(function (_ref) {
   var theme = _ref.theme;
-  return _objectSpread$j(_objectSpread$j({}, StyleSheet.absoluteFillObject), {}, {
+  return _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.kitt.colors.overlay.dark
   });
 });
 function Overlay(_ref2) {
-  var onPress = _ref2.onPress;
+  var onPress = _ref2.onPress,
+      children = _ref2.children;
   return /*#__PURE__*/jsx(OverlayPressable, {
     accessibilityRole: "none",
     onPress: onPress,
-    children: /*#__PURE__*/jsx(View, {})
+    children: children
   });
 }
 
@@ -1832,10 +1824,6 @@ function ModalFooter(_ref3) {
 }
 
 var _excluded$b = ["as", "children"];
-
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
       children = _ref.children,
@@ -1843,16 +1831,12 @@ function StyleWebWrapper(_ref) {
 
   if (Platform.OS !== 'web') return children;
   // as or default to div. If as is undefined, T is div but typescript is not sure
-  return /*#__PURE__*/jsx(as || 'div', _objectSpread$i(_objectSpread$i({}, props), {}, {
+  return /*#__PURE__*/jsx(as || 'div', _objectSpread(_objectSpread({}, props), {}, {
     children: children
   }));
 }
 
 var _excluded$a = ["color", "disabled"];
-
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var PressableIconButtonWebWrapper = undefined;
 var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
   displayName: "PressableIconButton__StyledPressableIconButton"
@@ -1891,13 +1875,13 @@ function PressableIconButton(_ref5) {
     as: PressableIconButtonWebWrapper,
     $isWhite: color === 'white',
     $isDisabled: Boolean(disabled),
-    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$h(_objectSpread$h({}, props), {}, {
+    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread(_objectSpread({}, props), {}, {
       disabled: disabled
     }))
   });
 }
 
-var AnimatedIconButtonBackground = /*#__PURE__*/styled(Animated$1.View).withConfig({
+var AnimatedIconButtonBackground = /*#__PURE__*/styled(Animated.View).withConfig({
   displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground"
 })(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], function (_ref) {
   var theme = _ref.theme,
@@ -1917,7 +1901,7 @@ var AnimatedIconButtonBackground = /*#__PURE__*/styled(Animated$1.View).withConf
   var theme = _ref4.theme;
   return theme.kitt.iconButton.height;
 });
-var AnimatedViewContainer = /*#__PURE__*/styled(Animated$1.View).withConfig({
+var AnimatedViewContainer = /*#__PURE__*/styled(Animated.View).withConfig({
   displayName: "PressableAnimatedContainer__AnimatedViewContainer"
 })(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
 function PressableAnimatedContainer(_ref5) {
@@ -2170,10 +2154,6 @@ Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function getDatePickerDisplayMode() {
   if (Platform.OS === 'android') return 'calendar';
   if (Platform.OS === 'ios') return 'spinner';
@@ -2193,7 +2173,7 @@ function PlatformDateTimePicker(_ref) {
   var iosProps = Platform.OS === 'ios' ? {
     textColor: theme.kitt.colors.primary
   } : {};
-  return /*#__PURE__*/jsx(DateTimePicker, _objectSpread$g(_objectSpread$g({
+  return /*#__PURE__*/jsx(DateTimePicker, _objectSpread(_objectSpread({
     is24Hour: true,
     testID: testID,
     value: value || defaultDate,
@@ -2210,10 +2190,6 @@ function PlatformDateTimePicker(_ref) {
 
 var _excluded$9 = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function ModalTitle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(Modal.Header, {
@@ -2250,7 +2226,7 @@ function ModalPlatformDateTimePicker(_ref2) {
       children: [title ? /*#__PURE__*/jsx(ModalTitle, {
         children: title
       }) : null, /*#__PURE__*/jsx(Modal.Body, {
-        children: /*#__PURE__*/jsx(PlatformDateTimePicker, _objectSpread$f(_objectSpread$f({}, props), {}, {
+        children: /*#__PURE__*/jsx(PlatformDateTimePicker, _objectSpread(_objectSpread({}, props), {}, {
           value: currentValue,
           onChange: function handleChange(newDate) {
             setCurrentValue(function (prev) {
@@ -2277,10 +2253,6 @@ function ModalPlatformDateTimePicker(_ref2) {
 }
 
 var _excluded$8 = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
-
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function DatePicker(_ref) {
   var value = _ref.value,
       pickerUITestID = _ref.pickerUITestID,
@@ -2308,7 +2280,7 @@ function DatePicker(_ref) {
       setCurrentValue = _useState6[1];
 
   if (Platform.OS === 'android') {
-    return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread$e({
+    return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
       pickerDefaultDate: pickerDefaultDate,
       pickerUITestID: pickerUITestID,
       currentValue: currentValue,
@@ -2327,7 +2299,7 @@ function DatePicker(_ref) {
   };
 
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(DatePickerInputs, _objectSpread$e({
+    children: [/*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
       handleModalOpen: function handleModalOpen() {
         if (onFocus) onFocus();
         setIsPickerUIVisible(true);
@@ -2357,10 +2329,6 @@ var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
 })(["position:relative;"]);
 
 var _excluded$7 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
-
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
   displayName: "InputText__StyledTextInput"
 })(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
@@ -2420,7 +2388,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   });
   return /*#__PURE__*/jsxs(InputTextContainer, {
     $isDisabled: disabled,
-    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread$d(_objectSpread$d({
+    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread(_objectSpread({
       ref: ref,
       nativeID: id,
       editable: !disabled,
@@ -2447,11 +2415,8 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   });
 });
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function InputEmail(props) {
-  return /*#__PURE__*/jsx(InputText, _objectSpread$c({
+  return /*#__PURE__*/jsx(InputText, _objectSpread({
     autoCompleteType: "email",
     keyboardType: "email-address",
     textContentType: "emailAddress",
@@ -2549,20 +2514,13 @@ function InputIcon(_ref) {
   });
 }
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function InputPressable(_ref) {
   var props = _extends({}, _ref);
 
-  return /*#__PURE__*/jsx(Pressable, _objectSpread$b({}, props));
+  return /*#__PURE__*/jsx(Pressable, _objectSpread({}, props));
 }
 
 var _excluded$6 = ["isPasswordDefaultVisible", "right"];
-
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
@@ -2573,7 +2531,7 @@ function InputPassword(_ref) {
       isVisible = _useState2[0],
       setIsVisible = _useState2[1];
 
-  return /*#__PURE__*/jsx(InputText, _objectSpread$a(_objectSpread$a({}, props), {}, {
+  return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({}, props), {}, {
     textContentType: "password",
     autoCompleteType: "password",
     autoCorrect: false,
@@ -2592,11 +2550,8 @@ function InputPassword(_ref) {
   }));
 }
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function InputPhone(props) {
-  return /*#__PURE__*/jsx(InputText, _objectSpread$9(_objectSpread$9({}, props), {}, {
+  return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({}, props), {}, {
     autoCompleteType: "tel",
     keyboardType: "number-pad",
     textContentType: "telephoneNumber"
@@ -2760,14 +2715,11 @@ function Radio(_ref16) {
   });
 }
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function TextArea(_ref) {
   var props = _extends({}, _ref);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(InputText, _objectSpread$8({
+  return /*#__PURE__*/jsx(InputText, _objectSpread({
     multiline: true,
     textAlignVertical: "top",
     minHeight: theme.kitt.forms.textArea.minHeight
@@ -2932,11 +2884,48 @@ function FullScreenModal(_ref2) {
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-var _excluded$5 = ["children"];
+function SpinningIcon(_ref) {
+  var icon = _ref.icon,
+      color = _ref.color;
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  if (process.env.NODE_ENV !== 'production' && !color) {
+    throw new Error("Invalid color passed to SpinningIcon: ".concat(String(color)));
+  }
+
+  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
+    color: color
+  });
+  var animationRef = useRef(new Animated$1.Value(0));
+  var rotation = animationRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  useEffect(function () {
+    if (process.env.NODE_ENV === 'test') return undefined;
+    var animation = Animated$1.loop(Animated$1.timing(animationRef.current, {
+      toValue: 1,
+      duration: 1100,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }));
+    animation.start();
+    return function () {
+      if (process.env.NODE_ENV === 'test') return undefined;
+      animation.stop();
+      return undefined;
+    };
+  }, []);
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: {
+      transform: [{
+        rotate: rotation
+      }]
+    },
+    children: clonedIcon
+  });
+}
 
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$5 = ["children"];
 var ContentView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemContent__ContentView"
 })(["flex:1 0 0%;align-self:center;"]);
@@ -2944,17 +2933,13 @@ function ListItemContent(_ref) {
   var children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$5);
 
-  return /*#__PURE__*/jsx(ContentView, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+  return /*#__PURE__*/jsx(ContentView, _objectSpread(_objectSpread({}, rest), {}, {
     children: children
   }));
 }
 
 var _excluded$4 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
-
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SideContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemSideContent__SideContainerView"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -2973,7 +2958,7 @@ function ListItemSideContainer(_ref3) {
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
       rest = _objectWithoutProperties(_ref3, _excluded$4);
 
-  return /*#__PURE__*/jsx(SideContainerView, _objectSpread$6(_objectSpread$6({
+  return /*#__PURE__*/jsx(SideContainerView, _objectSpread(_objectSpread({
     side: side
   }, rest), {}, {
     children: children
@@ -2991,7 +2976,7 @@ function ListItemSideContent(_ref5) {
       align = _ref5$align === void 0 ? 'auto' : _ref5$align,
       rest = _objectWithoutProperties(_ref5, _excluded2$1);
 
-  return /*#__PURE__*/jsx(SideContentView, _objectSpread$6(_objectSpread$6({
+  return /*#__PURE__*/jsx(SideContentView, _objectSpread(_objectSpread({
     align: align
   }, rest), {}, {
     children: children
@@ -2999,10 +2984,6 @@ function ListItemSideContent(_ref5) {
 }
 
 var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
-
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItem__ContainerView"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -3044,13 +3025,13 @@ function ListItem(_ref5) {
       rest = _objectWithoutProperties(_ref5, _excluded$3);
 
   var Wrapper = onPress ? Pressable : Fragment$1;
-  var wrapperProps = onPress ? _objectSpread$5({
+  var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
     onPress: onPress
   }, rest) : undefined;
   var containerProps = onPress ? undefined : rest;
-  return /*#__PURE__*/jsx(Wrapper, _objectSpread$5(_objectSpread$5({}, wrapperProps), {}, {
-    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread$5(_objectSpread$5({
+  return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread(_objectSpread({
       withPadding: withPadding,
       borders: borders
     }, containerProps), {}, {
@@ -3070,31 +3051,11 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-function getActivityIndicatorSize(size) {
-  if (Platform.OS === 'android') return size;
-  return size < 36 ? 'small' : 'large';
-}
-
-function Loader(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 20 : _ref$size;
-  var theme = /*#__PURE__*/useTheme();
-  var colorHex = theme.kitt.typography.colors[color];
-  return /*#__PURE__*/jsx(ActivityIndicator, {
-    testID: "ActivityIndicator",
-    color: colorHex,
-    size: getActivityIndicatorSize(size)
-  });
-}
-
-function LargeLoader(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color;
-  return /*#__PURE__*/jsx(Loader, {
+function LoaderIcon(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/jsx(SpinningIcon, {
     color: color,
-    size: 60
+    icon: /*#__PURE__*/jsx(ArcIcon, {})
   });
 }
 
@@ -3273,6 +3234,22 @@ function Notification(_ref) {
   });
 }
 
+function getActivityIndicatorSize(size) {
+  if (Platform.OS === 'android') return size;
+  return size < 36 ? 'small' : 'large';
+}
+
+function PageLoader() {
+  var theme = /*#__PURE__*/useTheme();
+  var size = theme.kitt.pageLoader.size;
+  var colorHex = theme.kitt.typography.colors.primary;
+  return /*#__PURE__*/jsx(ActivityIndicator, {
+    testID: "ActivityIndicator",
+    color: colorHex,
+    size: getActivityIndicatorSize(size)
+  });
+}
+
 var Container$2 = /*#__PURE__*/styled.View.withConfig({
   displayName: "SkeletonContent__Container"
 })(["background-color:", ";border-color:", ";height:100%;width:100%;"], function (_ref) {
@@ -3282,7 +3259,7 @@ var Container$2 = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref2.theme;
   return theme.kitt.skeleton.flareColor;
 });
-var AnimatedLinearGradient = Animated$1.createAnimatedComponent(LinearGradient);
+var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
 function SkeletonContent(_ref3) {
   var isLoading = _ref3.isLoading,
       width = _ref3.width;
@@ -3570,10 +3547,6 @@ function Story(_ref) {
 var _excluded$2 = ["title", "children", "internalIsDemoSection"],
     _excluded2 = ["title", "children"],
     _excluded3 = ["title", "children"];
-
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledSection = /*#__PURE__*/styled.View.withConfig({
   displayName: "StorySection__StyledSection"
 })(["margin-bottom:32px;"]);
@@ -3584,7 +3557,7 @@ function StorySection(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$2);
 
   if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
-  return /*#__PURE__*/jsxs(StyledSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level2, {
       children: title
     }), children]
@@ -3599,7 +3572,7 @@ function SubSection(_ref2) {
       children = _ref2.children,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
-  return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level3, {
       children: title
     }), children]
@@ -3615,7 +3588,7 @@ function BlockSection(_ref3) {
       children = _ref3.children,
       props = _objectWithoutProperties(_ref3, _excluded3);
 
-  return /*#__PURE__*/jsxs(StyledBlockSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledBlockSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level4, {
       children: title
     }), children]
@@ -3965,9 +3938,6 @@ function TimePicker(_ref) {
   });
 }
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledTooltipView = /*#__PURE__*/styled.View.withConfig({
   displayName: "TooltipView__StyledTooltipView"
 })(["align-items:center;"]);
@@ -3989,7 +3959,7 @@ var StyledTooltipContent = /*#__PURE__*/styled.View.withConfig({
 
 function ArrowView(props) {
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(View, _objectSpread$3(_objectSpread$3({}, props), {}, {
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
@@ -4025,9 +3995,6 @@ function TooltipView(_ref7) {
 
 var tooltipDefaultPosition = 'top';
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // Since the tooltip use absolute positionning, we need a parent to provide the relative root
 var TooltipContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "Tooltip__TooltipContainer"
@@ -4114,12 +4081,12 @@ function Tooltip(_ref) {
       ref: floating,
       accessibilityElementsHidden: !pressed.value,
       importantForAccessibility: pressed.value === true ? 'auto' : 'no-hide-descendants',
-      style: _objectSpread$2(_objectSpread$2({}, StyleSheet.absoluteFillObject), {}, {
+      style: _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
         top: y && position === 'bottom' ? y : undefined,
         bottom: y && position === 'top' ? y : undefined,
         left: x !== null && x !== void 0 ? x : 0
       }),
-      children: /*#__PURE__*/jsx(Animated$1.View, {
+      children: /*#__PURE__*/jsx(Animated.View, {
         style: [opacityStyles],
         children: /*#__PURE__*/jsx(TooltipView, {
           position: position,
@@ -4158,10 +4125,6 @@ function TypographyEmoji(_ref2) {
 }
 
 var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
-
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TypographyLinkWebWrapper = undefined;
 var StyledLink = /*#__PURE__*/styled.Text.withConfig({
   displayName: "TypographyLink__StyledLink"
@@ -4187,7 +4150,7 @@ function TypographyLink(_ref4) {
       onPress = _ref4.onPress,
       otherProps = _objectWithoutProperties(_ref4, _excluded$1);
 
-  return /*#__PURE__*/jsx(Typography, _objectSpread$1(_objectSpread$1({}, otherProps), {}, {
+  return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, otherProps), {}, {
     accessibilityRole: "none",
     children: /*#__PURE__*/jsx(StyleWebWrapper, {
       as: TypographyLinkWebWrapper,
@@ -4247,9 +4210,6 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
 // type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
 // export function withTheme<Props extends { theme: DefaultTheme }, C>(
@@ -4271,5 +4231,5 @@ function withTheme(WrappedComponent) {
   });
 }
 
-export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, Notification, Overlay, PageLoader, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.ios.js.map