@ornikar/kitt-universal 4.3.0 → 4.5.0

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

@@ -10,11 +10,11 @@ const jsxRuntime = require('react/jsx-runtime');
 const Animated = require('react-native-reanimated');
 const twemojiParser = require('twemoji-parser');
 const WebBrowser = require('expo-web-browser');
-const reactNativeSafeAreaContext = require('react-native-safe-area-context');
+const reactIntl = require('react-intl');
 const react$1 = require('@linaria/react');
-const expoLinearGradient = require('expo-linear-gradient');
 const DateTimePicker = require('@react-native-community/datetimepicker');
-const reactIntl = require('react-intl');
+const reactNativeSafeAreaContext = require('react-native-safe-area-context');
+const expoLinearGradient = require('expo-linear-gradient');
 const reactNative$1 = require('@floating-ui/react-native');
 const addons = require('@storybook/addons');
 
@@ -57,7 +57,7 @@ function SpinningIcon({
   });
 }
 
-const IconContainer = /*#__PURE__*/styled__default.View.withConfig({
+const IconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
@@ -79,7 +79,7 @@ function Icon({
   const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
     color
   });
-  return /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
     align: align,
     size: size,
     color: color,
@@ -896,209 +896,1554 @@ function ExternalLink({
   });
 }
 
-const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", "px;border-radius:", "px;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}px`;
-}, ({
-  theme,
-  $state
-}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color], ({
-  theme
-}) => theme.kitt.typography.types.bodies.fontFamily.regular);
-
-function getInputUIState({
-  isFocused,
-  isDisabled,
-  formState
-}) {
-  if (isDisabled) return 'disabled';
-  if (isFocused) return 'focus';
-  if (formState === 'invalid') return 'invalid';
-  return 'default';
-}
-
-const InputTextContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputTextContainer",
-  componentId: "kitt-universal__sc-8j6fjq-0"
-})(["position:relative;"]);
-
-const StyledTextInput = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
-  displayName: "InputText__StyledTextInput",
-  componentId: "kitt-universal__sc-uke279-0"
-})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, ({
-  theme,
-  multiline
-}) => {
-  if (!multiline && reactNative.Platform.OS === 'ios') {
-    return theme.kitt.forms.input.padding.iOSSingleLine;
-  }
-
-  return theme.kitt.forms.input.padding.default;
-}, ({
-  theme,
-  multiline
-}) => {
-  if (!multiline && reactNative.Platform.OS === 'ios') return 0;
-  const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight}px`;
-}, ({
-  $minHeight
-}) => $minHeight);
-const RightInputContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputText__RightInputContainer",
-  componentId: "kitt-universal__sc-uke279-1"
-})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
-const InputText = /*#__PURE__*/react.forwardRef(({
-  id,
-  right,
-  minHeight = 0,
-  state: formState,
-  internalForceState,
-  disabled = false,
-  autoCorrect = true,
-  textContentType = 'none',
-  autoCompleteType = 'off',
-  keyboardType = 'default',
-  onFocus,
-  onBlur,
-  ...props
-}, ref) => {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const [isFocused, setIsFocused] = react.useState(false);
-  const state = internalForceState || getInputUIState({
-    isFocused,
-    isDisabled: disabled,
-    formState
-  });
-  return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
-    $isDisabled: disabled,
-    children: [/*#__PURE__*/jsxRuntime.jsx(StyledTextInput, {
-      ref: ref,
-      nativeID: id,
-      editable: !disabled,
-      keyboardType: keyboardType,
-      autoCompleteType: autoCompleteType,
-      autoCorrect: autoCorrect,
-      $minHeight: minHeight,
-      textContentType: textContentType,
-      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
-      selectionColor: theme.kitt.forms.input.color.selection,
-      ...props,
-      $state: state,
-      onFocus: e => {
-        setIsFocused(true);
-        if (onFocus) onFocus(e);
-      },
-      onBlur: e => {
-        setIsFocused(false);
-        if (onBlur) onBlur(e);
-      }
-    }), right ? /*#__PURE__*/jsxRuntime.jsx(RightInputContainer, {
-      children: right
-    }) : null]
-  });
-});
-
-function InputEmail(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(InputText, {
-    autoCompleteType: "email",
-    keyboardType: "email-address",
-    textContentType: "emailAddress",
-    ...props
-  });
-}
-
-const getColorFromState = state => {
-  switch (state) {
-    case 'invalid':
-      return 'danger';
+const lateOceanColorPalette = {
+  lateOcean: '#4C34E0',
+  lateOceanLight1: '#705DE6',
+  lateOceanLight2: '#9485EC',
+  lateOceanLight3: '#D6BAF9',
+  warmEmbrace: '#F4D3CE',
+  warmEmbraceLight1: '#FFEDE6',
+  black1000: '#000000',
+  black800: '#2C293D',
+  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'
+};
 
-    case 'valid':
-    default:
-      return 'black-light';
+const colors = {
+  primary: lateOceanColorPalette.lateOcean,
+  primaryLight: lateOceanColorPalette.lateOceanLight1,
+  accent: lateOceanColorPalette.warmEmbrace,
+  accentLight: lateOceanColorPalette.warmEmbraceLight1,
+  success: lateOceanColorPalette.viride,
+  correct: lateOceanColorPalette.viride,
+  danger: lateOceanColorPalette.englishVermillon,
+  info: lateOceanColorPalette.aero,
+  warning: lateOceanColorPalette.goldCrayola,
+  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)'
   }
 };
 
