@ornikar/kitt-universal 6.0.0 → 7.0.1

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

@@ -1,8 +1,8 @@
 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 { useWindowDimensions, Image, Platform, Linking, View, Pressable, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1, TextInput, Animated as Animated$1, Easing, 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 { cloneElement, useContext, createContext, forwardRef, useMemo, useState, useRef, useEffect, Fragment as Fragment$1, Children } from 'react';
@@ -102,7 +102,7 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _excluded$i = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+var _excluded$h = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -178,7 +178,7 @@ function Typography(_ref4) {
       large = _ref4.large,
       variant = _ref4.variant,
       color = _ref4.color,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$i);
+      otherProps = _objectWithoutProperties(_ref4, _excluded$h);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -265,7 +265,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$h = ["size", "base", "round", "light"];
+var _excluded$g = ["size", "round", "light", "sizeVariant"];
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -276,9 +276,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;
@@ -297,8 +298,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, {
@@ -315,8 +316,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)
     });
@@ -332,24 +333,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,
-      props = _objectWithoutProperties(_ref6, _excluded$h);
+      sizeVariant = _ref6.sizeVariant,
+      props = _objectWithoutProperties(_ref6, _excluded$g);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
+    $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) {
@@ -368,6 +383,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,
@@ -376,9 +392,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 () {
@@ -406,7 +424,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);
@@ -467,10 +485,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,
@@ -484,12 +503,12 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
   return defaultPadding;
 });
 
