@ornikar/kitt-universal 4.2.0 → 4.4.0

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

@@ -181,8 +181,8 @@ const StyledTypography = /*#__PURE__*/styled__default.Text.withConfig({
       /* type */
       ${!$typeForCurrentWindowSize ? '' : `
   font-family: ${$isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant]};
-  font-size: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize};
-  line-height: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight};
+  font-size: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize}px;
+  line-height: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight}px;
     `}
 
     /* variant */
@@ -328,7 +328,7 @@ const StyledAvatarView = /*#__PURE__*/styled__default.View.withConfig({
   $size
 }) => {
   if ($isRound) return `${$size / 2}px`;
-  return theme.kitt.avatar.borderRadius;
+  return `${theme.kitt.avatar.borderRadius}px`;
 }, ({
   theme,
   $isLight
@@ -408,7 +408,7 @@ const StyledPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
 const StyledAnimatedView = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
   displayName: "AnimatedButtonPressable__StyledAnimatedView",
   componentId: "kitt-universal__sc-175vyve-1"
-})(["border-radius:", ";"], ({
+})(["border-radius:", "px;"], ({
   theme
 }) => theme.kitt.button.borderRadius);
 const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
@@ -501,12 +501,12 @@ const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
 const BaseStyledButtonPressable = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "BaseStyledButtonPressable",
   componentId: "kitt-universal__sc-4k8lse-0"
-})(["position:relative;min-width:", ";max-width:", ";width:", ";min-height:", ";border-radius:", ";flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], ({
+})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], ({
   theme
 }) => theme.kitt.button.minWidth, ({
   theme,
   $isStretch
-}) => $isStretch ? '100%' : theme.kitt.button.maxWidth, ({
+}) => $isStretch ? '100%' : `${theme.kitt.button.maxWidth}px`, ({
   $isStretch
 }) => $isStretch ? '100%' : 'auto', ({
   theme
@@ -746,14 +746,14 @@ function ButtonContent({
 const StyledDisabled = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StyledDisabled",
   componentId: "kitt-universal__sc-16irf7q-0"
-})(["position:absolute;top:0;left:0;right:0;bottom:0;border:", ";border-radius:", ";"], ({
+})(["position:absolute;top:0;left:0;right:0;bottom:0;border:", ";border-radius:", "px;"], ({
   theme
 }) => {
   const {
     borderWidth,
     disabled
   } = theme.kitt.button;
-  return `${borderWidth.disabled} solid ${disabled.borderColor}`;
+  return `${borderWidth.disabled}px solid ${disabled.borderColor}`;
 }, ({
   theme
 }) => theme.kitt.button.borderRadius);
@@ -804,12 +804,12 @@ const Button = /*#__PURE__*/react.forwardRef(({
 const Container$5 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
-})(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
+})(["background-color:", ";padding:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], ({
   theme,
   type
 }) => theme.kitt.card[type].backgroundColor, ({
   theme
-}) => theme.kitt.card.padding, ({
+}) => theme.kitt.spacing * 4, ({
   theme
 }) => theme.kitt.card.borderRadius, ({
   theme
@@ -896,168 +896,694 @@ function ExternalLink({
   });
 }
 
-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
   }
-}
-
-function InputIcon({
-  icon,
-  state,
-  disabled
-}) {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const color = getIconColor(state, disabled);
-  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-    color: color,
-    icon: icon,
-    size: theme.kitt.forms.input.icon.size
-  });
-}
-
-function InputPressable({ ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Pressable, { ...props
-  });
-}
+};
 
-const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", ";border-radius:", ";border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
-  theme,
-  $state
-}) => $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
-  theme
-}) => theme.kitt.forms.input.borderWidth, ({
-  theme
-}) => theme.kitt.forms.input.borderRadius, ({
-  theme,
-  $state
-}) => theme.kitt.forms.input.states[$state].borderColor, ({
-  theme
-}) => {
-  const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize;
-}, ({
-  theme,
-  $state
-}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color], ({
-  theme
-}) => theme.kitt.typography.types.bodies.fontFamily.regular);
+const 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
+  }
+};
 