-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.View.withConfig({
-  displayName: "InputField__FieldContainer",
-  componentId: "kitt-universal__sc-13fkixs-0"
-})(["padding:5px 0 10px;"]);
-const FeedbackContainer = /*#__PURE__*/styled__default.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.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.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]
-  });
-}
-
-function getIconColor(state, disabled) {
-  if (disabled) return 'black-light';
-
-  switch (state) {
-    case 'invalid':
-      return 'danger';
-
-    case 'valid':
-      return 'success';
-
-    default:
-      return undefined;
+const avatar = {
+  borderRadius: 10,
+  default: {
+    backgroundColor: colors.primary
+  },
+  light: {
+    backgroundColor: lateOceanColorPalette.black100
   }
-}
+};
+
+const button = {
+  borderRadius: 30,
+  borderWidth: {
+    disabled: 2,
+    focus: 3
+  },
+  minHeight: 40,
+  minWidth: 40,
+  maxWidth: 335,
+  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: colors.primary,
+    pressedBackgroundColor: colors.primaryLight,
+    hoverBackgroundColor: colors.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: colors.transparent,
+    pressedBackgroundColor: colors.transparent,
+    hoverBackgroundColor: colors.transparent,
+    focusBorderColor: 'rgba(76, 52, 224, 0.2)',
+    color: colors.primary,
+    hoverColor: 'rgba(76, 52, 224, 0.8)',
+    activeColor: 'rgba(76, 52, 224, 0.8)'
+  },
+  'subtle-dark': {
+    backgroundColor: colors.transparent,
+    pressedBackgroundColor: colors.transparent,
+    hoverBackgroundColor: colors.transparent,
+    focusBorderColor: 'rgba(0, 0, 0, 0.1)',
+    color: colors.black,
+    hoverColor: 'rgba(0, 0, 0, 0.8)',
+    activeColor: 'rgba(0, 0, 0, 0.8)'
+  },
+  disabled: {
+    backgroundColor: colors.disabled,
+    pressedBackgroundColor: colors.disabled,
+    hoverBackgroundColor: colors.disabled,
+    focusBorderColor: lateOceanColorPalette.black100,
+    borderColor: lateOceanColorPalette.black100
+  }
+};
+
+const card = {
+  borderRadius: 20,
+  borderWidth: 2,
+  primary: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.primary
+  },
+  secondary: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator
+  },
+  subtle: {
+    backgroundColor: lateOceanColorPalette.black50,
+    borderColor: colors.separator
+  }
+};
+
+const feedbackMessage = {
+  danger: {
+    backgroundColor: colors.danger
+  },
+  success: {
+    backgroundColor: colors.success
+  },
+  info: {
+    backgroundColor: colors.info
+  },
+  warning: {
+    backgroundColor: colors.warning
+  }
+};
+
+const checkbox = {
+  borderWidth: 2,
+  borderRadius: 5,
+  height: 20,
+  width: 20,
+  iconSize: 14,
+  borderColor: colors.separator,
+  backgroundColor: colors.uiBackgroundLight,
+  checkedBorderColor: colors.primary,
+  checkedBackgroundColor: colors.primary,
+  markColor: colors.uiBackgroundLight
+};
+
+const datePicker = {
+  day: {
+    minWidth: 64
+  },
+  month: {
+    minWidth: 64
+  },
+  year: {
+    minWidth: 82
+  }
+};
+
+const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
+const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
+  baseAndSmall: {
+    fontSize: baseAndSmallFontSize,
+    lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)
+  },
+  mediumAndWide: {
+    fontSize: mediumAndWideFontSize,
+    lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)
+  }
+});
+const typography = {
+  colors: {
+    black: lateOceanColorPalette.black1000,
+    'black-anthracite': lateOceanColorPalette.black800,
+    '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: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
+        bold: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
+      },
+      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: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
+        bold: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
+      },
+      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 inputStatesStyle = {
+  default: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator,
+    color: 'black'
+  },
+  pending: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator,
+    color: 'black'
+  },
+  valid: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: lateOceanColorPalette.black100,
+    color: 'black'
+  },
+  hover: {
+    borderColor: lateOceanColorPalette.black200,
+    color: 'black'
+  },
+  focus: {
+    borderColor: colors.primary,
+    color: 'black'
+  },
+  disabled: {
+    backgroundColor: colors.disabled,
+    borderColor: colors.separator,
+    color: 'black-light'
+  },
+  invalid: {
+    borderColor: colors.separator,
+    color: 'black'
+  }
+};
+const input = {
+  minHeight: 40,
+  color: {
+    selection: colors.primary,
+    placeholder: typography.colors['black-light']
+  },
+  borderWidth: 2,
+  borderRadius: 10,
+  icon: {
+    size: 20
+  },
+  padding: {
+    default: '5px 16px',
+    iOSSingleLine: '7px 16px'
+  },
+  transition: {
+    property: 'border-color',
+    duration: '200ms',
+    timingFunction: 'ease-in-out'
+  },
+  states: inputStatesStyle
+};
+
+const inputField = {
+  labelContainerPaddingBottom: 5,
+  iconMarginLeft: 6
+};
+
+const inputTag = {
+  success: {
+    backgroundColor: colors.success,
+    labelColor: colors.uiBackgroundLight
+  },
+  danger: {
+    backgroundColor: colors.danger,
+    labelColor: colors.uiBackgroundLight
+  },
+  default: {
+    backgroundColor: lateOceanColorPalette.black50,
+    labelColor: colors.black
+  },
+  borderRadius: 10,
+  iconSize: 13.5
+};
+
+const radio = {
+  size: 18,
+  unchecked: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderWidth: 2,
+    borderColor: lateOceanColorPalette.black200
+  },
+  checked: {
+    backgroundColor: colors.primary,
+    innerSize: 5,
+    innerBackgroundColor: colors.uiBackgroundLight
+  },
+  disabled: {
+    backgroundColor: colors.disabled,
+    borderColor: colors.separator
+  }
+};
+
+const textArea = {
+  minHeight: 120
+};
+
+const forms = {
+  datePicker,
+  input,
+  radio,
+  inputField,
+  textArea,
+  checkbox,
+  inputTag
+};
+
+const fullScreenModal = {
+  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: button.disabled.backgroundColor,
+    borderColor: button.disabled.borderColor
+  },
+  default: {
+    pressedBackgroundColor: button.default.pressedBackgroundColor
+  },
+  white: {
+    pressedBackgroundColor: button.white.hoverBackgroundColor
+  }
+};
+
+const listItem = {
+  padding: '12px 16px',
+  borderColor: colors.separator,
+  borderWidth: 1,
+  innerMargin: 8
+};
+
+const shadows = {
+  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
+};
+
+const skeleton = {
+  backgroundColor: lateOceanColorPalette.black100,
+  flareColor: lateOceanColorPalette.black200,
+  animationDuration: 1000
+};
+
+const tag = {
+  borderRadius: 10,
+  padding: '2px 12px',
+  primary: {
+    fill: {
+      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
+      borderWidth: 0,
+      borderColor: colors.transparent
+    },
+    outline: {
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.primary
+    }
+  },
+  default: {
+    fill: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderWidth: 0,
+      borderColor: colors.transparent
+    },
+    outline: {
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.black
+    }
+  },
+  danger: {
+    fill: {
+      backgroundColor: lateOceanColorPalette.warmEmbrace,
+      borderWidth: 0,
+      borderColor: colors.transparent
+    },
+    outline: {
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.danger
+    }
+  }
+};
+
+const tooltip = {
+  backgroundColor: colors.black,
+  borderRadius: 10,
+  opacity: 0.95,
+  horizontalPadding: 16,
+  verticalPadding: 4,
+  floatingPadding: 8
+};
+
+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 color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
+
+const theme = {
+  spacing: 4,
+  colors,
+  palettes: {
+    lateOcean: lateOceanColorPalette
+  },
+  avatar,
+  button,
+  card,
+  feedbackMessage,
+  forms,
+  typography,
+  tag,
+  shadows,
+  fullScreenModal,
+  iconButton,
+  listItem,
+  tooltip,
+  skeleton,
+  breakpoints
+};
+
+function matchWindowSize({
+  width,
+  height
+}, {
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
+}) {
+  const hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
+  const hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
+  return hasWidthMatched && hasHeightMatched;
+}
+function useMatchWindowSize(options) {
+  const {
+    width,
+    height
+  } = reactNative.useWindowDimensions();
+  return matchWindowSize({
+    width,
+    height
+  }, options);
+}
+
+// eslint-disable-next-line no-restricted-imports
+function createWindowSizeHelper(dimensions) {
+  return {
+    matchWindowSize: options => matchWindowSize(dimensions, options),
+    ifWindowSizeMatches: (options, valueIfTrue, valueIfFalse) => matchWindowSize(dimensions, 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(dimensions, {
+        minWidth: Number(minWidth)
+      }));
+      if (!found) return null;
+      return found[1];
+    }
+  };
+}
+
+function useKittTheme() {
+  const dimensions = reactNative.useWindowDimensions();
+  return react.useMemo(() => {
+    return {
+      kitt: theme,
+      responsive: createWindowSizeHelper(dimensions)
+    };
+  }, [dimensions]);
+}
+
+const CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "Checkbox__CheckboxAndLabelPressableWrapper",
+  componentId: "kitt-universal__sc-1sav1n6-0"
+})(["display:flex;flex-direction:row;align-items:center;"]);
+const CheckboxContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Checkbox__CheckboxContainer",
+  componentId: "kitt-universal__sc-1sav1n6-1"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:center;height:", "px;width:", "px;position:relative;border-radius:", "px;", " margin-right:", ";"], ({
+  theme
+}) => theme.kitt.forms.checkbox.height, ({
+  theme
+}) => theme.kitt.forms.checkbox.width, ({
+  theme
+}) => theme.kitt.forms.checkbox.borderRadius, ({
+  $isChecked,
+  theme
+}) => {
+  const {
+    checkedBackgroundColor,
+    checkedBorderColor,
+    borderColor,
+    borderWidth,
+    backgroundColor
+  } = theme.kitt.forms.checkbox;
+
+  if ($isChecked) {
+    return styled.css(["background-color:", ";border:", ";"], checkedBackgroundColor, `${borderWidth}px solid ${checkedBorderColor}`);
+  }
+
+  return styled.css(["background-color:", ";border:", ";"], backgroundColor, `${borderWidth}px solid ${borderColor}`);
+}, ({
+  theme,
+  $hasLabel
+}) => {
+  if (!$hasLabel) return '0px';
+  return `${theme.kitt.spacing * 2.5}px;`;
+});
+function Checkbox({
+  onChange,
+  onBlur,
+  onFocus,
+  value,
+  hitSlop = 40,
+  id,
+  children
+}) {
+  const theme = useKittTheme();
+  return /*#__PURE__*/jsxRuntime.jsxs(CheckboxAndLabelPressableWrapper, {
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      checked: value
+    },
+    hitSlop: hitSlop,
+    onPress: e => {
+      if (onFocus) onFocus(e);
+      if (onChange) onChange(e);
+      if (onBlur) onBlur(e);
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxContainer, {
+      $isChecked: value,
+      $hasLabel: !!children,
+      testID: id,
+      children: value ? /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        align: "center",
+        color: theme.kitt.forms.checkbox.markColor,
+        size: theme.kitt.forms.checkbox.iconSize,
+        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.CheckboxMark, {})
+      }) : null
+    }), children]
+  });
+}
+
+function getInputUIState({
+  isFocused,
+  isDisabled,
+  formState
+}) {
+  if (isDisabled) return 'disabled';
+  if (isFocused) return 'focus';
+  if (formState === 'invalid') return 'invalid';
+  return 'default';
+}
+
+const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", "px;border-radius:", "px;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}px`;
+}, ({
+  theme,
+  $state
+}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color], ({
+  theme
+}) => theme.kitt.typography.types.bodies.fontFamily.regular);
+
+const StyledTypographyText = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "DatePickerInputPart__StyledTypographyText",
+  componentId: "kitt-universal__sc-11fmlmi-0"
+})(["text-align:center;"]);
+const ViewInput = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "DatePickerInputPart__ViewInput",
+  componentId: "kitt-universal__sc-11fmlmi-1"
+})(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, ({
+  theme
+}) => theme.kitt.forms.input.padding.default, ({
+  theme
+}) => theme.kitt.forms.input.minHeight, ({
+  theme,
+  $partName
+}) => {
+  if (!$partName) {
+    return undefined;
+  }
+
+  return `${theme.kitt.forms.datePicker[$partName].minWidth}px`;
+});
+function DatePickerInputPart({
+  $state,
+  placeholder,
+  value,
+  partName,
+  disabled
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(ViewInput, {
+    $state: $state,
+    $partName: partName,
+    children: placeholder || value ? /*#__PURE__*/jsxRuntime.jsx(StyledTypographyText, {
+      color: !value || disabled ? 'black-light' : undefined,
+      children: value || placeholder
+    }) : null
+  });
+}
+
+// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
+const OverlayPressable = /*#__PURE__*/styled__default(reactNative.Pressable).withConfig({
+  displayName: "Overlay__OverlayPressable",
+  componentId: "kitt-universal__sc-1cz1gbr-0"
+})(({
+  theme
+}) => ({ ...reactNative.StyleSheet.absoluteFillObject,
+  backgroundColor: theme.kitt.colors.overlay.dark
+}));
+function Overlay({
+  onPress
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(OverlayPressable, {
+    accessibilityRole: "none",
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {})
+  });
+}
+
+const BodyView = /*#__PURE__*/styled__default.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(reactNative.ScrollView, {
+    children: /*#__PURE__*/jsxRuntime.jsx(BodyView, {
+      children: children
+    })
+  });
+}
+
+const FooterView = /*#__PURE__*/styled__default.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
+  });
+}
+
+function StyleWebWrapper({
+  as,
+  children,
+  ...props
+}) {
+  if (reactNative.Platform.OS !== 'web') return children;
+  // 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
+  });
+}
+
+// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
+// export function withTheme<Props extends { theme: DefaultTheme }, C>(
+//   WrappedComponent: ComponentType<Props> & C,
+// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
+//   return function ThemedComponent(props) {
+//     const theme = useTheme();
+//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
+//   };
+// }
+function withTheme(WrappedComponent) {
+  // eslint-disable-next-line prefer-arrow-callback
+  return /*#__PURE__*/react.forwardRef(function (props, ref) {
+    const theme = /*#__PURE__*/styled.useTheme();
+    return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
+      ref: ref,
+      theme: theme,
+      ...props
+    });
+  });
+}
+
+const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "PressableIconButtonWebWrapper",
+  class: "p1nlccvg",
+  vars: {
+    "p1nlccvg-0": [({
+      theme,
+      $isDisabled
+    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.base.hover],
+    "p1nlccvg-2": [({
+      theme,
+      $isDisabled
+    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.medium.hover],
+    "p1nlccvg-3": [({
+      theme,
+      $isDisabled
+    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.base.active],
+    "p1nlccvg-4": [({
+      theme,
+      $isWhite,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.iconButton.disabled.backgroundColor;
+      const {
+        white,
+        default: defaultIconButton
+      } = theme.kitt.iconButton;
+      if ($isWhite) return white.pressedBackgroundColor;
+      return defaultIconButton.pressedBackgroundColor;
+    }]
+  }
+}));
+const StyledPressableIconButton = /*#__PURE__*/styled__default.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;
+
+  if (reactNative.Platform.OS !== 'web') {
+    return undefined;
+  }
+
+  const {
+    transition
+  } = iconButton;
+
+  if (disabled) {
+    return `
+        background-color: ${iconButton.disabled.backgroundColor};
+      `;
+  }
+
+  return `
+      transition: ${transition.property} ${transition.duration} ${transition.timingFunction};
+    `;
+});
+function PressableIconButton({
+  color,
+  disabled,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
+    as: PressableIconButtonWebWrapper,
+    $isWhite: color === 'white',
+    $isDisabled: Boolean(disabled),
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledPressableIconButton, { ...props,
+      disabled: disabled
+    })
+  });
+}
+
+const AnimatedIconButtonBackground = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
+  displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground",
+  componentId: "kitt-universal__sc-xl9ll5-0"
+})(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], ({
+  theme,
+  color,
+  disabled
+}) => {
+  const {
+    iconButton
+  } = theme.kitt;
+  if (disabled) return iconButton.disabled.backgroundColor;
+  if (color === 'white') return iconButton.white.pressedBackgroundColor;
+  return iconButton.default.pressedBackgroundColor;
+}, ({
+  theme
+}) => theme.kitt.iconButton.borderRadius, ({
+  theme
+}) => theme.kitt.iconButton.width, ({
+  theme
+}) => theme.kitt.iconButton.height);
+const AnimatedViewContainer = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
+  displayName: "PressableAnimatedContainer__AnimatedViewContainer",
+  componentId: "kitt-universal__sc-xl9ll5-1"
+})(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
+function PressableAnimatedContainer({
+  disabled,
+  color = 'black',
+  testID,
+  accessibilityRole = 'button',
+  accessibilityLabel,
+  children,
+  onPress
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const pressed = Animated.useSharedValue(false);
+  const opacityStyles = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      return {
+        opacity: Animated.withSpring(pressed.value ? 1 : 0)
+      };
+    };
+
+    _f._closure = {
+      withSpring: Animated.withSpring,
+      pressed
+    };
+    _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
+    _f.__workletHash = 10645190329247;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:41)";
+    _f.__optimalization = 2;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  const scaleStyles = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      return {
+        transform: [{
+          scale: Animated.withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base.default)
+        }]
+      };
+    };
+
+    _f._closure = {
+      withSpring: Animated.withSpring,
+      pressed,
+      theme: {
+        kitt: {
+          iconButton: {
+            scale: {
+              base: {
+                active: theme.kitt.iconButton.scale.base.active,
+                default: theme.kitt.iconButton.scale.base.default
+              }
+            }
+          }
+        }
+      }
+    };
+    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
+    _f.__workletHash = 13861998831411;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (66:39)";
+    _f.__optimalization = 2;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  return /*#__PURE__*/jsxRuntime.jsx(PressableIconButton, {
+    accessibilityRole: accessibilityRole,
+    disabled: disabled,
+    color: color,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    onPress: onPress,
+    onPressIn: () => {
+      pressed.value = true;
+    },
+    onPressOut: () => {
+      pressed.value = false;
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(AnimatedViewContainer, {
+      style: disabled ? [{
+        transform: [{
+          scale: 1
+        }]
+      }] : [scaleStyles],
+      children: [/*#__PURE__*/jsxRuntime.jsx(AnimatedIconButtonBackground, {
+        disabled: disabled,
+        color: color,
+        style: disabled ? [{
+          opacity: 1
+        }] : [opacityStyles]
+      }), children]
+    })
+  });
+}
+
+const IconButtonContentBorder = /*#__PURE__*/styled__default.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,
+  testID,
+  accessibilityLabel,
+  accessibilityRole,
+  onPress
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(PressableAnimatedContainer, {
+    color: color,
+    disabled: disabled,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsx(IconButtonContent, {
+      disabled: disabled,
+      color: color,
+      icon: icon
+    })
+  });
+}
+
+const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
+
+const HeaderView = /*#__PURE__*/styled__default.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.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.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.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.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(IconButton, {
+        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
+        onPress: onClose
+      })
+    })]
+  });
+}
+
+const ModalView = /*#__PURE__*/styled__default.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$1 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Modal__ContentView",
+  componentId: "kitt-universal__sc-1xy2w5u-1"
+})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], ({
+  theme
+}) => theme.kitt.card.borderRadius, ({
+  theme
+}) => theme.kitt.colors.uiBackgroundLight);
+function Modal({
+  visible,
+  children,
+  onClose,
+  onEntered,
+  onExited
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
+    value: onClose,
+    children: /*#__PURE__*/jsxRuntime.jsx(reactNative.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$1, {
+          children: children
+        })]
+      })
+    })
+  });
+}
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+
+function getDatePickerDisplayMode() {
+  if (reactNative.Platform.OS === 'android') return 'calendar';
+  if (reactNative.Platform.OS === 'ios') return 'spinner';
+  return 'default';
+}
+
+function PlatformDateTimePicker({
+  value,
+  defaultDate = new Date(),
+  maximumDate,
+  minimuDate,
+  testID,
+  onChange
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const displayMode = getDatePickerDisplayMode();
+  const iosProps = reactNative.Platform.OS === 'ios' ? {
+    textColor: theme.kitt.colors.primary
+  } : {};
+  return /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
+    is24Hour: true,
+    testID: testID,
+    value: value || defaultDate,
+    mode: "date",
+    maximumDate: maximumDate,
+    minimumDate: minimuDate,
+    display: displayMode,
+    ...iosProps,
+    onChange: (_event, date) => onChange(date)
+  });
+}
+
+function ModalTitle({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body",
+      variant: "bold",
+      children: children
+    })
+  });
+}
+
+function ModalPlatformDateTimePicker({
+  title,
+  isVisible,
+  value,
+  validateButtonLabel,
+  onClose,
+  onChange,
+  ...props
+}) {
+  const [currentValue, setCurrentValue] = react.useState(value); // Prevent unsynced value between the modal and its parent state
+
+  return /*#__PURE__*/jsxRuntime.jsx(Modal, {
+    visible: Boolean(isVisible),
+    onClose: () => {
+      setCurrentValue(value);
+      onClose();
+    },
+    children: isVisible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [title ? /*#__PURE__*/jsxRuntime.jsx(ModalTitle, {
+        children: title
+      }) : null, /*#__PURE__*/jsxRuntime.jsx(Modal.Body, {
+        children: /*#__PURE__*/jsxRuntime.jsx(PlatformDateTimePicker, { ...props,
+          value: currentValue,
+          onChange: newDate => {
+            setCurrentValue(prev => {
+              return newDate || prev;
+            });
+          }
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Modal.Footer, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          stretch: true,
+          type: "primary",
+          onPress: () => {
+            onChange(currentValue);
+          },
+          children: validateButtonLabel ? /*#__PURE__*/jsxRuntime.jsx(reactNative.Text, {
+            children: validateButtonLabel
+          }) : /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
+            id: "kitt-universal.ModalDateTimePicker.confirm"
+          })
+        })
+      })]
+    }) : null
+  });
+}
+
+function prefixWithZero(value) {
+  return `${value}`.padStart(2, '0');
+}
+
+const PartContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "DatePicker__PartContainer",
+  componentId: "kitt-universal__sc-ebllsn-0"
+})(["margin-right:", ";", ";"], ({
+  theme,
+  $isLast
+}) => !$isLast ? `${theme.kitt.spacing * 2}px` : 0, ({
+  $isStretch
+}) => $isStretch ? styled.css(["flex:0.33;flex-grow:1;"]) : undefined);
+const DatePickerPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "DatePicker__DatePickerPressable",
+  componentId: "kitt-universal__sc-ebllsn-1"
+})(["display:flex;flex-direction:row;", ";"], ({
+  $isStretch
+}) => {
+  if ($isStretch) {
+    return styled.css(["width:100%;"]);
+  }
+
+  return styled.css(["align-self:baseline;"]);
+});
+function DatePicker({
+  value,
+  id,
+  disabled,
+  placeholder,
+  state,
+  internalForceState,
+  testID,
+  stretch,
+  pickerDefaultDate,
+  pickerUITestID,
+  pickerUITitle,
+  pickerUIValidateButtonLabel,
+  onChange,
+  onFocus,
+  onBlur
+}) {
+  const [isPickerUIVisible, setIsPickerUIVisible] = react.useState(false);
+  const [isFocused, setIsFocused] = react.useState(false);
+  const [currentValue, setCurrentValue] = react.useState(value);
+
+  const handleModalClose = () => {
+    if (onBlur) onBlur();
+    setIsPickerUIVisible(false);
+    setIsFocused(false);
+  };
+
+  const handleChange = newDate => {
+    setCurrentValue(newDate);
+    onChange(newDate);
+    handleModalClose();
+  };
+
+  const currentState = internalForceState || getInputUIState({
+    isFocused,
+    isDisabled: Boolean(disabled),
+    formState: state
+  });
+  const sharedPickerProps = {
+    testID: pickerUITestID,
+    value: currentValue,
+    onChange: handleChange
+  };
+  const sharedPartProps = {
+    disabled,
+    $state: currentState,
+    defaultDate: pickerDefaultDate
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(DatePickerPressable, {
+      $isStretch: stretch,
+      nativeID: id,
+      disabled: disabled,
+      testID: testID,
+      onPress: () => {
+        if (onFocus) onFocus();
+        setIsPickerUIVisible(true);
+        setIsFocused(true);
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+        $isStretch: stretch,
+        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+          partName: "day",
+          value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
+          placeholder: placeholder?.day
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+        $isStretch: stretch,
+        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+          partName: "month",
+          value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
+          placeholder: placeholder?.month
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+        $isLast: true,
+        $isStretch: stretch,
+        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+          partName: "year",
+          value: currentValue?.getFullYear(),
+          placeholder: placeholder?.year
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [reactNative.Platform.OS === 'android' && isPickerUIVisible ? /*#__PURE__*/jsxRuntime.jsx(PlatformDateTimePicker, { ...sharedPickerProps
+      }) : null, reactNative.Platform.OS !== 'android' ? /*#__PURE__*/jsxRuntime.jsx(ModalPlatformDateTimePicker, { ...sharedPickerProps,
+        isVisible: isPickerUIVisible,
+        title: pickerUITitle,
+        validateButtonLabel: pickerUIValidateButtonLabel,
+        onClose: handleModalClose,
+        onChange: handleChange
+      }) : null]
+    })]
+  });
+}
+
+const InputTextContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "InputTextContainer",
+  componentId: "kitt-universal__sc-8j6fjq-0"
+})(["position:relative;"]);
+
+const StyledTextInput = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
+  displayName: "InputText__StyledTextInput",
+  componentId: "kitt-universal__sc-uke279-0"
+})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, ({
+  theme,
+  multiline
+}) => {
+  if (!multiline && reactNative.Platform.OS === 'ios') {
+    return theme.kitt.forms.input.padding.iOSSingleLine;
+  }
+
+  return theme.kitt.forms.input.padding.default;
+}, ({
+  theme,
+  multiline
+}) => {
+  if (!multiline && reactNative.Platform.OS === 'ios') return 0;
+  const typeConfigKey = getTypographyTypeConfigKey(theme);
+  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight}px`;
+}, ({
+  $minHeight
+}) => $minHeight);
+const RightInputContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "InputText__RightInputContainer",
+  componentId: "kitt-universal__sc-uke279-1"
+})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
+const InputText = /*#__PURE__*/react.forwardRef(({
+  id,
+  right,
+  minHeight = 0,
+  state: formState,
+  internalForceState,
+  disabled = false,
+  autoCorrect = true,
+  textContentType = 'none',
+  autoCompleteType = 'off',
+  keyboardType = 'default',
+  onFocus,
+  onBlur,
+  ...props
+}, ref) => {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const [isFocused, setIsFocused] = react.useState(false);
+  const state = internalForceState || getInputUIState({
+    isFocused,
+    isDisabled: disabled,
+    formState
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
+    $isDisabled: disabled,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledTextInput, {
+      ref: ref,
+      nativeID: id,
+      editable: !disabled,
+      keyboardType: keyboardType,
+      autoCompleteType: autoCompleteType,
+      autoCorrect: autoCorrect,
+      $minHeight: minHeight,
+      textContentType: textContentType,
+      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
+      selectionColor: theme.kitt.forms.input.color.selection,
+      ...props,
+      $state: state,
+      onFocus: e => {
+        setIsFocused(true);
+        if (onFocus) onFocus(e);
+      },
+      onBlur: e => {
+        setIsFocused(false);
+        if (onBlur) onBlur(e);
+      }
+    }), right ? /*#__PURE__*/jsxRuntime.jsx(RightInputContainer, {
+      children: right
+    }) : null]
+  });
+});
+
+function InputEmail(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    autoCompleteType: "email",
+    keyboardType: "email-address",
+    textContentType: "emailAddress",
+    ...props
+  });
+}
+
+const getColorFromState = state => {
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    case 'valid':
+    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.View.withConfig({
+  displayName: "InputField__FieldContainer",
+  componentId: "kitt-universal__sc-13fkixs-0"
+})(["padding:5px 0 10px;"]);
+const FeedbackContainer = /*#__PURE__*/styled__default.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.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.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]
+  });
+}
+
+function getIconColor(state, disabled) {
+  if (disabled) return 'black-light';
+
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    case 'valid':
+      return 'success';
+
+    default:
+      return undefined;
+  }
+}
 
 function InputIcon({
   icon,
@@ -1141,6 +2486,66 @@ function InputPassword({
   });
 }
 
+function InputPhone(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, { ...props,
+    autoCompleteType: "tel",
+    keyboardType: "number-pad",
+    textContentType: "telephoneNumber"
+  });
+}
+
+const getTypographyColor = type => type ? 'white' : 'black';
+
+const InputTagContainer = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "InputTag__InputTagContainer",
+  componentId: "kitt-universal__sc-1511dsf-0"
+})(["align-items:center;justify-content:center;flex-direction:row;align-self:flex-start;overflow:hidden;padding-horizontal:", "px;background-color:", ";border-radius:", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 2, ({
+  theme,
+  type
+}) => {
+  if (type === 'success') {
+    return theme.kitt.forms.inputTag.success.backgroundColor;
+  }
+
+  if (type === 'danger') {
+    return theme.kitt.forms.inputTag.danger.backgroundColor;
+  }
+
+  return theme.kitt.forms.inputTag.default.backgroundColor;
+}, ({
+  theme
+}) => theme.kitt.forms.inputTag.borderRadius);
+const IconContainer = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "InputTag__IconContainer",
+  componentId: "kitt-universal__sc-1511dsf-1"
+})(["margin-right:", "px;"], ({
+  theme
+}) => theme.kitt.spacing);
+function InputTag({
+  children,
+  type,
+  icon
+}) {
+  const typographyColor = getTypographyColor(type);
+  const theme = useKittTheme();
+  return /*#__PURE__*/jsxRuntime.jsxs(InputTagContainer, {
+    type: type,
+    children: [icon && /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
+      children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+        icon: icon,
+        size: theme.kitt.forms.inputTag.iconSize,
+        color: typographyColor
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body-small",
+      color: typographyColor,
+      children: children
+    })]
+  });
+}
+
 function Label({
   htmlFor,
   children
@@ -1235,458 +2640,169 @@ function Radio({
   });
 }
 
-function TextArea({ ...props
-}) {
-  const theme = /*#__PURE__*/styled.useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(InputText, {
-    multiline: true,
-    textAlignVertical: "top",
-    minHeight: theme.kitt.forms.textArea.minHeight,
-    ...props
-  });
-}
-
-const Body = /*#__PURE__*/styled__default.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.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.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.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 = reactNative.useWindowDimensions();
-  const [leftWidth, setLeftWidth] = react.useState(0);
-  const [rightWidth, setRightWidth] = react.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: reactNative.Platform.OS === 'ios' ? undefined : 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$3 = /*#__PURE__*/styled__default.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$3, {
-    children: children
-  });
-}
-FullScreenModal.Header = FullScreenModalHeader;
-FullScreenModal.Body = FullScreenModalBody;
-
-function StyleWebWrapper({
-  as,
-  children,
-  ...props
-}) {
-  if (reactNative.Platform.OS !== 'web') return children;
-  // 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
-  });
-}
-
-// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
-// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
-// export function withTheme<Props extends { theme: DefaultTheme }, C>(
-//   WrappedComponent: ComponentType<Props> & C,
-// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
-//   return function ThemedComponent(props) {
-//     const theme = useTheme();
-//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
-//   };
-// }
-function withTheme(WrappedComponent) {
-  // eslint-disable-next-line prefer-arrow-callback
-  return /*#__PURE__*/react.forwardRef(function (props, ref) {
-    const theme = /*#__PURE__*/styled.useTheme();
-    return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
-      ref: ref,
-      theme: theme,
-      ...props
-    });
-  });
-}
-
-const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("div")({
-  name: "PressableIconButtonWebWrapper",
-  class: "p1nlccvg",
-  vars: {
-    "p1nlccvg-0": [({
-      theme,
-      $isDisabled
-    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.base.hover],
-    "p1nlccvg-2": [({
-      theme,
-      $isDisabled
-    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.medium.hover],
-    "p1nlccvg-3": [({
-      theme,
-      $isDisabled
-    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.base.active],
-    "p1nlccvg-4": [({
-      theme,
-      $isWhite,
-      $isDisabled
-    }) => {
-      if ($isDisabled) return theme.kitt.iconButton.disabled.backgroundColor;
-      const {
-        white,
-        default: defaultIconButton
-      } = theme.kitt.iconButton;
-      if ($isWhite) return white.pressedBackgroundColor;
-      return defaultIconButton.pressedBackgroundColor;
-    }]
-  }
-}));
-const StyledPressableIconButton = /*#__PURE__*/styled__default.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, ({
+function TextArea({ ...props
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    multiline: true,
+    textAlignVertical: "top",
+    minHeight: theme.kitt.forms.textArea.minHeight,
+    ...props
+  });
+}
+
+const Body = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Body",
+  componentId: "kitt-universal__sc-1ofncfn-0"
+})(["", " background-color:", ";flex:1;"], ({
   theme
-}) => theme.kitt.iconButton.width, ({
+}) => 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.iconButton.height, ({
+}) => theme.kitt.colors.uiBackgroundLight);
+function FullScreenModalBody({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Body, {
+    children: children
+  });
+}
+
+const SideContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Header__SideContainer",
+  componentId: "kitt-universal__sc-dfmxi1-0"
+})(["", ""], ({
   theme,
-  disabled
+  side = 'left'
 }) => {
-  const {
-    iconButton
-  } = theme.kitt;
-
-  if (reactNative.Platform.OS !== 'web') {
-    return undefined;
-  }
-
-  const {
-    transition
-  } = iconButton;
+  const padding = theme.kitt.spacing * 2;
 
-  if (disabled) {
-    return `
-        background-color: ${iconButton.disabled.backgroundColor};
-      `;
+  if (side === 'left') {
+    return `padding-right: ${padding}px;`;
   }
 
-  return `
-      transition: ${transition.property} ${transition.duration} ${transition.timingFunction};
-    `;
+  return `padding-left: ${padding}px;`;
 });
-function PressableIconButton({
-  color,
-  disabled,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
-    as: PressableIconButtonWebWrapper,
-    $isWhite: color === 'white',
-    $isDisabled: Boolean(disabled),
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledPressableIconButton, { ...props,
-      disabled: disabled
-    })
-  });
+
+function getHeaderHorizontalMediumPadding(spacing) {
+  return spacing * 6;
 }
 
-const AnimatedIconButtonBackground = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
-  displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground",
-  componentId: "kitt-universal__sc-xl9ll5-0"
-})(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], ({
+const Header = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Header",
+  componentId: "kitt-universal__sc-dfmxi1-1"
+})(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], ({
   theme,
-  color,
-  disabled
+  insetTop = 0
 }) => {
+  const paddingTop = insetTop + theme.kitt.fullScreenModal.header.paddingVertical;
   const {
-    iconButton
-  } = theme.kitt;
-  if (disabled) return iconButton.disabled.backgroundColor;
-  if (color === 'white') return iconButton.white.pressedBackgroundColor;
-  return iconButton.default.pressedBackgroundColor;
+    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.iconButton.borderRadius, ({
-  theme
-}) => theme.kitt.iconButton.width, ({
-  theme
-}) => theme.kitt.iconButton.height);
-const AnimatedViewContainer = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
-  displayName: "PressableAnimatedContainer__AnimatedViewContainer",
-  componentId: "kitt-universal__sc-xl9ll5-1"
-})(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
-function PressableAnimatedContainer({
-  disabled,
-  color = 'black',
-  testID,
-  accessibilityRole = 'button',
-  accessibilityLabel,
-  children,
-  onPress
-}) {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const pressed = Animated.useSharedValue(false);
-  const opacityStyles = Animated.useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        opacity: Animated.withSpring(pressed.value ? 1 : 0)
-      };
-    };
-
-    _f._closure = {
-      withSpring: Animated.withSpring,
-      pressed
-    };
-    _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
-    _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:41)";
-    _f.__optimalization = 2;
-
-    global.__reanimatedWorkletInit(_f);
-
-    return _f;
-  }());
-  const scaleStyles = Animated.useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        transform: [{
-          scale: Animated.withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base.default)
-        }]
-      };
-    };
-
-    _f._closure = {
-      withSpring: Animated.withSpring,
-      pressed,
-      theme: {
-        kitt: {
-          iconButton: {
-            scale: {
-              base: {
-                active: theme.kitt.iconButton.scale.base.active,
-                default: theme.kitt.iconButton.scale.base.default
-              }
-            }
-          }
-        }
-      }
-    };
-    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
-    _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (66:39)";
-    _f.__optimalization = 2;
+}) => theme.kitt.fullScreenModal.header.borderColor);
+const HeaderContent = /*#__PURE__*/styled__default.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;
 
