@ornikar/kitt-universal 4.0.0 → 4.1.0

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

@@ -51,7 +51,7 @@ function SpinningIcon({
   });
 }
 
-const IconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const IconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
@@ -73,7 +73,7 @@ function Icon({
   const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
     color
   });
-  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
     align: align,
     size: size,
     color: color,
@@ -606,7 +606,7 @@ const StyledButtonText = /*#__PURE__*/styled__default(Typography.Text).withConfi
   if ($isDisabled || !isSubtle($type)) return undefined;
   return 'color: inherit';
 });
-const StyledIconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const StyledIconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "ButtonContent__StyledIconContainer",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["", ""], ({
@@ -629,7 +629,7 @@ function ButtonIcon({
   iconPosition,
   testID
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer$1, {
     $iconPosition: iconPosition,
     children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
       icon: icon,
@@ -777,7 +777,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
   });
 });
 
-const Container$4 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const Container$3 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
@@ -797,7 +797,7 @@ function Card({
   children,
   type
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$4, {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$3, {
     type: type,
     children: children
   });
@@ -1142,7 +1142,7 @@ const SelectedInnerRadio = /*#__PURE__*/styled__default(BabelPluginStyledCompone
 }) => theme.kitt.forms.radio.checked.innerSize, ({
   theme
 }) => theme.kitt.forms.radio.checked.innerSize / 2);
-const Container$3 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
+const Container$2 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
@@ -1160,7 +1160,7 @@ function Radio({
   disabled = false,
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$3, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
@@ -1327,7 +1327,7 @@ function FullScreenModalHeader({
   });
 }
 
-const Container$2 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const Container$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], ({
@@ -1336,7 +1336,7 @@ const Container$2 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReac
 function FullScreenModal({
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$1, {
     children: children
   });
 }
@@ -1671,47 +1671,32 @@ function Loader({
   });
 }
 
-const xIconSize = 14;
-const mainIconSize = 20;
-const Container$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Message__Container",
-  componentId: "kitt-universal__sc-c6400e-0"
-})(["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;"], ({
-  theme,
-  noRadius
-}) => noRadius ? 0 : theme.kitt.spacing * 5, ({
-  theme,
-  type
-}) => theme.kitt.feedbackMessage.backgroundColors[type], ({
-  theme
-}) => theme.kitt.spacing * 4, ({
-  theme
-}) => theme.kitt.spacing * 4, ({
-  theme
-}) => theme.kitt.spacing * 4, ({
-  theme,
-  insets
-}) => (insets?.top ?? 0) + theme.kitt.spacing * 4);
-const CloseContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.TouchableOpacity).withConfig({
-  displayName: "Message__CloseContainer",
-  componentId: "kitt-universal__sc-c6400e-1"
-})(["margin-left:", "px;padding:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 4, ({
-  theme
-}) => theme.kitt.spacing);
-const IconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Message__IconContainer",
-  componentId: "kitt-universal__sc-c6400e-2"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 4);
-const Content = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Text).withConfig({
-  displayName: "Message__Content",
-  componentId: "kitt-universal__sc-c6400e-3"
-})(["text-align:", ";flex:1;"], ({
-  centeredText
-}) => centeredText ? 'center' : 'left');
+function IconContent({
+  type,
+  color
+}) {
+  switch (type) {
+    case 'warning':
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertCircleIcon, {
+        color: color
+      });
+
+    case 'success':
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.CheckIcon, {
+        color: color
+      });
+
+    case 'danger':
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertTriangleIcon, {
+        color: color
+      });
+
+    default:
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.InfoIcon, {
+        color: color
+      });
+  }
+}
 
 const getColorByType = type => {
   switch (type) {
@@ -1726,61 +1711,125 @@ const getColorByType = type => {
       return 'black';
   }
 };
-
-function getIconContent(type) {
-  switch (type) {
-    case 'warning':
-      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertCircleIcon, {});
-
+const getIconButtonColor = messageType => {
+  switch (messageType) {
     case 'success':
-      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.CheckIcon, {});
-
     case 'danger':
-      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertTriangleIcon, {});
+      return 'white';
 
+    case 'warning':
     default:
-      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.InfoIcon, {});
+      return 'black';
   }
-}
+};
 