-var _excluded$g = ["color"],
-    _excluded2$3 = ["color"];
+var _excluded$f = ["color"],
+    _excluded2$2 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -506,7 +525,7 @@ function TypographyIconInheritColor(props) {
 
 function TypographyIcon(_ref2) {
   var color = _ref2.color,
-      props = _objectWithoutProperties(_ref2, _excluded2$3);
+      props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
     return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
@@ -521,12 +540,12 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$f = ["type", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$e = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
-var getTextColorByType = function (type) {
+var getTextColorByType = function (type, variant) {
   switch (type) {
     case 'primary':
-      return 'white';
+      return variant === 'ghost' ? 'primary' : 'white';
 
     case 'white':
       return 'white';
@@ -655,13 +674,14 @@ 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$f);
+      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,
@@ -684,7 +704,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;
@@ -694,6 +714,8 @@ 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,
@@ -706,6 +728,11 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _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,
@@ -715,14 +742,17 @@ 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,
@@ -801,18 +831,22 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$e = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$d = ["as", "href", "openLinkBehavior", "onPress"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
       _ref$openLinkBehavior = _ref.openLinkBehavior,
       openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
       onPress = _ref.onPress,
-      rest = _objectWithoutProperties(_ref, _excluded$e);
+      rest = _objectWithoutProperties(_ref, _excluded$d);
 
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
-    onPress: function handleOnPress() {
-      if (onPress) onPress();
+    onPress: function handleOnPress(e) {
+      if (onPress) {
+        onPress(e);
+        if (e !== null && e !== void 0 && e.defaultPrevented) return;
+      }
+
       if (!href) return;
 
       switch (openLinkBehavior["native"]) {
@@ -894,6 +928,9 @@ var avatar = {
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
+  },
+  large: {
+    borderRadius: 30
   }
 };
 
@@ -926,47 +963,68 @@ var button = {
     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
+    }
   }
 };
 
@@ -1246,14 +1304,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
   }
 };
 
@@ -1264,6 +1322,10 @@ var listItem = {
   innerMargin: 8
 };
 
+var pageLoader = {
+  size: 60
+};
+
 var shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1354,19 +1416,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) {
@@ -1663,7 +1726,7 @@ function DatePickerInputs(_ref4) {
   });
 }
 
-var _excluded$d = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
+var _excluded$c = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
 function DatePickerAndroid(_ref) {
   var onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
@@ -1674,7 +1737,7 @@ function DatePickerAndroid(_ref) {
       setCurrentValue = _ref.setCurrentValue,
       _onChange = _ref.onChange,
       isFocused = _ref.isFocused,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   var handleClose = function () {
     if (onBlur) onBlur();
@@ -1721,8 +1784,7 @@ function Overlay(_ref2) {
   var onPress = _ref2.onPress;
   return /*#__PURE__*/jsx(OverlayPressable, {
     accessibilityRole: "none",
-    onPress: onPress,
-    children: /*#__PURE__*/jsx(View, {})
+    onPress: onPress
   });
 }
 
@@ -1760,11 +1822,11 @@ function ModalFooter(_ref3) {
   });
 }
 
-var _excluded$c = ["as", "children"];
+var _excluded$b = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   if (Platform.OS !== 'web') return children;
   // as or default to div. If as is undefined, T is div but typescript is not sure
@@ -1794,7 +1856,7 @@ function withTheme(WrappedComponent) {
   });
 }
 
-var _excluded$b = ["color", "disabled"];
+var _excluded$a = ["color", "disabled"];
 var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
   name: "PressableIconButtonWebWrapper",
   "class": "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
@@ -1858,7 +1920,7 @@ var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
 function PressableIconButton(_ref9) {
   var color = _ref9.color,
       disabled = _ref9.disabled,
-      props = _objectWithoutProperties(_ref9, _excluded$b);
+      props = _objectWithoutProperties(_ref9, _excluded$a);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
@@ -2177,7 +2239,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$a = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$9 = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 
 function ModalTitle(_ref) {
   var children = _ref.children;
@@ -2197,7 +2259,7 @@ function ModalPlatformDateTimePicker(_ref2) {
       validateButtonLabel = _ref2.validateButtonLabel,
       onClose = _ref2.onClose,
       onChange = _ref2.onChange,
-      props = _objectWithoutProperties(_ref2, _excluded$a);
+      props = _objectWithoutProperties(_ref2, _excluded$9);
 
   var _useState = useState(value),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2241,7 +2303,7 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
-var _excluded$9 = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
+var _excluded$8 = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
 function DatePicker(_ref) {
   var value = _ref.value,
       pickerUITestID = _ref.pickerUITestID,
@@ -2251,7 +2313,7 @@ function DatePicker(_ref) {
       onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
       pickerDefaultDate = _ref.pickerDefaultDate,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2317,7 +2379,7 @@ var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "InputTextContainer"
 })(["position:relative;"]);
 
-var _excluded$8 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
+var _excluded$7 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
 var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
   displayName: "InputText__StyledTextInput"
 })(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
@@ -2361,7 +2423,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
       keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
       _onFocus = _ref4.onFocus,
       _onBlur = _ref4.onBlur,
-      props = _objectWithoutProperties(_ref4, _excluded$8);
+      props = _objectWithoutProperties(_ref4, _excluded$7);
 
   var theme = /*#__PURE__*/useTheme();
 
@@ -2509,11 +2571,11 @@ function InputPressable(_ref) {
   return /*#__PURE__*/jsx(Pressable, _objectSpread({}, props));
 }
 
-var _excluded$7 = ["isPasswordDefaultVisible", "right"];
+var _excluded$6 = ["isPasswordDefaultVisible", "right"];
 function InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$6);
 
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2875,10 +2937,12 @@ FullScreenModal.Body = FullScreenModalBody;
 
 function SpinningIcon(_ref) {
   var icon = _ref.icon,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? defaultIconSize : _ref$size,
-      align = _ref.align,
       color = _ref.color;
+
+  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
   });
@@ -2902,36 +2966,31 @@ function SpinningIcon(_ref) {
       return undefined;
     };
   }, []);
-  return /*#__PURE__*/jsx(IconContainer$1, {
-    $align: align,
-    $size: size,
-    $color: color,
-    children: /*#__PURE__*/jsx(Animated$1.View, {
-      style: {
-        transform: [{
-          rotate: rotation
-        }]
-      },
-      children: clonedIcon
-    })
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: {
+      transform: [{
+        rotate: rotation
+      }]
+    },
+    children: clonedIcon
   });
 }
 
-var _excluded$6 = ["children"];
+var _excluded$5 = ["children"];
 var ContentView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemContent__ContentView"
 })(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent(_ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$6);
+      rest = _objectWithoutProperties(_ref, _excluded$5);
 
   return /*#__PURE__*/jsx(ContentView, _objectSpread(_objectSpread({}, rest), {}, {
     children: children
   }));
 }
 