-    global.__reanimatedWorkletInit(_f);
+  const computeWidth = breakpointPadding => windowWidth - breakpointPadding - sideElementMaxWidth * 2;
 
-    return _f;
-  }());
-  return /*#__PURE__*/jsxRuntime.jsx(PressableIconButton, {
-    accessibilityRole: accessibilityRole,
-    disabled: disabled,
-    color: color,
-    testID: testID,
-    accessibilityLabel: accessibilityLabel,
-    onPress: onPress,
-    onPressIn: () => {
-      pressed.value = true;
-    },
-    onPressOut: () => {
-      pressed.value = false;
-    },
-    children: /*#__PURE__*/jsxRuntime.jsxs(AnimatedViewContainer, {
-      style: disabled ? [{
-        transform: [{
-          scale: 1
-        }]
-      }] : [scaleStyles],
-      children: [/*#__PURE__*/jsxRuntime.jsx(AnimatedIconButtonBackground, {
-        disabled: disabled,
-        color: color,
-        style: disabled ? [{
-          opacity: 1
-        }] : [opacityStyles]
-      }), children]
-    })
-  });
-}
+  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);
 
-const IconButtonContentBorder = /*#__PURE__*/styled__default.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);
+  if (leftWidth > rightWidth) {
+    return `margin-right: ${deltaMargin}px;`;
+  }
 
