@ornikar/kitt-universal 5.0.1 → 6.1.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';
 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
   });
 }
 
@@ -136,11 +99,7 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-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 _excluded$h = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
 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) {
@@ -217,7 +176,7 @@ function Typography(_ref4) {
       large = _ref4.large,
       variant = _ref4.variant,
       color = _ref4.color,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$g);
+      otherProps = _objectWithoutProperties(_ref4, _excluded$h);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -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,17 +263,13 @@ 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$g = ["size", "base", "round", "light"];
 
 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) {
@@ -380,13 +335,13 @@ function Avatar(_ref6) {
       base = _ref6$base === void 0 ? 'body-small' : _ref6$base,
       round = _ref6.round,
       light = _ref6.light,
-      props = _objectWithoutProperties(_ref6, _excluded$f);
+      props = _objectWithoutProperties(_ref6, _excluded$g);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$l({
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
       size: size,
       base: base,
       isLight: light
@@ -394,16 +349,47 @@ function Avatar(_ref6) {
   });
 }
 
-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 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 getVariantValuesIfExist(theme, type, variant) {
+  var button = theme.kitt.button[type];
 
-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")({
+  if (hasVariant(button, variant)) {
+    return button[variant];
+  }
+
+  return theme.kitt.button[type]["default"];
+}
+
+function isSubtle(type) {
+  return type.startsWith('subtle');
+}
+
+var _excluded$f = ["$type", "$variant", "$isStretch", "disabled"];
+var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled$1("div")({
   name: "AnimatedButtonPressableContainer",
   "class": "kitt-u_AnimatedButtonPressableContainer_a1vkj3mh",
   vars: {
@@ -427,9 +413,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 +447,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,45 +464,59 @@ 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);
+      props = _objectWithoutProperties(_ref18, _excluded$f);
 
   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 +538,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,
@@ -552,53 +555,45 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled$1(View).withConfig({
   return defaultPadding;
 });
 
-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; }
+var _excluded$e = ["color"],
+    _excluded2$3 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   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));
 }
 
 function TypographyIcon(_ref2) {
   var color = _ref2.color,
-      props = _objectWithoutProperties(_ref2, _excluded2$2);
+      props = _objectWithoutProperties(_ref2, _excluded2$3);
 
   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$d = ["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 +609,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 +627,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 +645,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 +665,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 +678,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 +687,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 +702,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 +722,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);
+      props = _objectWithoutProperties(_ref7, _excluded$d);
 
-  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 +749,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 +777,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 +828,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) {
@@ -869,20 +868,16 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-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; }
+var _excluded$c = ["as", "href", "openLinkBehavior", "onPress"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
       _ref$openLinkBehavior = _ref.openLinkBehavior,
       openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
       onPress = _ref.onPress,
-      rest = _objectWithoutProperties(_ref, _excluded$b);
+      rest = _objectWithoutProperties(_ref, _excluded$c);
 
-  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',
@@ -970,56 +965,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 +1315,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
   }
 };
 
@@ -1495,11 +1511,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;align-items:center;"]);
-var CheckboxContainer = /*#__PURE__*/styled$1(View).withConfig({
+})(["display:flex;flex-direction:row;"]);
+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 +1620,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 +1659,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 +1674,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 +1714,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 +1729,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
@@ -1726,25 +1738,21 @@ 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; }
+var _excluded$b = ["value"];
 // This is not yet implemented
 // We still display the inputs for chromatic
 function DatePicker(_ref) {
   var value = _ref.value,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
-  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: {
@@ -1775,12 +1783,8 @@ 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 _excluded$a = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
+var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
   displayName: "InputText__StyledTextInput",
   componentId: "kitt-universal__sc-uke279-0"
 })(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
@@ -1802,7 +1806,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;"]);
@@ -1825,7 +1829,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
       keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
       _onFocus = _ref4.onFocus,
       _onBlur = _ref4.onBlur,
-      props = _objectWithoutProperties(_ref4, _excluded$9);
+      props = _objectWithoutProperties(_ref4, _excluded$a);
 
   var theme = /*#__PURE__*/useTheme();
 
@@ -1841,7 +1845,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 +1872,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 +1904,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 +1917,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,31 +1975,24 @@ 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; }
+var _excluded$9 = ["isPasswordDefaultVisible", "right"];
 function InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
       _useState2 = _slicedToArray(_useState, 2),
       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 +2011,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 +2023,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 +2046,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 +2087,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 +2111,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 +2127,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 +2143,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 +2183,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 +2213,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 +2233,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 +2251,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 +2341,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 +2357,43 @@ 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,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? defaultIconSize : _ref$size,
+      align = _ref.align,
+      color = _ref.color;
+  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
+    color: color
+  });
+  return /*#__PURE__*/jsx(IconContainer$1, {
+    $align: align,
+    $size: size,
+    $color: color,
+    children: /*#__PURE__*/jsx(StyledSpinningIconContainer, {
+      children: clonedIcon
+    })
+  });
+}
 
