@ornikar/kitt-universal 3.0.0-beta.1 → 3.2.0

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

@@ -0,0 +1,3173 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const BabelPluginStyledComponentsReactNative = require('react-native');
+const kittIcons = require('@ornikar/kitt-icons');
+const styled = require('styled-components/native');
+const react$1 = require('react');
+const react = require('@linaria/react');
+const jsxRuntime = require('react/jsx-runtime');
+const twemojiParser = require('twemoji-parser');
+const reactNativeSafeAreaContext = require('react-native-safe-area-context');
+const reactDom = require('@floating-ui/react-dom');
+const addons = require('@storybook/addons');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
+// export function withTheme<Props extends { theme: DefaultTheme }, C>(
+//   WrappedComponent: ComponentType<Props> & C,
+// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
+//   return function ThemedComponent(props) {
+//     const theme = useTheme();
+//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
+//   };
+// }
+function withTheme(WrappedComponent) {
+  return function (props) {
+    const theme = /*#__PURE__*/styled.useTheme();
+    return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
+      theme: theme,
+      ...props
+    });
+  };
+}
+
+const StyledSpinningIconContainer = withTheme( /*#__PURE__*/react.styled("div")({
+  name: "StyledSpinningIconContainer",
+  class: "ssn8o83"
+}));
+function SpinningIcon({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSpinningIconContainer, {
+    children: children
+  });
+}
+
+const IconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Icon__IconContainer",
+  componentId: "kitt-universal__sc-usm0ol-0"
+})(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
+  color
+}) => color, ({
+  size
+}) => size, ({
+  size
+}) => size, ({
+  align = 'auto'
+}) => align);
+function Icon({
+  icon,
+  size = 20,
+  spin,
+  align,
+  color
+}) {
+  const clonedIcon = /*#__PURE__*/react$1.cloneElement(icon, {
+    color
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
+    align: align,
+    size: size,
+    color: color,
+    children: spin ? /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
+      children: clonedIcon
+    }) : clonedIcon
+  });
+}
+
+const KittBreakpoints = {
+  /**
+   * min-width: 0
+   */
+  BASE: 0,
+
+  /**
+   * min-width: 480px
+   */
+  SMALL: 480,
+
+  /**
+   * min-width: 768px
+   */
+  MEDIUM: 768,
+
+  /**
+   * min-width: 1024px
+   */
+  LARGE: 1024,
+
+  /**
+   * min-width: 1280px
+   */
+  WIDE: 1280
+};
+const KittBreakpointsMax = {
+  /**
+   * max-width: 479px
+   */
+  BASE: KittBreakpoints.SMALL - 1,
+
+  /**
+   * max-width: 767px
+   */
+  SMALL: KittBreakpoints.MEDIUM - 1,
+
+  /**
+   * max-width: 1023px
+   */
+  MEDIUM: KittBreakpoints.LARGE - 1,
+
+  /**
+   * max-width: 1279px
+   */
+  LARGE: KittBreakpoints.WIDE - 1
+};
+
+const IsHeaderTypographyContext = /*#__PURE__*/react$1.createContext(undefined);
+const TypographyColorContext = /*#__PURE__*/react$1.createContext('black');
+function useTypographyColor() {
+  return react$1.useContext(TypographyColorContext);
+}
+const getTypographyTypeConfigKey = theme => {
+  const isMediumOrAbove = theme.responsive.matchWindowSize({
+    minWidth: KittBreakpoints.MEDIUM
+  });
+  return isMediumOrAbove ? 'mediumAndWide' : 'baseAndSmall';
+};
+
+const isTypeHeader = type => type.startsWith('header');
+
+const isTypographyHeader = (type, typographyIsHeaderInContext) => {
+  if (type) return isTypeHeader(type);
+  if (typographyIsHeaderInContext != null) return typographyIsHeaderInContext;
+  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
+};
+function getTypographyTypeConfig(type, theme) {
+  if (isTypographyHeader(type, undefined)) {
+    return theme.kitt.typography.types.headers.configs[type];
+  }
+
+  return theme.kitt.typography.types.bodies.configs[type];
+}
+const StyledTypography = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Text).withConfig({
+  displayName: "Typography__StyledTypography",
+  componentId: "kitt-universal__sc-1dz700q-0"
+})(["", " ", ""], ({
+  theme,
+  $isHeader,
+  $typeForCurrentWindowSize,
+  $variant
+}) => {
+  const {
+    headers,
+    bodies
+  } = theme.kitt.typography.types;
+  const typeConfigKey = getTypographyTypeConfigKey(theme);
+  return `
+      /* type */
+      ${!$typeForCurrentWindowSize ? '' : `
+  font-family: ${$isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant]};
+  font-size: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize};
+  line-height: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight};
+    `}
+
+    /* variant */
+    font-weight: ${$isHeader ? headers.fontWeight : bodies.fontWeight[$variant]};
+    font-style: ${$isHeader ? headers.fontStyle : bodies.fontStyle[$variant]};
+  `;
+}, ({
+  theme,
+  $color
+}) => !$color ? '' : `
+  color: ${theme.kitt.typography.colors[$color]};
+  text-decoration-color: ${theme.kitt.typography.colors[$color]};
+  `);
+function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
+  const {
+    width
+  } = BabelPluginStyledComponentsReactNative.useWindowDimensions();
+  if (large && width >= KittBreakpoints.LARGE) return large;
+  if (medium && width >= KittBreakpoints.MEDIUM) return medium;
+  if (small && width >= KittBreakpoints.SMALL) return small;
+  return base;
+}
+function Typography({
+  accessibilityRole,
+  base,
+  small,
+  medium,
+  large,
+  variant,
+  color,
+  ...otherProps
+}) {
+  const isHeaderTypographyInContext = react$1.useContext(IsHeaderTypographyContext);
+  const typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
+  const isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
+  const nonNullableVariant = variant ?? (isHeader ? 'bold' : 'regular'); // if isHeaderTypographyInContext exists, it means we are inside another typography so we don't want to
+  // redefine the color, just inherit from it
+
+  const colorWithDefaultToBlack = color ?? (isHeaderTypographyInContext !== undefined ? undefined : 'black');
+  const content = base ? /*#__PURE__*/jsxRuntime.jsx(IsHeaderTypographyContext.Provider, {
+    value: isHeader,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
+      $color: colorWithDefaultToBlack,
+      $isHeader: isHeader,
+      $typeForCurrentWindowSize: typeForCurrentWindowSize,
+      $variant: nonNullableVariant,
+      accessibilityRole: accessibilityRole || undefined,
+      ...otherProps
+    })
+  }) : /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
+    $color: colorWithDefaultToBlack,
+    $isHeader: isHeader,
+    $variant: nonNullableVariant,
+    accessibilityRole: accessibilityRole || undefined,
+    ...otherProps
+  });
+  return color ? /*#__PURE__*/jsxRuntime.jsx(TypographyColorContext.Provider, {
+    value: color,
+    children: content
+  }) : content;
+}
+
+function TypographyText(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    accessibilityRole: null,
+    ...props
+  });
+}
+
+function TypographyParagraph(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    accessibilityRole: "paragraph",
+    ...props
+  });
+}
+
+const createHeading = (level, defaultBase) => {
+  // https://github.com/necolas/react-native-web/issues/401
+  function TypographyHeading(props) {
+    return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      accessibilityRole: "header",
+      base: defaultBase,
+      ...props,
+      accessibilityLevel: level
+    });
+  }
+
+  TypographyHeading.displayName = `TypographyHeading${level}`;
+  return TypographyHeading;
+};
+
+Typography.Text = TypographyText;
+Typography.Paragraph = TypographyParagraph;
+Typography.Header1 = createHeading(1);
+Typography.Header2 = createHeading(2);
+Typography.Header3 = createHeading(3);
+Typography.Header4 = createHeading(4);
+Typography.Header5 = createHeading(5);
+Typography.Header6 = createHeading(6);
+/** @deprecated use Typography.Header1 */
+
+Typography.h1 = createHeading(1, 'header1');
+/** @deprecated use Typography.Header2 */
+
+Typography.h2 = createHeading(2, 'header2');
+/** @deprecated use Typography.Header3 */
+
+Typography.h3 = createHeading(3, 'header3');
+/** @deprecated use Typography.Header4 */
+
+Typography.h4 = createHeading(4, 'header4');
+/** @deprecated use Typography.Header6 */
+
+Typography.h5 = createHeading(5, 'header5');
+
+const getFirstCharacter = string => string ? string[0] : '';
+
+const getInitials = (firstname, lastname) => (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
+
+const StyledAvatarView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Avatar__StyledAvatarView",
+  componentId: "kitt-universal__sc-9miubv-0"
+})(["border-radius:", "px;background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
+  round,
+  size
+}) => round ? size / 2 : 10, ({
+  theme,
+  light
+}) => light ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
+  size
+}) => size, ({
+  size
+}) => size);
+
+function AvatarContent({
+  size = 40,
+  src,
+  firstname,
+  lastname,
+  light
+}) {
+  if (src) {
+    return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Image, {
+      source: {
+        uri: src
+      },
+      style: {
+        width: size,
+        height: size
+      }
+    });
+  }
+
+  if (firstname && lastname) {
+    return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body-small",
+      variant: "bold",
+      color: light ? 'black' : 'white',
+      children: getInitials(firstname, lastname)
+    });
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, {
+    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.UserIcon, {}),
+    color: light ? 'black' : 'white',
+    size: size / 2
+  });
+}
+
+function Avatar({
+  size = 40,
+  ...rest
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, { ...rest,
+    size: size,
+    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, { ...rest,
+      size: size
+    })
+  });
+}
+
+function isSubtle(type) {
+  return type.startsWith('subtle');
+}
+
+const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react.styled("div")({
+  name: "AnimatedButtonPressableContainer",
+  class: "a1vkj3mh",
+  vars: {
+    "a1vkj3mh-0": [({
+      $isStretch
+    }) => $isStretch ? 'inherit' : 'inline-flex'],
+    "a1vkj3mh-1": [({
+      $isStretch
+    }) => $isStretch ? 'stretch' : 'baseline'],
+    "a1vkj3mh-2": [({
+      theme
+    }) => theme.breakpoints.min.mediumBreakpoint],
+    "a1vkj3mh-3": [({
+      theme
+    }) => theme.kitt.button.scale.medium.hover],
+    "a1vkj3mh-4": [({
+      theme,
+      $isDisabled
+    }) => `scale(${$isDisabled ? 1 : theme.kitt.button.scale.base.active})`],
+    "a1vkj3mh-5": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.button.disabled.hoverBackgroundColor;
+      return theme.kitt.button[$type].hoverBackgroundColor;
+    }],
+    "a1vkj3mh-6": [({
+      theme
+    }) => {
+      const {
+        duration,
+        timingFunction
+      } = theme.kitt.button.transition;
+      return `color, background, border-color, ${duration} ${timingFunction}`;
+    }],
+    "a1vkj3mh-7": [({
+      theme
+    }) => theme.kitt.button.borderRadius],
+    "a1vkj3mh-8": [({
+      theme
+    }) => `opacity ${theme.kitt.button.transition.duration} ${theme.kitt.button.transition.timingFunction}`],
+    "a1vkj3mh-9": [({
+      $isDisabled
+    }) => $isDisabled ? 1 : 0],
+    "a1vkj3mh-10": [({
+      theme
+    }) => `-${theme.kitt.button.borderWidth.disabled}`],
+    "a1vkj3mh-12": [({
+      theme
+    }) => `calc(100% - ${parseInt(theme.kitt.button.borderWidth.disabled, 10) * 0.5}px)`],
+    "a1vkj3mh-14": [({
+      theme
+    }) => `${theme.kitt.button.disabled.borderColor} solid ${theme.kitt.button.borderWidth.disabled}`],
+    "a1vkj3mh-15": [({
+      theme,
+      $type
+    }) => `${theme.kitt.button.borderWidth.focus} solid ${theme.kitt.button[$type].focusBorderColor}`],
+    "a1vkj3mh-16": [({
+      theme
+    }) => `-${theme.kitt.button.borderWidth.focus}`],
+    "a1vkj3mh-18": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+      if (!isSubtle($type)) return 'inherit';
+      return theme.kitt.button[$type].color;
+    }],
+    "a1vkj3mh-19": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+      if (!isSubtle($type)) return 'inherit';
+      return theme.kitt.button[$type].hoverColor;
+    }],
+    "a1vkj3mh-20": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+      if (!isSubtle($type)) return 'inherit';
+      return theme.kitt.button[$type].activeColor;
+    }]
+  }
+}));
+const AnimatedButtonPressable = /*#__PURE__*/react$1.forwardRef(({
+  $type,
+  $isStretch,
+  disabled,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressableContainer, {
+    ref: ref,
+    $type: $type,
+    $isDisabled: !!disabled,
+    $isStretch: $isStretch,
+    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, {
+      disabled: disabled,
+      ...props
+    })
+  });
+});
+
+const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "BaseStyledButtonPressable",
+  componentId: "kitt-universal__sc-4k8lse-0"
+})(["position:relative;min-width:", ";max-width:", ";width:", ";min-height:", ";border-radius:", ";flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], ({
+  theme
+}) => theme.kitt.button.minWidth, ({
+  theme,
+  $isStretch
+}) => $isStretch ? '100%' : theme.kitt.button.maxWidth, ({
+  $isStretch
+}) => $isStretch ? '100%' : 'auto', ({
+  theme
+}) => theme.kitt.button.minHeight, ({
+  theme
+}) => theme.kitt.button.borderRadius, ({
+  theme,
+  $isDisabled,
+  $type
+}) => {
+  if ($isDisabled) return theme.kitt.button.disabled.backgroundColor;
+  return theme.kitt.button[$type].backgroundColor;
+}, ({
+  theme,
+  $isLarge,
+  $isDisabled
+}) => {
+  const {
+    large,
+    default: defaultPadding,
+    disabled: disabledPadding
+  } = theme.kitt.button.contentPadding;
+  if ($isLarge) return large;
+  if ($isDisabled) return disabledPadding;
+  return defaultPadding;
+});
+
+function TypographyIconSpecifiedColor({
+  color,
+  ...props
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, { ...props,
+    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
+  });
+}
+
+function TypographyIconInheritColor(props) {
+  const color = useTypographyColor();
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIconSpecifiedColor, {
+    color: color,
+    ...props
+  });
+}
+
+function TypographyIcon({
+  color,
+  ...props
+}) {
+  if (color) {
+    return /*#__PURE__*/jsxRuntime.jsx(TypographyIconSpecifiedColor, {
+      color: color,
+      ...props
+    });
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIconInheritColor, { ...props
+  });
+}
+
+const getTextColorByType = type => {
+  switch (type) {
+    case 'primary':
+      return 'white';
+
+    case 'white':
+      return 'white';
+
+    case 'subtle':
+      return 'primary';
+
+    case 'subtle-dark':
+      return 'black';
+
+    default:
+      return 'black';
+  }
+};
+
+const StyledButtonText = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "ButtonContent__StyledButtonText",
+  componentId: "kitt-universal__sc-dnyw3n-0"
+})(["text-align:center;", " ", ""], () => {
+  // Make the multilines case work properly on native
+  // Breaks the web implem
+  return undefined;
+}, ({
+  $type,
+  $isDisabled
+}) => {
+  /* For subltes button, color changes when hovered.
+   * We don't want to use a mouse event handler with a react state to handle it
+   * For this precise case, we've decided to work outside the typography logic
+   */
+  if ($isDisabled || !isSubtle($type)) return undefined;
+  return 'color: inherit';
+});
+const StyledIconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ButtonContent__StyledIconContainer",
+  componentId: "kitt-universal__sc-dnyw3n-1"
+})(["", ""], ({
+  theme,
+  $iconPosition
+}) => {
+  const value = theme.kitt.spacing * 2;
+
+  if ($iconPosition === 'left') {
+    return `margin: 0 ${value}px 0 0;`;
+  }
+
+  return `margin: 0 0 0 ${value}px;`;
+});
+
+function ButtonIcon({
+  icon,
+  color,
+  spin,
+  iconPosition,
+  testID
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer, {
+    $iconPosition: iconPosition,
+    children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+      icon: icon,
+      spin: spin,
+      testID: testID,
+      color: color
+    })
+  });
+}
+
+const StyledChildrenWithIcon = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ButtonContent__StyledChildrenWithIcon",
+  componentId: "kitt-universal__sc-dnyw3n-2"
+})(["align-items:center;justify-content:center;flex-direction:row;"]);
+function ButtonContentChildren({
+  type,
+  icon,
+  iconPosition,
+  iconSpin,
+  isDisabled,
+  color,
+  children
+}) {
+  if ((process.env.NODE_ENV !== "production")) {
+    if (!(children || icon)) {
+      throw new Error('kitt(Button): You should provide at least a children or a icon');
+    }
+  }
+
+  const isWebSubtle = isSubtle(type) && "web" === 'web' && !isDisabled;
+
+  if (!children) {
+    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+      spin: iconSpin // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      ,
+      icon: icon,
+      color: isWebSubtle ? 'inherit' : color
+    });
+  }
+
+  const buttonIconSharedProps = {
+    type,
+    spin: iconSpin,
+    iconPosition,
+    color: isWebSubtle ? 'inherit' : color
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledChildrenWithIcon, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, { ...buttonIconSharedProps,
+      testID: "button-left-icon",
+      icon: icon
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(StyledButtonText, {
+      base: "body",
+      variant: "bold",
+      $type: type,
+      $isDisabled: isDisabled // set to color: inherit via styled components
+      ,
+      color: isWebSubtle ? undefined : color,
+      children: children
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, { ...buttonIconSharedProps,
+      icon: icon
+    }) : null]
+  });
+}
+const ButtonContentContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ButtonContent__ButtonContentContainer",
+  componentId: "kitt-universal__sc-dnyw3n-3"
+})(["line-height:16px;", " ", ";"], ({
+  $isStretch,
+  $isIconOnly
+}) => {
+  return `
+      flex: ${$isStretch || $isIconOnly ? 1 : 0} 1 auto;
+    `;
+}, ({
+  $isSubtle
+}) => {
+  if (!$isSubtle) return undefined; // Needed for subtle type
+
+  return 'color: inherit';
+});
+function ButtonContent({
+  type,
+  isDisabled,
+  $isStretch,
+  icon,
+  children,
+  ...props
+}) {
+  const color = isDisabled ? 'black-light' : getTextColorByType(type);
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonContentContainer, {
+    $isSubtle: isSubtle(type),
+    $isStretch: $isStretch,
+    $isIconOnly: Boolean(!children && icon),
+    children: /*#__PURE__*/jsxRuntime.jsx(ButtonContentChildren, {
+      icon: icon,
+      type: type,
+      isDisabled: isDisabled,
+      color: color,
+      ...props,
+      children: children
+    })
+  });
+}
+
+const Button = /*#__PURE__*/react$1.forwardRef(({
+  children,
+  type = 'default',
+  disabled,
+  stretch,
+  large,
+  icon,
+  iconPosition = 'left',
+  iconSpin,
+  testID,
+  href,
+  hrefAttrs,
+  accessibilityRole = 'button',
+  onPress
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressable, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
+    testID: testID,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    disabled: disabled,
+    $isStretch: stretch,
+    $type: type,
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsxs(BaseStyledButtonPressable, {
+      $type: type,
+      $isStretch: stretch,
+      $isLarge: large,
+      $isDisabled: disabled,
+      children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
+        type: type,
+        $isStretch: stretch,
+        isDisabled: disabled,
+        icon: icon,
+        iconPosition: iconPosition,
+        iconSpin: iconSpin,
+        children: children
+      }), null]
+    })
+  });
+});
+
+const Container$5 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Card__Container",
+  componentId: "kitt-universal__sc-1n9psug-0"
+})(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
+  theme,
+  type
+}) => theme.kitt.card[type].backgroundColor, ({
+  theme
+}) => theme.kitt.card.padding, ({
+  theme
+}) => theme.kitt.card.borderRadius, ({
+  theme
+}) => theme.kitt.card.borderWidth, ({
+  theme,
+  type
+}) => theme.kitt.card[type].borderColor);
+function Card({
+  children,
+  type
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$5, {
+    type: type,
+    children: children
+  });
+}
+
+const StyledEmoji = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Image).withConfig({
+  displayName: "Emoji__StyledEmoji",
+  componentId: "kitt-universal__sc-ggl6wj-0"
+})(["width:", "px;height:", "px;"], ({
+  size
+}) => size, ({
+  size
+}) => size);
+function Emoji({
+  emoji,
+  size,
+  style
+}) {
+  const [emojiData] = react$1.useMemo(() => twemojiParser.parse(emoji, {
+    // on native plaforms, you can't display svg as Image
+    assetType: 'svg'
+  }), [emoji]);
+  if (!emojiData) return null;
+  return /*#__PURE__*/jsxRuntime.jsx(StyledEmoji, {
+    size: size,
+    accessibilityLabel: emojiData.text,
+    source: {
+      uri: emojiData.url
+    },
+    style: style
+  });
+}
+
+const defaultOpenLinkBehavior = {
+  native: 'openInModal',
+  web: 'targetBlank'
+};
+
+function ExternalLink({
+  as: Component,
+  href,
+  openLinkBehavior = defaultOpenLinkBehavior,
+  onPress,
+  ...rest
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Component, { ...rest,
+    href: href,
+    hrefAttrs: openLinkBehavior?.web === 'targetSelf' ? undefined : {
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    },
+    onPress: onPress
+  });
+}
+
+const getColorFromState = state => {
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    default:
+      return 'black-light';
+  }
+};
+
+function InputFeedback({
+  state,
+  testID,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+    base: "body-small",
+    color: getColorFromState(state),
+    testID: testID,
+    children: children
+  });
+}
+
+const FieldContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__FieldContainer",
+  componentId: "kitt-universal__sc-13fkixs-0"
+})(["padding:5px 0 10px;"]);
+const FeedbackContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__FeedbackContainer",
+  componentId: "kitt-universal__sc-13fkixs-1"
+})(["", ";"], ({
+  theme
+}) => theme.responsive.ifWindowSizeMatches({
+  minWidth: KittBreakpoints.SMALL
+}, 'padding-top: 10px', 'padding-top: 5px'));
+const FieldLabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__FieldLabelContainer",
+  componentId: "kitt-universal__sc-13fkixs-2"
+})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
+  theme
+}) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
+const LabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__LabelContainer",
+  componentId: "kitt-universal__sc-13fkixs-3"
+})(["margin-right:", "px;"], ({
+  theme
+}) => theme.kitt.forms.inputField.iconMarginLeft);
+function InputField({
+  label,
+  labelFeedback,
+  input,
+  feedback
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(FieldContainer, {
+    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(FieldLabelContainer, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(LabelContainer, {
+        children: label
+      }), labelFeedback]
+    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(FeedbackContainer, {
+      children: feedback
+    }) : null]
+  });
+}
+
+const useInputText = () => {
+  const [isFocused, setIsFocused] = react$1.useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = react$1.useState(false);
+  return {
+    isFocused,
+    handleInputFocus: () => setIsFocused(true),
+    handleInputBlur: () => setIsFocused(false),
+    togglePasswordVisibility: () => setIsPasswordVisible(isVisible => !isVisible),
+    isPasswordVisible
+  };
+};
+
+const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", ";border-radius:", ";border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
+  theme,
+  state
+}) => state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
+  theme
+}) => theme.kitt.forms.input.borderWidth, ({
+  theme
+}) => theme.kitt.forms.input.borderRadius, ({
+  theme,
+  state
+}) => theme.kitt.forms.input.states[state].borderColor, ({
+  theme
+}) => {
+  const typeConfigKey = getTypographyTypeConfigKey(theme);
+  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize;
+}, ({
+  theme,
+  state
+}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[state].color], ({
+  theme
+}) => theme.kitt.typography.types.bodies.fontFamily.regular);
+const Input = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.TextInput).withConfig({
+  displayName: "InputText__Input",
+  componentId: "kitt-universal__sc-uke279-0"
+})(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, ({
+  theme,
+  multiline
+}) => !multiline && "web" === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding, ({
+  theme,
+  multiline
+}) => {
+  if (!multiline && "web" === 'ios') return 0;
+  const typeConfigKey = getTypographyTypeConfigKey(theme);
+  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
+}, ({
+  minHeight
+}) => minHeight);
+const Container$4 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputText__Container",
+  componentId: "kitt-universal__sc-uke279-1"
+})(["margin-top:", ";margin-bottom:", ";"], ({
+  theme
+}) => theme.kitt.forms.input.marginTop, ({
+  theme
+}) => theme.kitt.forms.input.marginBottom);
+const PasswordButtonContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
+  displayName: "InputText__PasswordButtonContainer",
+  componentId: "kitt-universal__sc-uke279-2"
+})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], ({
+  theme
+}) => theme.kitt.forms.input.passwordButtonIconSize / 2);
+
+const getInputState = ({
+  isDisabled,
+  isFocused,
+  formState
+}) => {
+  if (isDisabled) return 'disabled';
+  if (isFocused) return 'focus';
+  if (formState === 'invalid') return 'invalid';
+  return 'default';
+};
+
+const keyboardTypeByTextInputType = {
+  text: 'default',
+  email: 'email-address',
+  password: 'default',
+  username: 'default'
+};
+const autoCompleteTypeByType = {
+  text: 'off',
+  email: 'email',
+  password: 'password',
+  username: 'name'
+};
+const autoCorrectByType = {
+  text: true,
+  email: false,
+  password: false,
+  username: false
+};
+const textContentTypeByType = {
+  text: 'none',
+  email: 'emailAddress',
+  password: 'password',
+  username: 'username'
+};
+const InputText = /*#__PURE__*/react$1.forwardRef(({
+  id,
+  minHeight = 0,
+  type,
+  state: formState,
+  internalForceState,
+  disabled = false,
+  onFocus,
+  onBlur,
+  ...props
+}, ref) => {
+  const {
+    isFocused,
+    handleInputBlur,
+    handleInputFocus,
+    isPasswordVisible,
+    togglePasswordVisibility
+  } = useInputText();
+  const theme = /*#__PURE__*/styled.useTheme();
+  const state = internalForceState || getInputState({
+    isFocused,
+    isDisabled: disabled,
+    formState
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$4, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+      ref: ref,
+      nativeID: id,
+      editable: !disabled,
+      keyboardType: keyboardTypeByTextInputType[type],
+      autoCompleteType: autoCompleteTypeByType[type],
+      autoCorrect: autoCorrectByType[type],
+      minHeight: minHeight,
+      textContentType: textContentTypeByType[type],
+      placeholderTextColor: theme.kitt.typography.colors[theme.kitt.forms.input.placeholderColor],
+      selectionColor: theme.kitt.forms.input.selectionColor,
+      secureTextEntry: type === 'password' && !isPasswordVisible,
+      ...props,
+      state: state,
+      onFocus: e => {
+        handleInputFocus();
+        if (onFocus) onFocus(e);
+      },
+      onBlur: e => {
+        handleInputBlur();
+        if (onBlur) onBlur(e);
+      }
+    }), type === 'password' && !disabled && /*#__PURE__*/jsxRuntime.jsx(PasswordButtonContainer, {
+      accessibilityRole: "button",
+      onPress: togglePasswordVisibility,
+      children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+        icon: isPasswordVisible ? /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeIcon, {}) : /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeOffIcon, {}),
+        size: theme.kitt.forms.input.passwordButtonIconSize,
+        color: theme.kitt.forms.input.states[state].passwordButtonIconColor
+      })
+    })]
+  });
+});
+
+function Label({
+  htmlFor,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+    base: "body",
+    children: /*#__PURE__*/jsxRuntime.jsx("label", {
+      htmlFor: htmlFor,
+      children: children
+    })
+  });
+}
+
+const OuterRadio = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Radio__OuterRadio",
+  componentId: "kitt-universal__sc-1mdgr2o-0"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], ({
+  theme,
+  disabled
+}) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor, ({
+  theme
+}) => theme.kitt.forms.radio.size, ({
+  theme
+}) => theme.kitt.forms.radio.size, ({
+  theme
+}) => theme.kitt.forms.radio.size / 2, ({
+  theme
+}) => theme.kitt.forms.radio.unchecked.borderWidth, ({
+  theme,
+  disabled
+}) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor);
+const SelectedOuterRadio = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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;"], ({
+  theme
+}) => theme.kitt.forms.radio.checked.backgroundColor, ({
+  theme
+}) => theme.kitt.forms.radio.size, ({
+  theme
+}) => theme.kitt.forms.radio.size, ({
+  theme
+}) => theme.kitt.forms.radio.size / 2);
+const SelectedInnerRadio = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Radio__SelectedInnerRadio",
+  componentId: "kitt-universal__sc-1mdgr2o-2"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], ({
+  theme
+}) => theme.kitt.forms.radio.checked.innerBackgroundColor, ({
+  theme
+}) => theme.kitt.forms.radio.checked.innerSize, ({
+  theme
+}) => theme.kitt.forms.radio.checked.innerSize, ({
+  theme
+}) => theme.kitt.forms.radio.checked.innerSize / 2);
+const Container$3 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
+  displayName: "Radio__Container",
+  componentId: "kitt-universal__sc-1mdgr2o-3"
+})(["flex-direction:row;align-items:center;"]);
+const Text = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "Radio__Text",
+  componentId: "kitt-universal__sc-1mdgr2o-4"
+})(["margin-left:", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 2);
+function Radio({
+  id,
+  checked,
+  onChange,
+  value,
+  disabled = false,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$3, {
+    nativeID: id,
+    disabled: disabled,
+    accessibilityRole: "radio",
+    "aria-checked": checked,
+    focusable: checked && !disabled,
+    onPress: () => {
+      onChange(value);
+    },
+    children: [checked && !disabled ? /*#__PURE__*/jsxRuntime.jsx(SelectedOuterRadio, {
+      children: /*#__PURE__*/jsxRuntime.jsx(SelectedInnerRadio, {})
+    }) : /*#__PURE__*/jsxRuntime.jsx(OuterRadio, {
+      disabled: disabled
+    }), /*#__PURE__*/jsxRuntime.jsx(Text, {
+      base: "body",
+      color: disabled ? 'black-light' : 'black',
+      children: children
+    })]
+  });
+}
+
+function TextArea({ ...props
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    multiline: true,
+    ...props,
+    type: "text",
+    minHeight: theme.kitt.forms.input.textAreaMinHeight
+  });
+}
+
+const Body = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Body",
+  componentId: "kitt-universal__sc-1ofncfn-0"
+})(["", " background-color:", ";flex:1;"], ({
+  theme
+}) => theme.responsive.ifWindowSizeMatches({
+  minWidth: KittBreakpoints.MEDIUM
+}, `padding-right: ${theme.kitt.spacing * 12}px;
+      padding-left: ${theme.kitt.spacing * 12}px;`, `padding-right: ${theme.kitt.spacing * 6}px;
+      padding-left: ${theme.kitt.spacing * 6}px;`), ({
+  theme
+}) => theme.kitt.colors.uiBackgroundLight);
+function FullScreenModalBody({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Body, {
+    children: children
+  });
+}
+
+const SideContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header__SideContainer",
+  componentId: "kitt-universal__sc-dfmxi1-0"
+})(["", ""], ({
+  theme,
+  side = 'left'
+}) => {
+  const padding = theme.kitt.spacing * 2;
+
+  if (side === 'left') {
+    return `padding-right: ${padding}px;`;
+  }
+
+  return `padding-left: ${padding}px;`;
+});
+
+function getHeaderHorizontalMediumPadding(spacing) {
+  return spacing * 6;
+}
+
+const Header = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header",
+  componentId: "kitt-universal__sc-dfmxi1-1"
+})(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], ({
+  theme,
+  insetTop = 0
+}) => {
+  const paddingTop = insetTop + theme.kitt.fullScreenModal.header.paddingVertical;
+  const {
+    paddingVertical,
+    paddingHorizontal
+  } = theme.kitt.fullScreenModal.header;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.MEDIUM
+  }, `padding: ${paddingTop}px ${getHeaderHorizontalMediumPadding(theme.kitt.spacing)}px ${paddingVertical}px;`, `padding: ${paddingTop}px ${paddingHorizontal}px ${paddingVertical}px;`);
+}, ({
+  theme
+}) => theme.kitt.fullScreenModal.header.borderColor);
+const HeaderContent = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header__HeaderContent",
+  componentId: "kitt-universal__sc-dfmxi1-2"
+})(["", ";", ";justify-content:center;align-items:center;"], ({
+  theme,
+  leftWidth,
+  rightWidth,
+  windowWidth
+}) => {
+  /*
+   * Since we don't have controll over the rendered left and right elements,
+   * we must apply some logic to give the title all the available space
+   */
+  const sideElementMaxWidth = Math.max(leftWidth, rightWidth);
+  const parentHorizontalPadding = theme.kitt.fullScreenModal.header.paddingHorizontal * 2;
+  const parentHorizontalPaddingMedium = getHeaderHorizontalMediumPadding(theme.kitt.spacing) * 2;
+
+  const computeWidth = breakpointPadding => windowWidth - breakpointPadding - sideElementMaxWidth * 2;
+
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.MEDIUM
+  }, `width: ${computeWidth(parentHorizontalPaddingMedium)}px;`, `width: ${computeWidth(parentHorizontalPadding)}px;`);
+}, ({
+  leftWidth,
+  rightWidth
+}) => {
+  // Depending of the wider element, we must add a margin to fill the diff in space between elements
+  const deltaMargin = Math.abs(leftWidth - rightWidth);
+
+  if (leftWidth > rightWidth) {
+    return `margin-right: ${deltaMargin}px;`;
+  }
+
+  return `margin-left: ${deltaMargin}px;`;
+});
+function FullScreenModalHeader({
+  children,
+  right,
+  left
+}) {
+  const {
+    top
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const dimensions = BabelPluginStyledComponentsReactNative.useWindowDimensions();
+  const [leftWidth, setLeftWidth] = react$1.useState(0);
+  const [rightWidth, setRightWidth] = react$1.useState(0);
+
+  const handleLayoutChange = (event, side) => {
+    // Prevents react to nullify event on rerenders
+    event.persist();
+
+    if (side === 'left') {
+      setLeftWidth(event.nativeEvent.layout.width);
+      return;
+    }
+
+    setRightWidth(event.nativeEvent.layout.width);
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsxs(Header, {
+    insetTop: top,
+    children: [left ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
+      onLayout: e => handleLayoutChange(e, 'left'),
+      children: left
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(HeaderContent, {
+      windowWidth: dimensions.width,
+      leftWidth: leftWidth,
+      rightWidth: rightWidth,
+      children: children
+    }), right ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
+      side: "right",
+      onLayout: e => handleLayoutChange(e, 'right'),
+      children: right
+    }) : null]
+  });
+}
+
+const Container$2 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "FullScreenModal__Container",
+  componentId: "kitt-universal__sc-11qpbe3-0"
+})(["flex:1;background-color:", ";"], ({
+  theme
+}) => theme.kitt.colors.uiBackground);
+function FullScreenModal({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+    children: children
+  });
+}
+FullScreenModal.Header = FullScreenModalHeader;
+FullScreenModal.Body = FullScreenModalBody;
+
+function StyleWebWrapper({
+  as,
+  children,
+  ...props
+}) {
+  // as or default to div. If as is undefined, T is div but typescript is not sure
+  return /*#__PURE__*/jsxRuntime.jsx(as || 'div', { ...props,
+    children: children
+  });
+}
+
+const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react.styled("div")({
+  name: "PressableIconButtonWebWrapper",
+  class: "p1nlccvg",
+  vars: {
+    "p1nlccvg-0": [({
+      theme
+    }) => theme.kitt.iconButton.scale.base.hover],
+    "p1nlccvg-1": [({
+      theme
+    }) => theme.breakpoints.min.mediumBreakpoint],
+    "p1nlccvg-2": [({
+      theme
+    }) => theme.kitt.iconButton.scale.medium.hover],
+    "p1nlccvg-3": [({
+      theme
+    }) => theme.kitt.iconButton.scale.base.active],
+    "p1nlccvg-4": [({
+      theme
+    }) => theme.kitt.iconButton.default.pressedBackgroundColor],
+    "p1nlccvg-5": [({
+      theme
+    }) => theme.kitt.iconButton.white.pressedBackgroundColor]
+  }
+}));
+const StyledPressableIconButton = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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;", ";"], ({
+  theme
+}) => theme.kitt.iconButton.borderRadius, ({
+  theme
+}) => theme.kitt.iconButton.width, ({
+  theme
+}) => theme.kitt.iconButton.height, ({
+  theme,
+  disabled
+}) => {
+  const {
+    iconButton
+  } = theme.kitt;
+  const {
+    transition
+  } = iconButton;
+
+  if (disabled) {
+    return `
+        background-color: ${iconButton.disabled.backgroundColor};
+      `;
+  }
+
+  return `
+      transition: ${transition.property} ${transition.duration} ${transition.timingFunction};
+    `;
+});
+function PressableIconButton({
+  color,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
+    as: PressableIconButtonWebWrapper,
+    "data-color-white": color === 'white' ? true : undefined,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledPressableIconButton, { ...props
+    })
+  });
+}
+
+function PressableAnimatedContainer({
+  children,
+  color,
+  disabled,
+  onPress
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(PressableIconButton, {
+    accessibilityRole: "button",
+    color: color,
+    disabled: disabled,
+    onPress: onPress,
+    children: children
+  });
+}
+
+const IconButtonContentBorder = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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;"], ({
+  theme
+}) => `${theme.kitt.iconButton.borderWidth}px solid`, ({
+  theme,
+  disabled
+}) => disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor, ({
+  theme
+}) => theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth, ({
+  theme
+}) => theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth, ({
+  theme
+}) => theme.kitt.iconButton.borderRadius);
+
+function IconButtonContent({
+  disabled,
+  color,
+  icon
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(IconButtonContentBorder, {
+    disabled: disabled,
+    children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+      color: disabled ? 'black-light' : color,
+      icon: icon
+    })
+  });
+}
+
+function IconButton({
+  icon,
+  color,
+  disabled,
+  onPress
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(PressableAnimatedContainer, {
+    color: color,
+    disabled: disabled,
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsx(IconButtonContent, {
+      disabled: disabled,
+      color: color,
+      icon: icon
+    })
+  });
+}
+
+const ContentView$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ListItemContent__ContentView",
+  componentId: "kitt-universal__sc-57q0u9-0"
+})(["flex:1 0 0%;align-self:center;"]);
+function ListItemContent({
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(ContentView$1, { ...rest,
+    children: children
+  });
+}
+
+const SideContainerView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ListItemSideContent__SideContainerView",
+  componentId: "kitt-universal__sc-1vajiw-0"
+})(["flex-direction:row;margin-left:", ";margin-right:", ";"], ({
+  theme,
+  side
+}) => side === 'right' ? theme.kitt.listItem.innerMargin : 0, ({
+  theme,
+  side
+}) => side === 'left' ? theme.kitt.listItem.innerMargin : 0); // Handles the vertical alignment of the side elements of the list item
+
+function ListItemSideContainer({
+  children,
+  side = 'left',
+  ...rest
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(SideContainerView, {
+    side: side,
+    ...rest,
+    children: children
+  });
+}
+const SideContentView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ListItemSideContent__SideContentView",
+  componentId: "kitt-universal__sc-1vajiw-1"
+})(["align-self:", ";"], ({
+  align
+}) => align);
+function ListItemSideContent({
+  children,
+  align = 'auto',
+  ...rest
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(SideContentView, {
+    align: align,
+    ...rest,
+    children: children
+  });
+}
+
+const ContainerView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ListItem__ContainerView",
+  componentId: "kitt-universal__sc-2afp9s-0"
+})(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], ({
+  withPadding,
+  theme
+}) => withPadding ? theme.kitt.listItem.padding : 0, ({
+  theme,
+  borders
+}) => {
+  const {
+    borderWidth
+  } = theme.kitt.listItem;
+
+  if (borders === 'top') {
+    return `border-top-width: ${borderWidth}`;
+  }
+
+  if (borders === 'bottom') {
+    return `border-bottom-width: ${borderWidth}`;
+  }
+
+  if (borders === 'both') {
+    return `border-top-width: ${borderWidth}; border-bottom-width: ${borderWidth}`;
+  }
+
+  return 'border: none';
+}, ({
+  theme
+}) => theme.kitt.listItem.borderColor, ({
+  theme
+}) => theme.kitt.colors.uiBackgroundLight);
+function ListItem({
+  children,
+  withPadding,
+  borders,
+  left,
+  right,
+  onPress,
+  ...rest
+}) {
+  const Wrapper = onPress ? BabelPluginStyledComponentsReactNative.Pressable : react$1.Fragment;
+  const wrapperProps = onPress ? {
+    accessibilityRole: 'button',
+    onPress,
+    ...rest
+  } : undefined;
+  const containerProps = onPress ? undefined : rest;
+  return /*#__PURE__*/jsxRuntime.jsx(Wrapper, { ...wrapperProps,
+    children: /*#__PURE__*/jsxRuntime.jsxs(ContainerView, {
+      withPadding: withPadding,
+      borders: borders,
+      ...containerProps,
+      children: [left ? /*#__PURE__*/jsxRuntime.jsx(ListItemSideContainer, {
+        side: "left",
+        children: left
+      }) : null, /*#__PURE__*/jsxRuntime.jsx(ListItemContent, {
+        children: children
+      }), right ? /*#__PURE__*/jsxRuntime.jsx(ListItemSideContainer, {
+        side: "right",
+        children: right
+      }) : null]
+    })
+  });
+}
+ListItem.Content = ListItemContent;
+ListItem.SideContent = ListItemSideContent;
+ListItem.SideContainer = ListItemSideContainer;
+
+const LargeLoaderContainer = withTheme( /*#__PURE__*/react.styled("div")({
+  name: "LargeLoaderContainer",
+  class: "l2im3sa",
+  vars: {
+    "l2im3sa-0": [({
+      theme
+    }) => theme.kitt.colors.separator],
+    "l2im3sa-1": [({
+      theme
+    }) => theme.kitt.colors.primary]
+  }
+}));
+function LargeLoader() {
+  return /*#__PURE__*/jsxRuntime.jsx(LargeLoaderContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
+      width: "60",
+      height: "60",
+      children: [/*#__PURE__*/jsxRuntime.jsx("g", {
+        "data-large-loader": "base",
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "30",
+          cy: "30",
+          r: "27",
+          fill: "none"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("g", {
+        "data-large-loader": "fill",
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "30",
+          cy: "30",
+          r: "27",
+          fill: "none"
+        })
+      })]
+    })
+  });
+}
+
+function Loader({
+  color = 'primary',
+  size = 20
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+    spin: true,
+    color: color,
+    size: size,
+    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.LoaderIcon, {})
+  });
+}
+
+const xIconSize = 14;
+const mainIconSize = 20;
+const Container$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Message__Container",
+  componentId: "kitt-universal__sc-c6400e-0"
+})(["border-radius:", "px;background-color:", ";padding-bottom:", "px;padding-left:", "px;padding-right:", "px;padding-top:", "px;flex-direction:row;align-items:flex-start;justify-content:space-between;"], ({
+  theme,
+  noRadius
+}) => noRadius ? 0 : theme.kitt.spacing * 5, ({
+  theme,
+  type
+}) => theme.kitt.feedbackMessage.backgroundColors[type], ({
+  theme
+}) => theme.kitt.spacing * 4, ({
+  theme
+}) => theme.kitt.spacing * 4, ({
+  theme
+}) => theme.kitt.spacing * 4, ({
+  theme,
+  insets
+}) => (insets?.top ?? 0) + theme.kitt.spacing * 4);
+const CloseContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.TouchableOpacity).withConfig({
+  displayName: "Message__CloseContainer",
+  componentId: "kitt-universal__sc-c6400e-1"
+})(["margin-left:", "px;padding:", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 4, ({
+  theme
+}) => theme.kitt.spacing);
+const IconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Message__IconContainer",
+  componentId: "kitt-universal__sc-c6400e-2"
+})(["margin-right:", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 4);
+const Content = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Text).withConfig({
+  displayName: "Message__Content",
+  componentId: "kitt-universal__sc-c6400e-3"
+})(["text-align:", ";flex:1;"], ({
+  centeredText
+}) => centeredText ? 'center' : 'left');
+
+const getColorByType = type => {
+  switch (type) {
+    case 'success':
+      return 'white';
+
+    case 'danger':
+      return 'white';
+
+    case 'warning':
+    default:
+      return 'black';
+  }
+};
+
+function getIconContent(type) {
+  switch (type) {
+    case 'warning':
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertCircleIcon, {});
+
+    case 'success':
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.CheckIcon, {});
+
+    case 'danger':
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertTriangleIcon, {});
+
+    default:
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.InfoIcon, {});
+  }
+}
+
+function Message({
+  type = 'info',
+  children,
+  noRadius = false,
+  centeredText = false,
+  onDismiss,
+  insets
+}) {
+  const color = getColorByType(type);
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
+    type: type,
+    noRadius: noRadius,
+    insets: insets,
+    children: [!centeredText ? /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        size: mainIconSize,
+        color: color,
+        icon: getIconContent(type)
+      })
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(Content, {
+      type: type,
+      centeredText: centeredText,
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+        base: "body-small",
+        color: color,
+        children: children
+      })
+    }), onDismiss ? /*#__PURE__*/jsxRuntime.jsx(CloseContainer, {
+      onPress: onDismiss,
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
+        size: xIconSize,
+        color: color
+      })
+    }) : null]
+  });
+}
+
+// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
+const OverlayPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
+  displayName: "Overlay__OverlayPressable",
+  componentId: "kitt-universal__sc-1cz1gbr-0"
+})(({
+  theme
+}) => ({ ...BabelPluginStyledComponentsReactNative.StyleSheet.absoluteFillObject,
+  backgroundColor: theme.kitt.colors.overlay.dark
+}));
+function Overlay({
+  onPress
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(OverlayPressable, {
+    accessibilityRole: "none",
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {})
+  });
+}
+
+const BodyView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Body__BodyView",
+  componentId: "kitt-universal__sc-17fwpo4-0"
+})(["padding:", "px ", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 6, ({
+  theme
+}) => theme.kitt.spacing * 4);
+function ModalBody({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.ScrollView, {
+    children: /*#__PURE__*/jsxRuntime.jsx(BodyView, {
+      children: children
+    })
+  });
+}
+
+const FooterView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Footer__FooterView",
+  componentId: "kitt-universal__sc-1ujq2dc-0"
+})(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], ({
+  theme
+}) => theme.kitt.spacing * 4, ({
+  theme
+}) => theme.kitt.colors.separator);
+function ModalFooter({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(FooterView, {
+    children: children
+  });
+}
+
+const OnCloseContext = /*#__PURE__*/react$1.createContext(() => {});
+
+const HeaderView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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;"], ({
+  theme
+}) => theme.kitt.spacing * 2, ({
+  theme
+}) => theme.kitt.colors.separator);
+const LeftIconView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header__LeftIconView",
+  componentId: "kitt-universal__sc-1iwabch-1"
+})(["align-self:flex-start;margin-right:", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 2);
+const RightIconView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header__RightIconView",
+  componentId: "kitt-universal__sc-1iwabch-2"
+})(["align-self:flex-start;margin-left:", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 2);
+const TitleView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header__TitleView",
+  componentId: "kitt-universal__sc-1iwabch-3"
+})(["padding-left:", "px;flex-shrink:1;"], ({
+  theme,
+  isIconLeft
+}) => isIconLeft ? 0 : theme.kitt.spacing * 2);
+function ModalHeader({
+  left,
+  right,
+  children
+}) {
+  const onClose = react$1.useContext(OnCloseContext);
+  const isIconLeft = !!left;
+  return /*#__PURE__*/jsxRuntime.jsxs(HeaderView, {
+    children: [isIconLeft && /*#__PURE__*/jsxRuntime.jsx(LeftIconView, {
+      children: left
+    }), /*#__PURE__*/jsxRuntime.jsx(TitleView, {
+      isIconLeft: isIconLeft,
+      children: children
+    }), right !== undefined ? right : /*#__PURE__*/jsxRuntime.jsx(RightIconView, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+        type: "subtle-dark",
+        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
+        onPress: onClose
+      })
+    })]
+  });
+}
+
+const ModalView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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;"], ({
+  theme
+}) => theme.kitt.spacing * 20, ({
+  theme
+}) => theme.kitt.spacing * 4);
+const ContentView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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:", ";background-color:", ";"], ({
+  theme
+}) => theme.kitt.card.borderRadius, ({
+  theme
+}) => theme.kitt.palettes.lateOcean.white);
+function Modal({
+  visible,
+  children,
+  onClose,
+  onEntered,
+  onExited
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
+    value: onClose,
+    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Modal, {
+      transparent: true,
+      animationType: "fade",
+      visible: visible,
+      onShow: onEntered,
+      onDismiss: onExited,
+      onRequestClose: onClose,
+      children: /*#__PURE__*/jsxRuntime.jsxs(ModalView, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Overlay, {
+          onPress: onClose
+        }), /*#__PURE__*/jsxRuntime.jsx(ContentView, {
+          children: children
+        })]
+      })
+    })
+  });
+}
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+
+function Notification({
+  type,
+  children,
+  centeredText,
+  onDelete
+}) {
+  const {
+    top
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  return /*#__PURE__*/jsxRuntime.jsx(Message, {
+    noRadius: true,
+    type: type,
+    centeredText: centeredText,
+    insets: {
+      top
+    },
+    onDismiss: onDelete,
+    children: children
+  });
+}
+
+const Flex = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  shouldForwardProp: (prop, defaultValidatorFn) => !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop)
+}).withConfig({
+  displayName: "Flex",
+  componentId: "kitt-universal__sc-15q3v3h-0"
+})(["display:flex;flex-direction:", ";flex-wrap:wrap;padding:", "px;"], ({
+  direction
+}) => direction, ({
+  theme,
+  padding = 0
+}) => padding * theme.kitt.spacing);
+
+const storyPadding = 16;
+
+const getBackgroundColorFromBlockColor = (theme, color = 'transparent') => {
+  switch (color) {
+    case 'dark':
+      return '#293033';
+
+    case 'light':
+      return '#ffffff';
+
+    case 'primary':
+      return theme.kitt.palettes.lateOcean.lateOcean;
+
+    default:
+      return 'transparent';
+  }
+};
+
+const getTypographyColorFromBlockColor = (color = 'transparent') => {
+  switch (color) {
+    case 'dark':
+    case 'primary':
+      return 'white';
+
+    case 'light':
+    default:
+      return 'black';
+  }
+};
+
+const StoryBlockBackgroundContext = /*#__PURE__*/react$1.createContext('transparent');
+const StoryBlockColorContext = /*#__PURE__*/react$1.createContext('black');
+const useStoryBlockColor = color => {
+  const storyBlockColor = react$1.useContext(StoryBlockColorContext);
+  return color || storyBlockColor;
+};
+const StyledStoryBlockView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StoryBlock__StyledStoryBlockView",
+  componentId: "kitt-universal__sc-3w4hdm-0"
+})(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, ({
+  theme,
+  background
+}) => getBackgroundColorFromBlockColor(theme, background));
+function StoryBlock({
+  children,
+  background
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledStoryBlockView, {
+    background: background,
+    children: /*#__PURE__*/jsxRuntime.jsx(StoryBlockColorContext.Provider, {
+      value: getTypographyColorFromBlockColor(background),
+      children: /*#__PURE__*/jsxRuntime.jsx(StoryBlockBackgroundContext.Provider, {
+        value: background,
+        children: children
+      })
+    })
+  });
+}
+
+const StoryTitleContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StoryTitle__StoryTitleContainer",
+  componentId: "kitt-universal__sc-sic7hb-0"
+})(["margin-bottom:30px;"]);
+const StorySubTitleContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StoryTitle__StorySubTitleContainer",
+  componentId: "kitt-universal__sc-sic7hb-1"
+})(["margin-bottom:10px;"]);
+function StoryTitle({
+  color,
+  children,
+  numberOfLines
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StoryTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header1, {
+      variant: "bold",
+      base: "header1",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
+}
+
+function StoryTitleLevel2({
+  color,
+  children,
+  numberOfLines
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StoryTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header2, {
+      variant: "bold",
+      base: "header2",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
+}
+
+StoryTitleLevel2.displayName = 'StoryTitle.Level2';
+
+function StoryTitleLevel3({
+  color,
+  children,
+  numberOfLines
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StorySubTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header3, {
+      variant: "bold",
+      base: "header3",
+      medium: "header4",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
+}
+
+StoryTitleLevel3.displayName = 'StoryTitle.Level3';
+
+function StoryTitleLevel4({
+  color,
+  children,
+  numberOfLines
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StorySubTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header4, {
+      variant: "bold",
+      base: "header4",
+      medium: "header5",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
+}
+
+StoryTitleLevel4.displayName = 'StoryTitle.Level3';
+StoryTitle.Level2 = StoryTitleLevel2;
+StoryTitle.Level3 = StoryTitleLevel3;
+StoryTitle.Level4 = StoryTitleLevel4;
+
+const StoryContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.ScrollView).withConfig({
+  displayName: "Story__StoryContainer",
+  componentId: "kitt-universal__sc-1kwdg2p-0"
+})(["padding:", "px;"], storyPadding);
+function Story({
+  title,
+  contentContainerStyle,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(StoryContainer$1, {
+    contentContainerStyle: contentContainerStyle,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle, {
+      children: title
+    }), children]
+  });
+}
+
+const StyledSection = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StorySection__StyledSection",
+  componentId: "kitt-universal__sc-1b3liv5-0"
+})(["margin-bottom:32px;"]);
+function StorySection({
+  title,
+  children,
+  internalIsDemoSection,
+  ...props
+}) {
+  if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledSection, { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level2, {
+      children: title
+    }), children]
+  });
+}
+const StyledSubSection = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StorySection__StyledSubSection",
+  componentId: "kitt-universal__sc-1b3liv5-1"
+})(["margin-bottom:16px;"]);
+
+function SubSection({
+  title,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledSubSection, { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level3, {
+      children: title
+    }), children]
+  });
+}
+
+const StyledBlockSection = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StorySection__StyledBlockSection",
+  componentId: "kitt-universal__sc-1b3liv5-2"
+})(["margin-bottom:16px;"]);
+
+function BlockSection({
+  title,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledBlockSection, { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level4, {
+      children: title
+    }), children]
+  });
+}
+
+const StyledDemoSection = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StorySection__StyledDemoSection",
+  componentId: "kitt-universal__sc-1b3liv5-3"
+})(["margin-bottom:64px;"]);
+
+function DemoSection({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledDemoSection, {
+    children: /*#__PURE__*/jsxRuntime.jsx(StorySection, {
+      internalIsDemoSection: true,
+      title: "Demo",
+      children: children
+    })
+  });
+}
+
+StorySection.SubSection = SubSection;
+StorySection.BlockSection = BlockSection;
+/** @deprecated use StorySection.Demo instead */
+
+StorySection.DemoSection = DemoSection;
+StorySection.Demo = DemoSection;
+/** @deprecated use StorySection instead */
+
+const DeprecatedSection = StorySection;
+
+function StoryContainer({
+  children,
+  state,
+  title,
+  platform
+}) {
+  if (platform === 'native') return null;
+  return /*#__PURE__*/jsxRuntime.jsx(StorySection.BlockSection, {
+    testID: state,
+    title: title,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: state ? `kitt-${state}` : undefined,
+      children: children
+    })
+  });
+}
+
+function StoryDecorator(storyFn, context) {
+  return /*#__PURE__*/jsxRuntime.jsx(Story, {
+    title: context.name,
+    children: storyFn()
+  });
+}
+
+const SmallScreenRow = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StoryGrid__SmallScreenRow",
+  componentId: "kitt-universal__sc-4z5new-0"
+})(["flex-direction:column;margin:0;"]);
+const SmallScreenCol = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StoryGrid__SmallScreenCol",
+  componentId: "kitt-universal__sc-4z5new-1"
+})(["padding:8px 0 16px;"]);
+const FlexRow = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StoryGrid__FlexRow",
+  componentId: "kitt-universal__sc-4z5new-2"
+})(["flex-direction:row;margin:0 -4px 16px;"]);
+const FlexCol = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "StoryGrid__FlexCol",
+  componentId: "kitt-universal__sc-4z5new-3"
+})(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
+
+function StoryGridRow({
+  children,
+  breakpoint = 'small'
+}) {
+  // eslint-disable-next-line unicorn/expiring-todo-comments
+  // TODO use useBreakpoint instead
+  const {
+    width
+  } = BabelPluginStyledComponentsReactNative.useWindowDimensions();
+  const breakpointValue = breakpoint === 'small' ? 480 : 768;
+
+  if (width < breakpointValue) {
+    return /*#__PURE__*/jsxRuntime.jsx(SmallScreenRow, {
+      children: react$1.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(SmallScreenCol, {
+        children: child
+      }))
+    });
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(FlexRow, {
+    children: react$1.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(FlexCol, {
+      children: child
+    }))
+  });
+}
+
+function StoryGridCol({
+  title,
+  titleColor,
+  children,
+  platform = 'all'
+}) {
+  if (platform === 'native') {
+    return null;
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [title ? /*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level4, {
+      numberOfLines: 1,
+      color: titleColor,
+      children: title
+    }) : null, children]
+  });
+}
+
+const StoryGrid = {
+  Row: StoryGridRow,
+  Col: StoryGridCol
+};
+
+const Container = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Tag__Container",
+  componentId: "kitt-universal__sc-19jmowi-0"
+})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
+  theme,
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].backgroundColor, ({
+  theme,
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].borderWidth, ({
+  theme,
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].borderColor, ({
+  theme
+}) => theme.kitt.tag.padding, ({
+  theme
+}) => theme.kitt.tag.borderRadius);
+const getLabelColor = (type, variant) => {
+  switch (type) {
+    case 'danger':
+      {
+        return variant === 'outline' ? 'danger' : 'black';
+      }
+
+    case 'primary':
+      {
+        return 'primary';
+      }
+
+    case 'default':
+      {
+        return 'black';
+      }
+
+    default:
+      {
+        return 'black';
+      }
+  }
+};
+function Tag({
+  label,
+  type = 'default',
+  variant = 'fill'
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Container, {
+    type: type,
+    variant: variant,
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body-xsmall",
+      color: getLabelColor(type, variant),
+      children: label
+    })
+  });
+}
+
+const lateOceanColorPalette = {
+  lateOcean: '#4C34E0',
+  lateOceanLight1: '#705DE6',
+  lateOceanLight2: '#9485EC',
+  lateOceanLight3: '#D6BAF9',
+  warmEmbrace: '#F4D3CE',
+  warmEmbraceLight1: '#FFEDE6',
+  black1000: '#000000',
+  black555: '#737373',
+  black200: '#CCCCCC',
+  black100: '#E5E5E5',
+  black50: '#F2F2F2',
+  black25: '#F9F9F9',
+  white: '#FFFFFF',
+  viride: '#38836D',
+  englishVermillon: '#D44148',
+  goldCrayola: '#F8C583',
+  aero: '#89BDDD',
+  transparent: 'transparent',
+  moonPurple: '#DBD6F9',
+  moonPurpleLight1: '#EDEBFC'
+};
+
+const avatarLateOceanTheme = {
+  default: {
+    color: lateOceanColorPalette.white,
+    backgroundColor: lateOceanColorPalette.lateOcean
+  },
+  light: {
+    color: lateOceanColorPalette.black1000,
+    backgroundColor: lateOceanColorPalette.black100
+  }
+};
+
+const colorsLateOceanTheme = {
+  primary: lateOceanColorPalette.lateOcean,
+  primaryLight: lateOceanColorPalette.lateOceanLight1,
+  accent: lateOceanColorPalette.warmEmbrace,
+  accentLight: lateOceanColorPalette.warmEmbraceLight1,
+  success: lateOceanColorPalette.viride,
+  correct: lateOceanColorPalette.viride,
+  danger: lateOceanColorPalette.englishVermillon,
+  separator: lateOceanColorPalette.black100,
+  hover: lateOceanColorPalette.black100,
+  black: lateOceanColorPalette.black1000,
+  uiBackground: lateOceanColorPalette.black25,
+  uiBackgroundLight: lateOceanColorPalette.white,
+  transparent: lateOceanColorPalette.transparent,
+  disabled: lateOceanColorPalette.black50,
+  overlay: {
+    dark: 'rgba(41, 48, 51, 0.25)',
+    light: 'rgba(255, 255, 255, 0.90)',
+    fullscreenLoader: 'rgba(0, 0, 0, 0.25)'
+  }
+};
+
+const buttonLateOceanTheme = {
+  borderRadius: '30px',
+  borderWidth: {
+    disabled: '2px',
+    focus: '3px'
+  },
+  minHeight: '40px',
+  minWidth: '40px',
+  maxWidth: '335px',
+  scale: {
+    base: {
+      default: 1,
+      hover: 0.95,
+      active: 0.95
+    },
+    medium: {
+      hover: 1.05
+    }
+  },
+  contentPadding: {
+    default: '8px 16px 7px',
+    large: '12px 24px 11px',
+    disabled: '6px 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)'
+  },
+  primary: {
+    backgroundColor: colorsLateOceanTheme.primary,
+    pressedBackgroundColor: colorsLateOceanTheme.primaryLight,
+    hoverBackgroundColor: colorsLateOceanTheme.primaryLight,
+    focusBorderColor: 'rgba(76, 52, 224, 0.2)'
+  },
+  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)'
+  },
+  subtle: {
+    backgroundColor: colorsLateOceanTheme.transparent,
+    pressedBackgroundColor: colorsLateOceanTheme.transparent,
+    hoverBackgroundColor: colorsLateOceanTheme.transparent,
+    focusBorderColor: 'rgba(76, 52, 224, 0.2)',
+    color: colorsLateOceanTheme.primary,
+    hoverColor: 'rgba(76, 52, 224, 0.8)',
+    activeColor: 'rgba(76, 52, 224, 0.8)'
+  },
+  'subtle-dark': {
+    backgroundColor: colorsLateOceanTheme.transparent,
+    pressedBackgroundColor: colorsLateOceanTheme.transparent,
+    hoverBackgroundColor: colorsLateOceanTheme.transparent,
+    focusBorderColor: 'rgba(0, 0, 0, 0.1)',
+    color: colorsLateOceanTheme.black,
+    hoverColor: 'rgba(0, 0, 0, 0.8)',
+    activeColor: 'rgba(0, 0, 0, 0.8)'
+  },
+  disabled: {
+    backgroundColor: colorsLateOceanTheme.disabled,
+    pressedBackgroundColor: colorsLateOceanTheme.disabled,
+    hoverBackgroundColor: colorsLateOceanTheme.disabled,
+    focusBorderColor: lateOceanColorPalette.black100,
+    borderColor: lateOceanColorPalette.black100
+  }
+};
+
+const cardLateOceanTheme = {
+  borderRadius: '20px',
+  borderWidth: '2px',
+  padding: '16px',
+  primary: {
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette.lateOcean
+  },
+  secondary: {
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette.black100
+  },
+  subtle: {
+    backgroundColor: lateOceanColorPalette.black50,
+    borderColor: lateOceanColorPalette.black100
+  }
+};
+
+const feedbackMessageLateOceanTheme = {
+  backgroundColors: {
+    success: lateOceanColorPalette.viride,
+    danger: lateOceanColorPalette.englishVermillon,
+    warning: lateOceanColorPalette.goldCrayola,
+    info: lateOceanColorPalette.aero
+  }
+};
+
+const inputFieldLateOceanTheme = {
+  labelContainerPaddingBottom: 5,
+  iconMarginLeft: 6
+};
+
+const inputStatesStyle = {
+  default: {
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette.black100,
+    color: 'black',
+    passwordButtonIconColor: 'black'
+  },
+  hover: {
+    borderColor: lateOceanColorPalette.black200,
+    color: 'black',
+    passwordButtonIconColor: 'black'
+  },
+  focus: {
+    borderColor: lateOceanColorPalette.lateOcean,
+    color: 'black',
+    passwordButtonIconColor: 'black'
+  },
+  disabled: {
+    backgroundColor: lateOceanColorPalette.black50,
+    borderColor: lateOceanColorPalette.black100,
+    color: 'black-light',
+    passwordButtonIconColor: 'black-light'
+  },
+  invalid: {
+    borderColor: lateOceanColorPalette.englishVermillon,
+    color: 'black',
+    passwordButtonIconColor: 'black'
+  }
+};
+const inputLateOceanTheme = {
+  marginTop: '2px',
+  marginBottom: '4px',
+  borderWidth: '2px',
+  borderRadius: '10px',
+  passwordButtonIconSize: 20,
+  padding: '7px 16px',
+  paddingSingleLineIOS: '12px 16px',
+  selectionColor: lateOceanColorPalette.lateOcean,
+  placeholderColor: 'black-light',
+  textAreaMinHeight: 120,
+  states: inputStatesStyle
+};
+
+const radioLateOceanTheme = {
+  size: 18,
+  unchecked: {
+    backgroundColor: lateOceanColorPalette.white,
+    borderWidth: '2px',
+    borderColor: lateOceanColorPalette.black200
+  },
+  checked: {
+    backgroundColor: lateOceanColorPalette.lateOcean,
+    innerSize: 5,
+    innerBackgroundColor: lateOceanColorPalette.white
+  },
+  disabled: {
+    backgroundColor: lateOceanColorPalette.black50,
+    borderColor: lateOceanColorPalette.black100
+  }
+};
+
+const formsLateOceanTheme = {
+  input: inputLateOceanTheme,
+  radio: radioLateOceanTheme,
+  inputField: inputFieldLateOceanTheme
+};
+
+const fullScreenModalLateOceanTheme = {
+  header: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderColor: lateOceanColorPalette.black100
+  }
+};
+
+const iconButton = {
+  backgroundColor: 'transparent',
+  width: 40,
+  height: 40,
+  borderRadius: 20,
+  borderWidth: 2,
+  borderColor: 'transparent',
+  transition: {
+    property: 'all',
+    duration: '200ms',
+    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1);'
+  },
+  scale: {
+    base: {
+      default: 1,
+      hover: 0.95,
+      active: 0.95
+    },
+    medium: {
+      hover: 1.05
+    }
+  },
+  disabled: {
+    scale: 1,
+    backgroundColor: buttonLateOceanTheme.disabled.backgroundColor,
+    borderColor: buttonLateOceanTheme.disabled.borderColor
+  },
+  default: {
+    pressedBackgroundColor: buttonLateOceanTheme.default.pressedBackgroundColor
+  },
+  white: {
+    pressedBackgroundColor: buttonLateOceanTheme.white.hoverBackgroundColor
+  }
+};
+
+const listItemLateOceanTheme = {
+  padding: '12px 16px',
+  borderColor: colorsLateOceanTheme.separator,
+  borderWidth: '1px',
+  innerMargin: '8px'
+};
+
+const shadowsLateOceanTheme = {
+  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
+};
+
+const tagLateOceanTheme = {
+  borderRadius: '10px',
+  padding: '2px 12px',
+  primary: {
+    fill: {
+      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: lateOceanColorPalette.lateOcean
+    }
+  },
+  default: {
+    fill: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: lateOceanColorPalette.black1000
+    }
+  },
+  danger: {
+    fill: {
+      backgroundColor: lateOceanColorPalette.warmEmbrace,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: colorsLateOceanTheme.danger
+    }
+  }
+};
+
+const tooltip = {
+  backgroundColor: colorsLateOceanTheme.black,
+  borderRadius: 10,
+  opacity: 0.95,
+  horizontalPadding: 16,
+  verticalPadding: 4,
+  floatingPadding: 8
+};
+
+const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
+
+const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
+  baseAndSmall: {
+    fontSize: `${baseAndSmallFontSize}px`,
+    lineHeight: `${calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize)}px`
+  },
+  mediumAndWide: {
+    fontSize: `${mediumAndWideFontSize}px`,
+    lineHeight: `${calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize)}px`
+  }
+});
+
+const typographyLateOceanTheme = {
+  colors: {
+    black: lateOceanColorPalette.black1000,
+    'black-light': lateOceanColorPalette.black555,
+    white: lateOceanColorPalette.white,
+    'white-light': lateOceanColorPalette.white,
+    primary: lateOceanColorPalette.lateOcean,
+    'primary-light': lateOceanColorPalette.lateOceanLight1,
+    accent: lateOceanColorPalette.warmEmbrace,
+    success: lateOceanColorPalette.viride,
+    danger: lateOceanColorPalette.englishVermillon
+  },
+  types: {
+    headers: {
+      fontFamily: {
+        regular: 'Moderat',
+        bold: 'Moderat'
+      },
+      fontWeight: 400,
+      fontStyle: 'normal',
+      configs: {
+        // also known as xxlarge
+        header1: createTypographyTypeConfig(1.3, 38, 62),
+        // also known as xlarge
+        header2: createTypographyTypeConfig(1.3, 32, 48),
+        // also known as medium
+        header3: createTypographyTypeConfig(1.3, 24, 36),
+        // also known as xsmall
+        header4: createTypographyTypeConfig(1.3, 18, 24),
+        // also known as xxsmall
+        header5: createTypographyTypeConfig(1.3, 18, 18)
+      }
+    },
+    bodies: {
+      fontFamily: {
+        regular: 'Noto Sans',
+        bold: 'Noto Sans'
+      },
+      fontWeight: {
+        regular: 400,
+        bold: 700
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal'
+      },
+      configs: {
+        'body-large': createTypographyTypeConfig(1.6, 18, 24),
+        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
+        body: createTypographyTypeConfig(1.6, 16, 16),
+        'body-small': createTypographyTypeConfig(1.6, 14, 14),
+        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
+      }
+    }
+  },
+  link: {
+    disabledColor: lateOceanColorPalette.black200
+  }
+};
+
+const breakpoints = {
+  values: {
+    base: 0,
+    small: 480,
+    medium: 768,
+    large: 1024,
+    wide: 1280
+  },
+  min: {
+    smallBreakpoint: 'min-width: 480px',
+    mediumBreakpoint: 'min-width: 768px',
+    largeBreakpoint: 'min-width: 1024px',
+    wideBreakpoint: 'min-width: 1280px'
+  },
+  max: {
+    smallBreakpoint: 'max-width: 479px',
+    mediumBreakpoint: 'max-width: 767px',
+    largeBreakpoint: 'max-width: 1023px',
+    wideBreakpoint: 'max-width: 1279px'
+  }
+}; // eslint-disable-next-line unicorn/expiring-todo-comments
+// TODO : seperate brand co lor usage definition from proper theme definition and add t ypings - https://ornikar.atlassian.net/browse/CME-156
+
+const theme = {
+  spacing: 4,
+  colors: colorsLateOceanTheme,
+  palettes: {
+    lateOcean: lateOceanColorPalette
+  },
+  avatar: avatarLateOceanTheme,
+  button: buttonLateOceanTheme,
+  card: cardLateOceanTheme,
+  feedbackMessage: feedbackMessageLateOceanTheme,
+  forms: formsLateOceanTheme,
+  typography: typographyLateOceanTheme,
+  tag: tagLateOceanTheme,
+  shadows: shadowsLateOceanTheme,
+  fullScreenModal: fullScreenModalLateOceanTheme,
+  iconButton,
+  listItem: listItemLateOceanTheme,
+  tooltip
+};
+
+function TimePicker() {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+    base: "body",
+    children: "TimePicker is not implemented for the web"
+  });
+}
+
+var Arrow = function (props) {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", { ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M22.399 6.128C20.939 7.722 19.767 9 18 9s-2.938-1.278-4.399-2.872C11.187 3.494 7.984 0 0 0h36c-7.984 0-11.187 3.494-13.601 6.128z",
+      fill: "currentColor"
+    })
+  });
+};
+
+Arrow.defaultProps = {
+  width: "36",
+  height: "8",
+  viewBox: "0 0 36 9",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const StyledTooltipView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "TooltipView__StyledTooltipView",
+  componentId: "kitt-universal__sc-156zm6m-0"
+})(["align-items:center;"]);
+const StyledTooltipContent = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "TooltipView__StyledTooltipContent",
+  componentId: "kitt-universal__sc-156zm6m-1"
+})(["background-color:", ";border-radius:", "px;opacity:", ";padding:", ";"], ({
+  theme
+}) => theme.kitt.tooltip.backgroundColor, ({
+  theme
+}) => theme.kitt.tooltip.borderRadius, ({
+  theme
+}) => theme.kitt.tooltip.opacity, ({
+  theme
+}) => `${theme.kitt.tooltip.verticalPadding}px ${theme.kitt.tooltip.horizontalPadding}px`);
+
+function ArrowView(props) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, { ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(Arrow, {
+      color: theme.kitt.tooltip.backgroundColor
+    })
+  });
+}
+
+const StyledArrow = /*#__PURE__*/styled__default(ArrowView).withConfig({
+  displayName: "TooltipView__StyledArrow",
+  componentId: "kitt-universal__sc-156zm6m-2"
+})(["color:", ";transform:", ";"], ({
+  theme
+}) => theme.kitt.tooltip.backgroundColor, ({
+  $position
+}) => `rotate(${$position === 'bottom' ? 180 : 0}deg)`);
+function TooltipView({
+  children,
+  position
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledTooltipView, {
+    children: [position === 'bottom' ? /*#__PURE__*/jsxRuntime.jsx(StyledArrow, {
+      $position: position
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(StyledTooltipContent, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+        base: "body",
+        color: "white",
+        children: children
+      })
+    }), position === 'top' ? /*#__PURE__*/jsxRuntime.jsx(StyledArrow, {
+      $position: position
+    }) : null]
+  });
+}
+
+const tooltipDefaultPosition = 'top';
+const tooltipDefaultFloatingStrategy = {
+  web: 'absolute'
+};
+
+const StyledTooltipTrigger = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
+  displayName: "Tooltipweb__StyledTooltipTrigger",
+  componentId: "kitt-universal__sc-zn1y6f-0"
+})(["display:inline-flex;align-self:baseline;"]);
+const WebAnimatedTooltip = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Tooltipweb__WebAnimatedTooltip",
+  componentId: "kitt-universal__sc-zn1y6f-1"
+})(["opacity:", ";transition:opacity 200ms;visibility:", ";"], ({
+  theme,
+  $visible
+}) => $visible ? theme.kitt.tooltip.opacity : 0, ({
+  $visible
+}) => $visible ? 'visible' : 'hidden');
+
+function getActualPosition(originalPosition, offsetMiddlewareData) {
+  if (!offsetMiddlewareData) return originalPosition;
+
+  if (originalPosition === 'top') {
+    return offsetMiddlewareData.y > 0 ? 'bottom' : originalPosition;
+  }
+
+  if (originalPosition === 'bottom') {
+    return offsetMiddlewareData.y < 0 ? 'top' : originalPosition;
+  }
+
+  return originalPosition;
+}
+
+function Tooltip({
+  children,
+  defaultVisible,
+  position = tooltipDefaultPosition,
+  content,
+  floatingStrategy = tooltipDefaultFloatingStrategy,
+  floatingPadding,
+  onUpdate
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const padding = floatingPadding || theme.kitt.tooltip.floatingPadding;
+  const [visible, setVisible] = react$1.useState(Boolean(defaultVisible));
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    update,
+    refs,
+    middlewareData
+  } = reactDom.useFloating({
+    placement: position,
+    strategy: floatingStrategy?.web,
+    middleware: [reactDom.offset(padding), reactDom.shift(), reactDom.flip()]
+  }); // Update on scroll and resize for all relevant nodes
+
+  react$1.useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) {
+      return () => undefined;
+    }
+
+    const parents = [...reactDom.getScrollParents(refs.reference.current), ...reactDom.getScrollParents(refs.floating.current)];
+    parents.forEach(parent => {
+      parent.addEventListener('scroll', update);
+      parent.addEventListener('resize', update);
+    });
+    return () => {
+      parents.forEach(parent => {
+        parent.removeEventListener('scroll', update);
+        parent.removeEventListener('resize', update);
+      });
+    };
+  }, [refs.reference, refs.floating, update]);
+  react$1.useEffect(() => {
+    if (!onUpdate) return;
+    onUpdate({
+      x,
+      y,
+      reference,
+      floating,
+      strategy,
+      update,
+      refs,
+      middlewareData
+    });
+  }, [x, y, reference, floating, strategy, update, refs, middlewareData, onUpdate]);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledTooltipTrigger, {
+      ref: reference,
+      accessibilityRole: "button",
+      onPress: () => setVisible(prev => !prev),
+      onMouseEnter: () => {
+        setVisible(true);
+      },
+      onFocus: () => {
+        setVisible(true);
+      },
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsx(WebAnimatedTooltip, {
+      ref: floating,
+      $visible: visible,
+      accessibilityHidden: !visible,
+      style: {
+        position: strategy,
+        top: 0,
+        left: 0,
+        transform: [{
+          // @ts-expect-error translate3d is missing in react-native definitions, only supported in web
+          translate3d: `${Math.round(x ?? 0)}px, ${Math.round(y ?? 0)}px, 0`
+        }]
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(TooltipView, {
+        position: getActualPosition(position, middlewareData.offset),
+        children: content
+      })
+    })]
+  });
+}
+Tooltip.View = TooltipView;
+
+const StyledTypographyEmoji = /*#__PURE__*/styled__default(Emoji).withConfig({
+  displayName: "TypographyEmoji__StyledTypographyEmoji",
+  componentId: "kitt-universal__sc-1if5guu-0"
+})(["align-self:center;", ""], ({
+  size
+}) => {
+  /* Style Twemoji: https://github.com/twitter/twemoji#inline-styles */
+  return `
+      margin: 0 ${size / 20}px 0 ${size / 10}px;
+      transform: translateY(${size / 10 * 2}px);
+    `;
+});
+function TypographyEmoji({
+  emoji,
+  base,
+  small,
+  medium,
+  large
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
+  const typeConfig = getTypographyTypeConfig(typeForCurrentWindowSize || 'body', theme);
+  const typeConfigKey = getTypographyTypeConfigKey(theme);
+  const {
+    fontSize
+  } = typeConfig[typeConfigKey];
+
+  if ((process.env.NODE_ENV !== "production")) {
+    if (!fontSize.endsWith('px')) throw new Error(`Unexpected font-size value: ${fontSize}`);
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(StyledTypographyEmoji, {
+    size: parseInt(fontSize.slice(0, -2), 10),
+    emoji: emoji
+  });
+}
+
+const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react.styled("span")({
+  name: "TypographyLinkWebWrapper",
+  class: "tcwz3nt"
+}));
+const StyledLink = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Text).withConfig({
+  displayName: "TypographyLink__StyledLink",
+  componentId: "kitt-universal__sc-1o1zy30-0"
+})(["text-decoration:", ";", ";", ";"], ({
+  $noUnderline
+}) => $noUnderline ? 'none' : 'underline', ({
+  $disabled
+}) => {
+  return `
+      text-decoration-color: inherit;
+      transition: color 0.2s ease-in-out;
+      cursor: ${$disabled ? 'not-allowed' : 'pointer'};
+    `;
+}, ({
+  $disabled,
+  theme
+}) => {
+  if (!$disabled) return undefined;
+  return `color: ${theme.kitt.typography.link.disabledColor};`;
+});
+function TypographyLink({
+  children,
+  disabled,
+  noUnderline,
+  href,
+  hrefAttrs,
+  onPress,
+  ...otherProps
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography, { ...otherProps,
+    accessibilityRole: "none",
+    children: /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
+      as: TypographyLinkWebWrapper,
+      "data-nounderline": noUnderline ? true : undefined,
+      children: /*#__PURE__*/jsxRuntime.jsx(StyledLink, {
+        $disabled: disabled,
+        $noUnderline: noUnderline,
+        href: href,
+        hrefAttrs: hrefAttrs,
+        accessibilityRole: "link",
+        dataSet: {
+          // remove data-kitt-universal when we delete kitt web. See See :global(a) in Link styles.module.css
+          'kitt-universal': 'true'
+        },
+        onPress: disabled ? undefined : onPress,
+        children: children
+      })
+    })
+  });
+}
+
+function matchWindowSize(currentWidth, {
+  minWidth,
+  maxWidth
+}) {
+  return currentWidth >= minWidth && (!maxWidth || currentWidth <= maxWidth);
+}
+function useMatchWindowSize(options) {
+  const {
+    width
+  } = BabelPluginStyledComponentsReactNative.useWindowDimensions();
+  return matchWindowSize(width, options);
+}
+
+function createWindowSizeHelper(currentWidth) {
+  return {
+    matchWindowSize: options => matchWindowSize(currentWidth, options),
+    ifWindowSizeMatches: (options, valueIfTrue, valueIfFalse) => matchWindowSize(currentWidth, options) ? valueIfTrue : valueIfFalse,
+    mapWindowWidth: (...widthList) => {
+      if ((process.env.NODE_ENV !== "production")) {
+        widthList.slice(1).forEach(([minWidth], index) => {
+          const previousMinWidth = widthList[index][0];
+
+          if (previousMinWidth > minWidth) {
+            throw new Error(`mapWindowWidth: sort your values to be mobile first. ${minWidth} is < ${previousMinWidth}, so ${minWidth} should be before ${previousMinWidth}.`);
+          }
+        });
+      }
+
+      const found = widthList.find(([minWidth, value]) => matchWindowSize(currentWidth, {
+        minWidth: Number(minWidth)
+      }));
+      if (!found) return null;
+      return found[1];
+    }
+  };
+}
+
+function useKittTheme() {
+  const {
+    width
+  } = BabelPluginStyledComponentsReactNative.useWindowDimensions();
+  return react$1.useMemo(() => {
+    return {
+      kitt: theme,
+      responsive: createWindowSizeHelper(width),
+      breakpoints
+    };
+  }, [width]);
+}
+
+function KittThemeProvider({
+  children
+}) {
+  const theme = useKittTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: theme,
+    children: children
+  });
+}
+const KittThemeDecorator = addons.makeDecorator({
+  name: 'ThemeDecorator',
+  parameterName: 'theme',
+  wrapper: (storyFn, context, {
+    options = {},
+    parameters = {}
+  }) => {
+    return /*#__PURE__*/jsxRuntime.jsx(KittThemeProvider, {
+      children: storyFn(context)
+    });
+  }
+});
+
+function MatchWindowSize({
+  children,
+  ...matchWindowSizeOptions
+}) {
+  const match = useMatchWindowSize(matchWindowSizeOptions);
+  if (!match) return null;
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: children
+  });
+}
+
+exports.useWindowSize = BabelPluginStyledComponentsReactNative.useWindowDimensions;
+exports.Avatar = Avatar;
+exports.Button = Button;
+exports.Card = Card;
+exports.Emoji = Emoji;
+exports.ExternalLink = ExternalLink;
+exports.Flex = Flex;
+exports.FullScreenModal = FullScreenModal;
+exports.Icon = Icon;
+exports.IconButton = IconButton;
+exports.InputFeedback = InputFeedback;
+exports.InputField = InputField;
+exports.InputText = InputText;
+exports.KittBreakpoints = KittBreakpoints;
+exports.KittBreakpointsMax = KittBreakpointsMax;
+exports.KittThemeDecorator = KittThemeDecorator;
+exports.KittThemeProvider = KittThemeProvider;
+exports.Label = Label;
+exports.LargeLoader = LargeLoader;
+exports.ListItem = ListItem;
+exports.Loader = Loader;
+exports.MatchWindowSize = MatchWindowSize;
+exports.Message = Message;
+exports.Modal = Modal;
+exports.Notification = Notification;
+exports.Radio = Radio;
+exports.Section = DeprecatedSection;
+exports.Story = Story;
+exports.StoryBlock = StoryBlock;
+exports.StoryContainer = StoryContainer;
+exports.StoryDecorator = StoryDecorator;
+exports.StoryGrid = StoryGrid;
+exports.StorySection = StorySection;
+exports.StoryTitle = StoryTitle;
+exports.Tag = Tag;
+exports.TextArea = TextArea;
+exports.TimePicker = TimePicker;
+exports.Tooltip = Tooltip;
+exports.Typography = Typography;
+exports.TypographyEmoji = TypographyEmoji;
+exports.TypographyIcon = TypographyIcon;
+exports.TypographyLink = TypographyLink;
+exports.createWindowSizeHelper = createWindowSizeHelper;
+exports.matchWindowSize = matchWindowSize;
+exports.styledTextInputMixin = styledTextInputMixin;
+exports.theme = theme;
+exports.useKittTheme = useKittTheme;
+exports.useMatchWindowSize = useMatchWindowSize;
+exports.useStoryBlockColor = useStoryBlockColor;
+Object.keys(kittIcons).forEach(function (k) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = kittIcons[k];
+});
+//# sourceMappingURL=index-node-14.17.cjs.web.js.map