-function IconButtonContent({
-  disabled,
-  color,
-  icon
+  return `margin-left: ${deltaMargin}px;`;
+});
+function FullScreenModalHeader({
+  children,
+  right,
+  left
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(IconButtonContentBorder, {
-    disabled: disabled,
-    children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-      color: disabled ? 'black-light' : color,
-      icon: icon
-    })
+  const {
+    top
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const dimensions = reactNative.useWindowDimensions();
+  const [leftWidth, setLeftWidth] = react.useState(0);
+  const [rightWidth, setRightWidth] = react.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: reactNative.Platform.OS === 'ios' ? undefined : 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]
   });
 }
 
-function IconButton({
-  icon,
-  color,
-  disabled,
-  testID,
-  accessibilityLabel,
-  accessibilityRole,
-  onPress
+const Container$3 = /*#__PURE__*/styled__default.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(PressableAnimatedContainer, {
-    color: color,
-    disabled: disabled,
-    testID: testID,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityRole: accessibilityRole,
-    onPress: onPress,
-    children: /*#__PURE__*/jsxRuntime.jsx(IconButtonContent, {
-      disabled: disabled,
-      color: color,
-      icon: icon
-    })
+  return /*#__PURE__*/jsxRuntime.jsx(Container$3, {
+    children: children
   });
 }
+FullScreenModal.Header = FullScreenModalHeader;
+FullScreenModal.Body = FullScreenModalBody;
 
-const ContentView$1 = /*#__PURE__*/styled__default.View.withConfig({
+const ContentView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["flex:1 0 0%;align-self:center;"]);
@@ -1694,7 +2810,7 @@ function ListItemContent({
   children,
   ...rest
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(ContentView$1, { ...rest,
+  return /*#__PURE__*/jsxRuntime.jsx(ContentView, { ...rest,
     children: children
   });
 }
@@ -1915,235 +3031,84 @@ const StyledIconContainer = /*#__PURE__*/styled__default.View.withConfig({
   componentId: "kitt-universal__sc-eepeiz-2"
 })(["margin:", ";"], ({
   theme
-}) => {
-  const {
-    spacing
-  } = theme.kitt;
-  return `${spacing}px ${spacing * 5}px 0 0`;
-});
-const StyledTextContent = /*#__PURE__*/styled__default(Typography.Text).withConfig({
-  displayName: "BaseMessage__StyledTextContent",
-  componentId: "kitt-universal__sc-eepeiz-3"
-})(["flex:1;text-align:", ";"], ({
-  $isCenteredText
-}) => $isCenteredText ? 'center' : 'left');
-const StyledMessageContent = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "BaseMessage__StyledMessageContent",
-  componentId: "kitt-universal__sc-eepeiz-4"
-})(["display:flex;flex-direction:row;flex-grow:1;align-self:center;align-items:flex-start;flex-shrink:1;padding:", ";"], ({
-  theme
-}) => {
-  const {
-    spacing
-  } = theme.kitt;
-  return `${spacing * 4}px ${spacing * 5}px`;
-});
-function BaseMessage({
-  type = 'info',
-  children,
-  hasNoRadius,
-  centeredText,
-  insets,
-  onDismiss
-}) {
-  const color = getColorByType(type);
-  return /*#__PURE__*/jsxRuntime.jsxs(StyledMessageContainer, {
-    $type: type,
-    $hasNoRadius: hasNoRadius,
-    $insets: insets,
-    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledMessageContent, {
-      children: [centeredText ? null : /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer, {
-        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-          color: color,
-          icon: /*#__PURE__*/jsxRuntime.jsx(IconContent, {
-            type: type,
-            color: color
-          })
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(StyledTextContent, {
-        $isCenteredText: centeredText,
-        base: "body",
-        color: color,
-        children: children
-      })]
-    }), onDismiss ? /*#__PURE__*/jsxRuntime.jsx(StyledDismissWrapper, {
-      children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
-        color: getIconButtonColor(type),
-        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
-        onPress: onDismiss
-      })
-    }) : null]
-  });
-}
-
-function Message({
-  type = 'info',
-  children,
-  hasNoRadius,
-  centeredText,
-  insets,
-  onDismiss
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(BaseMessage, {
-    insets: insets,
-    hasNoRadius: hasNoRadius,
-    type: type,
-    centeredText: centeredText,
-    onDismiss: onDismiss,
-    children: children
-  });
-}
-
-// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-const OverlayPressable = /*#__PURE__*/styled__default(reactNative.Pressable).withConfig({
-  displayName: "Overlay__OverlayPressable",
-  componentId: "kitt-universal__sc-1cz1gbr-0"
-})(({
-  theme
-}) => ({ ...reactNative.StyleSheet.absoluteFillObject,
-  backgroundColor: theme.kitt.colors.overlay.dark
-}));
-function Overlay({
-  onPress
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(OverlayPressable, {
-    accessibilityRole: "none",
-    onPress: onPress,
-    children: /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {})
-  });
-}
-
-const BodyView = /*#__PURE__*/styled__default.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(reactNative.ScrollView, {
-    children: /*#__PURE__*/jsxRuntime.jsx(BodyView, {
-      children: children
-    })
-  });
-}
-
-const FooterView = /*#__PURE__*/styled__default.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.createContext(() => {});
-
-const HeaderView = /*#__PURE__*/styled__default.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.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.View.withConfig({
-  displayName: "Header__RightIconView",
-  componentId: "kitt-universal__sc-1iwabch-2"
-})(["align-self:flex-start;margin-left:", "px;"], ({
+}) => {
+  const {
+    spacing
+  } = theme.kitt;
+  return `${spacing}px ${spacing * 5}px 0 0`;
+});
+const StyledTextContent = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "BaseMessage__StyledTextContent",
+  componentId: "kitt-universal__sc-eepeiz-3"
+})(["flex:1;text-align:", ";"], ({
+  $isCenteredText
+}) => $isCenteredText ? 'center' : 'left');
+const StyledMessageContent = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "BaseMessage__StyledMessageContent",
+  componentId: "kitt-universal__sc-eepeiz-4"
+})(["display:flex;flex-direction:row;flex-grow:1;align-self:center;align-items:flex-start;flex-shrink:1;padding:", ";"], ({
   theme
-}) => theme.kitt.spacing * 2);
-const TitleView = /*#__PURE__*/styled__default.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 {
+    spacing
+  } = theme.kitt;
+  return `${spacing * 4}px ${spacing * 5}px`;
+});
+function BaseMessage({
+  type = 'info',
+  children,
+  hasNoRadius,
+  centeredText,
+  insets,
+  onDismiss
 }) {
-  const onClose = react.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",
+  const color = getColorByType(type);
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledMessageContainer, {
+    $type: type,
+    $hasNoRadius: hasNoRadius,
+    $insets: insets,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledMessageContent, {
+      children: [centeredText ? null : /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          color: color,
+          icon: /*#__PURE__*/jsxRuntime.jsx(IconContent, {
+            type: type,
+            color: color
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(StyledTextContent, {
+        $isCenteredText: centeredText,
+        base: "body",
+        color: color,
+        children: children
+      })]
+    }), onDismiss ? /*#__PURE__*/jsxRuntime.jsx(StyledDismissWrapper, {
+      children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+        color: getIconButtonColor(type),
         icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
-        onPress: onClose
+        onPress: onDismiss
       })
-    })]
+    }) : null]
   });
 }
 
