@ornikar/kitt-universal 6.0.0 → 7.0.1

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

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { View, Text as Text$1, useWindowDimensions, Image, Pressable, TextInput, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
-import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, LoaderIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
 import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, Children, useEffect } from 'react';
@@ -99,7 +99,7 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _excluded$h = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+var _excluded$g = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -176,7 +176,7 @@ function Typography(_ref4) {
       large = _ref4.large,
       variant = _ref4.variant,
       color = _ref4.color,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$h);
+      otherProps = _objectWithoutProperties(_ref4, _excluded$g);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -263,7 +263,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$g = ["size", "base", "round", "light"];
+var _excluded$f = ["size", "round", "light", "sizeVariant"];
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -275,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;
@@ -296,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, {
@@ -314,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)
     });
@@ -331,20 +332,20 @@ 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$g);
+      sizeVariant = _ref6.sizeVariant,
+      props = _objectWithoutProperties(_ref6, _excluded$f);
 
   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))
   });
 }
@@ -370,11 +371,25 @@ function withTheme(WrappedComponent) {
   });
 }
 
+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"];
+}
+
 function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$f = ["$type", "$isStretch", "disabled"];
+var _excluded$e = ["$type", "$variant", "$isStretch", "disabled"];
 var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled$1("div")({
   name: "AnimatedButtonPressableContainer",
   "class": "kitt-u_AnimatedButtonPressableContainer_a1vkj3mh",
@@ -399,9 +414,10 @@ var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled$1("div")({
     "a1vkj3mh-5": [function (_ref5) {
       var theme = _ref5.theme,
           $type = _ref5.$type,
+          $variant = _ref5.$variant,
           $isDisabled = _ref5.$isDisabled;
-      if ($isDisabled) return theme.kitt.button.disabled.hoverBackgroundColor;
-      return theme.kitt.button[$type].hoverBackgroundColor;
+      if ($isDisabled) return theme.kitt.button.disabled["default"].hoverBackgroundColor;
+      return getVariantValuesIfExist(theme, $type, $variant).hoverBackgroundColor;
     }],
     "a1vkj3mh-6": [function (_ref6) {
       var theme = _ref6.theme;
@@ -432,12 +448,13 @@ var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled$1("div")({
     }],
     "a1vkj3mh-14": [function (_ref12) {
       var theme = _ref12.theme;
-      return "".concat(theme.kitt.button.borderWidth.disabled, "px solid ").concat(theme.kitt.button.disabled.borderColor);
+      return "".concat(theme.kitt.button.borderWidth.disabled, "px solid ").concat(theme.kitt.button.disabled["default"].borderColor);
     }],
     "a1vkj3mh-15": [function (_ref13) {
       var theme = _ref13.theme,
-          $type = _ref13.$type;
-      return "".concat(theme.kitt.button.borderWidth.focus, "px solid ").concat(theme.kitt.button[$type].focusBorderColor);
+          $type = _ref13.$type,
+          $variant = _ref13.$variant;
+      return "".concat(theme.kitt.button.borderWidth.focus, "px solid ").concat(getVariantValuesIfExist(theme, $type, $variant).focusBorderColor);
     }],
     "a1vkj3mh-16": [function (_ref14) {
       var theme = _ref14.theme;
@@ -448,36 +465,50 @@ var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled$1("div")({
           $type = _ref15.$type,
           $isDisabled = _ref15.$isDisabled;
       if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-      if (!isSubtle($type)) return 'inherit';
-      return theme.kitt.button[$type].color;
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type]["default"].color;
+      }
+
+      return 'inherit';
     }],
     "a1vkj3mh-19": [function (_ref16) {
       var theme = _ref16.theme,
           $type = _ref16.$type,
           $isDisabled = _ref16.$isDisabled;
       if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-      if (!isSubtle($type)) return 'inherit';
-      return theme.kitt.button[$type].hoverColor;
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type]["default"].hoverColor;
+      }
+
+      return 'inherit';
     }],
     "a1vkj3mh-20": [function (_ref17) {
       var theme = _ref17.theme,
           $type = _ref17.$type,
           $isDisabled = _ref17.$isDisabled;
       if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-      if (!isSubtle($type)) return 'inherit';
-      return theme.kitt.button[$type].activeColor;
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type]["default"].activeColor;
+      }
+
+      return 'inherit';
     }]
   }
 }));
 var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
   var $type = _ref18.$type,
+      $variant = _ref18.$variant,
       $isStretch = _ref18.$isStretch,
       disabled = _ref18.disabled,
