@ornikar/kitt-universal 5.0.2 → 7.0.0

package/dist/index-browser-all.es.web.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 { 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$1, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import { forwardRef, cloneElement, useContext, createContext, useMemo, useState, Fragment, Children, useEffect } from 'react';
-import { styled } from '@linaria/react';
+import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
+import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, Children, useEffect } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { styled as styled$1 } from '@linaria/react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { parse } from 'twemoji-parser';
 import _extends from '@babel/runtime/helpers/extends';
@@ -16,75 +16,38 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { useFloating, offset, shift, flip, getScrollParents } from '@floating-ui/react-dom';
 import { makeDecorator } from '@storybook/addons';
 
-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; }
-
-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; }
-// 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__*/forwardRef(function (props, ref) {
-    var theme = /*#__PURE__*/useTheme();
-    return /*#__PURE__*/jsx(WrappedComponent, _objectSpread$n({
-      ref: ref,
-      theme: theme
-    }, props));
-  });
-}
-
-var StyledSpinningIconContainer = withTheme( /*#__PURE__*/styled("div")({
-  name: "StyledSpinningIconContainer",
-  "class": "kitt-u_StyledSpinningIconContainer_ssn8o83"
-}));
-function SpinningIcon(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/jsx(StyledSpinningIconContainer, {
-    children: children
-  });
-}
-
-var IconContainer$1 = /*#__PURE__*/styled$1(View).withConfig({
+var defaultIconSize = 20;
+var IconContainer$1 = /*#__PURE__*/styled(View).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["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
   });
 }
 
@@ -137,10 +100,6 @@ var KittBreakpointsMax = {
 };
 
 var _excluded$g = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
-
-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; }
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -169,7 +128,7 @@ function getTypographyTypeConfig(type, theme) {
 
   return theme.kitt.typography.types.bodies.configs[type];
 }
