@ornikar/kitt-universal 5.0.2 → 7.0.0

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

@@ -6,8 +6,8 @@ const BabelPluginStyledComponentsReactNative = require('react-native');
 const kittIcons = require('@ornikar/kitt-icons');
 const styled = require('styled-components/native');
 const react = require('react');
-const react$1 = require('@linaria/react');
 const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@linaria/react');
 const twemojiParser = require('twemoji-parser');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const reactDom = require('@floating-ui/react-dom');
@@ -17,56 +17,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-// 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>(
-//   WrappedComponent: ComponentType<Props> & C,
-// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
-//   return function ThemedComponent(props) {
-//     const theme = useTheme();
-//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
-//   };
-// }
-function withTheme(WrappedComponent) {
-  // eslint-disable-next-line prefer-arrow-callback
-  return /*#__PURE__*/react.forwardRef(function (props, ref) {
-    const theme = /*#__PURE__*/styled.useTheme();
-    return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
-      ref: ref,
-      theme: theme,
-      ...props
-    });
-  });
-}
-
-const StyledSpinningIconContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
-  name: "StyledSpinningIconContainer",
-  class: "kitt-u_StyledSpinningIconContainer_ssn8o83"
-}));
-function SpinningIcon({
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledSpinningIconContainer, {
-    children: children
-  });
-}
-
+const defaultIconSize = 20;
 const IconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
-  color
-}) => color, ({
-  size
-}) => size, ({
-  size
-}) => size, ({
-  align = 'auto'
-}) => align);
+  $color
+}) => $color, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size, ({
+  $align = 'auto'
+}) => $align);
 function Icon({
   icon,
-  size = 20,
-  spin,
+  size = defaultIconSize,
   align,
   color
 }) {
@@ -74,12 +40,10 @@ function Icon({
     color
   });
   return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
-    align: align,
-    size: size,
-    color: color,
-    children: spin ? /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
-      children: clonedIcon
-    }) : clonedIcon
+    $align: align,
+    $size: size,
+    $color: color,
+    children: clonedIcon
   });
 }
 
@@ -319,10 +283,11 @@ const StyledAvatarView = /*#__PURE__*/styled__default(BabelPluginStyledComponent
 })(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
   theme,
   $isRound,
-  $size
+  $size,
+  $sizeVariant
 }) => {
   if ($isRound) return `${$size / 2}px`;
-  return `${theme.kitt.avatar.borderRadius}px`;
+  return `${$sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius}px`;
 }, ({
   theme,
   $isLight
@@ -338,8 +303,8 @@ function AvatarContent({
   firstname,
   lastname,
   alt,
-  base,
-  isLight
+  isLight,
+  sizeVariant
 }) {
   if (src) {
     return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Image, {
@@ -356,8 +321,8 @@ function AvatarContent({
 
   if (firstname && lastname) {
     return /*#__PURE__*/jsxRuntime.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)
     });
@@ -372,24 +337,61 @@ function AvatarContent({
 
 function Avatar({
   size = 40,
-  base = 'body-small',
   round,
   light,
+  sizeVariant,
   ...props
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
+    $sizeVariant: sizeVariant,
     children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
       size: size,
-      base: base,
       isLight: light,
+      sizeVariant: sizeVariant,
       ...props
     })
   });
 }
 
+// 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>(
+//   WrappedComponent: ComponentType<Props> & C,
+// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
+//   return function ThemedComponent(props) {
+//     const theme = useTheme();
+//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
+//   };
+// }
+function withTheme(WrappedComponent) {
+  // eslint-disable-next-line prefer-arrow-callback
+  return /*#__PURE__*/react.forwardRef(function (props, ref) {
+    const theme = /*#__PURE__*/styled.useTheme();
+    return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
+      ref: ref,
+      theme: theme,
+      ...props
+    });
+  });
+}
+
+const hasVariant = (button, variant) => {
+  return variant in button;
+};
+
+function getVariantValuesIfExist(theme, type, variant) {
+  const button = theme.kitt.button[type];
+
+  if (hasVariant(button, variant)) {
+    return button[variant];
+  }
+
+  return theme.kitt.button[type].default;
+}
+
 function isSubtle(type) {
   return type.startsWith('subtle');
 }
@@ -414,10 +416,11 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
     "a1vkj3mh-5": [({
       theme,
       $type,
+      $variant,
       $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": [({
       theme
@@ -445,11 +448,12 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
     }) => `calc(100% - ${theme.kitt.button.borderWidth.disabled * 0.5}px)`],
     "a1vkj3mh-14": [({
       theme
-    }) => `${theme.kitt.button.borderWidth.disabled}px solid ${theme.kitt.button.disabled.borderColor}`],
+    }) => `${theme.kitt.button.borderWidth.disabled}px solid ${theme.kitt.button.disabled.default.borderColor}`],
     "a1vkj3mh-15": [({
       theme,
-      $type
-    }) => `${theme.kitt.button.borderWidth.focus}px solid ${theme.kitt.button[$type].focusBorderColor}`],
+      $type,
+      $variant
+    }) => `${theme.kitt.button.borderWidth.focus}px solid ${getVariantValuesIfExist(theme, $type, $variant).focusBorderColor}`],
     "a1vkj3mh-16": [({
       theme
     }) => `-${theme.kitt.button.borderWidth.focus}px`],