-      props = _objectWithoutProperties(_ref18, _excluded$f);
+      props = _objectWithoutProperties(_ref18, _excluded$e);
 
   return /*#__PURE__*/jsx(AnimatedButtonPressableContainer, {
     ref: ref,
     $type: $type,
+    $variant: $variant,
     $isDisabled: !!disabled,
     $isStretch: $isStretch,
     children: /*#__PURE__*/jsx(Pressable, _objectSpread({
@@ -508,9 +539,10 @@ 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;
-  return theme.kitt.button[$type].backgroundColor;
+      $type = _ref6.$type,
+      $variant = _ref6.$variant;
+  if ($isDisabled) return theme.kitt.button.disabled["default"].backgroundColor;
+  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
 }, function (_ref7) {
   var theme = _ref7.theme,
       $isLarge = _ref7.$isLarge,
@@ -524,12 +556,12 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled(View).withConfig({
   return defaultPadding;
 });
 
-var _excluded$e = ["color"],
-    _excluded2$3 = ["color"];
+var _excluded$d = ["color"],
+    _excluded2$2 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -546,7 +578,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({
@@ -557,12 +589,12 @@ function TypographyIcon(_ref2) {
   return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
 }
 
-var _excluded$d = ["type", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$c = ["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';
@@ -691,13 +723,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$d);
+      props = _objectWithoutProperties(_ref7, _excluded$c);
 
-  var color = isDisabled ? 'black-light' : getTextColorByType(type);
+  var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
     $isSubtle: isSubtle(type),
     $isStretch: $isStretch,
@@ -717,6 +750,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,
@@ -729,6 +764,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,
@@ -738,14 +778,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,
@@ -826,14 +869,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$c = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$b = ["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$c);
+      rest = _objectWithoutProperties(_ref, _excluded$b);
 
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     href: href,
@@ -900,6 +943,9 @@ var avatar = {
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
+  },
+  large: {
+    borderRadius: 30
   }
 };
 
@@ -932,47 +978,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
+    }
   }
 };
 
@@ -1252,14 +1319,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
   }
 };
 
@@ -1270,6 +1337,10 @@ var listItem = {
   innerMargin: 8
 };
 
+var pageLoader = {
+  size: 60
+};
+
 var shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1360,19 +1431,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) {
@@ -1675,12 +1747,12 @@ function DatePickerInputs(_ref4) {
   });
 }
 
-var _excluded$b = ["value"];
+var _excluded$a = ["value"];
 // This is not yet implemented
 // We still display the inputs for chromatic
 function DatePicker(_ref) {
   var value = _ref.value,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
     handleModalOpen: function handleModalOpen() {},
@@ -1720,7 +1792,7 @@ var InputTextContainer = withTheme( /*#__PURE__*/styled$1("div")({
   }
 }));
 
-var _excluded$a = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
+var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
 var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
   displayName: "InputText__StyledTextInput",
   componentId: "kitt-universal__sc-uke279-0"
@@ -1766,7 +1838,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$a);
+      props = _objectWithoutProperties(_ref4, _excluded$9);
 
   var theme = /*#__PURE__*/useTheme();
 
@@ -1918,11 +1990,11 @@ function InputPressable(_ref) {
   return /*#__PURE__*/jsx(Pressable, _objectSpread({}, props));
 }
 
-var _excluded$9 = ["isPasswordDefaultVisible", "right"];
+var _excluded$8 = ["isPasswordDefaultVisible", "right"];
 function InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2300,28 +2372,20 @@ var StyledSpinningIconContainer = withTheme( /*#__PURE__*/styled$1("div")({
 }));
 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;
   var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
