@ornikar/kitt-universal 4.0.0 → 4.1.0

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

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { UserIcon, EyeOffIcon, EyeIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
+import { UserIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import { Animated, Easing, useWindowDimensions, Image, Platform, Linking, Pressable, TextInput, ActivityIndicator, TouchableOpacity, View, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1 } from 'react-native';
+import { Animated, Easing, useWindowDimensions, Image, Platform, Linking, Pressable, TextInput, ActivityIndicator, 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, forwardRef, useMemo, useState, Fragment, Children } from 'react';
@@ -52,7 +52,7 @@ function SpinningIcon(_ref) {
   });
 }
 
-var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
+var IconContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "Icon__IconContainer"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
   var color = _ref.color;
@@ -78,7 +78,7 @@ function Icon(_ref5) {
   var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
-  return /*#__PURE__*/jsx(IconContainer$1, {
+  return /*#__PURE__*/jsx(IconContainer, {
     align: align,
     size: size,
     color: color,
@@ -610,7 +610,7 @@ var StyledButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
   if (Platform.OS !== 'web' || $isDisabled || !isSubtle($type)) return undefined;
   return 'color: inherit';
 });
-var StyledIconContainer = /*#__PURE__*/styled.View.withConfig({
+var StyledIconContainer$1 = /*#__PURE__*/styled.View.withConfig({
   displayName: "ButtonContent__StyledIconContainer"
 })(["", ""], function (_ref2) {
   var theme = _ref2.theme,
@@ -630,7 +630,7 @@ function ButtonIcon(_ref3) {
       spin = _ref3.spin,
       iconPosition = _ref3.iconPosition,
       testID = _ref3.testID;
-  return /*#__PURE__*/jsx(StyledIconContainer, {
+  return /*#__PURE__*/jsx(StyledIconContainer$1, {
     $iconPosition: iconPosition,
     children: /*#__PURE__*/jsx(TypographyIcon, {
       icon: icon,
@@ -790,7 +790,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var Container$6 = /*#__PURE__*/styled.View.withConfig({
+var Container$5 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Card__Container"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], function (_ref) {
   var theme = _ref.theme,
@@ -813,7 +813,7 @@ var Container$6 = /*#__PURE__*/styled.View.withConfig({
 function Card(_ref6) {
   var children = _ref6.children,
       type = _ref6.type;
-  return /*#__PURE__*/jsx(Container$6, {
+  return /*#__PURE__*/jsx(Container$5, {
     type: type,
     children: children
   });
@@ -1228,7 +1228,7 @@ var SelectedInnerRadio = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$5 = /*#__PURE__*/styled.Pressable.withConfig({
+var Container$4 = /*#__PURE__*/styled.Pressable.withConfig({
   displayName: "Radio__Container"
 })(["flex-direction:row;align-items:center;"]);
 var Text = /*#__PURE__*/styled(Typography.Text).withConfig({
@@ -1245,7 +1245,7 @@ function Radio(_ref16) {
       _ref16$disabled = _ref16.disabled,
       disabled = _ref16$disabled === void 0 ? false : _ref16$disabled,
       children = _ref16.children;
-  return /*#__PURE__*/jsxs(Container$5, {
+  return /*#__PURE__*/jsxs(Container$4, {
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
@@ -1423,7 +1423,7 @@ function FullScreenModalHeader(_ref6) {
   });
 }
 
-var Container$4 = /*#__PURE__*/styled.View.withConfig({
+var Container$3 = /*#__PURE__*/styled.View.withConfig({
   displayName: "FullScreenModal__Container"
 })(["flex:1;background-color:", ";"], function (_ref) {
   var theme = _ref.theme;
@@ -1431,7 +1431,7 @@ var Container$4 = /*#__PURE__*/styled.View.withConfig({
 });
 function FullScreenModal(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/jsx(Container$4, {
+  return /*#__PURE__*/jsx(Container$3, {
     children: children
   });
 }
@@ -1900,55 +1900,32 @@ function LargeLoader(_ref) {
   });
 }
 
-var xIconSize = 14;
-var mainIconSize = 20;
-var Container$3 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Message__Container"
-})(["border-radius:", "px;background-color:", ";padding-bottom:", "px;padding-left:", "px;padding-right:", "px;padding-top:", "px;flex-direction:row;align-items:flex-start;justify-content:space-between;"], function (_ref) {
-  var theme = _ref.theme,
-      noRadius = _ref.noRadius;
-  return noRadius ? 0 : theme.kitt.spacing * 5;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      type = _ref2.type;
-  return theme.kitt.feedbackMessage.backgroundColors[type];
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.spacing * 4;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.spacing * 4;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.kitt.spacing * 4;
-}, function (_ref6) {
-  var _insets$top;
+function IconContent(_ref) {
+  var type = _ref.type,
+      color = _ref.color;
 
-  var theme = _ref6.theme,
-      insets = _ref6.insets;
-  return ((_insets$top = insets === null || insets === void 0 ? void 0 : insets.top) !== null && _insets$top !== void 0 ? _insets$top : 0) + theme.kitt.spacing * 4;
-});
-var CloseContainer = /*#__PURE__*/styled(TouchableOpacity).withConfig({
-  displayName: "Message__CloseContainer"
-})(["margin-left:", "px;padding:", "px;"], function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.kitt.spacing * 4;
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.kitt.spacing;
-});
-var IconContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Message__IconContainer"
-})(["margin-right:", "px;"], function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.kitt.spacing * 4;
-});
-var Content = /*#__PURE__*/styled.Text.withConfig({
-  displayName: "Message__Content"
-})(["text-align:", ";flex:1;"], function (_ref10) {
-  var centeredText = _ref10.centeredText;
-  return centeredText ? 'center' : 'left';
-});
+  switch (type) {
+    case 'warning':
+      return /*#__PURE__*/jsx(AlertCircleIcon, {
+        color: color
+      });
+
+    case 'success':
+      return /*#__PURE__*/jsx(CheckIcon, {
+        color: color
+      });
+
+    case 'danger':
+      return /*#__PURE__*/jsx(AlertTriangleIcon, {
+        color: color
+      });
+
+    default:
+      return /*#__PURE__*/jsx(InfoIcon, {
+        color: color
+      });
+  }
+}
 
 var getColorByType = function (type) {
   switch (type) {
@@ -1963,63 +1940,117 @@ var getColorByType = function (type) {
       return 'black';
   }
 };
-
-function getIconContent(type) {
-  switch (type) {
-    case 'warning':
-      return /*#__PURE__*/jsx(AlertCircleIcon, {});
-
+var getIconButtonColor = function (messageType) {
+  switch (messageType) {
     case 'success':
-      return /*#__PURE__*/jsx(CheckIcon, {});
-
     case 'danger':
-      return /*#__PURE__*/jsx(AlertTriangleIcon, {});
+      return 'white';
 
+    case 'warning':
     default:
-      return /*#__PURE__*/jsx(InfoIcon, {});
+      return 'black';
   }
-}
+};
 
-function Message(_ref11) {
-  var _ref11$type = _ref11.type,
-      type = _ref11$type === void 0 ? 'info' : _ref11$type,
-      children = _ref11.children,
-      _ref11$noRadius = _ref11.noRadius,
-      noRadius = _ref11$noRadius === void 0 ? false : _ref11$noRadius,
-      _ref11$centeredText = _ref11.centeredText,
-      centeredText = _ref11$centeredText === void 0 ? false : _ref11$centeredText,
-      onDismiss = _ref11.onDismiss,
-      insets = _ref11.insets;
+var StyledMessageContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseMessage__StyledMessageContainer"
+})(["flex-direction:row;align-items:flex-start;justify-content:space-between;min-height:60px;padding-top:", "px;border-radius:", "px;background-color:", ";"], function (_ref) {
+  var _$insets$top;
+
+  var $insets = _ref.$insets;
+  return (_$insets$top = $insets === null || $insets === void 0 ? void 0 : $insets.top) !== null && _$insets$top !== void 0 ? _$insets$top : 0;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $hasNoRadius = _ref2.$hasNoRadius;
+  return $hasNoRadius ? 0 : theme.kitt.spacing * 5;
+}, function (_ref3) {
+  var theme = _ref3.theme,
+      $type = _ref3.$type;
+  return theme.kitt.feedbackMessage[$type].backgroundColor;
+});
+var StyledDismissWrapper = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseMessage__StyledDismissWrapper"
+})(["align-items:center;align-items:flex-start;margin:", ";"], function (_ref4) {
+  var theme = _ref4.theme;
+  var spacing = theme.kitt.spacing;
+  return "".concat(spacing * 2.5, "px  ").concat(spacing * 2, "px 0 ").concat(spacing * 5, "px");
+});
+var StyledIconContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseMessage__StyledIconContainer"
+})(["margin:", ";"], function (_ref5) {
+  var theme = _ref5.theme;
+  var spacing = theme.kitt.spacing;
+  return "".concat(spacing, "px ").concat(spacing * 5, "px 0 0");
+});
+var StyledTextContent = /*#__PURE__*/styled(Typography.Text).withConfig({
+  displayName: "BaseMessage__StyledTextContent"
+})(["flex:1;text-align:", ";"], function (_ref6) {
+  var $isCenteredText = _ref6.$isCenteredText;
+  return $isCenteredText ? 'center' : 'left';
+});
+var StyledMessageContent = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseMessage__StyledMessageContent"
+})(["display:flex;flex-direction:row;flex-grow:1;align-self:center;align-items:flex-start;flex-shrink:1;padding:", ";"], function (_ref7) {
+  var theme = _ref7.theme;
+  var spacing = theme.kitt.spacing;
+  return "".concat(spacing * 4, "px ").concat(spacing * 5, "px");
+});
+function BaseMessage(_ref8) {
+  var _ref8$type = _ref8.type,
+      type = _ref8$type === void 0 ? 'info' : _ref8$type,
+      children = _ref8.children,
+      hasNoRadius = _ref8.hasNoRadius,
+      centeredText = _ref8.centeredText,
+      insets = _ref8.insets,
+      onDismiss = _ref8.onDismiss;
   var color = getColorByType(type);
-  return /*#__PURE__*/jsxs(Container$3, {
-    type: type,
-    noRadius: noRadius,
-    insets: insets,
-    children: [!centeredText ? /*#__PURE__*/jsx(IconContainer, {
-      children: /*#__PURE__*/jsx(Icon, {
-        size: mainIconSize,
-        color: color,
-        icon: getIconContent(type)
-      })
-    }) : null, /*#__PURE__*/jsx(Content, {
-      type: type,
-      centeredText: centeredText,
-      children: /*#__PURE__*/jsx(Typography.Text, {
-        base: "body-small",
+  return /*#__PURE__*/jsxs(StyledMessageContainer, {
+    $type: type,
+    $hasNoRadius: hasNoRadius,
+    $insets: insets,
+    children: [/*#__PURE__*/jsxs(StyledMessageContent, {
+      children: [centeredText ? null : /*#__PURE__*/jsx(StyledIconContainer, {
+        children: /*#__PURE__*/jsx(Icon, {
+          color: color,
+          icon: /*#__PURE__*/jsx(IconContent, {
+            type: type,
+            color: color
+          })
+        })
+      }), /*#__PURE__*/jsx(StyledTextContent, {
+        $isCenteredText: centeredText,
+        base: "body",
         color: color,
         children: children
-      })
-    }), onDismiss ? /*#__PURE__*/jsx(CloseContainer, {
-      onPress: onDismiss,
-      children: /*#__PURE__*/jsx(Icon, {
+      })]
+    }), onDismiss ? /*#__PURE__*/jsx(StyledDismissWrapper, {
+      children: /*#__PURE__*/jsx(IconButton, {
+        color: getIconButtonColor(type),
         icon: /*#__PURE__*/jsx(XIcon, {}),
-        size: xIconSize,
-        color: color
+        onPress: onDismiss
       })
     }) : null]
   });
 }
 
+function Message(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'info' : _ref$type,
+      children = _ref.children,
+      hasNoRadius = _ref.hasNoRadius,
+      centeredText = _ref.centeredText,
+      insets = _ref.insets,
+      onDismiss = _ref.onDismiss;
+  return /*#__PURE__*/jsx(BaseMessage, {
+    insets: insets,
+    hasNoRadius: hasNoRadius,
+    type: type,
+    centeredText: centeredText,
+    onDismiss: onDismiss,
+    children: children
+  });
+}
+
 function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -2178,19 +2209,22 @@ function Notification(_ref) {
   var type = _ref.type,
       children = _ref.children,
       centeredText = _ref.centeredText,
-      onDelete = _ref.onDelete;
+      insets = _ref.insets,
+      onDelete = _ref.onDelete,
+      onDismiss = _ref.onDismiss;
 
-  var _useSafeAreaInsets = useSafeAreaInsets(),
-      top = _useSafeAreaInsets.top;
+  if ((process.env.NODE_ENV !== "production")) {
+    if (onDelete) {
+      throw new Error('onDelete is deprecated us onDismiss instead');
+    }
+  }
 
-  return /*#__PURE__*/jsx(Message, {
-    noRadius: true,
+  return /*#__PURE__*/jsx(BaseMessage, {
+    hasNoRadius: true,
     type: type,
     centeredText: centeredText,
-    insets: {
-      top: top
-    },
-    onDismiss: onDelete,
+    insets: insets,
+    onDismiss: onDismiss,
     children: children
   });
 }
@@ -2258,6 +2292,9 @@ function SkeletonContent(_ref3) {
   });
 }
 
+var SkeletonContainer = /*#__PURE__*/styled(View).withConfig({
+  displayName: "Skeleton__SkeletonContainer"
+})(["overflow:hidden;"]);
 function Skeleton(_ref) {
   var isLoading = _ref.isLoading,
       style = _ref.style;
@@ -2267,7 +2304,7 @@ function Skeleton(_ref) {
       width = _useState2[0],
       setWidth = _useState2[1];
 
-  return /*#__PURE__*/jsx(View, {
+  return /*#__PURE__*/jsx(SkeletonContainer, {
     style: style,
     onLayout: function onLayout(_ref2) {
       var nativeEvent = _ref2.nativeEvent;
@@ -2281,7 +2318,7 @@ function Skeleton(_ref) {
 }
 var Bar = /*#__PURE__*/styled(Skeleton).withConfig({
   displayName: "Skeleton__Bar"
-})(["width:100%;height:", "px;border-radius:", "px;overflow:hidden;"], function (_ref3) {
+})(["width:100%;height:", "px;border-radius:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.spacing * 2;
 }, function (_ref4) {
@@ -2290,7 +2327,7 @@ var Bar = /*#__PURE__*/styled(Skeleton).withConfig({
 });
 var Circle = /*#__PURE__*/styled(Skeleton).withConfig({
   displayName: "Skeleton__Circle"
-})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], function (_ref5) {
+})(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref5) {
   var theme = _ref5.theme;
   return theme.kitt.spacing * 12;
 }, function (_ref6) {
@@ -2302,7 +2339,7 @@ var Circle = /*#__PURE__*/styled(Skeleton).withConfig({
 });
 var Square = /*#__PURE__*/styled(Skeleton).withConfig({
   displayName: "Skeleton__Square"
-})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], function (_ref8) {
+})(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref8) {
   var theme = _ref8.theme;
   return theme.kitt.spacing * 12;
 }, function (_ref9) {
@@ -2757,6 +2794,8 @@ var colorsLateOceanTheme = {
   success: lateOceanColorPalette.viride,
   correct: lateOceanColorPalette.viride,
   danger: lateOceanColorPalette.englishVermillon,
+  info: lateOceanColorPalette.aero,
+  warning: lateOceanColorPalette.goldCrayola,
   separator: lateOceanColorPalette.black100,
   hover: lateOceanColorPalette.black100,
   black: lateOceanColorPalette.black1000,
@@ -2781,7 +2820,7 @@ var avatar = {
   }
 };
 
-var buttonLateOceanTheme = {
+var button = {
   borderRadius: '30px',
   borderWidth: {
     disabled: '2px',
@@ -2872,12 +2911,18 @@ var cardLateOceanTheme = {
   }
 };
 
-var feedbackMessageLateOceanTheme = {
-  backgroundColors: {
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon,
-    warning: lateOceanColorPalette.goldCrayola,
-    info: lateOceanColorPalette.aero
+var feedbackMessage = {
+  danger: {
+    backgroundColor: colorsLateOceanTheme.danger
+  },
+  success: {
+    backgroundColor: colorsLateOceanTheme.success
+  },
+  info: {
+    backgroundColor: colorsLateOceanTheme.info
+  },
+  warning: {
+    backgroundColor: colorsLateOceanTheme.warning
   }
 };
 
@@ -3073,14 +3118,14 @@ var iconButton = {
   },
   disabled: {
     scale: 1,
-    backgroundColor: buttonLateOceanTheme.disabled.backgroundColor,
-    borderColor: buttonLateOceanTheme.disabled.borderColor
+    backgroundColor: button.disabled.backgroundColor,
+    borderColor: button.disabled.borderColor
   },
   "default": {
-    pressedBackgroundColor: buttonLateOceanTheme["default"].pressedBackgroundColor
+    pressedBackgroundColor: button["default"].pressedBackgroundColor
   },
   white: {
-    pressedBackgroundColor: buttonLateOceanTheme.white.hoverBackgroundColor
+    pressedBackgroundColor: button.white.hoverBackgroundColor
   }
 };
 
@@ -3181,9 +3226,9 @@ var theme = {
     lateOcean: lateOceanColorPalette
   },
   avatar: avatar,
-  button: buttonLateOceanTheme,
+  button: button,
   card: cardLateOceanTheme,
-  feedbackMessage: feedbackMessageLateOceanTheme,
+  feedbackMessage: feedbackMessage,
   forms: forms,
   typography: typographyLateOceanTheme,
   tag: tagLateOceanTheme,
@@ -3357,25 +3402,6 @@ function TimePicker(_ref) {
 function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var Arrow = function (props) {
-  return /*#__PURE__*/jsx("svg", _objectSpread$2(_objectSpread$2({}, props), {}, {
-    children: /*#__PURE__*/jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M22.399 6.128C20.939 7.722 19.767 9 18 9s-2.938-1.278-4.399-2.872C11.187 3.494 7.984 0 0 0h36c-7.984 0-11.187 3.494-13.601 6.128z",
-      fill: "currentColor"
-    })
-  }));
-};
-
-Arrow.defaultProps = {
-  width: "36",
-  height: "8",
-  viewBox: "0 0 36 9",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
 var StyledTooltipView = /*#__PURE__*/styled.View.withConfig({
   displayName: "TooltipView__StyledTooltipView"
 })(["align-items:center;"]);
@@ -3398,7 +3424,7 @@ var StyledTooltipContent = /*#__PURE__*/styled.View.withConfig({
 function ArrowView(props) {
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(View, _objectSpread$2(_objectSpread$2({}, props), {}, {
-    children: /*#__PURE__*/jsx(Arrow, {
+    children: /*#__PURE__*/jsx(TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
   }));