@ornikar/kitt-universal 4.3.1 → 4.4.0

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

@@ -896,6 +896,631 @@ function ExternalLink({
   });
 }
 
+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 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
@@ -1141,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
@@ -2290,881 +2923,401 @@ const Flex = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Flex",
   componentId: "kitt-universal__sc-15q3v3h-0"
 })(["display:flex;flex-direction:", ";flex-wrap:wrap;padding:", "px;"], ({
-  direction
-}) => direction, ({
-  theme,
-  padding = 0
-}) => padding * theme.kitt.spacing);
-
-const storyPadding = 16;
-
-const getBackgroundColorFromBlockColor = (theme, color = 'transparent') => {
-  switch (color) {
-    case 'dark':
-      return '#293033';
-
-    case 'light':
-      return '#ffffff';
-
-    case 'primary':
-      return theme.kitt.palettes.lateOcean.lateOcean;
-
-    default:
-      return 'transparent';
-  }
-};
-
-const getTypographyColorFromBlockColor = (color = 'transparent') => {
-  switch (color) {
-    case 'dark':
-    case 'primary':
-      return 'white';
-
-    case 'light':
-    default:
-      return 'black';
-  }
-};
-
-const StoryBlockBackgroundContext = /*#__PURE__*/react.createContext('transparent');
-const StoryBlockColorContext = /*#__PURE__*/react.createContext('black');
-const useStoryBlockColor = color => {
-  const storyBlockColor = react.useContext(StoryBlockColorContext);
-  return color || storyBlockColor;
-};
-const StyledStoryBlockView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "StoryBlock__StyledStoryBlockView",
-  componentId: "kitt-universal__sc-3w4hdm-0"
-})(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, ({
-  theme,
-  background
-}) => getBackgroundColorFromBlockColor(theme, background));
-function StoryBlock({
-  children,
-  background
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledStoryBlockView, {
-    background: background,
-    children: /*#__PURE__*/jsxRuntime.jsx(StoryBlockColorContext.Provider, {
-      value: getTypographyColorFromBlockColor(background),
-      children: /*#__PURE__*/jsxRuntime.jsx(StoryBlockBackgroundContext.Provider, {
-        value: background,
-        children: children
-      })
-    })
-  });
-}
-
-const StoryTitleContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "StoryTitle__StoryTitleContainer",
-  componentId: "kitt-universal__sc-sic7hb-0"
-})(["margin-bottom:30px;"]);
-const StorySubTitleContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "StoryTitle__StorySubTitleContainer",
-  componentId: "kitt-universal__sc-sic7hb-1"
-})(["margin-bottom:10px;"]);
-function StoryTitle({
-  color,
-  children,
-  numberOfLines
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StoryTitleContainer, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header1, {
-      variant: "bold",
-      base: "header1",
-      color: useStoryBlockColor(color),
-      numberOfLines: numberOfLines,
-      children: children
-    })
-  });
-}
-
-function StoryTitleLevel2({
-  color,
-  children,
-  numberOfLines
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StoryTitleContainer, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header2, {
-      variant: "bold",
-      base: "header2",
-      color: useStoryBlockColor(color),
-      numberOfLines: numberOfLines,
-      children: children
-    })
-  });
-}
-
-StoryTitleLevel2.displayName = 'StoryTitle.Level2';
-
-function StoryTitleLevel3({
-  color,
-  children,
-  numberOfLines
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StorySubTitleContainer, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header3, {
-      variant: "bold",
-      base: "header3",
-      medium: "header4",
-      color: useStoryBlockColor(color),
-      numberOfLines: numberOfLines,
-      children: children
-    })
-  });
-}
-
-StoryTitleLevel3.displayName = 'StoryTitle.Level3';
-
-function StoryTitleLevel4({
-  color,
-  children,
-  numberOfLines
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StorySubTitleContainer, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header4, {
-      variant: "bold",
-      base: "header4",
-      medium: "header5",
-      color: useStoryBlockColor(color),
-      numberOfLines: numberOfLines,
-      children: children
-    })
-  });
-}
-
-StoryTitleLevel4.displayName = 'StoryTitle.Level3';
-StoryTitle.Level2 = StoryTitleLevel2;
-StoryTitle.Level3 = StoryTitleLevel3;
-StoryTitle.Level4 = StoryTitleLevel4;
-
-const StoryContainer$1 = /*#__PURE__*/styled__default.ScrollView.withConfig({
-  displayName: "Story__StoryContainer",
-  componentId: "kitt-universal__sc-1kwdg2p-0"
-})(["padding:", "px;"], storyPadding);
-function Story({
-  title,
-  contentContainerStyle,
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsxs(StoryContainer$1, {
-    contentContainerStyle: contentContainerStyle,
-    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle, {
-      children: title
-    }), children]
-  });
-}
-
-const StyledSection = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "StorySection__StyledSection",
-  componentId: "kitt-universal__sc-1b3liv5-0"
-})(["margin-bottom:32px;"]);
-function StorySection({
-  title,
-  children,
-  internalIsDemoSection,
-  ...props
-}) {
-  if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
-  return /*#__PURE__*/jsxRuntime.jsxs(StyledSection, { ...props,
-    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level2, {
-      children: title
-    }), children]
-  });
-}
-const StyledSubSection = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "StorySection__StyledSubSection",
-  componentId: "kitt-universal__sc-1b3liv5-1"
-})(["margin-bottom:16px;"]);
-
-function SubSection({
-  title,
-  children,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsxs(StyledSubSection, { ...props,
-    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level3, {
-      children: title
-    }), children]
-  });
-}
+  direction
+}) => direction, ({
+  theme,
+  padding = 0
+}) => padding * theme.kitt.spacing);
 