@@ -459,8 +463,12 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
       $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": [({
       theme,
@@ -468,8 +476,12 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
       $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": [({
       theme,
@@ -477,13 +489,18 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
       $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';
     }]
   }
 }));
 const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
   $type,
+  $variant,
   $isStretch,
   disabled,
   ...props
@@ -491,6 +508,7 @@ const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
   return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressableContainer, {
     ref: ref,
     $type: $type,
+    $variant: $variant,
     $isDisabled: !!disabled,
     $isStretch: $isStretch,
     children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, {
@@ -517,10 +535,11 @@ const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyled
 }) => theme.kitt.button.borderRadius, ({
   theme,
   $isDisabled,
-  $type
+  $type,
+  $variant
 }) => {
-  if ($isDisabled) return theme.kitt.button.disabled.backgroundColor;
-  return theme.kitt.button[$type].backgroundColor;
+  if ($isDisabled) return theme.kitt.button.disabled.default.backgroundColor;
+  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
 }, ({
   theme,
   $isLarge,
@@ -569,10 +588,10 @@ function TypographyIcon({
   });
 }
 
-const getTextColorByType = type => {
+const getTextColorByType = (type, variant) => {
   switch (type) {
     case 'primary':
-      return 'white';
+      return variant === 'ghost' ? 'primary' : 'white';
 
     case 'white':
       return 'white';
@@ -625,7 +644,6 @@ const StyledIconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComp
 function ButtonIcon({
   icon,
   color,
-  spin,
   iconPosition,
   testID
 }) {
@@ -633,7 +651,6 @@ function ButtonIcon({
     $iconPosition: iconPosition,
     children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
       icon: icon,
-      spin: spin,
       testID: testID,
       color: color
     })
@@ -648,7 +665,6 @@ function ButtonContentChildren({
   type,
   icon,
   iconPosition,
-  iconSpin,
   isDisabled,
   color,
   children
@@ -662,9 +678,8 @@ function ButtonContentChildren({
   const isWebSubtle = isSubtle(type) && "web" === 'web' && !isDisabled;
 
   if (!children) {
-    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-      spin: iconSpin // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ,
+    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    , {
       icon: icon,
       color: isWebSubtle ? 'inherit' : color
     });
@@ -672,7 +687,6 @@ function ButtonContentChildren({
 
   const buttonIconSharedProps = {
     type,
-    spin: iconSpin,
     iconPosition,
     color: isWebSubtle ? 'inherit' : color
   };
@@ -712,13 +726,14 @@ const ButtonContentContainer = /*#__PURE__*/styled__default(BabelPluginStyledCom
 });
 function ButtonContent({
   type,
+  variant,
   isDisabled,
   $isStretch,
   icon,
   children,
   ...props
 }) {
-  const color = isDisabled ? 'black-light' : getTextColorByType(type);
+  const color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsxRuntime.jsx(ButtonContentContainer, {
     $isSubtle: isSubtle(type),
     $isStretch: $isStretch,
@@ -737,18 +752,22 @@ function ButtonContent({
 const Button = /*#__PURE__*/react.forwardRef(({
   children,
   type = 'default',
+  variant = 'default',
   disabled,
   stretch,
   large,
   icon,
   iconPosition = 'left',
-  iconSpin,
   testID,
   href,
   hrefAttrs,
   accessibilityRole = 'button',
   onPress
 }, ref) => {
+  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && type !== 'primary') {
+    throw new Error('variant=ghost is only allowed with type=primary');
+  }
+
   return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressable, {
     ref: ref,
     accessibilityRole: accessibilityRole,
@@ -758,19 +777,21 @@ const Button = /*#__PURE__*/react.forwardRef(({
     disabled: disabled,
     $isStretch: stretch,
     $type: type,
+    $variant: variant,
     onPress: onPress,
     children: /*#__PURE__*/jsxRuntime.jsxs(BaseStyledButtonPressable, {
       $type: type,
+      $variant: variant,
       $isStretch: stretch,
       $isLarge: large,
       $isDisabled: disabled,
       children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
         type: type,
+        variant: variant,
         $isStretch: stretch,
         isDisabled: disabled,
         icon: icon,
         iconPosition: iconPosition,
-        iconSpin: iconSpin,
         children: children
       }), null]
     })
@@ -908,6 +929,9 @@ const avatar = {
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
+  },
+  large: {
+    borderRadius: 30
   }
 };
 
@@ -931,56 +955,77 @@ const 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
+    }
   }
 };
 
@@ -1256,14 +1301,14 @@ const 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
   }
 };
 
@@ -1274,6 +1319,10 @@ const listItem = {
   innerMargin: 8
 };
 
+const pageLoader = {
+  size: 60
+};
+
 const shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1364,19 +1413,20 @@ const theme = {
     lateOcean: lateOceanColorPalette
   },
   avatar,
+  breakpoints,
   button,
   card,
   feedbackMessage,
   forms,
-  typography,
-  tag,
-  shadows,
   fullScreenModal,
   iconButton,
   listItem,
-  tooltip,
+  pageLoader,
+  shadows,
   skeleton,
-  breakpoints
+  tag,
+  tooltip,
+  typography
 };
 
 function matchWindowSize({
@@ -2231,6 +2281,22 @@ function FullScreenModal({
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
+const StyledSpinningIconContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "StyledSpinningIconContainer",
+  class: "kitt-u_StyledSpinningIconContainer_ssn8o83"
+}));
+function SpinningIcon({
+  icon,
+  color
+}) {
+  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
+    color
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSpinningIconContainer, {
+    children: clonedIcon
+  });
+}
+
 function StyleWebWrapper({
   as,
   children,
@@ -2509,53 +2575,12 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-const LargeLoaderContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
-  name: "LargeLoaderContainer",
-  class: "kitt-u_LargeLoaderContainer_l2im3sa",
-  vars: {
-    "l2im3sa-0": [({
-      theme
-    }) => theme.kitt.colors.separator],
-    "l2im3sa-1": [({
-      theme
-    }) => theme.kitt.colors.primary]
-  }
-}));
-function LargeLoader() {
-  return /*#__PURE__*/jsxRuntime.jsx(LargeLoaderContainer, {
-    children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
-      width: "60",
-      height: "60",
-      children: [/*#__PURE__*/jsxRuntime.jsx("g", {
-        "data-large-loader": "base",
-        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          cx: "30",
-          cy: "30",
-          r: "27",
-          fill: "none"
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx("g", {
-        "data-large-loader": "fill",
-        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          cx: "30",
-          cy: "30",
-          r: "27",
-          fill: "none"
-        })
-      })]
-    })
-  });
-}
-
-function Loader({
-  color = 'primary',
-  size = 20
+function LoaderIcon({
+  color
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-    spin: true,
+  return /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
     color: color,
-    size: size,
-    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.LoaderIcon, {})
+    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.ArcIcon, {})
   });
 }
 
@@ -2728,12 +2753,13 @@ const OverlayPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponent
   backgroundColor: theme.kitt.colors.overlay.dark
 }));
 function Overlay({
-  onPress
+  onPress,
+  children
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(OverlayPressable, {
     accessibilityRole: "none",
     onPress: onPress,
-    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {})
+    children: children
   });
 }
 
@@ -2892,6 +2918,48 @@ function Notification({
   });
 }
 
+const PageLoaderContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "PageLoaderContainer",
+  class: "kitt-u_PageLoaderContainer_ptkwz2j",
+  vars: {
+    "ptkwz2j-0": [({
+      theme
+    }) => theme.kitt.colors.separator],
+    "ptkwz2j-1": [({
+      theme
+    }) => theme.kitt.colors.primary]
+  }
+}));
+function PageLoader() {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const {
+    size
+  } = theme.kitt.pageLoader;
+  return /*#__PURE__*/jsxRuntime.jsx(PageLoaderContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
+      width: size,
+      height: size,
+      children: [/*#__PURE__*/jsxRuntime.jsx("g", {
+        "data-large-loader": "base",
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "30",
+          cy: "30",
+          r: "27",
+          fill: "none"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("g", {
+        "data-large-loader": "fill",
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "30",
+          cy: "30",
+          r: "27",
+          fill: "none"
+        })
+      })]
+    })
+  });
+}
+
 const StyledSkeleton = withTheme( /*#__PURE__*/react$1.styled("div")({
   name: "StyledSkeleton",
   class: "kitt-u_StyledSkeleton_sc3upcl",
@@ -3712,16 +3780,18 @@ exports.KittBreakpointsMax = KittBreakpointsMax;
 exports.KittThemeDecorator = KittThemeDecorator;
 exports.KittThemeProvider = KittThemeProvider;
 exports.Label = Label;
-exports.LargeLoader = LargeLoader;
 exports.ListItem = ListItem;
-exports.Loader = Loader;
+exports.LoaderIcon = LoaderIcon;
 exports.MatchWindowSize = MatchWindowSize;
 exports.Message = Message;
 exports.Modal = Modal;
 exports.Notification = Notification;
+exports.Overlay = Overlay;
+exports.PageLoader = PageLoader;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
 exports.Skeleton = Skeleton;
+exports.SpinningIcon = SpinningIcon;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
 exports.StoryContainer = StoryContainer;