-function Message({
+const StyledMessageContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "BaseMessage__StyledMessageContainer",
+  componentId: "kitt-universal__sc-eepeiz-0"
+})(["flex-direction:row;align-items:flex-start;justify-content:space-between;min-height:60px;padding-top:", "px;border-radius:", "px;background-color:", ";"], ({
+  $insets
+}) => $insets?.top ?? 0, ({
+  theme,
+  $hasNoRadius
+}) => $hasNoRadius ? 0 : theme.kitt.spacing * 5, ({
+  theme,
+  $type
+}) => theme.kitt.feedbackMessage[$type].backgroundColor);
+const StyledDismissWrapper = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "BaseMessage__StyledDismissWrapper",
+  componentId: "kitt-universal__sc-eepeiz-1"
+})(["align-items:center;align-items:flex-start;margin:", ";"], ({
+  theme
+}) => {
+  const {
+    spacing
+  } = theme.kitt;
+  return `${spacing * 2.5}px  ${spacing * 2}px 0 ${spacing * 5}px`;
+});
+const StyledIconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "BaseMessage__StyledIconContainer",
+  componentId: "kitt-universal__sc-eepeiz-2"
+})(["margin:", ";"], ({
+  theme
+}) => {
+  const {
+    spacing
+  } = theme.kitt;
+  return `${spacing}px ${spacing * 5}px 0 0`;
+});
+const StyledTextContent = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "BaseMessage__StyledTextContent",
+  componentId: "kitt-universal__sc-eepeiz-3"
+})(["flex:1;text-align:", ";"], ({
+  $isCenteredText
+}) => $isCenteredText ? 'center' : 'left');
+const StyledMessageContent = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "BaseMessage__StyledMessageContent",
+  componentId: "kitt-universal__sc-eepeiz-4"
+})(["display:flex;flex-direction:row;flex-grow:1;align-self:center;align-items:flex-start;flex-shrink:1;padding:", ";"], ({
+  theme
+}) => {
+  const {
+    spacing
+  } = theme.kitt;
+  return `${spacing * 4}px ${spacing * 5}px`;
+});
+function BaseMessage({
   type = 'info',
   children,
-  noRadius = false,
-  centeredText = false,
-  onDismiss,
-  insets
+  hasNoRadius,
+  centeredText,
+  insets,
+  onDismiss
 }) {
   const color = getColorByType(type);
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
-    type: type,
-    noRadius: noRadius,
-    insets: insets,
-    children: [!centeredText ? /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-        size: mainIconSize,
-        color: color,
-        icon: getIconContent(type)
-      })
-    }) : null, /*#__PURE__*/jsxRuntime.jsx(Content, {
-      type: type,
-      centeredText: centeredText,
-      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-        base: "body-small",
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledMessageContainer, {
+    $type: type,
+    $hasNoRadius: hasNoRadius,
+    $insets: insets,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledMessageContent, {
+      children: [centeredText ? null : /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          color: color,
+          icon: /*#__PURE__*/jsxRuntime.jsx(IconContent, {
+            type: type,
+            color: color
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(StyledTextContent, {
+        $isCenteredText: centeredText,
+        base: "body",
         color: color,
         children: children
-      })
-    }), onDismiss ? /*#__PURE__*/jsxRuntime.jsx(CloseContainer, {
-      onPress: onDismiss,
-      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      })]
+    }), onDismiss ? /*#__PURE__*/jsxRuntime.jsx(StyledDismissWrapper, {
+      children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+        color: getIconButtonColor(type),
         icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
-        size: xIconSize,
-        color: color
+        onPress: onDismiss
       })
     }) : null]
   });
 }
 