-const ModalView = /*#__PURE__*/styled__default.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.View.withConfig({
-  displayName: "Modal__ContentView",
-  componentId: "kitt-universal__sc-1xy2w5u-1"
-})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], ({
-  theme
-}) => theme.kitt.card.borderRadius, ({
-  theme
-}) => theme.kitt.colors.uiBackgroundLight);
-function Modal({
-  visible,
+function Message({
+  type = 'info',
   children,
-  onClose,
-  onEntered,
-  onExited
+  hasNoRadius,
+  centeredText,
+  insets,
+  onDismiss
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
-    value: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(reactNative.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
-        })]
-      })
-    })
+  return /*#__PURE__*/jsxRuntime.jsx(BaseMessage, {
+    insets: insets,
+    hasNoRadius: hasNoRadius,
+    type: type,
+    centeredText: centeredText,
+    onDismiss: onDismiss,
+    children: children
   });
 }
-Modal.Header = ModalHeader;
-Modal.Body = ModalBody;
-Modal.Footer = ModalFooter;
 
 function Notification({
   type,
@@ -2480,691 +3445,211 @@ const StyledSubSection = /*#__PURE__*/styled__default.View.withConfig({
 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.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.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,
-  title,
-  state = 'none',
-  platform = 'all'
-}) {
-  if (platform === 'web') return null;
-  return /*#__PURE__*/jsxRuntime.jsx(StorySection.BlockSection, {
-    testID: state,
-    title: title,
-    children: children
-  });
-}
-
-function StoryDecorator(storyFn, context) {
-  return /*#__PURE__*/jsxRuntime.jsx(Story, {
-    title: context.name,
-    children: storyFn()
-  });
-}
-
-const SmallScreenRow = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "StoryGrid__SmallScreenRow",
-  componentId: "kitt-universal__sc-4z5new-0"
-})(["flex-direction:column;margin:0;"]);
-const SmallScreenCol = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "StoryGrid__SmallScreenCol",
-  componentId: "kitt-universal__sc-4z5new-1"
-})(["padding:8px 0 16px;"]);
-const FlexRow = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "StoryGrid__FlexRow",
-  componentId: "kitt-universal__sc-4z5new-2"
-})(["flex-direction:row;margin:0 -4px 16px;"]);
-const FlexCol = /*#__PURE__*/styled__default.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
-  } = reactNative.useWindowDimensions();
-  const breakpointValue = breakpoint === 'small' ? 480 : 768;
-
-  if (width < breakpointValue) {
-    return /*#__PURE__*/jsxRuntime.jsx(SmallScreenRow, {
-      children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(SmallScreenCol, {
-        children: child
-      }))
-    });
-  }
-
-  return /*#__PURE__*/jsxRuntime.jsx(FlexRow, {
-    children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(FlexCol, {
-      children: child
-    }))
-  });
-}
-
-function StoryGridCol({
-  title,
-  titleColor,
-  children,
-  platform = 'all'
+  ...props
 }) {
-  const isNative = reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android';
-
-  if (reactNative.Platform.OS === 'web' && platform === 'native') {
-    return null;
-  }
-
-  if (isNative && platform === 'web') {
-    return null;
-  }
-
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [title ? /*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level4, {
-      numberOfLines: 1,
-      color: titleColor,
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledSubSection, { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level3, {
       children: title
-    }) : null, children]
+    }), children]
   });
 }
 
-const StoryGrid = {
-  Row: StoryGridRow,
-  Col: StoryGridCol
-};
-
-const Container$1 = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Tag__Container",
-  componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], ({
-  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';
-      }
+const StyledBlockSection = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StorySection__StyledBlockSection",
+  componentId: "kitt-universal__sc-1b3liv5-2"
+})(["margin-bottom:16px;"]);
 
-    default:
-      {
-        return 'black';
-      }
-  }
-};
-function Tag({
-  label,
-  type = 'default',
-  variant = 'fill'
+function BlockSection({
+  title,
+  children,
+  ...props
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$1, {
-    type: type,
-    variant: variant,
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body-xsmall",
-      color: getLabelColor(type, variant),
-      children: label
-    })
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledBlockSection, { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level4, {
+      children: title
+    }), children]
   });
 }
 
-const lateOceanColorPalette = {
-  lateOcean: '#4C34E0',
-  lateOceanLight1: '#705DE6',
-  lateOceanLight2: '#9485EC',
-  lateOceanLight3: '#D6BAF9',
-  warmEmbrace: '#F4D3CE',
-  warmEmbraceLight1: '#FFEDE6',
-  black1000: '#000000',
-  black800: '#2C293D',
-  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 colors = {
-  primary: lateOceanColorPalette.lateOcean,
-  primaryLight: lateOceanColorPalette.lateOceanLight1,
-  accent: lateOceanColorPalette.warmEmbrace,
-  accentLight: lateOceanColorPalette.warmEmbraceLight1,
-  success: lateOceanColorPalette.viride,
-  correct: lateOceanColorPalette.viride,
-  danger: lateOceanColorPalette.englishVermillon,
-  info: lateOceanColorPalette.aero,
-  warning: lateOceanColorPalette.goldCrayola,
-  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 avatar = {
-  borderRadius: 10,
-  default: {
-    backgroundColor: colors.primary
-  },
-  light: {
-    backgroundColor: lateOceanColorPalette.black100
-  }
-};
-
-const button = {
-  borderRadius: 30,
-  borderWidth: {
-    disabled: 2,
-    focus: 3
-  },
-  minHeight: 40,
-  minWidth: 40,
-  maxWidth: 335,
-  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: colors.primary,
-    pressedBackgroundColor: colors.primaryLight,
-    hoverBackgroundColor: colors.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: colors.transparent,
-    pressedBackgroundColor: colors.transparent,
-    hoverBackgroundColor: colors.transparent,
-    focusBorderColor: 'rgba(76, 52, 224, 0.2)',
-    color: colors.primary,
-    hoverColor: 'rgba(76, 52, 224, 0.8)',
-    activeColor: 'rgba(76, 52, 224, 0.8)'
-  },
-  'subtle-dark': {
-    backgroundColor: colors.transparent,
-    pressedBackgroundColor: colors.transparent,
-    hoverBackgroundColor: colors.transparent,
-    focusBorderColor: 'rgba(0, 0, 0, 0.1)',
-    color: colors.black,
-    hoverColor: 'rgba(0, 0, 0, 0.8)',
-    activeColor: 'rgba(0, 0, 0, 0.8)'
-  },
-  disabled: {
-    backgroundColor: colors.disabled,
-    pressedBackgroundColor: colors.disabled,
-    hoverBackgroundColor: colors.disabled,
-    focusBorderColor: lateOceanColorPalette.black100,
-    borderColor: lateOceanColorPalette.black100
-  }
-};
-
-const card = {
-  borderRadius: 20,
-  borderWidth: 2,
-  primary: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.primary
-  },
-  secondary: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator
-  },
-  subtle: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: colors.separator
-  }
-};
-
-const feedbackMessage = {
-  danger: {
-    backgroundColor: colors.danger
-  },
-  success: {
-    backgroundColor: colors.success
-  },
-  info: {
-    backgroundColor: colors.info
-  },
-  warning: {
-    backgroundColor: colors.warning
-  }
-};
+const StyledDemoSection = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StorySection__StyledDemoSection",
+  componentId: "kitt-universal__sc-1b3liv5-3"
+})(["margin-bottom:64px;"]);
 
-const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
-  baseAndSmall: {
-    fontSize: baseAndSmallFontSize,
-    lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)
-  },
-  mediumAndWide: {
-    fontSize: mediumAndWideFontSize,
-    lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)
-  }
-});
-const typography = {
-  colors: {
-    black: lateOceanColorPalette.black1000,
-    'black-anthracite': lateOceanColorPalette.black800,
-    '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: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        bold: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
-      },
-      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: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
-        bold: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
-      },
-      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
-  }
-};
+function DemoSection({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledDemoSection, {
+    children: /*#__PURE__*/jsxRuntime.jsx(StorySection, {
+      internalIsDemoSection: true,
+      title: "Demo",
+      children: children
+    })
+  });
+}
 