-const StyledBlockSection = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "StorySection__StyledBlockSection",
-  componentId: "kitt-universal__sc-1b3liv5-2"
-})(["margin-bottom:16px;"]);
+const storyPadding = 16;
 
-function BlockSection({
-  title,
-  children,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsxs(StyledBlockSection, { ...props,
-    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level4, {
-      children: title
-    }), children]
-  });
-}
+const getBackgroundColorFromBlockColor = (theme, color = 'transparent') => {
+  switch (color) {
+    case 'dark':
+      return '#293033';
 
-const StyledDemoSection = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "StorySection__StyledDemoSection",
-  componentId: "kitt-universal__sc-1b3liv5-3"
-})(["margin-bottom:64px;"]);
+    case 'light':
+      return '#ffffff';
 
-function DemoSection({
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledDemoSection, {
-    children: /*#__PURE__*/jsxRuntime.jsx(StorySection, {
-      internalIsDemoSection: true,
-      title: "Demo",
-      children: children
-    })
-  });
-}
+    case 'primary':
+      return theme.kitt.palettes.lateOcean.lateOcean;
 
-StorySection.SubSection = SubSection;
-StorySection.BlockSection = BlockSection;
-/** @deprecated use StorySection.Demo instead */
+    default:
+      return 'transparent';
+  }
+};
 
-StorySection.DemoSection = DemoSection;
-StorySection.Demo = DemoSection;
-/** @deprecated use StorySection instead */
+const getTypographyColorFromBlockColor = (color = 'transparent') => {
+  switch (color) {
+    case 'dark':
+    case 'primary':
+      return 'white';
 
-const DeprecatedSection = StorySection;
+    case 'light':
+    default:
+      return 'black';
+  }
+};
 
-function StoryContainer({
+const StoryBlockBackgroundContext = /*#__PURE__*/react.createContext('transparent');
+const StoryBlockColorContext = /*#__PURE__*/react.createContext('black');
+const useStoryBlockColor = color => {
+  const storyBlockColor = react.useContext(StoryBlockColorContext);
+  return color || storyBlockColor;
+};
+const StyledStoryBlockView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryBlock__StyledStoryBlockView",
+  componentId: "kitt-universal__sc-3w4hdm-0"
+})(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, ({
+  theme,
+  background
+}) => getBackgroundColorFromBlockColor(theme, background));
+function StoryBlock({
   children,
-  title,
-  state = 'none',
-  platform = 'all'
+  background
 }) {
-  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()
+  return /*#__PURE__*/jsxRuntime.jsx(StyledStoryBlockView, {
+    background: background,
+    children: /*#__PURE__*/jsxRuntime.jsx(StoryBlockColorContext.Provider, {
+      value: getTypographyColorFromBlockColor(background),
+      children: /*#__PURE__*/jsxRuntime.jsx(StoryBlockBackgroundContext.Provider, {
+        value: background,
+        children: children
+      })
+    })
   });
 }
 