-function getInputUIState({
-  isFocused,
-  isDisabled,
-  formState
-}) {
-  if (isDisabled) return 'disabled';
-  if (isFocused) return 'focus';
-  if (formState === 'invalid') return 'invalid';
-  return 'default';
-}
+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 StyledTextInput = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
-  displayName: "InputText__StyledTextInput",
-  componentId: "kitt-universal__sc-uke279-0"
-})(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, ({
-  theme,
-  multiline
-}) => {
-  if (!multiline && reactNative.Platform.OS === 'ios') {
-    return theme.kitt.forms.input.padding.iOSSingleLine;
+const feedbackMessage = {
+  danger: {
+    backgroundColor: colors.danger
+  },
+  success: {
+    backgroundColor: colors.success
+  },
+  info: {
+    backgroundColor: colors.info
+  },
+  warning: {
+    backgroundColor: colors.warning
   }
+};
 
-  return theme.kitt.forms.input.padding.default;
-}, ({
-  theme,
-  multiline
+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 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 = {
+  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 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 = {
+  input,
+  radio,
+  inputField,
+  textArea,
+  checkbox
+};
+
+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]
+  });
+}
+
+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;
+  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight}px`;
 }, ({
   $minHeight
 }) => $minHeight);
-const InputTextContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputText__InputTextContainer",
-  componentId: "kitt-universal__sc-uke279-1"
-})(["position:relative;"]);
 const RightInputContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "InputText__RightInputContainer",
-  componentId: "kitt-universal__sc-uke279-2"
+  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,
@@ -1075,39 +1601,149 @@ const InputText = /*#__PURE__*/react.forwardRef(({
   ...props
 }, ref) => {
   const theme = /*#__PURE__*/styled.useTheme();
-  const [isFocused, setIsFocused] = react.useState(false);
-  const state = internalForceState || getInputUIState({
-    isFocused,
-    isDisabled: disabled,
-    formState
+  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,
+  state,
+  disabled
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const color = getIconColor(state, disabled);
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+    color: color,
+    icon: icon,
+    size: theme.kitt.forms.input.icon.size
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
-    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 InputPressable({ ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Pressable, { ...props
   });
-});
+}
 
 function InputPassword({
   isPasswordDefaultVisible,
@@ -1130,6 +1766,14 @@ function InputPassword({
   });
 }
 
+function InputPhone(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, { ...props,
+    autoCompleteType: "tel",
+    keyboardType: "number-pad",
+    textContentType: "telephoneNumber"
+  });
+}
+
 function Label({
   htmlFor,
   children
@@ -1146,7 +1790,7 @@ function Label({
 const OuterRadio = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Radio__OuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-0"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], ({
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], ({
   theme,
   disabled
 }) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor, ({
@@ -1694,10 +2338,10 @@ const SideContainerView = /*#__PURE__*/styled__default.View.withConfig({
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], ({
   theme,
   side
-}) => side === 'right' ? theme.kitt.listItem.innerMargin : 0, ({
+}) => side === 'right' ? `${theme.kitt.listItem.innerMargin}px` : 0, ({
   theme,
   side
-}) => side === 'left' ? theme.kitt.listItem.innerMargin : 0); // Handles the vertical alignment of the side elements of the list item
+}) => side === 'left' ? `${theme.kitt.listItem.innerMargin}px` : 0); // Handles the vertical alignment of the side elements of the list item
 
 function ListItemSideContainer({
   children,
@@ -1743,15 +2387,15 @@ const ContainerView = /*#__PURE__*/styled__default.View.withConfig({
   } = theme.kitt.listItem;
 
   if (borders === 'top') {
-    return `border-top-width: ${borderWidth}`;
+    return `border-top-width: ${borderWidth}px`;
   }
 
   if (borders === 'bottom') {
-    return `border-bottom-width: ${borderWidth}`;
+    return `border-bottom-width: ${borderWidth}px`;
   }
 
   if (borders === 'both') {
-    return `border-top-width: ${borderWidth}; border-bottom-width: ${borderWidth}`;
+    return styled.css(["border-top-width:", "px;border-bottom-width:", "px;"], borderWidth, borderWidth);
   }
 
   return 'border: none';
@@ -2099,11 +2743,11 @@ const ModalView = /*#__PURE__*/styled__default.View.withConfig({
 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:", ";background-color:", ";"], ({
+})(["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.palettes.lateOcean.white);
+}) => theme.kitt.colors.uiBackgroundLight);
 function Modal({
   visible,
   children,
@@ -2510,644 +3154,170 @@ function DemoSection({
       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'
-}) {
-  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,
-      children: title
-    }) : null, 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:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
-  theme,
-  type,
-  variant
-}) => theme.kitt.tag[type][variant].backgroundColor, ({
-  theme,
-  type,
-  variant
-}) => theme.kitt.tag[type][variant].borderWidth, ({
-  theme,
-  type,
-  variant
-}) => theme.kitt.tag[type][variant].borderColor, ({
-  theme
-}) => theme.kitt.tag.padding, ({
-  theme
-}) => theme.kitt.tag.borderRadius);
-const getLabelColor = (type, variant) => {
-  switch (type) {
-    case 'danger':
-      {
-        return variant === 'outline' ? 'danger' : 'black';
-      }
-
-    case 'primary':
-      {
-        return 'primary';
-      }
-
-    case 'default':
-      {
-        return 'black';
-      }
-
-    default:
-      {
-        return 'black';
-      }
-  }
-};
-function Tag({
-  label,
-  type = 'default',
-  variant = 'fill'
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$1, {
-    type: type,
-    variant: variant,
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body-xsmall",
-      color: getLabelColor(type, variant),
-      children: label
-    })
-  });
-}
-
-const lateOceanColorPalette = {
-  lateOcean: '#4C34E0',
-  lateOceanLight1: '#705DE6',
-  lateOceanLight2: '#9485EC',
-  lateOceanLight3: '#D6BAF9',
-  warmEmbrace: '#F4D3CE',
-  warmEmbraceLight1: '#FFEDE6',
-  black1000: '#000000',
-  black555: '#737373',
-  black200: '#CCCCCC',
-  black100: '#E5E5E5',
-  black50: '#F2F2F2',
-  black25: '#F9F9F9',
-  white: '#FFFFFF',
-  viride: '#38836D',
-  englishVermillon: '#D44148',
-  goldCrayola: '#F8C583',
-  aero: '#89BDDD',
-  transparent: 'transparent',
-  moonPurple: '#DBD6F9',
-  moonPurpleLight1: '#EDEBFC'
-};
-
-const colorsLateOceanTheme = {
-  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: '10px',
-  default: {
-    backgroundColor: colorsLateOceanTheme.primary
-  },
-  light: {
-    backgroundColor: lateOceanColorPalette.black100
-  }
-};
+StorySection.SubSection = SubSection;
+StorySection.BlockSection = BlockSection;
+/** @deprecated use StorySection.Demo instead */
 
-const button = {
-  borderRadius: '30px',
-  borderWidth: {
-    disabled: '2px',
-    focus: '3px'
-  },
-  minHeight: '40px',
-  minWidth: '40px',
-  maxWidth: '335px',
-  scale: {
-    base: {
-      default: 1,
-      hover: 0.95,
-      active: 0.95
-    },
-    medium: {
-      hover: 1.05
-    }
-  },
-  contentPadding: {
-    default: '8px 16px 7px',
-    large: '12px 24px 11px',
-    disabled: '6px 14px 5px'
-  },
-  transition: {
-    duration: '200ms',
-    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
-  },
-  default: {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-    hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-    focusBorderColor: 'rgba(0, 0, 0, 0.1)'
-  },
-  primary: {
-    backgroundColor: colorsLateOceanTheme.primary,
-    pressedBackgroundColor: colorsLateOceanTheme.primaryLight,
-    hoverBackgroundColor: colorsLateOceanTheme.primaryLight,
-    focusBorderColor: 'rgba(76, 52, 224, 0.2)'
-  },
-  white: {
-    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-    pressedBackgroundColor: 'rgba(255, 255, 255, 0.1)',
-    hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
-    focusBorderColor: 'rgba(255, 255, 255, 0.1)'
-  },
-  subtle: {
-    backgroundColor: colorsLateOceanTheme.transparent,
-    pressedBackgroundColor: colorsLateOceanTheme.transparent,
-    hoverBackgroundColor: colorsLateOceanTheme.transparent,
-    focusBorderColor: 'rgba(76, 52, 224, 0.2)',
-    color: colorsLateOceanTheme.primary,
-    hoverColor: 'rgba(76, 52, 224, 0.8)',
-    activeColor: 'rgba(76, 52, 224, 0.8)'
-  },
-  'subtle-dark': {
-    backgroundColor: colorsLateOceanTheme.transparent,
-    pressedBackgroundColor: colorsLateOceanTheme.transparent,
-    hoverBackgroundColor: colorsLateOceanTheme.transparent,
-    focusBorderColor: 'rgba(0, 0, 0, 0.1)',
-    color: colorsLateOceanTheme.black,
-    hoverColor: 'rgba(0, 0, 0, 0.8)',
-    activeColor: 'rgba(0, 0, 0, 0.8)'
-  },
-  disabled: {
-    backgroundColor: colorsLateOceanTheme.disabled,
-    pressedBackgroundColor: colorsLateOceanTheme.disabled,
-    hoverBackgroundColor: colorsLateOceanTheme.disabled,
-    focusBorderColor: lateOceanColorPalette.black100,
-    borderColor: lateOceanColorPalette.black100
-  }
-};
+StorySection.DemoSection = DemoSection;
+StorySection.Demo = DemoSection;
+/** @deprecated use StorySection instead */
 
-const cardLateOceanTheme = {
-  borderRadius: '20px',
-  borderWidth: '2px',
-  padding: '16px',
-  primary: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette.lateOcean
-  },
-  secondary: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette.black100
-  },
-  subtle: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100
-  }
-};
+const DeprecatedSection = StorySection;
 
-const feedbackMessage = {
-  danger: {
-    backgroundColor: colorsLateOceanTheme.danger
-  },
-  success: {
-    backgroundColor: colorsLateOceanTheme.success
-  },
-  info: {
-    backgroundColor: colorsLateOceanTheme.info
-  },
-  warning: {
-    backgroundColor: colorsLateOceanTheme.warning
-  }
-};
+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 calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
-  baseAndSmall: {
-    fontSize: `${baseAndSmallFontSize}px`,
-    lineHeight: `${calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)}px`
-  },
-  mediumAndWide: {
-    fontSize: `${mediumAndWideFontSize}px`,
-    lineHeight: `${calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)}px`
-  }
-});
-const typographyLateOceanTheme = {
-  colors: {
-    black: lateOceanColorPalette.black1000,
-    'black-light': lateOceanColorPalette.black555,
-    white: lateOceanColorPalette.white,
-    'white-light': lateOceanColorPalette.white,
-    primary: lateOceanColorPalette.lateOcean,
-    'primary-light': lateOceanColorPalette.lateOceanLight1,
-    accent: lateOceanColorPalette.warmEmbrace,
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon
-  },
-  types: {
-    headers: {
-      fontFamily: {
-        regular: 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 StoryDecorator(storyFn, context) {
+  return /*#__PURE__*/jsxRuntime.jsx(Story, {
+    title: context.name,
+    children: storyFn()
+  });
+}
 
-const inputStatesStyle = {
-  default: {
-    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
-    borderColor: colorsLateOceanTheme.separator,
-    color: 'black'
-  },
-  pending: {
-    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
-    borderColor: colorsLateOceanTheme.separator,
-    color: 'black'
-  },
-  valid: {
-    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
-    borderColor: lateOceanColorPalette.black100,
-    color: 'black'
-  },
-  hover: {
-    borderColor: lateOceanColorPalette.black200,
-    color: 'black'
-  },
-  focus: {
-    borderColor: colorsLateOceanTheme.primary,
-    color: 'black'
-  },
-  disabled: {
-    backgroundColor: colorsLateOceanTheme.disabled,
-    borderColor: colorsLateOceanTheme.separator,
-    color: 'black-light'
-  },
-  invalid: {
-    borderColor: colorsLateOceanTheme.separator,
-    color: 'black'
-  }
-};
-const input = {
-  color: {
-    selection: colorsLateOceanTheme.primary,
-    placeholder: typographyLateOceanTheme.colors['black-light']
-  },
-  borderWidth: '2px',
-  borderRadius: '10px',
-  icon: {
-    size: 20
-  },
-  padding: {
-    default: '7px 16px',
-    iOSSingleLine: '12px 16px'
-  },
-  states: inputStatesStyle
-};
+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 inputFieldLateOceanTheme = {
-  labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
-};
+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;
 
-const radioLateOceanTheme = {
-  size: 18,
-  unchecked: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderWidth: '2px',
-    borderColor: lateOceanColorPalette.black200
-  },
-  checked: {
-    backgroundColor: lateOceanColorPalette.lateOcean,
-    innerSize: 5,
-    innerBackgroundColor: lateOceanColorPalette.white
-  },
-  disabled: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100
+  if (width < breakpointValue) {
+    return /*#__PURE__*/jsxRuntime.jsx(SmallScreenRow, {
+      children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(SmallScreenCol, {
+        children: child
+      }))
+    });
   }
-};
 
-const textArea = {
-  minHeight: 120
-};
+  return /*#__PURE__*/jsxRuntime.jsx(FlexRow, {
+    children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(FlexCol, {
+      children: child
+    }))
+  });
+}
 
-const forms = {
-  input,
-  radio: radioLateOceanTheme,
-  inputField: inputFieldLateOceanTheme,
-  textArea
-};
+function StoryGridCol({
+  title,
+  titleColor,
+  children,
+  platform = 'all'
+}) {
+  const isNative = reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android';
 
-const fullScreenModalLateOceanTheme = {
-  header: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderColor: lateOceanColorPalette.black100
+  if (reactNative.Platform.OS === 'web' && platform === 'native') {
+    return null;
   }
-};
 
-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
+  if (isNative && platform === 'web') {
+    return null;
   }
-};
 
-const listItemLateOceanTheme = {
-  padding: '12px 16px',
-  borderColor: colorsLateOceanTheme.separator,
-  borderWidth: '1px',
-  innerMargin: '8px'
-};
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [title ? /*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level4, {
+      numberOfLines: 1,
+      color: titleColor,
+      children: title
+    }) : null, children]
+  });
+}
 
-const shadowsLateOceanTheme = {
-  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
+const StoryGrid = {
+  Row: StoryGridRow,
+  Col: StoryGridCol
 };
 
-const skeletonTheme = {
-  backgroundColor: lateOceanColorPalette.black100,
-  flareColor: lateOceanColorPalette.black200,
-  animationDuration: 1000
-};
+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 tagLateOceanTheme = {
-  borderRadius: '10px',
-  padding: '2px 12px',
-  primary: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
-      borderWidth: '0',
-      borderColor: lateOceanColorPalette.transparent
-    },
-    outline: {
-      backgroundColor: lateOceanColorPalette.transparent,
-      borderWidth: '1px',
-      borderColor: lateOceanColorPalette.lateOcean
-    }
-  },
-  default: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.black50,
-      borderWidth: '0',
-      borderColor: lateOceanColorPalette.transparent
-    },
-    outline: {
-      backgroundColor: lateOceanColorPalette.transparent,
-      borderWidth: '1px',
-      borderColor: lateOceanColorPalette.black1000
-    }
-  },
-  danger: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.warmEmbrace,
-      borderWidth: '0',
-      borderColor: lateOceanColorPalette.transparent
-    },
-    outline: {
-      backgroundColor: lateOceanColorPalette.transparent,
-      borderWidth: '1px',
-      borderColor: colorsLateOceanTheme.danger
-    }
-  }
-};
+    case 'primary':
+      {
+        return 'primary';
+      }
 
-const tooltip = {
-  backgroundColor: colorsLateOceanTheme.black,
-  borderRadius: 10,
-  opacity: 0.95,
-  horizontalPadding: 16,
-  verticalPadding: 4,
-  floatingPadding: 8
-};
+    case 'default':
+      {
+        return 'black';
+      }
 
-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'
+    default:
+      {
+        return 'black';
+      }
   }
-}; // 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: colorsLateOceanTheme,
-  palettes: {
-    lateOcean: lateOceanColorPalette
-  },
-  avatar,
-  button,
-  card: cardLateOceanTheme,
-  feedbackMessage,
-  forms,
-  typography: typographyLateOceanTheme,
-  tag: tagLateOceanTheme,
-  shadows: shadowsLateOceanTheme,
-  fullScreenModal: fullScreenModalLateOceanTheme,
-  iconButton,
-  listItem: listItemLateOceanTheme,
-  tooltip,
-  skeleton: skeletonTheme,
-  breakpoints
 };
+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
@@ -3386,7 +3556,7 @@ function Tooltip({
     };
     _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{opacity:withSpring(pressed.value?theme.kitt.tooltip.opacity:0)};}}";
     _f.__workletHash = 15953928507970;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Tooltip/Tooltip.tsx (57:41)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Tooltip/Tooltip.tsx (59:41)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -3479,13 +3649,8 @@ function TypographyEmoji({
   const {
     fontSize
   } = typeConfig[typeConfigKey];
-
-  if ((process.env.NODE_ENV !== "production")) {
-    if (!fontSize.endsWith('px')) throw new Error(`Unexpected font-size value: ${fontSize}`);
-  }
-
   return /*#__PURE__*/jsxRuntime.jsx(StyledTypographyEmoji, {
-    size: parseInt(fontSize.slice(0, -2), 10),
+    size: fontSize,
     emoji: emoji
   });
 }
@@ -3551,65 +3716,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);
@@ -3645,25 +3751,26 @@ function MatchWindowSize({
 }) {
   const match = useMatchWindowSize(matchWindowSizeOptions);
   if (!match) return null;
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: children
-  });
+  return children;
 }
 
 exports.useWindowSize = reactNative.useWindowDimensions;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Card = Card;
+exports.Checkbox = Checkbox;
 exports.Emoji = Emoji;
 exports.ExternalLink = ExternalLink;
 exports.Flex = Flex;
 exports.FullScreenModal = FullScreenModal;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.InputEmail = InputEmail;
 exports.InputFeedback = InputFeedback;
 exports.InputField = InputField;
 exports.InputIcon = InputIcon;
 exports.InputPassword = InputPassword;
+exports.InputPhone = InputPhone;
 exports.InputPressable = InputPressable;
 exports.InputText = InputText;
 exports.KittBreakpoints = KittBreakpoints;