-const inputStatesStyle = {
-  default: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator,
-    color: 'black'
-  },
-  pending: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator,
-    color: 'black'
-  },
-  valid: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: lateOceanColorPalette.black100,
-    color: 'black'
-  },
-  hover: {
-    borderColor: lateOceanColorPalette.black200,
-    color: 'black'
-  },
-  focus: {
-    borderColor: colors.primary,
-    color: 'black'
-  },
-  disabled: {
-    backgroundColor: colors.disabled,
-    borderColor: colors.separator,
-    color: 'black-light'
-  },
-  invalid: {
-    borderColor: colors.separator,
-    color: 'black'
-  }
-};
-const input = {
-  color: {
-    selection: colors.primary,
-    placeholder: typography.colors['black-light']
-  },
-  borderWidth: 2,
-  borderRadius: 10,
-  icon: {
-    size: 20
-  },
-  padding: {
-    default: '5px 16px',
-    iOSSingleLine: '9px 16px'
-  },
-  transition: {
-    property: 'border-color',
-    duration: '200ms',
-    timingFunction: 'ease-in-out'
-  },
-  states: inputStatesStyle
-};
+StorySection.SubSection = SubSection;
+StorySection.BlockSection = BlockSection;
+/** @deprecated use StorySection.Demo instead */
 