-var _excluded$5 = ["children", "side"],
-    _excluded2$2 = ["children", "align"];
+var _excluded$4 = ["children", "side"],
+    _excluded2$1 = ["children", "align"];
 var SideContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemSideContent__SideContainerView"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -2948,7 +3007,7 @@ function ListItemSideContainer(_ref3) {
   var children = _ref3.children,
       _ref3$side = _ref3.side,
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
-      rest = _objectWithoutProperties(_ref3, _excluded$5);
+      rest = _objectWithoutProperties(_ref3, _excluded$4);
 
   return /*#__PURE__*/jsx(SideContainerView, _objectSpread(_objectSpread({
     side: side
@@ -2966,7 +3025,7 @@ function ListItemSideContent(_ref5) {
   var children = _ref5.children,
       _ref5$align = _ref5.align,
       align = _ref5$align === void 0 ? 'auto' : _ref5$align,
-      rest = _objectWithoutProperties(_ref5, _excluded2$2);
+      rest = _objectWithoutProperties(_ref5, _excluded2$1);
 
   return /*#__PURE__*/jsx(SideContentView, _objectSpread(_objectSpread({
     align: align
@@ -2975,7 +3034,7 @@ function ListItemSideContent(_ref5) {
   }));
 }
 
-var _excluded$4 = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 var ContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItem__ContainerView"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -3014,7 +3073,7 @@ function ListItem(_ref5) {
       left = _ref5.left,
       right = _ref5.right,
       onPress = _ref5.onPress,
-      rest = _objectWithoutProperties(_ref5, _excluded$4);
+      rest = _objectWithoutProperties(_ref5, _excluded$3);
 
   var Wrapper = onPress ? Pressable : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
@@ -3043,32 +3102,11 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-function getActivityIndicatorSize(size) {
-  if (Platform.OS === 'android') return size;
-  return size < 36 ? 'small' : 'large';
-}
-
-var defaultLoaderSize = defaultIconSize;
-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 ? defaultLoaderSize : _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, {})
   });
 }
 
@@ -3247,6 +3285,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) {
@@ -3541,8 +3595,8 @@ function Story(_ref) {
   });
 }
 
-var _excluded$3 = ["title", "children", "internalIsDemoSection"],
-    _excluded2$1 = ["title", "children"],
+var _excluded$2 = ["title", "children", "internalIsDemoSection"],
+    _excluded2 = ["title", "children"],
     _excluded3 = ["title", "children"];
 var StyledSection = /*#__PURE__*/styled.View.withConfig({
   displayName: "StorySection__StyledSection"
@@ -3551,7 +3605,7 @@ function StorySection(_ref) {
   var title = _ref.title,
       children = _ref.children,
       internalIsDemoSection = _ref.internalIsDemoSection,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$2);
 
   if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
   return /*#__PURE__*/jsxs(StyledSection, _objectSpread(_objectSpread({}, props), {}, {
@@ -3567,7 +3621,7 @@ var StyledSubSection = /*#__PURE__*/styled.View.withConfig({
 function SubSection(_ref2) {
   var title = _ref2.title,
       children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded2$1);
+      props = _objectWithoutProperties(_ref2, _excluded2);
 
   return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level3, {
@@ -4121,7 +4175,7 @@ function TypographyEmoji(_ref2) {
   });
 }
 
-var _excluded$2 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
+var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
 var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled$1("span")({
   name: "TypographyLinkWebWrapper",
   "class": "kitt-u_TypographyLinkWebWrapper_tcwz3nt",
@@ -4154,7 +4208,7 @@ function TypographyLink(_ref5) {
       href = _ref5.href,
       hrefAttrs = _ref5.hrefAttrs,
       onPress = _ref5.onPress,
-      otherProps = _objectWithoutProperties(_ref5, _excluded$2);
+      otherProps = _objectWithoutProperties(_ref5, _excluded$1);
 
   return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, otherProps), {}, {
     accessibilityRole: "none",
@@ -4178,39 +4232,6 @@ function TypographyLink(_ref5) {
   }));
 }
 
-var _excluded$1 = ["color"],
-    _excluded2 = ["color"];
-
-function TypographySpinningIconSpecifiedColor(_ref) {
-  var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-
-  var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(SpinningIcon, _objectSpread(_objectSpread({}, props), {}, {
-    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
-  }));
-}
-
-function TypographySpinningIconInheritColor(props) {
-  var color = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
-    color: color
-  }, props));
-}
-
-function TypographySpinningIcon(_ref2) {
-  var color = _ref2.color,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  if (color) {
-    return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
-      color: color
-    }, props));
-  }
-
-  return /*#__PURE__*/jsx(TypographySpinningIconInheritColor, _objectSpread({}, props));
-}
-
 var hex2rgba = function (hex) {
   var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   var r = parseInt(hex.slice(1, 3), 16);
@@ -4249,5 +4270,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-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, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, TypographySpinningIcon, 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.js.map