-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$8 = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   // 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 _excluded$7 = ["color", "disabled"];
+var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
   name: "PressableIconButtonWebWrapper",
   "class": "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
   vars: {
@@ -2422,7 +2425,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) {
@@ -2449,13 +2452,13 @@ var StyledPressableIconButton = /*#__PURE__*/styled$1(Pressable).withConfig({
 function PressableIconButton(_ref9) {
   var color = _ref9.color,
       disabled = _ref9.disabled,
-      props = _objectWithoutProperties(_ref9, _excluded$6);
+      props = _objectWithoutProperties(_ref9, _excluded$7);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     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 +2478,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) {
@@ -2532,31 +2535,23 @@ 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 _excluded$6 = ["children"];
+var ContentView$1 = /*#__PURE__*/styled(View).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent(_ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$5);
+      rest = _objectWithoutProperties(_ref, _excluded$6);
 
-  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 _excluded$5 = ["children", "side"],
+    _excluded2$2 = ["children", "align"];
+var SideContainerView = /*#__PURE__*/styled(View).withConfig({
   displayName: "ListItemSideContent__SideContainerView",
   componentId: "kitt-universal__sc-1vajiw-0"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -2573,15 +2568,15 @@ function ListItemSideContainer(_ref3) {
   var children = _ref3.children,
       _ref3$side = _ref3.side,
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
-      rest = _objectWithoutProperties(_ref3, _excluded$4);
+      rest = _objectWithoutProperties(_ref3, _excluded$5);
 
-  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) {
@@ -2592,21 +2587,17 @@ function ListItemSideContent(_ref5) {
   var children = _ref5.children,
       _ref5$align = _ref5.align,
       align = _ref5$align === void 0 ? 'auto' : _ref5$align,
-      rest = _objectWithoutProperties(_ref5, _excluded2$1);
+      rest = _objectWithoutProperties(_ref5, _excluded2$2);
 
-  return /*#__PURE__*/jsx(SideContentView, _objectSpread$5(_objectSpread$5({
+  return /*#__PURE__*/jsx(SideContentView, _objectSpread(_objectSpread({
     align: align
   }, rest), {}, {
     children: children
   }));
 }
 
-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 _excluded$4 = ["children", "withPadding", "borders", "left", "right", "onPress"];
+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) {
@@ -2645,16 +2636,16 @@ function ListItem(_ref5) {
       left = _ref5.left,
       right = _ref5.right,
       onPress = _ref5.onPress,
-      rest = _objectWithoutProperties(_ref5, _excluded$3);
+      rest = _objectWithoutProperties(_ref5, _excluded$4);
 
   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,7 +2665,7 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-var LargeLoaderContainer = withTheme( /*#__PURE__*/styled("div")({
+var LargeLoaderContainer = withTheme( /*#__PURE__*/styled$1("div")({
   name: "LargeLoaderContainer",
   "class": "kitt-u_LargeLoaderContainer_l2im3sa",
   vars: {
@@ -2714,13 +2705,45 @@ function LargeLoader() {
   });
 }
 
+var _excluded$3 = ["color"],
+    _excluded2$1 = ["color"];
+
+function TypographySpinningIconSpecifiedColor(_ref) {
+  var color = _ref.color,
+      props = _objectWithoutProperties(_ref, _excluded$3);
+
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsx(SpinningIcon, _objectSpread(_objectSpread({}, props), {}, {
+    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
+  }));
+}
+
+function TypographySpinningIconInheritColor(props) {
+  var color = useTypographyColor();
+  return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
+    color: color
+  }, props));
+}
+
+function TypographySpinningIcon(_ref2) {
+  var color = _ref2.color,
+      props = _objectWithoutProperties(_ref2, _excluded2$1);
+
+  if (color) {
+    return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
+      color: color
+    }, props));
+  }
+
+  return /*#__PURE__*/jsx(TypographySpinningIconInheritColor, _objectSpread({}, props));
+}
+
 function Loader(_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'primary' : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 20 : _ref$size;
-  return /*#__PURE__*/jsx(TypographyIcon, {
-    spin: true,
+  return /*#__PURE__*/jsx(TypographySpinningIcon, {
     color: color,
     size: size,
     icon: /*#__PURE__*/jsx(LoaderIcon, {})
@@ -2779,7 +2802,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 +2819,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 +2827,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 +2835,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,16 +2906,13 @@ 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
   });
 });
@@ -2905,7 +2925,7 @@ function Overlay(_ref2) {
   });
 }
 
-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 +2944,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 +2963,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 +2973,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 +3016,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 +3026,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 +3089,7 @@ function Notification(_ref) {
   });
 }
 
-var StyledSkeleton = withTheme( /*#__PURE__*/styled("div")({
+var StyledSkeleton = withTheme( /*#__PURE__*/styled$1("div")({
   name: "StyledSkeleton",
   "class": "kitt-u_StyledSkeleton_sc3upcl",
   vars: {
@@ -3095,7 +3115,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 +3140,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 +3150,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 +3163,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 +3180,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 +3237,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 +3260,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 +3339,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 +3358,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 +3369,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 +3385,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 +3402,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 +3458,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 +3531,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 +3603,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 +3626,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 +3666,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 +3799,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 +3826,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 +3836,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 +3920,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, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, TypographySpinningIcon, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.web.js.map