-const inputField = {
-  labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
-};
+StorySection.DemoSection = DemoSection;
+StorySection.Demo = DemoSection;
+/** @deprecated use StorySection instead */
 
-const radio = {
-  size: 18,
-  unchecked: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderWidth: 2,
-    borderColor: lateOceanColorPalette.black200
-  },
-  checked: {
-    backgroundColor: colors.primary,
-    innerSize: 5,
-    innerBackgroundColor: colors.uiBackgroundLight
-  },
-  disabled: {
-    backgroundColor: colors.disabled,
-    borderColor: colors.separator
-  }
-};
+const DeprecatedSection = StorySection;
 
-const textArea = {
-  minHeight: 120
-};
+function StoryContainer({
+  children,
+  title,
+  state = 'none',
+  platform = 'all'
+}) {
+  if (platform === 'web') return null;
+  return /*#__PURE__*/jsxRuntime.jsx(StorySection.BlockSection, {
+    testID: state,
+    title: title,
+    children: children
+  });
+}
 
-const forms = {
-  input,
-  radio,
-  inputField,
-  textArea
-};
+function StoryDecorator(storyFn, context) {
+  return /*#__PURE__*/jsxRuntime.jsx(Story, {
+    title: context.name,
+    children: storyFn()
+  });
+}
 