-var StyledTypography = /*#__PURE__*/styled$1(Text$1).withConfig({
+var StyledTypography = /*#__PURE__*/styled(Text$1).withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "kitt-universal__sc-1dz700q-0"
 })(["", " ", ""], function (_ref) {
@@ -234,14 +193,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$m({
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread({
       $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$m({
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread({
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
@@ -254,13 +213,13 @@ function Typography(_ref4) {
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$m({
+  return /*#__PURE__*/jsx(Typography, _objectSpread({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$m({
+  return /*#__PURE__*/jsx(Typography, _objectSpread({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -268,7 +227,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$m(_objectSpread$m({
+    return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({
       accessibilityRole: "header",
       base: defaultBase
     }, props), {}, {
@@ -304,25 +263,22 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$f = ["size", "base", "round", "light"];
-
-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; }
+var _excluded$f = ["size", "round", "light", "sizeVariant"];
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 };
 
-var StyledAvatarView = /*#__PURE__*/styled$1(View).withConfig({
+var StyledAvatarView = /*#__PURE__*/styled(View).withConfig({
   displayName: "Avatar__StyledAvatarView",
   componentId: "kitt-universal__sc-9miubv-0"
 })(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], 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;
@@ -341,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, {
@@ -359,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)
     });
@@ -376,34 +332,65 @@ 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$f);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$l({
+    $sizeVariant: sizeVariant,
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
       size: size,
-      base: base,
-      isLight: light
+      isLight: light,
+      sizeVariant: sizeVariant
     }, props))
   });
 }
 
-function isSubtle(type) {
-  return type.startsWith('subtle');
+// 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__*/forwardRef(function (props, ref) {
+    var theme = /*#__PURE__*/useTheme();
+    return /*#__PURE__*/jsx(WrappedComponent, _objectSpread({
+      ref: ref,
+      theme: theme
+    }, props));
+  });
 }
 
-var _excluded$e = ["$type", "$isStretch", "disabled"];
+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 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 isSubtle(type) {
+  return type.startsWith('subtle');
+}
 
-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; }
-var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled("div")({
+var _excluded$e = ["$type", "$variant", "$isStretch", "disabled"];
+var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled$1("div")({
   name: "AnimatedButtonPressableContainer",
   "class": "kitt-u_AnimatedButtonPressableContainer_a1vkj3mh",
   vars: {
@@ -427,9 +414,10 @@ var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled("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;
@@ -460,12 +448,13 @@ var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled("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;
@@ -476,29 +465,42 @@ var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled("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$e);
@@ -506,15 +508,16 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
   return /*#__PURE__*/jsx(AnimatedButtonPressableContainer, {
     ref: ref,
     $type: $type,
+    $variant: $variant,
     $isDisabled: !!disabled,
     $isStretch: $isStretch,
-    children: /*#__PURE__*/jsx(Pressable, _objectSpread$k({
+    children: /*#__PURE__*/jsx(Pressable, _objectSpread({
       disabled: disabled
     }, props))
   });
 });
 
-var BaseStyledButtonPressable = /*#__PURE__*/styled$1(View).withConfig({
+var BaseStyledButtonPressable = /*#__PURE__*/styled(View).withConfig({
   displayName: "BaseStyledButtonPressable",
   componentId: "kitt-universal__sc-4k8lse-0"
 })(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], function (_ref) {
@@ -536,9 +539,10 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled$1(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,
@@ -555,23 +559,19 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled$1(View).withConfig({
 var _excluded$d = ["color"],
     _excluded2$2 = ["color"];
 
-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; }
-
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
       props = _objectWithoutProperties(_ref, _excluded$d);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread$j(_objectSpread$j({}, 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$j({
+  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
     color: color
   }, props));
 }
@@ -581,24 +581,20 @@ function TypographyIcon(_ref2) {
       props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
-    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$j({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
       color: color
     }, props));
   }
 
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$j({}, props));
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
 }
 
-var _excluded$c = ["type", "isDisabled", "$isStretch", "icon", "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; }
+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';
@@ -614,7 +610,7 @@ var getTextColorByType = function (type) {
   }
 };
 
-var StyledButtonText = /*#__PURE__*/styled$1(Typography.Text).withConfig({
+var StyledButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
   displayName: "ButtonContent__StyledButtonText",
   componentId: "kitt-universal__sc-dnyw3n-0"
 })(["text-align:center;", " ", ""], function () {
@@ -632,7 +628,7 @@ var StyledButtonText = /*#__PURE__*/styled$1(Typography.Text).withConfig({
   if ($isDisabled || !isSubtle($type)) return undefined;
   return 'color: inherit';
 });
-var StyledIconContainer$1 = /*#__PURE__*/styled$1(View).withConfig({
+var StyledIconContainer$1 = /*#__PURE__*/styled(View).withConfig({
   displayName: "ButtonContent__StyledIconContainer",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["", ""], function (_ref2) {
@@ -650,21 +646,19 @@ var StyledIconContainer$1 = /*#__PURE__*/styled$1(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
     })
   });
 }
 
-var StyledChildrenWithIcon = /*#__PURE__*/styled$1(View).withConfig({
+var StyledChildrenWithIcon = /*#__PURE__*/styled(View).withConfig({
   displayName: "ButtonContent__StyledChildrenWithIcon",
   componentId: "kitt-universal__sc-dnyw3n-2"
 })(["align-items:center;justify-content:center;flex-direction:row;"]);
@@ -672,7 +666,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;
@@ -686,9 +679,8 @@ function ButtonContentChildren(_ref4) {
   var isWebSubtle = isSubtle(type) && "web" === '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
     });
@@ -696,12 +688,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$i(_objectSpread$i({}, buttonIconSharedProps), {}, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
       testID: "button-left-icon",
       icon: icon
     })) : null, /*#__PURE__*/jsx(StyledButtonText, {
@@ -712,12 +703,12 @@ function ButtonContentChildren(_ref4) {
       ,
       color: isWebSubtle ? undefined : color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$i(_objectSpread$i({}, buttonIconSharedProps), {}, {
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
       icon: icon
     })) : null]
   });
 }
-var ButtonContentContainer = /*#__PURE__*/styled$1(View).withConfig({
+var ButtonContentContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "ButtonContent__ButtonContentContainer",
   componentId: "kitt-universal__sc-dnyw3n-3"
 })(["line-height:16px;", " ", ";"], function (_ref5) {
@@ -732,18 +723,19 @@ var ButtonContentContainer = /*#__PURE__*/styled$1(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$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,
     $isIconOnly: Boolean(!children && icon),
-    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$i(_objectSpread$i({
+    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread(_objectSpread({
       icon: icon,
       type: type,
       isDisabled: isDisabled,
@@ -758,19 +750,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,
@@ -780,26 +778,28 @@ 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
       }), null]
     })
   });
 });
 
-var Container$3 = /*#__PURE__*/styled$1(View).withConfig({
+var Container$3 = /*#__PURE__*/styled(View).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
@@ -829,7 +829,7 @@ function Card(_ref6) {
   });
 }
 
-var StyledEmoji = /*#__PURE__*/styled$1(Image).withConfig({
+var StyledEmoji = /*#__PURE__*/styled(Image).withConfig({
   displayName: "Emoji__StyledEmoji",
   componentId: "kitt-universal__sc-ggl6wj-0"
 })(["width:", "px;height:", "px;"], function (_ref) {
@@ -870,10 +870,6 @@ var defaultOpenLinkBehavior = {
 };
 
 var _excluded$b = ["as", "href", "openLinkBehavior", "onPress"];
-
-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; }
 function ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
@@ -882,7 +878,7 @@ function ExternalLink(_ref) {
       onPress = _ref.onPress,
       rest = _objectWithoutProperties(_ref, _excluded$b);
 
-  return /*#__PURE__*/jsx(Component, _objectSpread$h(_objectSpread$h({}, rest), {}, {
+  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     href: href,
     hrefAttrs: (openLinkBehavior === null || openLinkBehavior === void 0 ? void 0 : openLinkBehavior.web) === 'targetSelf' ? undefined : {
       target: '_blank',
@@ -947,6 +943,9 @@ var avatar = {
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
+  },
+  large: {
+    borderRadius: 30
   }
 };
 
@@ -970,56 +969,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
+    }
   }
 };
 
@@ -1299,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
   }
 };
 
@@ -1317,6 +1337,10 @@ var listItem = {
   innerMargin: 8
 };
 
+var pageLoader = {
+  size: 60
+};
+
 var shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1407,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) {
@@ -1495,11 +1520,11 @@ function useKittTheme() {
   }, [dimensions]);
 }
 
-var CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled$1(Pressable).withConfig({
+var CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled(Pressable).withConfig({
   displayName: "Checkbox__CheckboxAndLabelPressableWrapper",
   componentId: "kitt-universal__sc-1sav1n6-0"
 })(["display:flex;flex-direction:row;"]);
-var CheckboxContainer = /*#__PURE__*/styled$1(View).withConfig({
+var CheckboxContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "kitt-universal__sc-1sav1n6-1"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:center;height:", "px;width:", "px;position:relative;border-radius:", "px;", " margin-right:", ";"], function (_ref) {
@@ -1604,11 +1629,11 @@ var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width
   return theme.kitt.typography.types.bodies.fontFamily.regular;
 });
 
-var StyledTypographyText = /*#__PURE__*/styled$1(Typography.Text).withConfig({
+var StyledTypographyText = /*#__PURE__*/styled(Typography.Text).withConfig({
   displayName: "DatePickerInputPart__StyledTypographyText",
   componentId: "kitt-universal__sc-11fmlmi-0"
 })(["text-align:center;"]);
-var ViewInput = /*#__PURE__*/styled$1(View).withConfig({
+var ViewInput = /*#__PURE__*/styled(View).withConfig({
   displayName: "DatePickerInputPart__ViewInput",
   componentId: "kitt-universal__sc-11fmlmi-1"
 })(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, function (_ref) {
@@ -1643,15 +1668,11 @@ function DatePickerInputPart(_ref4) {
   });
 }
 
-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 prefixWithZero(value) {
   return "".concat(value).padStart(2, '0');
 }
 
-var PartContainer = /*#__PURE__*/styled$1(View).withConfig({
+var PartContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "DatePickerInputs__PartContainer",
   componentId: "kitt-universal__sc-j9hin5-0"
 })(["margin-right:", ";", ";"], function (_ref) {
@@ -1662,7 +1683,7 @@ var PartContainer = /*#__PURE__*/styled$1(View).withConfig({
   var $isStretch = _ref2.$isStretch;
   return $isStretch ? css(["flex:0.33;flex-grow:1;"]) : undefined;
 });
-var DatePickerPressable = /*#__PURE__*/styled$1(Pressable).withConfig({
+var DatePickerPressable = /*#__PURE__*/styled(Pressable).withConfig({
   displayName: "DatePickerInputs__DatePickerPressable",
   componentId: "kitt-universal__sc-j9hin5-1"
 })(["display:flex;flex-direction:row;", ";"], function (_ref3) {
@@ -1702,14 +1723,14 @@ function DatePickerInputs(_ref4) {
     onPress: handleModalOpen,
     children: [/*#__PURE__*/jsx(PartContainer, {
       $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$g(_objectSpread$g({}, 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$g(_objectSpread$g({}, 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
@@ -1717,7 +1738,7 @@ function DatePickerInputs(_ref4) {
     }), /*#__PURE__*/jsx(PartContainer, {
       $isLast: true,
       $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$g(_objectSpread$g({}, 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
@@ -1727,24 +1748,20 @@ function DatePickerInputs(_ref4) {
 }
 
 var _excluded$a = ["value"];
-
-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; }
 // This is not yet implemented
 // We still display the inputs for chromatic
 function DatePicker(_ref) {
   var value = _ref.value,
       props = _objectWithoutProperties(_ref, _excluded$a);
 
-  return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread$f({
+  return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
     handleModalOpen: function handleModalOpen() {},
     currentValue: value,
     isFocused: false
   }, props));
 }
 
-var InputTextContainer = withTheme( /*#__PURE__*/styled("div")({
+var InputTextContainer = withTheme( /*#__PURE__*/styled$1("div")({
   name: "InputTextContainer",
   "class": "kitt-u_InputTextContainer_i1encr9g",
   vars: {
@@ -1776,11 +1793,7 @@ var InputTextContainer = withTheme( /*#__PURE__*/styled("div")({
 }));
 
 var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
-
-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; }
-var StyledTextInput = /*#__PURE__*/styled$1(TextInput).withConfig({
+var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
   displayName: "InputText__StyledTextInput",
   componentId: "kitt-universal__sc-uke279-0"
 })(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
@@ -1802,7 +1815,7 @@ var StyledTextInput = /*#__PURE__*/styled$1(TextInput).withConfig({
   var $minHeight = _ref3.$minHeight;
   return $minHeight;
 });
-var RightInputContainer = /*#__PURE__*/styled$1(View).withConfig({
+var RightInputContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "InputText__RightInputContainer",
   componentId: "kitt-universal__sc-uke279-1"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
@@ -1841,7 +1854,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   });
   return /*#__PURE__*/jsxs(InputTextContainer, {
     $isDisabled: disabled,
-    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread$e(_objectSpread$e({
+    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread(_objectSpread({
       ref: ref,
       nativeID: id,
       editable: !disabled,
@@ -1868,11 +1881,8 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   });
 });
 
-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; }
 function InputEmail(props) {
-  return /*#__PURE__*/jsx(InputText, _objectSpread$d({
+  return /*#__PURE__*/jsx(InputText, _objectSpread({
     autoCompleteType: "email",
     keyboardType: "email-address",
     textContentType: "emailAddress",
@@ -1903,11 +1913,11 @@ function InputFeedback(_ref) {
   });
 }
 
-var FieldContainer = /*#__PURE__*/styled$1(View).withConfig({
+var FieldContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "InputField__FieldContainer",
   componentId: "kitt-universal__sc-13fkixs-0"
 })(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled$1(View).withConfig({
+var FeedbackContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "InputField__FeedbackContainer",
   componentId: "kitt-universal__sc-13fkixs-1"
 })(["", ";"], function (_ref) {
@@ -1916,14 +1926,14 @@ var FeedbackContainer = /*#__PURE__*/styled$1(View).withConfig({
     minWidth: KittBreakpoints.SMALL
   }, 'padding-top: 10px', 'padding-top: 5px');
 });
-var FieldLabelContainer = /*#__PURE__*/styled$1(View).withConfig({
+var FieldLabelContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "InputField__FieldLabelContainer",
   componentId: "kitt-universal__sc-13fkixs-2"
 })(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.forms.inputField.labelContainerPaddingBottom;
 });
-var LabelContainer = /*#__PURE__*/styled$1(View).withConfig({
+var LabelContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "InputField__LabelContainer",
   componentId: "kitt-universal__sc-13fkixs-3"
 })(["margin-right:", "px;"], function (_ref3) {
@@ -1974,20 +1984,13 @@ function InputIcon(_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 InputPressable(_ref) {
   var props = _extends({}, _ref);
 
-  return /*#__PURE__*/jsx(Pressable, _objectSpread$c({}, props));
+  return /*#__PURE__*/jsx(Pressable, _objectSpread({}, props));
 }
 
 var _excluded$8 = ["isPasswordDefaultVisible", "right"];
-
-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 InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
@@ -1998,7 +2001,7 @@ function InputPassword(_ref) {
       isVisible = _useState2[0],
       setIsVisible = _useState2[1];
 
-  return /*#__PURE__*/jsx(InputText, _objectSpread$b(_objectSpread$b({}, props), {}, {
+  return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({}, props), {}, {
     textContentType: "password",
     autoCompleteType: "password",
     autoCorrect: false,
@@ -2017,11 +2020,8 @@ function InputPassword(_ref) {
   }));
 }
 
-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 InputPhone(props) {
-  return /*#__PURE__*/jsx(InputText, _objectSpread$a(_objectSpread$a({}, props), {}, {
+  return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({}, props), {}, {
     autoCompleteType: "tel",
     keyboardType: "number-pad",
     textContentType: "telephoneNumber"
@@ -2032,7 +2032,7 @@ var getTypographyColor = function (type) {
   return type ? 'white' : 'black';
 };
 
-var InputTagContainer = /*#__PURE__*/styled$1(View).withConfig({
+var InputTagContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "InputTag__InputTagContainer",
   componentId: "kitt-universal__sc-1511dsf-0"
 })(["align-items:center;justify-content:center;flex-direction:row;align-self:flex-start;overflow:hidden;padding-horizontal:", "px;background-color:", ";border-radius:", "px;"], function (_ref) {
@@ -2055,7 +2055,7 @@ var InputTagContainer = /*#__PURE__*/styled$1(View).withConfig({
   var theme = _ref3.theme;
   return theme.kitt.forms.inputTag.borderRadius;
 });
-var IconContainer = /*#__PURE__*/styled$1(View).withConfig({
+var IconContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "InputTag__IconContainer",
   componentId: "kitt-universal__sc-1511dsf-1"
 })(["margin-right:", "px;"], function (_ref4) {
@@ -2096,7 +2096,7 @@ function Label(_ref) {
   });
 }
 
-var OuterRadio = /*#__PURE__*/styled$1(View).withConfig({
+var OuterRadio = /*#__PURE__*/styled(View).withConfig({
   displayName: "Radio__OuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-0"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
@@ -2120,7 +2120,7 @@ var OuterRadio = /*#__PURE__*/styled$1(View).withConfig({
       disabled = _ref6.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
 });
-var SelectedOuterRadio = /*#__PURE__*/styled$1(View).withConfig({
+var SelectedOuterRadio = /*#__PURE__*/styled(View).withConfig({
   displayName: "Radio__SelectedOuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-1"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], function (_ref7) {
@@ -2136,7 +2136,7 @@ var SelectedOuterRadio = /*#__PURE__*/styled$1(View).withConfig({
   var theme = _ref10.theme;
   return theme.kitt.forms.radio.size / 2;
 });
-var SelectedInnerRadio = /*#__PURE__*/styled$1(View).withConfig({
+var SelectedInnerRadio = /*#__PURE__*/styled(View).withConfig({
   displayName: "Radio__SelectedInnerRadio",
   componentId: "kitt-universal__sc-1mdgr2o-2"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], function (_ref11) {
@@ -2152,11 +2152,11 @@ var SelectedInnerRadio = /*#__PURE__*/styled$1(View).withConfig({
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$2 = /*#__PURE__*/styled$1(Pressable).withConfig({
+var Container$2 = /*#__PURE__*/styled(Pressable).withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
-var Text = /*#__PURE__*/styled$1(Typography.Text).withConfig({
+var Text = /*#__PURE__*/styled(Typography.Text).withConfig({
   displayName: "Radio__Text",
   componentId: "kitt-universal__sc-1mdgr2o-4"
 })(["margin-left:", "px;"], function (_ref15) {
@@ -2192,21 +2192,18 @@ function Radio(_ref16) {
   });
 }
 
-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 TextArea(_ref) {
   var props = _extends({}, _ref);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(InputText, _objectSpread$9({
+  return /*#__PURE__*/jsx(InputText, _objectSpread({
     multiline: true,
     textAlignVertical: "top",
     minHeight: theme.kitt.forms.textArea.minHeight
   }, props));
 }
 
-var Body = /*#__PURE__*/styled$1(View).withConfig({
+var Body = /*#__PURE__*/styled(View).withConfig({
   displayName: "Body",
   componentId: "kitt-universal__sc-1ofncfn-0"
 })(["", " background-color:", ";flex:1;"], function (_ref) {
@@ -2225,7 +2222,7 @@ function FullScreenModalBody(_ref3) {
   });
 }
 
-var SideContainer = /*#__PURE__*/styled$1(View).withConfig({
+var SideContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "Header__SideContainer",
   componentId: "kitt-universal__sc-dfmxi1-0"
 })(["", ""], function (_ref) {
@@ -2245,7 +2242,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-var Header = /*#__PURE__*/styled$1(View).withConfig({
+var Header = /*#__PURE__*/styled(View).withConfig({
   displayName: "Header",
   componentId: "kitt-universal__sc-dfmxi1-1"
 })(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], function (_ref2) {
@@ -2263,7 +2260,7 @@ var Header = /*#__PURE__*/styled$1(View).withConfig({
   var theme = _ref3.theme;
   return theme.kitt.fullScreenModal.header.borderColor;
 });
-var HeaderContent = /*#__PURE__*/styled$1(View).withConfig({
+var HeaderContent = /*#__PURE__*/styled(View).withConfig({
   displayName: "Header__HeaderContent",
   componentId: "kitt-universal__sc-dfmxi1-2"
 })(["", ";", ";justify-content:center;align-items:center;"], function (_ref4) {
@@ -2353,7 +2350,7 @@ function FullScreenModalHeader(_ref6) {
   });
 }
 
-var Container$1 = /*#__PURE__*/styled$1(View).withConfig({
+var Container$1 = /*#__PURE__*/styled(View).withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], function (_ref) {
@@ -2369,28 +2366,35 @@ function FullScreenModal(_ref2) {
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-var _excluded$7 = ["as", "children"];
-
-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; }
+var StyledSpinningIconContainer = withTheme( /*#__PURE__*/styled$1("div")({
+  name: "StyledSpinningIconContainer",
+  "class": "kitt-u_StyledSpinningIconContainer_ssn8o83"
+}));
+function SpinningIcon(_ref) {
+  var icon = _ref.icon,
+      color = _ref.color;
+  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
+    color: color
+  });
+  return /*#__PURE__*/jsx(StyledSpinningIconContainer, {
+    children: clonedIcon
+  });
+}
 
-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; }
+var _excluded$7 = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
       children = _ref.children,
       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$8(_objectSpread$8({}, props), {}, {
+  return /*#__PURE__*/jsx(as || 'div', _objectSpread(_objectSpread({}, props), {}, {
     children: children
   }));
 }
 
 var _excluded$6 = ["color", "disabled"];
-
-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; }
-
-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 PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled("div")({
+var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
   name: "PressableIconButtonWebWrapper",
   "class": "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
   vars: {
@@ -2422,7 +2426,7 @@ var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled("div")({
     }]
   }
 }));
-var StyledPressableIconButton = /*#__PURE__*/styled$1(Pressable).withConfig({
+var StyledPressableIconButton = /*#__PURE__*/styled(Pressable).withConfig({
   displayName: "PressableIconButton__StyledPressableIconButton",
   componentId: "kitt-universal__sc-1m6jo3s-0"
 })(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref5) {
@@ -2455,7 +2459,7 @@ function PressableIconButton(_ref9) {
     as: PressableIconButtonWebWrapper,
     $isWhite: color === 'white',
     $isDisabled: Boolean(disabled),
-    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$7(_objectSpread$7({}, props), {}, {
+    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread(_objectSpread({}, props), {}, {
       disabled: disabled
     }))
   });
@@ -2475,7 +2479,7 @@ function PressableAnimatedContainer(_ref) {
   });
 }
 
-var IconButtonContentBorder = /*#__PURE__*/styled$1(View).withConfig({
+var IconButtonContentBorder = /*#__PURE__*/styled(View).withConfig({
   displayName: "IconButton__IconButtonContentBorder",
   componentId: "kitt-universal__sc-swelbf-0"
 })(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], function (_ref) {
@@ -2533,11 +2537,7 @@ function IconButton(_ref7) {
 }
 
 var _excluded$5 = ["children"];
-
-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 ContentView$1 = /*#__PURE__*/styled$1(View).withConfig({
+var ContentView$1 = /*#__PURE__*/styled(View).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["flex:1 0 0%;align-self:center;"]);
@@ -2545,18 +2545,14 @@ function ListItemContent(_ref) {
   var children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$5);
 
-  return /*#__PURE__*/jsx(ContentView$1, _objectSpread$6(_objectSpread$6({}, rest), {}, {
+  return /*#__PURE__*/jsx(ContentView$1, _objectSpread(_objectSpread({}, rest), {}, {
     children: children
   }));
 }
 
 var _excluded$4 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
-
-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 SideContainerView = /*#__PURE__*/styled$1(View).withConfig({
+var SideContainerView = /*#__PURE__*/styled(View).withConfig({
   displayName: "ListItemSideContent__SideContainerView",
   componentId: "kitt-universal__sc-1vajiw-0"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -2575,13 +2571,13 @@ function ListItemSideContainer(_ref3) {
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
       rest = _objectWithoutProperties(_ref3, _excluded$4);
 
-  return /*#__PURE__*/jsx(SideContainerView, _objectSpread$5(_objectSpread$5({
+  return /*#__PURE__*/jsx(SideContainerView, _objectSpread(_objectSpread({
     side: side
   }, rest), {}, {
     children: children
   }));
 }
-var SideContentView = /*#__PURE__*/styled$1(View).withConfig({
+var SideContentView = /*#__PURE__*/styled(View).withConfig({
   displayName: "ListItemSideContent__SideContentView",
   componentId: "kitt-universal__sc-1vajiw-1"
 })(["align-self:", ";"], function (_ref4) {
@@ -2594,7 +2590,7 @@ function ListItemSideContent(_ref5) {
       align = _ref5$align === void 0 ? 'auto' : _ref5$align,
       rest = _objectWithoutProperties(_ref5, _excluded2$1);
 
-  return /*#__PURE__*/jsx(SideContentView, _objectSpread$5(_objectSpread$5({
+  return /*#__PURE__*/jsx(SideContentView, _objectSpread(_objectSpread({
     align: align
   }, rest), {}, {
     children: children
@@ -2602,11 +2598,7 @@ function ListItemSideContent(_ref5) {
 }
 
 var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
-
-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 ContainerView = /*#__PURE__*/styled$1(View).withConfig({
+var ContainerView = /*#__PURE__*/styled(View).withConfig({
   displayName: "ListItem__ContainerView",
   componentId: "kitt-universal__sc-2afp9s-0"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -2648,13 +2640,13 @@ function ListItem(_ref5) {
       rest = _objectWithoutProperties(_ref5, _excluded$3);
 
   var Wrapper = onPress ? Pressable : Fragment;
-  var wrapperProps = onPress ? _objectSpread$4({
+  var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
     onPress: onPress
   }, rest) : undefined;
   var containerProps = onPress ? undefined : rest;
-  return /*#__PURE__*/jsx(Wrapper, _objectSpread$4(_objectSpread$4({}, wrapperProps), {}, {
-    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread$4(_objectSpread$4({
+  return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread(_objectSpread({
       withPadding: withPadding,
       borders: borders
     }, containerProps), {}, {
@@ -2674,56 +2666,11 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-var LargeLoaderContainer = withTheme( /*#__PURE__*/styled("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"
-        })
-      })]
-    })
-  });
-}
-
-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(TypographyIcon, {
-    spin: true,
+function LoaderIcon(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/jsx(SpinningIcon, {
     color: color,
-    size: size,
-    icon: /*#__PURE__*/jsx(LoaderIcon, {})
+    icon: /*#__PURE__*/jsx(ArcIcon, {})
   });
 }
 
@@ -2779,7 +2726,7 @@ var getIconButtonColor = function (messageType) {
   }
 };
 
-var StyledMessageContainer = /*#__PURE__*/styled$1(View).withConfig({
+var StyledMessageContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "BaseMessage__StyledMessageContainer",
   componentId: "kitt-universal__sc-eepeiz-0"
 })(["flex-direction:row;align-items:flex-start;justify-content:space-between;min-height:60px;padding-top:", "px;border-radius:", "px;background-color:", ";"], function (_ref) {
@@ -2796,7 +2743,7 @@ var StyledMessageContainer = /*#__PURE__*/styled$1(View).withConfig({
       $type = _ref3.$type;
   return theme.kitt.feedbackMessage[$type].backgroundColor;
 });
-var StyledDismissWrapper = /*#__PURE__*/styled$1(View).withConfig({
+var StyledDismissWrapper = /*#__PURE__*/styled(View).withConfig({
   displayName: "BaseMessage__StyledDismissWrapper",
   componentId: "kitt-universal__sc-eepeiz-1"
 })(["align-items:center;align-items:flex-start;margin:", ";"], function (_ref4) {
@@ -2804,7 +2751,7 @@ var StyledDismissWrapper = /*#__PURE__*/styled$1(View).withConfig({
   var spacing = theme.kitt.spacing;
   return "".concat(spacing * 2.5, "px  ").concat(spacing * 2, "px 0 ").concat(spacing * 5, "px");
 });
-var StyledIconContainer = /*#__PURE__*/styled$1(View).withConfig({
+var StyledIconContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "BaseMessage__StyledIconContainer",
   componentId: "kitt-universal__sc-eepeiz-2"
 })(["margin:", ";"], function (_ref5) {
@@ -2812,14 +2759,14 @@ var StyledIconContainer = /*#__PURE__*/styled$1(View).withConfig({
   var spacing = theme.kitt.spacing;
   return "".concat(spacing, "px ").concat(spacing * 5, "px 0 0");
 });
-var StyledTextContent = /*#__PURE__*/styled$1(Typography.Text).withConfig({
+var StyledTextContent = /*#__PURE__*/styled(Typography.Text).withConfig({
   displayName: "BaseMessage__StyledTextContent",
   componentId: "kitt-universal__sc-eepeiz-3"
 })(["flex:1;text-align:", ";"], function (_ref6) {
   var $isCenteredText = _ref6.$isCenteredText;
   return $isCenteredText ? 'center' : 'left';
 });
-var StyledMessageContent = /*#__PURE__*/styled$1(View).withConfig({
+var StyledMessageContent = /*#__PURE__*/styled(View).withConfig({
   displayName: "BaseMessage__StyledMessageContent",
   componentId: "kitt-universal__sc-eepeiz-4"
 })(["display:flex;flex-direction:row;flex-grow:1;align-self:center;align-items:flex-start;flex-shrink:1;padding:", ";"], function (_ref7) {
@@ -2883,29 +2830,27 @@ function Message(_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; }
 // Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-var OverlayPressable = /*#__PURE__*/styled$1(Pressable).withConfig({
+var OverlayPressable = /*#__PURE__*/styled(Pressable).withConfig({
   displayName: "Overlay__OverlayPressable",
   componentId: "kitt-universal__sc-1cz1gbr-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return _objectSpread$3(_objectSpread$3({}, 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
   });
 }
 
-var BodyView = /*#__PURE__*/styled$1(View).withConfig({
+var BodyView = /*#__PURE__*/styled(View).withConfig({
   displayName: "Body__BodyView",
   componentId: "kitt-universal__sc-17fwpo4-0"
 })(["padding:", "px ", "px;"], function (_ref) {
@@ -2924,7 +2869,7 @@ function ModalBody(_ref3) {
   });
 }
 
-var FooterView = /*#__PURE__*/styled$1(View).withConfig({
+var FooterView = /*#__PURE__*/styled(View).withConfig({
   displayName: "Footer__FooterView",
   componentId: "kitt-universal__sc-1ujq2dc-0"
 })(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
@@ -2943,7 +2888,7 @@ function ModalFooter(_ref3) {
 
 var OnCloseContext = /*#__PURE__*/createContext(function () {});
 
-var HeaderView = /*#__PURE__*/styled$1(View).withConfig({
+var HeaderView = /*#__PURE__*/styled(View).withConfig({
   displayName: "Header__HeaderView",
   componentId: "kitt-universal__sc-1iwabch-0"
 })(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
@@ -2953,21 +2898,21 @@ var HeaderView = /*#__PURE__*/styled$1(View).withConfig({
   var theme = _ref2.theme;
   return theme.kitt.colors.separator;
 });
-var LeftIconView = /*#__PURE__*/styled$1(View).withConfig({
+var LeftIconView = /*#__PURE__*/styled(View).withConfig({
   displayName: "Header__LeftIconView",
   componentId: "kitt-universal__sc-1iwabch-1"
 })(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.spacing * 2;
 });
-var RightIconView = /*#__PURE__*/styled$1(View).withConfig({
+var RightIconView = /*#__PURE__*/styled(View).withConfig({
   displayName: "Header__RightIconView",
   componentId: "kitt-universal__sc-1iwabch-2"
 })(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
   var theme = _ref4.theme;
   return theme.kitt.spacing * 2;
 });
-var TitleView = /*#__PURE__*/styled$1(View).withConfig({
+var TitleView = /*#__PURE__*/styled(View).withConfig({
   displayName: "Header__TitleView",
   componentId: "kitt-universal__sc-1iwabch-3"
 })(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
@@ -2996,7 +2941,7 @@ function ModalHeader(_ref6) {
   });
 }
 
-var ModalView = /*#__PURE__*/styled$1(View).withConfig({
+var ModalView = /*#__PURE__*/styled(View).withConfig({
   displayName: "Modal__ModalView",
   componentId: "kitt-universal__sc-1xy2w5u-0"
 })(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
@@ -3006,7 +2951,7 @@ var ModalView = /*#__PURE__*/styled$1(View).withConfig({
   var theme = _ref2.theme;
   return theme.kitt.spacing * 4;
 });
-var ContentView = /*#__PURE__*/styled$1(View).withConfig({
+var ContentView = /*#__PURE__*/styled(View).withConfig({
   displayName: "Modal__ContentView",
   componentId: "kitt-universal__sc-1xy2w5u-1"
 })(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
@@ -3069,7 +3014,49 @@ function Notification(_ref) {
   });
 }
 
-var StyledSkeleton = withTheme( /*#__PURE__*/styled("div")({
+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",
   vars: {
@@ -3095,7 +3082,7 @@ function SkeletonContent(_ref4) {
   });
 }
 
-var SkeletonContainer = /*#__PURE__*/styled$1(View).withConfig({
+var SkeletonContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "Skeleton__SkeletonContainer",
   componentId: "kitt-universal__sc-1w5cm3i-0"
 })(["overflow:hidden;"]);
@@ -3120,7 +3107,7 @@ function Skeleton(_ref) {
     })
   });
 }
-var Bar = /*#__PURE__*/styled$1(Skeleton).withConfig({
+var Bar = /*#__PURE__*/styled(Skeleton).withConfig({
   displayName: "Skeleton__Bar",
   componentId: "kitt-universal__sc-1w5cm3i-1"
 })(["width:100%;height:", "px;border-radius:", "px;"], function (_ref3) {
@@ -3130,7 +3117,7 @@ var Bar = /*#__PURE__*/styled$1(Skeleton).withConfig({
   var theme = _ref4.theme;
   return theme.kitt.spacing * 2;
 });
-var Circle = /*#__PURE__*/styled$1(Skeleton).withConfig({
+var Circle = /*#__PURE__*/styled(Skeleton).withConfig({
   displayName: "Skeleton__Circle",
   componentId: "kitt-universal__sc-1w5cm3i-2"
 })(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref5) {
@@ -3143,7 +3130,7 @@ var Circle = /*#__PURE__*/styled$1(Skeleton).withConfig({
   var theme = _ref7.theme;
   return theme.kitt.spacing * 6;
 });
-var Square = /*#__PURE__*/styled$1(Skeleton).withConfig({
+var Square = /*#__PURE__*/styled(Skeleton).withConfig({
   displayName: "Skeleton__Square",
   componentId: "kitt-universal__sc-1w5cm3i-3"
 })(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref8) {
@@ -3160,7 +3147,7 @@ Skeleton.Bar = Bar;
 Skeleton.Circle = Circle;
 Skeleton.Square = Square;
 
-var Flex = /*#__PURE__*/styled$1(View).withConfig({
+var Flex = /*#__PURE__*/styled(View).withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
   }
@@ -3217,7 +3204,7 @@ var useStoryBlockColor = function (color) {
   var storyBlockColor = useContext(StoryBlockColorContext);
   return color || storyBlockColor;
 };
-var StyledStoryBlockView = /*#__PURE__*/styled$1(View).withConfig({
+var StyledStoryBlockView = /*#__PURE__*/styled(View).withConfig({
   displayName: "StoryBlock__StyledStoryBlockView",
   componentId: "kitt-universal__sc-3w4hdm-0"
 })(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, function (_ref) {
@@ -3240,11 +3227,11 @@ function StoryBlock(_ref2) {
   });
 }
 
-var StoryTitleContainer = /*#__PURE__*/styled$1(View).withConfig({
+var StoryTitleContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "StoryTitle__StoryTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-0"
 })(["margin-bottom:30px;"]);
-var StorySubTitleContainer = /*#__PURE__*/styled$1(View).withConfig({
+var StorySubTitleContainer = /*#__PURE__*/styled(View).withConfig({
   displayName: "StoryTitle__StorySubTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-1"
 })(["margin-bottom:10px;"]);
@@ -3319,7 +3306,7 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-var StoryContainer$1 = /*#__PURE__*/styled$1(ScrollView).withConfig({
+var StoryContainer$1 = /*#__PURE__*/styled(ScrollView).withConfig({
   displayName: "Story__StoryContainer",
   componentId: "kitt-universal__sc-1kwdg2p-0"
 })(["padding:", "px;"], storyPadding);
@@ -3338,11 +3325,7 @@ function Story(_ref) {
 var _excluded$2 = ["title", "children", "internalIsDemoSection"],
     _excluded2 = ["title", "children"],
     _excluded3 = ["title", "children"];
-
-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; }
-var StyledSection = /*#__PURE__*/styled$1(View).withConfig({
+var StyledSection = /*#__PURE__*/styled(View).withConfig({
   displayName: "StorySection__StyledSection",
   componentId: "kitt-universal__sc-1b3liv5-0"
 })(["margin-bottom:32px;"]);
@@ -3353,13 +3336,13 @@ function StorySection(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$2);
 
   if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
-  return /*#__PURE__*/jsxs(StyledSection, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level2, {
       children: title
     }), children]
   }));
 }
-var StyledSubSection = /*#__PURE__*/styled$1(View).withConfig({
+var StyledSubSection = /*#__PURE__*/styled(View).withConfig({
   displayName: "StorySection__StyledSubSection",
   componentId: "kitt-universal__sc-1b3liv5-1"
 })(["margin-bottom:16px;"]);
@@ -3369,14 +3352,14 @@ function SubSection(_ref2) {
       children = _ref2.children,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
-  return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level3, {
       children: title
     }), children]
   }));
 }
 
-var StyledBlockSection = /*#__PURE__*/styled$1(View).withConfig({
+var StyledBlockSection = /*#__PURE__*/styled(View).withConfig({
   displayName: "StorySection__StyledBlockSection",
   componentId: "kitt-universal__sc-1b3liv5-2"
 })(["margin-bottom:16px;"]);
@@ -3386,14 +3369,14 @@ function BlockSection(_ref3) {
       children = _ref3.children,
       props = _objectWithoutProperties(_ref3, _excluded3);
 
-  return /*#__PURE__*/jsxs(StyledBlockSection, _objectSpread$2(_objectSpread$2({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledBlockSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level4, {
       children: title
     }), children]
   }));
 }
 
-var StyledDemoSection = /*#__PURE__*/styled$1(View).withConfig({
+var StyledDemoSection = /*#__PURE__*/styled(View).withConfig({
   displayName: "StorySection__StyledDemoSection",
   componentId: "kitt-universal__sc-1b3liv5-3"
 })(["margin-bottom:64px;"]);
@@ -3442,19 +3425,19 @@ function StoryDecorator(storyFn, context) {
   });
 }
 
-var SmallScreenRow = /*#__PURE__*/styled$1(View).withConfig({
+var SmallScreenRow = /*#__PURE__*/styled(View).withConfig({
   displayName: "StoryGrid__SmallScreenRow",
   componentId: "kitt-universal__sc-4z5new-0"
 })(["flex-direction:column;margin:0;"]);
-var SmallScreenCol = /*#__PURE__*/styled$1(View).withConfig({
+var SmallScreenCol = /*#__PURE__*/styled(View).withConfig({
   displayName: "StoryGrid__SmallScreenCol",
   componentId: "kitt-universal__sc-4z5new-1"
 })(["padding:8px 0 16px;"]);
-var FlexRow = /*#__PURE__*/styled$1(View).withConfig({
+var FlexRow = /*#__PURE__*/styled(View).withConfig({
   displayName: "StoryGrid__FlexRow",
   componentId: "kitt-universal__sc-4z5new-2"
 })(["flex-direction:row;margin:0 -4px 16px;"]);
-var FlexCol = /*#__PURE__*/styled$1(View).withConfig({
+var FlexCol = /*#__PURE__*/styled(View).withConfig({
   displayName: "StoryGrid__FlexCol",
   componentId: "kitt-universal__sc-4z5new-3"
 })(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
@@ -3515,7 +3498,7 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var Container = /*#__PURE__*/styled$1(View).withConfig({
+var Container = /*#__PURE__*/styled(View).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
 })(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], function (_ref) {
@@ -3587,14 +3570,11 @@ function TimePicker() {
   });
 }
 
-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 StyledTooltipView = /*#__PURE__*/styled$1(View).withConfig({
+var StyledTooltipView = /*#__PURE__*/styled(View).withConfig({
   displayName: "TooltipView__StyledTooltipView",
   componentId: "kitt-universal__sc-156zm6m-0"
 })(["align-items:center;"]);
-var StyledTooltipContent = /*#__PURE__*/styled$1(View).withConfig({
+var StyledTooltipContent = /*#__PURE__*/styled(View).withConfig({
   displayName: "TooltipView__StyledTooltipContent",
   componentId: "kitt-universal__sc-156zm6m-1"
 })(["background-color:", ";border-radius:", "px;opacity:", ";padding:", ";"], function (_ref) {
@@ -3613,14 +3593,14 @@ var StyledTooltipContent = /*#__PURE__*/styled$1(View).withConfig({
 
 function ArrowView(props) {
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(View, _objectSpread$1(_objectSpread$1({}, props), {}, {
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
   }));
 }
 
-var StyledArrow = /*#__PURE__*/styled$1(ArrowView).withConfig({
+var StyledArrow = /*#__PURE__*/styled(ArrowView).withConfig({
   displayName: "TooltipView__StyledArrow",
   componentId: "kitt-universal__sc-156zm6m-2"
 })(["color:", ";transform:", ";"], function (_ref5) {
@@ -3653,11 +3633,11 @@ var tooltipDefaultFloatingStrategy = {
   web: 'absolute'
 };
 
-var StyledTooltipTrigger = /*#__PURE__*/styled$1(Pressable).withConfig({
+var StyledTooltipTrigger = /*#__PURE__*/styled(Pressable).withConfig({
   displayName: "Tooltipweb__StyledTooltipTrigger",
   componentId: "kitt-universal__sc-zn1y6f-0"
 })(["display:inline-flex;align-self:baseline;"]);
-var WebAnimatedTooltip = /*#__PURE__*/styled$1(View).withConfig({
+var WebAnimatedTooltip = /*#__PURE__*/styled(View).withConfig({
   displayName: "Tooltipweb__WebAnimatedTooltip",
   componentId: "kitt-universal__sc-zn1y6f-1"
 })(["opacity:", ";transition:opacity 200ms;visibility:", ";"], function (_ref) {
@@ -3786,7 +3766,7 @@ function Tooltip(_ref3) {
 }
 Tooltip.View = TooltipView;
 
-var StyledTypographyEmoji = /*#__PURE__*/styled$1(Emoji).withConfig({
+var StyledTypographyEmoji = /*#__PURE__*/styled(Emoji).withConfig({
   displayName: "TypographyEmoji__StyledTypographyEmoji",
   componentId: "kitt-universal__sc-1if5guu-0"
 })(["align-self:center;", ""], function (_ref) {
@@ -3813,11 +3793,7 @@ function TypographyEmoji(_ref2) {
 }
 
 var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
-
-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; }
-var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled("span")({
+var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled$1("span")({
   name: "TypographyLinkWebWrapper",
   "class": "kitt-u_TypographyLinkWebWrapper_tcwz3nt",
   vars: {
@@ -3827,7 +3803,7 @@ var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled("span")({
     }]
   }
 }));
-var StyledLink = /*#__PURE__*/styled$1(Text$1).withConfig({
+var StyledLink = /*#__PURE__*/styled(Text$1).withConfig({
   displayName: "TypographyLink__StyledLink",
   componentId: "kitt-universal__sc-1o1zy30-0"
 })(["text-decoration:", ";", ";", ";"], function (_ref2) {
@@ -3911,5 +3887,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, 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.web.js.map