-  return /*#__PURE__*/jsx(IconContainer$1, {
-    $align: align,
-    $size: size,
-    $color: color,
-    children: /*#__PURE__*/jsx(StyledSpinningIconContainer, {
-      children: clonedIcon
-    })
+  return /*#__PURE__*/jsx(StyledSpinningIconContainer, {
+    children: clonedIcon
   });
 }
 
-var _excluded$8 = ["as", "children"];
+var _excluded$7 = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   // as or default to div. If as is undefined, T is div but typescript is not sure
   return /*#__PURE__*/jsx(as || 'div', _objectSpread(_objectSpread({}, props), {}, {
@@ -2329,7 +2393,7 @@ function StyleWebWrapper(_ref) {
   }));
 }
 
-var _excluded$7 = ["color", "disabled"];
+var _excluded$6 = ["color", "disabled"];
 var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
   name: "PressableIconButtonWebWrapper",
   "class": "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
@@ -2389,7 +2453,7 @@ var StyledPressableIconButton = /*#__PURE__*/styled(Pressable).withConfig({
 function PressableIconButton(_ref9) {
   var color = _ref9.color,
       disabled = _ref9.disabled,
-      props = _objectWithoutProperties(_ref9, _excluded$7);
+      props = _objectWithoutProperties(_ref9, _excluded$6);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
@@ -2472,22 +2536,22 @@ function IconButton(_ref7) {
   });
 }
 
-var _excluded$6 = ["children"];
+var _excluded$5 = ["children"];
 var ContentView$1 = /*#__PURE__*/styled(View).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["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$1, _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",
   componentId: "kitt-universal__sc-1vajiw-0"
@@ -2505,7 +2569,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
@@ -2524,7 +2588,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
@@ -2533,7 +2597,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",
   componentId: "kitt-universal__sc-2afp9s-0"
@@ -2573,7 +2637,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;
   var wrapperProps = onPress ? _objectSpread({
@@ -2602,88 +2666,11 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-var LargeLoaderContainer = withTheme( /*#__PURE__*/styled$1("div")({
-  name: "LargeLoaderContainer",
-  "class": "kitt-u_LargeLoaderContainer_l2im3sa",
-  vars: {
-    "l2im3sa-0": [function (_ref) {
-      var theme = _ref.theme;
-      return theme.kitt.colors.separator;
-    }],
-    "l2im3sa-1": [function (_ref2) {
-      var theme = _ref2.theme;
-      return theme.kitt.colors.primary;
-    }]
-  }
-}));
-function LargeLoader() {
-  return /*#__PURE__*/jsx(LargeLoaderContainer, {
-    children: /*#__PURE__*/jsxs("svg", {
-      width: "60",
-      height: "60",
-      children: [/*#__PURE__*/jsx("g", {
-        "data-large-loader": "base",
-        children: /*#__PURE__*/jsx("circle", {
-          cx: "30",
-          cy: "30",
-          r: "27",
-          fill: "none"
-        })
-      }), /*#__PURE__*/jsx("g", {
-        "data-large-loader": "fill",
-        children: /*#__PURE__*/jsx("circle", {
-          cx: "30",
-          cy: "30",
-          r: "27",
-          fill: "none"
-        })
-      })]
-    })
-  });
-}
-
-var _excluded$3 = ["color"],
-    _excluded2$1 = ["color"];
-
-function TypographySpinningIconSpecifiedColor(_ref) {
-  var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$3);
-
-  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$1);
-
-  if (color) {
-    return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
-      color: color
-    }, props));
-  }
-
-  return /*#__PURE__*/jsx(TypographySpinningIconInheritColor, _objectSpread({}, props));
-}
-
-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;
-  return /*#__PURE__*/jsx(TypographySpinningIcon, {
+function LoaderIcon(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/jsx(SpinningIcon, {
     color: color,
-    size: size,
-    icon: /*#__PURE__*/jsx(LoaderIcon, {})
+    icon: /*#__PURE__*/jsx(ArcIcon, {})
   });
 }
 
@@ -2857,8 +2844,7 @@ function Overlay(_ref2) {
   var onPress = _ref2.onPress;
   return /*#__PURE__*/jsx(OverlayPressable, {
     accessibilityRole: "none",
-    onPress: onPress,
-    children: /*#__PURE__*/jsx(View, {})
+    onPress: onPress
   });
 }
 
@@ -3026,6 +3012,48 @@ function Notification(_ref) {
   });
 }
 
+var PageLoaderContainer = withTheme( /*#__PURE__*/styled$1("div")({
+  name: "PageLoaderContainer",
+  "class": "kitt-u_PageLoaderContainer_ptkwz2j",
+  vars: {
+    "ptkwz2j-0": [function (_ref) {
+      var theme = _ref.theme;
+      return theme.kitt.colors.separator;
+    }],
+    "ptkwz2j-1": [function (_ref2) {
+      var theme = _ref2.theme;
+      return theme.kitt.colors.primary;
+    }]
+  }
+}));
+function PageLoader() {
+  var theme = /*#__PURE__*/useTheme();
+  var size = theme.kitt.pageLoader.size;
+  return /*#__PURE__*/jsx(PageLoaderContainer, {
+    children: /*#__PURE__*/jsxs("svg", {
+      width: size,
+      height: size,
+      children: [/*#__PURE__*/jsx("g", {
+        "data-large-loader": "base",
+        children: /*#__PURE__*/jsx("circle", {
+          cx: "30",
+          cy: "30",
+          r: "27",
+          fill: "none"
+        })
+      }), /*#__PURE__*/jsx("g", {
+        "data-large-loader": "fill",
+        children: /*#__PURE__*/jsx("circle", {
+          cx: "30",
+          cy: "30",
+          r: "27",
+          fill: "none"
+        })
+      })]
+    })
+  });
+}
+
 var StyledSkeleton = withTheme( /*#__PURE__*/styled$1("div")({
   name: "StyledSkeleton",
   "class": "kitt-u_StyledSkeleton_sc3upcl",
@@ -3857,5 +3885,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.web.js.map