-const fullScreenModal = {
-  header: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderColor: lateOceanColorPalette.black100
-  }
-};
+const SmallScreenRow = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryGrid__SmallScreenRow",
+  componentId: "kitt-universal__sc-4z5new-0"
+})(["flex-direction:column;margin:0;"]);
+const SmallScreenCol = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryGrid__SmallScreenCol",
+  componentId: "kitt-universal__sc-4z5new-1"
+})(["padding:8px 0 16px;"]);
+const FlexRow = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryGrid__FlexRow",
+  componentId: "kitt-universal__sc-4z5new-2"
+})(["flex-direction:row;margin:0 -4px 16px;"]);
+const FlexCol = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryGrid__FlexCol",
+  componentId: "kitt-universal__sc-4z5new-3"
+})(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
 
-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: button.disabled.backgroundColor,
-    borderColor: button.disabled.borderColor
-  },
-  default: {
-    pressedBackgroundColor: button.default.pressedBackgroundColor
-  },
-  white: {
-    pressedBackgroundColor: button.white.hoverBackgroundColor
+function StoryGridRow({
+  children,
+  breakpoint = 'small'
+}) {
+  // eslint-disable-next-line unicorn/expiring-todo-comments
+  // TODO use useBreakpoint instead
+  const {
+    width
+  } = reactNative.useWindowDimensions();
+  const breakpointValue = breakpoint === 'small' ? 480 : 768;
+
+  if (width < breakpointValue) {
+    return /*#__PURE__*/jsxRuntime.jsx(SmallScreenRow, {
+      children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(SmallScreenCol, {
+        children: child
+      }))
+    });
   }
-};
 
-const listItem = {
-  padding: '12px 16px',
-  borderColor: colors.separator,
-  borderWidth: 1,
-  innerMargin: 8
-};
+  return /*#__PURE__*/jsxRuntime.jsx(FlexRow, {
+    children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(FlexCol, {
+      children: child
+    }))
+  });
+}
 
-const shadows = {
-  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
-};
+function StoryGridCol({
+  title,
+  titleColor,
+  children,
+  platform = 'all'
+}) {
+  const isNative = reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android';
 
-const skeleton = {
-  backgroundColor: lateOceanColorPalette.black100,
-  flareColor: lateOceanColorPalette.black200,
-  animationDuration: 1000
-};
+  if (reactNative.Platform.OS === 'web' && platform === 'native') {
+    return null;
+  }
 
-const tag = {
-  borderRadius: 10,
-  padding: '2px 12px',
-  primary: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
-      borderWidth: 0,
-      borderColor: colors.transparent
-    },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.primary
-    }
-  },
-  default: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.black50,
-      borderWidth: 0,
-      borderColor: colors.transparent
-    },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.black
-    }
-  },
-  danger: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.warmEmbrace,
-      borderWidth: 0,
-      borderColor: colors.transparent
-    },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.danger
-    }
+  if (isNative && platform === 'web') {
+    return null;
   }
-};
 
-const tooltip = {
-  backgroundColor: colors.black,
-  borderRadius: 10,
-  opacity: 0.95,
-  horizontalPadding: 16,
-  verticalPadding: 4,
-  floatingPadding: 8
+  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 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 color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
+const Container$1 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Tag__Container",
+  componentId: "kitt-universal__sc-19jmowi-0"
+})(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], ({
+  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';
+      }
 
-const theme = {
-  spacing: 4,
-  colors,
-  palettes: {
-    lateOcean: lateOceanColorPalette
-  },
-  avatar,
-  button,
-  card,
-  feedbackMessage,
-  forms,
-  typography,
-  tag,
-  shadows,
-  fullScreenModal,
-  iconButton,
-  listItem,
-  tooltip,
-  skeleton,
-  breakpoints
+    case 'primary':
+      {
+        return 'primary';
+      }
+
+    case 'default':
+      {
+        return 'black';
+      }
+
+    default:
+      {
+        return 'black';
+      }
+  }
 };
+function Tag({
+  label,
+  type = 'default',
+  variant = 'fill'
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$1, {
+    type: type,
+    variant: variant,
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body-xsmall",
+      color: getLabelColor(type, variant),
+      children: label
+    })
+  });
+}
 
 function Title({
   children
@@ -3563,65 +4048,6 @@ function TypographyLink({
   });
 }
 
-function matchWindowSize({
-  width,
-  height
-}, {
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight
-}) {
-  const hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
-  const hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
-  return hasWidthMatched && hasHeightMatched;
-}
-function useMatchWindowSize(options) {
-  const {
-    width,
-    height
-  } = reactNative.useWindowDimensions();
-  return matchWindowSize({
-    width,
-    height
-  }, options);
-}
-
-// eslint-disable-next-line no-restricted-imports
-function createWindowSizeHelper(dimensions) {
-  return {
-    matchWindowSize: options => matchWindowSize(dimensions, options),
-    ifWindowSizeMatches: (options, valueIfTrue, valueIfFalse) => matchWindowSize(dimensions, 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(dimensions, {
-        minWidth: Number(minWidth)
-      }));
-      if (!found) return null;
-      return found[1];
-    }
-  };
-}
-
-function useKittTheme() {
-  const dimensions = reactNative.useWindowDimensions();
-  return react.useMemo(() => {
-    return {
-      kitt: theme,
-      responsive: createWindowSizeHelper(dimensions)
-    };
-  }, [dimensions]);
-}
-
 const hex2rgba = (hex, alpha = 1) => {
   const r = parseInt(hex.slice(1, 3), 16);
   const g = parseInt(hex.slice(3, 5), 16);
@@ -3664,6 +4090,8 @@ exports.useWindowSize = reactNative.useWindowDimensions;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Card = Card;
+exports.Checkbox = Checkbox;
+exports.DatePicker = DatePicker;
 exports.Emoji = Emoji;
 exports.ExternalLink = ExternalLink;
 exports.Flex = Flex;
@@ -3675,7 +4103,9 @@ exports.InputFeedback = InputFeedback;
 exports.InputField = InputField;
 exports.InputIcon = InputIcon;
 exports.InputPassword = InputPassword;
+exports.InputPhone = InputPhone;
 exports.InputPressable = InputPressable;
+exports.InputTag = InputTag;
 exports.InputText = InputText;
 exports.KittBreakpoints = KittBreakpoints;
 exports.KittBreakpointsMax = KittBreakpointsMax;