@ornikar/kitt-universal 3.1.0 → 3.2.0

package/dist/index-browser-all.es.js

@@ -5,14 +5,14 @@ export * from '@ornikar/kitt-icons';
 import { Animated, Easing, useWindowDimensions, Image, Platform, Linking, TextInput, Pressable, ActivityIndicator, TouchableOpacity, View, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import { useRef, useEffect, cloneElement, useContext, createContext, useState, useMemo, forwardRef, Fragment, Children } from 'react';
+import { useRef, useEffect, cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, Children } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import Animated$1, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring } from 'react-native-reanimated';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { parse } from 'twemoji-parser';
 import { openBrowserAsync } from 'expo-web-browser';
 import _extends from '@babel/runtime/helpers/extends';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import Animated$1, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { styled as styled$1 } from '@linaria/react';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { FormattedMessage } from 'react-intl';
@@ -51,7 +51,7 @@ function SpinningIcon(_ref) {
   });
 }
 
-var IconContainer$2 = /*#__PURE__*/styled.View.withConfig({
+var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Icon__IconContainer"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
   var color = _ref.color;
@@ -77,7 +77,7 @@ function Icon(_ref5) {
   var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
-  return /*#__PURE__*/jsx(IconContainer$2, {
+  return /*#__PURE__*/jsx(IconContainer$1, {
     align: align,
     size: size,
     color: color,
@@ -135,11 +135,11 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _excluded$c = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+var _excluded$d = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -202,7 +202,7 @@ function Typography(_ref3) {
       large = _ref3.large,
       variant = _ref3.variant,
       color = _ref3.color,
-      otherProps = _objectWithoutProperties(_ref3, _excluded$c);
+      otherProps = _objectWithoutProperties(_ref3, _excluded$d);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
@@ -213,14 +213,14 @@ function Typography(_ref3) {
   var colorWithDefaultToBlack = color !== null && color !== void 0 ? color : isHeaderTypographyInContext !== undefined ? undefined : 'black';
   var content = base ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
-    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$i({
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$h({
       $color: colorWithDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$i({
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$h({
     $color: colorWithDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
@@ -233,13 +233,13 @@ function Typography(_ref3) {
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$i({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$h({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$i({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$h({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -247,7 +247,7 @@ function TypographyParagraph(props) {
 var createHeading = function (level, defaultBase) {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
-    return /*#__PURE__*/jsx(Typography, _objectSpread$i(_objectSpread$i({
+    return /*#__PURE__*/jsx(Typography, _objectSpread$h(_objectSpread$h({
       accessibilityRole: "header",
       base: defaultBase
     }, props), {}, {
@@ -283,11 +283,11 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$b = ["size"];
+var _excluded$c = ["size"];
 
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getFirstCharacter = function (string) {
   return string ? string[0] : '';
@@ -354,95 +354,242 @@ function AvatarContent(_ref5) {
 function Avatar(_ref6) {
   var _ref6$size = _ref6.size,
       size = _ref6$size === void 0 ? 40 : _ref6$size,
-      rest = _objectWithoutProperties(_ref6, _excluded$b);
+      rest = _objectWithoutProperties(_ref6, _excluded$c);
 
-  return /*#__PURE__*/jsx(StyledAvatarView, _objectSpread$h(_objectSpread$h({}, rest), {}, {
+  return /*#__PURE__*/jsx(StyledAvatarView, _objectSpread$g(_objectSpread$g({}, rest), {}, {
     size: size,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$h(_objectSpread$h({}, rest), {}, {
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$g(_objectSpread$g({}, rest), {}, {
       size: size
     }))
   }));
 }
 
-var _excluded$a = ["color"],
-    _excluded2$2 = ["color"];
+var StyledPressable = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "AnimatedButtonPressable__StyledPressable"
+})(["", ""], function (_ref) {
+  var $isStretch = _ref.$isStretch;
+  if ($isStretch) return undefined;
+  return 'align-self: flex-start;';
+});
+var StyledAnimatedView = /*#__PURE__*/styled(Animated$1.View).withConfig({
+  displayName: "AnimatedButtonPressable__StyledAnimatedView"
+})(["border-radius:", ";"], function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.button.borderRadius;
+});
+var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+      disabled = _ref3.disabled,
+      accessibilityRole = _ref3.accessibilityRole,
+      $type = _ref3.$type,
+      $isStretch = _ref3.$isStretch,
+      href = _ref3.href,
+      hrefAttrs = _ref3.hrefAttrs,
+      testID = _ref3.testID,
+      onPress = _ref3.onPress;
+  var theme = /*#__PURE__*/useTheme();
+  var pressed = useSharedValue(0);
+  var color = useSharedValue(0);
+  var _theme$kitt$button$$t = theme.kitt.button[$type],
+      backgroundColor = _theme$kitt$button$$t.backgroundColor,
+      pressedBackgroundColor = _theme$kitt$button$$t.pressedBackgroundColor;
+  var scale = theme.kitt.button.scale;
+  var scaleStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        backgroundColor: interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
+        transform: [{
+          scale: withSpring(pressed.value ? scale.base.active : scale.base["default"])
+        }]
+      };
+    };
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+    _f._closure = {
+      interpolateColor: interpolateColor,
+      color: color,
+      backgroundColor: backgroundColor,
+      pressedBackgroundColor: pressedBackgroundColor,
+      withSpring: withSpring,
+      pressed: pressed,
+      scale: {
+        base: {
+          active: scale.base.active,
+          "default": scale.base["default"]
+        }
+      }
+    };
+    _f.asString = "function _f(){const{interpolateColor,color,backgroundColor,pressedBackgroundColor,withSpring,pressed,scale}=jsThis._closure;{return{backgroundColor:interpolateColor(color.value,[0,1],[backgroundColor,pressedBackgroundColor]),transform:[{scale:withSpring(pressed.value?scale.base.active:scale.base.default)}]};}}";
+    _f.__workletHash = 5368461229978;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Button/AnimatedButtonPressable.tsx (53:41)";
+    _f.__optimalization = 2;
 
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+    global.__reanimatedWorkletInit(_f);
 
-function TypographyIconInheritColor(props) {
-  var color = useTypographyColor();
-  var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread$g(_objectSpread$g({}, props), {}, {
-    color: theme.kitt.typography.colors[color]
-  }));
-}
+    return _f;
+  }());
+
+  var handlePressInOut = function (pressIn) {
+    color.value = withSpring(pressIn ? 1 : 0);
+    pressed.value = pressIn ? 1 : 0;
+  };
+
+  return /*#__PURE__*/jsx(StyledPressable, {
+    ref: ref,
+    disabled: disabled,
+    accessibilityRole: accessibilityRole,
+    testID: testID,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    $isStretch: $isStretch,
+    $type: $type,
+    onPress: onPress,
+    onPressIn: function onPressIn() {
+      handlePressInOut(true);
+    },
+    onPressOut: function onPressOut() {
+      handlePressInOut(false);
+    },
+    children: /*#__PURE__*/jsx(StyledAnimatedView, {
+      style: disabled ? [{
+        transform: [{
+          scale: 1
+        }]
+      }] : [scaleStyles],
+      children: children
+    })
+  });
+});
+
+var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseStyledButtonPressable"
+})(["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:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.button.minWidth;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $isStretch = _ref2.$isStretch;
+  return $isStretch ? '100%' : theme.kitt.button.maxWidth;
+}, function (_ref3) {
+  var $isStretch = _ref3.$isStretch;
+  return $isStretch ? '100%' : 'auto';
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.button.minHeight;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.button.borderRadius;
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      $isDisabled = _ref6.$isDisabled,
+      $type = _ref6.$type;
+  if ($isDisabled) return theme.kitt.button.disabled.backgroundColor;
+  if (Platform.OS !== 'web') return 'transparent';
+  return theme.kitt.button[$type].backgroundColor;
+}, function (_ref7) {
+  var theme = _ref7.theme,
+      $isLarge = _ref7.$isLarge,
+      $isDisabled = _ref7.$isDisabled;
+  var _theme$kitt$button$co = theme.kitt.button.contentPadding,
+      large = _theme$kitt$button$co.large,
+      defaultPadding = _theme$kitt$button$co["default"],
+      disabledPadding = _theme$kitt$button$co.disabled;
+  if ($isLarge) return large;
+  if ($isDisabled) return disabledPadding;
+  return defaultPadding;
+});
+
+var _excluded$b = ["color"],
+    _excluded2$2 = ["color"];
+
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread$g(_objectSpread$g({}, otherProps), {}, {
-    color: theme.kitt.typography.colors[color]
+  return /*#__PURE__*/jsx(Icon, _objectSpread$f(_objectSpread$f({}, props), {}, {
+    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
   }));
 }
 
+function TypographyIconInheritColor(props) {
+  var color = useTypographyColor();
+  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$f({
+    color: color
+  }, props));
+}
+
 function TypographyIcon(_ref2) {
   var color = _ref2.color,
-      otherProps = _objectWithoutProperties(_ref2, _excluded2$2);
+      props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
-    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$g({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$f({
       color: color
-    }, otherProps));
+    }, props));
   }
 
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$g({}, otherProps));
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$f({}, props));
 }
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function isSubtle(type) {
+  return type.startsWith('subtle');
+}
 
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$a = ["type", "isDisabled", "$isStretch", "icon", "children"];
+
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var getTextColorByType = function (type, isPressed, disabled) {
-  if (disabled) return 'black-light';
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var getTextColorByType = function (type) {
   switch (type) {
     case 'primary':
       return 'white';
 
+    case 'white':
+      return 'white';
+
     case 'subtle':
-      return isPressed ? 'primary-light' : 'primary';
+      return 'primary';
 
     case 'subtle-dark':
-      return isPressed ? 'black-light' : 'black';
+      return 'black';
 
-    case 'secondary':
     default:
       return 'black';
   }
 };
 
-var ButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
-  displayName: "ButtonContent__ButtonText"
-})(["text-align:center;"]);
-var Content$1 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "ButtonContent__Content"
-})(["flex-direction:row;align-items:center;justify-content:center;flex:", ";"], function (_ref) {
-  var stretch = _ref.stretch,
-      iconOnly = _ref.iconOnly;
-  return "".concat(stretch || iconOnly ? 1 : 0, " 1 auto");
+var StyledButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
+  displayName: "ButtonContent__StyledButtonText"
+})(["text-align:center;", " ", ""], function () {
+  // Make the multilines case work properly on native
+  // Breaks the web implem
+  if (Platform.OS === 'web') return undefined;
+  return "\n      flex-shrink: 1;\n    ";
+}, function (_ref) {
+  var $type = _ref.$type,
+      $isDisabled = _ref.$isDisabled;
+
+  /* For subltes button, color changes when hovered.
+   * We don't want to use a mouse event handler with a react state to handle it
+   * For this precise case, we've decided to work outside the typography logic
+   */
+  if (Platform.OS !== 'web' || $isDisabled || !isSubtle($type)) return undefined;
+  return 'color: inherit';
 });
-var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "ButtonContent__IconContainer"
+var StyledIconContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ButtonContent__StyledIconContainer"
 })(["", ""], function (_ref2) {
   var theme = _ref2.theme,
-      iconPosition = _ref2.iconPosition;
-  var value = theme.kitt.spacing * 3;
+      $iconPosition = _ref2.$iconPosition;
+  var value = theme.kitt.spacing * 2;
 
-  if (iconPosition === 'left') {
+  if ($iconPosition === 'left') {
     return "margin: 0 ".concat(value, "px 0 0;");
   }
 
@@ -451,39 +598,32 @@ var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
 
 function ButtonIcon(_ref3) {
   var icon = _ref3.icon,
-      spin = _ref3.spin,
       color = _ref3.color,
-      size = _ref3.size,
+      spin = _ref3.spin,
       iconPosition = _ref3.iconPosition,
       testID = _ref3.testID;
-  return /*#__PURE__*/jsx(IconContainer$1, {
-    iconPosition: iconPosition,
+  return /*#__PURE__*/jsx(StyledIconContainer, {
+    $iconPosition: iconPosition,
     children: /*#__PURE__*/jsx(TypographyIcon, {
       icon: icon,
       spin: spin,
-      color: color,
-      size: size,
-      testID: testID
+      testID: testID,
+      color: color
     })
   });
 }
 
-function ButtonContent(_ref4) {
+var StyledChildrenWithIcon = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ButtonContent__StyledChildrenWithIcon"
+})(["align-items:center;justify-content:center;flex-direction:row;"]);
+function ButtonContentChildren(_ref4) {
   var type = _ref4.type,
-      isPressed = _ref4.isPressed,
-      stretch = _ref4.stretch,
       icon = _ref4.icon,
       iconPosition = _ref4.iconPosition,
       iconSpin = _ref4.iconSpin,
-      disabled = _ref4.disabled,
+      isDisabled = _ref4.isDisabled,
+      color = _ref4.color,
       children = _ref4.children;
-  var color = getTextColorByType(type, Boolean(isPressed), Boolean(disabled));
-  var theme = /*#__PURE__*/useTheme();
-  var sharedIconProps = {
-    spin: iconSpin,
-    color: color,
-    size: theme.kitt.button.iconSize
-  };
 
   if ((process.env.NODE_ENV !== "production")) {
     if (!(children || icon)) {
@@ -491,128 +631,136 @@ function ButtonContent(_ref4) {
     }
   }
 
+  var isWebSubtle = isSubtle(type) && Platform.OS === 'web' && !isDisabled;
+
   if (!children) {
-    return /*#__PURE__*/jsx(Content$1, {
-      iconOnly: true,
-      stretch: stretch,
-      children: /*#__PURE__*/jsx(TypographyIcon, _objectSpread$f(_objectSpread$f({}, sharedIconProps), {}, {
-        icon: icon
-      }))
+    return /*#__PURE__*/jsx(TypographyIcon, {
+      spin: iconSpin // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      ,
+      icon: icon,
+      color: isWebSubtle ? 'inherit' : color
     });
   }
 
-  return /*#__PURE__*/jsxs(Content$1, {
-    stretch: stretch,
-    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$f(_objectSpread$f({}, sharedIconProps), {}, {
-      icon: icon,
-      iconPosition: iconPosition,
-      testID: "button-left-icon"
-    })) : null, /*#__PURE__*/jsx(ButtonText, {
+  var buttonIconSharedProps = {
+    type: type,
+    spin: iconSpin,
+    iconPosition: iconPosition,
+    color: isWebSubtle ? 'inherit' : color
+  };
+  return /*#__PURE__*/jsxs(StyledChildrenWithIcon, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$e(_objectSpread$e({}, buttonIconSharedProps), {}, {
+      testID: "button-left-icon",
+      icon: icon
+    })) : null, /*#__PURE__*/jsx(StyledButtonText, {
       base: "body",
-      color: color,
       variant: "bold",
+      $type: type,
+      $isDisabled: isDisabled // set to color: inherit via styled components
+      ,
+      color: isWebSubtle ? undefined : color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$f(_objectSpread$f({}, sharedIconProps), {}, {
-      icon: icon,
-      iconPosition: iconPosition
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$e(_objectSpread$e({}, buttonIconSharedProps), {}, {
+      icon: icon
     })) : null]
   });
 }
+var ButtonContentContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ButtonContent__ButtonContentContainer"
+})(["line-height:16px;", " ", ";"], function (_ref5) {
+  var $isStretch = _ref5.$isStretch,
+      $isIconOnly = _ref5.$isIconOnly;
+  // Make the multilines case work properly on web
+  // Breaks the native implem
+  if (Platform.OS !== 'web') return undefined;
+  return "\n      flex: ".concat($isStretch || $isIconOnly ? 1 : 0, " 1 auto;\n    ");
+}, function (_ref6) {
+  var $isSubtle = _ref6.$isSubtle;
+  if (Platform.OS !== 'web' || !$isSubtle) return undefined; // Needed for subtle type
 
-var ButtonPressable = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "ButtonPressable"
-})(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], function (_ref) {
+  return 'color: inherit';
+});
+function ButtonContent(_ref7) {
+  var type = _ref7.type,
+      isDisabled = _ref7.isDisabled,
+      $isStretch = _ref7.$isStretch,
+      icon = _ref7.icon,
+      children = _ref7.children,
+      props = _objectWithoutProperties(_ref7, _excluded$a);
+
+  var color = isDisabled ? 'black-light' : getTextColorByType(type);
+  return /*#__PURE__*/jsx(ButtonContentContainer, {
+    $isSubtle: isSubtle(type),
+    $isStretch: $isStretch,
+    $isIconOnly: Boolean(!children && icon),
+    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$e(_objectSpread$e({
+      icon: icon,
+      type: type,
+      isDisabled: isDisabled,
+      color: color
+    }, props), {}, {
+      children: children
+    }))
+  });
+}
+
+var StyledDisabled = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StyledDisabled"
+})(["position:absolute;top:0;left:0;right:0;bottom:0;border:", ";border-radius:", ";"], function (_ref) {
   var theme = _ref.theme;
-  return theme.kitt.button.minWidth;
+  var _theme$kitt$button = theme.kitt.button,
+      borderWidth = _theme$kitt$button.borderWidth,
+      disabled = _theme$kitt$button.disabled;
+  return "".concat(borderWidth.disabled, " solid ").concat(disabled.borderColor);
 }, function (_ref2) {
-  var theme = _ref2.theme,
-      stretch = _ref2.stretch;
-  return stretch ? 'auto' : theme.kitt.button.maxWidth;
-}, function (_ref3) {
-  var stretch = _ref3.stretch;
-  return stretch ? '100%' : 'auto';
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.button.minHeight;
-}, function (_ref5) {
-  var theme = _ref5.theme,
-      isPressed = _ref5.isPressed,
-      disabled = _ref5.disabled,
-      type = _ref5.type;
-
-  if (disabled) {
-    return theme.kitt.button[type].disabledBackgroundColor;
-  }
-
-  return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.kitt.button.contentPadding["default"];
-}, function (_ref7) {
-  var theme = _ref7.theme;
+  var theme = _ref2.theme;
   return theme.kitt.button.borderRadius;
-}, function (_ref8) {
-  var theme = _ref8.theme,
-      disabled = _ref8.disabled,
-      type = _ref8.type;
-  return disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent';
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.kitt.button.borderWidth;
 });
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function Button(_ref) {
+var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'secondary' : _ref$type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      disabled = _ref.disabled,
+      stretch = _ref.stretch,
+      large = _ref.large,
       icon = _ref.icon,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
       iconSpin = _ref.iconSpin,
-      stretch = _ref.stretch,
-      disabled = _ref.disabled,
       testID = _ref.testID,
       href = _ref.href,
       hrefAttrs = _ref.hrefAttrs,
+      _ref$accessibilityRol = _ref.accessibilityRole,
+      accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
       onPress = _ref.onPress;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isPressed = _useState2[0],
-      setIsPressed = _useState2[1];
-
-  var sharedProps = {
-    type: type,
-    stretch: stretch,
-    disabled: disabled
-  };
-  return /*#__PURE__*/jsx(ButtonPressable // eslint-disable-next-line unicorn/expiring-todo-comments
-  // TODO: When designs are defined, update with the proper onPress styles to mimic TouchableHighlight
-  // underlayColor={globalTheme.button[type].pressedBackgroundColor}
-  , _objectSpread$e(_objectSpread$e({}, sharedProps), {}, {
-    isPressed: isPressed,
-    accessibilityRole: "button",
+  return /*#__PURE__*/jsx(AnimatedButtonPressable, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
     testID: testID,
     href: href,
     hrefAttrs: hrefAttrs,
+    disabled: disabled,
+    $isStretch: stretch,
+    $type: type,
     onPress: onPress,
-    onPressIn: function handleButtonPressIn() {
-      return setIsPressed(true);
-    },
-    onPressOut: function handleButtonPressOut() {
-      return setIsPressed(false);
-    },
-    children: /*#__PURE__*/jsx(ButtonContent, _objectSpread$e(_objectSpread$e({}, sharedProps), {}, {
-      icon: icon,
-      iconPosition: iconPosition,
-      iconSpin: iconSpin,
-      children: children
-    }))
-  }));
-}
+    children: /*#__PURE__*/jsxs(BaseStyledButtonPressable, {
+      $type: type,
+      $isStretch: stretch,
+      $isLarge: large,
+      $isDisabled: disabled,
+      children: [/*#__PURE__*/jsx(ButtonContent, {
+        type: type,
+        $isStretch: stretch,
+        isDisabled: disabled,
+        icon: icon,
+        iconPosition: iconPosition,
+        iconSpin: iconSpin,
+        children: children
+      }), Platform.OS !== 'web' && disabled ? /*#__PURE__*/jsx(StyledDisabled, {}) : null]
+    })
+  });
+});
 
 var Container$6 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Card__Container"
@@ -1277,8 +1425,7 @@ function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) {
 //     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
 //   };
 // }
-function withTheme( // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-WrappedComponent) {
+function withTheme(WrappedComponent) {
   return function (props) {
     var theme = /*#__PURE__*/useTheme();
     return /*#__PURE__*/jsx(WrappedComponent, _objectSpread$9({
@@ -2429,47 +2576,98 @@ var avatarLateOceanTheme = {
   }
 };
 
+var colorsLateOceanTheme = {
+  primary: lateOceanColorPalette.lateOcean,
+  primaryLight: lateOceanColorPalette.lateOceanLight1,
+  accent: lateOceanColorPalette.warmEmbrace,
+  accentLight: lateOceanColorPalette.warmEmbraceLight1,
+  success: lateOceanColorPalette.viride,
+  correct: lateOceanColorPalette.viride,
+  danger: lateOceanColorPalette.englishVermillon,
+  separator: lateOceanColorPalette.black100,
+  hover: lateOceanColorPalette.black100,
+  black: lateOceanColorPalette.black1000,
+  uiBackground: lateOceanColorPalette.black25,
+  uiBackgroundLight: lateOceanColorPalette.white,
+  transparent: lateOceanColorPalette.transparent,
+  disabled: lateOceanColorPalette.black50,
+  overlay: {
+    dark: 'rgba(41, 48, 51, 0.25)',
+    light: 'rgba(255, 255, 255, 0.90)',
+    fullscreenLoader: 'rgba(0, 0, 0, 0.25)'
+  }
+};
+
 var buttonLateOceanTheme = {
   borderRadius: '30px',
-  borderWidth: '2px',
-  minHeight: '42px',
+  borderWidth: {
+    disabled: '2px',
+    focus: '3px'
+  },
+  minHeight: '40px',
   minWidth: '40px',
   maxWidth: '335px',
-  iconSize: 18,
+  scale: {
+    base: {
+      "default": 1,
+      hover: 0.95,
+      active: 0.95
+    },
+    medium: {
+      hover: 1.05
+    }
+  },
   contentPadding: {
-    "default": '8px 16px'
+    "default": '8px 16px 7px',
+    large: '12px 24px 11px',
+    disabled: '6px 14px 5px'
   },
-  primary: {
-    backgroundColor: lateOceanColorPalette.lateOcean,
-    disabledBackgroundColor: lateOceanColorPalette.black50,
-    pressedBackgroundColor: lateOceanColorPalette.lateOceanLight1,
-    disabledBorderColor: lateOceanColorPalette.black100
+  transition: {
+    duration: '200ms',
+    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
   },
-  secondary: {
+  "default": {
     backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    disabledBackgroundColor: lateOceanColorPalette.black50,
     pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-    disabledBorderColor: lateOceanColorPalette.black100
-  },
-  subtle: {
-    backgroundColor: lateOceanColorPalette.transparent,
-    disabledBackgroundColor: lateOceanColorPalette.transparent,
-    pressedBackgroundColor: lateOceanColorPalette.transparent,
-    disabledBorderColor: lateOceanColorPalette.transparent
+    hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+    focusBorderColor: 'rgba(0, 0, 0, 0.1)'
   },
-  'subtle-dark': {
-    backgroundColor: lateOceanColorPalette.transparent,
-    disabledBackgroundColor: lateOceanColorPalette.transparent,
-    pressedBackgroundColor: lateOceanColorPalette.transparent,
-    disabledBorderColor: lateOceanColorPalette.transparent
+  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)',
-    disabledBackgroundColor: lateOceanColorPalette.transparent,
-    hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
     pressedBackgroundColor: 'rgba(255, 255, 255, 0.1)',
-    focusBorderColor: 'rgba(255, 255, 255, 0.1)',
-    disabledBorderColor: lateOceanColorPalette.transparent
+    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
   }
 };
 
@@ -2491,26 +2689,6 @@ var cardLateOceanTheme = {
   }
 };
 
-var colorsLateOceanTheme = {
-  primary: lateOceanColorPalette.lateOcean,
-  primaryLight: lateOceanColorPalette.lateOceanLight1,
-  accent: lateOceanColorPalette.warmEmbrace,
-  accentLight: lateOceanColorPalette.warmEmbraceLight1,
-  success: lateOceanColorPalette.viride,
-  correct: lateOceanColorPalette.viride,
-  danger: lateOceanColorPalette.englishVermillon,
-  separator: lateOceanColorPalette.black100,
-  hover: lateOceanColorPalette.black100,
-  black: lateOceanColorPalette.black1000,
-  uiBackground: lateOceanColorPalette.black25,
-  uiBackgroundLight: lateOceanColorPalette.white,
-  overlay: {
-    dark: 'rgba(41, 48, 51, 0.25)',
-    light: 'rgba(255, 255, 255, 0.90)',
-    fullscreenLoader: 'rgba(0, 0, 0, 0.25)'
-  }
-};
-
 var feedbackMessageLateOceanTheme = {
   backgroundColors: {
     success: lateOceanColorPalette.viride,
@@ -2624,11 +2802,11 @@ var iconButton = {
   },
   disabled: {
     scale: 1,
-    backgroundColor: buttonLateOceanTheme.secondary.disabledBackgroundColor,
-    borderColor: buttonLateOceanTheme.secondary.disabledBorderColor
+    backgroundColor: buttonLateOceanTheme.disabled.backgroundColor,
+    borderColor: buttonLateOceanTheme.disabled.borderColor
   },
   "default": {
-    pressedBackgroundColor: buttonLateOceanTheme.secondary.pressedBackgroundColor
+    pressedBackgroundColor: buttonLateOceanTheme["default"].pressedBackgroundColor
   },
   white: {
     pressedBackgroundColor: buttonLateOceanTheme.white.hoverBackgroundColor
@@ -2794,7 +2972,7 @@ var breakpoints = {
     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
+// TODO : seperate brand co lor usage definition from proper theme definition and add t ypings - https://ornikar.atlassian.net/browse/CME-156
 
 var theme = {
   spacing: 4,