+function Message({
+  type = 'info',
+  children,
+  hasNoRadius,
+  centeredText,
+  insets,
+  onDismiss
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(BaseMessage, {
+    insets: insets,
+    hasNoRadius: hasNoRadius,
+    type: type,
+    centeredText: centeredText,
+    onDismiss: onDismiss,
+    children: children
+  });
+}
+
 // Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
 const OverlayPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
   displayName: "Overlay__OverlayPressable",
@@ -1936,19 +1985,22 @@ function Notification({
   type,
   children,
   centeredText,
-  onDelete
+  insets,
+  onDelete,
+  onDismiss
 }) {
-  const {
-    top
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  return /*#__PURE__*/jsxRuntime.jsx(Message, {
-    noRadius: true,
+  if ((process.env.NODE_ENV !== "production")) {
+    if (onDelete) {
+      throw new Error('onDelete is deprecated us onDismiss instead');
+    }
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(BaseMessage, {
+    hasNoRadius: true,
     type: type,
     centeredText: centeredText,
-    insets: {
-      top
-    },
-    onDismiss: onDelete,
+    insets: insets,
+    onDismiss: onDismiss,
     children: children
   });
 }
@@ -1982,12 +2034,16 @@ function SkeletonContent({
   });
 }
 
+const SkeletonContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Skeleton__SkeletonContainer",
+  componentId: "kitt-universal__sc-1w5cm3i-0"
+})(["overflow:hidden;"]);
 function Skeleton({
   isLoading,
   style
 }) {
   const [width, setWidth] = react.useState(0);
-  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {
+  return /*#__PURE__*/jsxRuntime.jsx(SkeletonContainer, {
     style: style,
     onLayout: ({
       nativeEvent
@@ -2000,16 +2056,16 @@ function Skeleton({
 }
 const Bar = /*#__PURE__*/styled__default(Skeleton).withConfig({
   displayName: "Skeleton__Bar",
-  componentId: "kitt-universal__sc-1w5cm3i-0"
-})(["width:100%;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  componentId: "kitt-universal__sc-1w5cm3i-1"
+})(["width:100%;height:", "px;border-radius:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 2, ({
   theme
 }) => theme.kitt.spacing * 2);
 const Circle = /*#__PURE__*/styled__default(Skeleton).withConfig({
   displayName: "Skeleton__Circle",
-  componentId: "kitt-universal__sc-1w5cm3i-1"
-})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  componentId: "kitt-universal__sc-1w5cm3i-2"
+})(["width:", "px;height:", "px;border-radius:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 12, ({
   theme
@@ -2018,8 +2074,8 @@ const Circle = /*#__PURE__*/styled__default(Skeleton).withConfig({
 }) => theme.kitt.spacing * 6);
 const Square = /*#__PURE__*/styled__default(Skeleton).withConfig({
   displayName: "Skeleton__Square",
-  componentId: "kitt-universal__sc-1w5cm3i-2"
-})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  componentId: "kitt-universal__sc-1w5cm3i-3"
+})(["width:", "px;height:", "px;border-radius:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 12, ({
   theme
@@ -2460,6 +2516,8 @@ const 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,
@@ -2484,7 +2542,7 @@ const avatar = {
   }
 };
 
-const buttonLateOceanTheme = {
+const button = {
   borderRadius: '30px',
   borderWidth: {
     disabled: '2px',
@@ -2575,12 +2633,18 @@ const cardLateOceanTheme = {
   }
 };
 
-const feedbackMessageLateOceanTheme = {
-  backgroundColors: {
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon,
-    warning: lateOceanColorPalette.goldCrayola,
-    info: lateOceanColorPalette.aero
+const feedbackMessage = {
+  danger: {
+    backgroundColor: colorsLateOceanTheme.danger
+  },
+  success: {
+    backgroundColor: colorsLateOceanTheme.success
+  },
+  info: {
+    backgroundColor: colorsLateOceanTheme.info
+  },
+  warning: {
+    backgroundColor: colorsLateOceanTheme.warning
   }
 };
 
@@ -2772,14 +2836,14 @@ const 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
   }
 };
 
@@ -2880,9 +2944,9 @@ const theme = {
     lateOcean: lateOceanColorPalette
   },
   avatar,
-  button: buttonLateOceanTheme,
+  button,
   card: cardLateOceanTheme,
-  feedbackMessage: feedbackMessageLateOceanTheme,
+  feedbackMessage,
   forms,
   typography: typographyLateOceanTheme,
   tag: tagLateOceanTheme,
@@ -2902,24 +2966,6 @@ function TimePicker() {
   });
 }
 
-var Arrow = function (props) {
-  return /*#__PURE__*/jsxRuntime.jsx("svg", { ...props,
-    children: /*#__PURE__*/jsxRuntime.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"
-};
 const StyledTooltipView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "TooltipView__StyledTooltipView",
   componentId: "kitt-universal__sc-156zm6m-0"
@@ -2940,7 +2986,7 @@ const StyledTooltipContent = /*#__PURE__*/styled__default(BabelPluginStyledCompo
 function ArrowView(props) {
   const theme = /*#__PURE__*/styled.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, { ...props,
-    children: /*#__PURE__*/jsxRuntime.jsx(Arrow, {
+    children: /*#__PURE__*/jsxRuntime.jsx(kittIcons.TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
   });