-const 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({
+const StoryTitleContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryTitle__StoryTitleContainer",
+  componentId: "kitt-universal__sc-sic7hb-0"
+})(["margin-bottom:30px;"]);
+const StorySubTitleContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryTitle__StorySubTitleContainer",
+  componentId: "kitt-universal__sc-sic7hb-1"
+})(["margin-bottom:10px;"]);
+function StoryTitle({
+  color,
   children,
-  breakpoint = 'small'
+  numberOfLines
 }) {
-  // 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
-    }))
+  return /*#__PURE__*/jsxRuntime.jsx(StoryTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header1, {
+      variant: "bold",
+      base: "header1",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
   });
 }
 
-function StoryGridCol({
-  title,
-  titleColor,
+function StoryTitleLevel2({
+  color,
   children,
-  platform = 'all'
+  numberOfLines
 }) {
-  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]
+  return /*#__PURE__*/jsxRuntime.jsx(StoryTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header2, {
+      variant: "bold",
+      base: "header2",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      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';
-      }
+StoryTitleLevel2.displayName = 'StoryTitle.Level2';
 
-    default:
-      {
-        return 'black';
-      }
-  }
-};
-function Tag({
-  label,
-  type = 'default',
-  variant = 'fill'
+function StoryTitleLevel3({
+  color,
+  children,
+  numberOfLines
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StorySubTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header3, {
+      variant: "bold",
+      base: "header3",
+      medium: "header4",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
+}
+
+StoryTitleLevel3.displayName = 'StoryTitle.Level3';
+
+function StoryTitleLevel4({
+  color,
+  children,
+  numberOfLines
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$1, {
-    type: type,
-    variant: variant,
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body-xsmall",
-      color: getLabelColor(type, variant),
-      children: label
+  return /*#__PURE__*/jsxRuntime.jsx(StorySubTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header4, {
+      variant: "bold",
+      base: "header4",
+      medium: "header5",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: 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'
-};
+StoryTitleLevel4.displayName = 'StoryTitle.Level3';
+StoryTitle.Level2 = StoryTitleLevel2;
+StoryTitle.Level3 = StoryTitleLevel3;
+StoryTitle.Level4 = StoryTitleLevel4;
 
-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 StoryContainer$1 = /*#__PURE__*/styled__default.ScrollView.withConfig({
+  displayName: "Story__StoryContainer",
+  componentId: "kitt-universal__sc-1kwdg2p-0"
+})(["padding:", "px;"], storyPadding);
+function Story({
+  title,
+  contentContainerStyle,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(StoryContainer$1, {
+    contentContainerStyle: contentContainerStyle,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle, {
+      children: title
+    }), children]
+  });
+}
 
-const avatar = {
-  borderRadius: 10,
-  default: {
-    backgroundColor: colors.primary
-  },
-  light: {
-    backgroundColor: lateOceanColorPalette.black100
-  }
-};
+const StyledSection = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StorySection__StyledSection",
+  componentId: "kitt-universal__sc-1b3liv5-0"
+})(["margin-bottom:32px;"]);
+function StorySection({
+  title,
+  children,
+  internalIsDemoSection,
+  ...props
+}) {
+  if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledSection, { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level2, {
+      children: title
+    }), children]
+  });
+}
+const StyledSubSection = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StorySection__StyledSubSection",
+  componentId: "kitt-universal__sc-1b3liv5-1"
+})(["margin-bottom:16px;"]);
 
-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 SubSection({
+  title,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledSubSection, { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level3, {
+      children: title
+    }), children]
+  });
+}
 
-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 StyledBlockSection = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StorySection__StyledBlockSection",
+  componentId: "kitt-universal__sc-1b3liv5-2"
+})(["margin-bottom:16px;"]);
 
-const feedbackMessage = {
-  danger: {
-    backgroundColor: colors.danger
-  },
-  success: {
-    backgroundColor: colors.success
-  },
-  info: {
-    backgroundColor: colors.info
-  },
-  warning: {
-    backgroundColor: colors.warning
-  }
-};
+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;"]);
 
-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: '7px 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 +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);
@@ -3664,6 +3758,7 @@ 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;
@@ -3675,6 +3770,7 @@ exports.InputFeedback = InputFeedback;
 exports.InputField = InputField;
 exports.InputIcon = InputIcon;
 exports.InputPassword = InputPassword;
+exports.InputPhone = InputPhone;
 exports.InputPressable = InputPressable;
 exports.InputText = InputText;
 exports.KittBreakpoints = KittBreakpoints;