@ornikar/kitt-universal 3.5.0 → 3.6.0

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

@@ -309,31 +309,35 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-const getFirstCharacter = string => string ? string[0] : '';
-
-const getInitials = (firstname, lastname) => (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
+const getInitials = (firstname, lastname) => `${firstname[0]}${lastname[0]}`.toUpperCase();
 
 const StyledAvatarView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Avatar__StyledAvatarView",
   componentId: "kitt-universal__sc-9miubv-0"
-})(["border-radius:", "px;background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
-  round,
-  size
-}) => round ? size / 2 : 10, ({
+})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
   theme,
-  light
-}) => light ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
-  size
-}) => size, ({
-  size
-}) => size);
+  $isRound,
+  $size
+}) => {
+  if ($isRound) return `${$size / 2}px`;
+  return theme.kitt.avatar.borderRadius;
+}, ({
+  theme,
+  $isLight
+}) => $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size);
 
 function AvatarContent({
-  size = 40,
+  size,
   src,
   firstname,
   lastname,
-  light
+  alt,
+  base,
+  isLight
 }) {
   if (src) {
     return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Image, {
@@ -343,34 +347,43 @@ function AvatarContent({
       style: {
         width: size,
         height: size
-      }
+      },
+      accessibilityLabel: alt
     });
   }
 
   if (firstname && lastname) {
     return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body-small",
+      base: base,
       variant: "bold",
-      color: light ? 'black' : 'white',
+      color: isLight ? 'black' : 'white',
       children: getInitials(firstname, lastname)
     });
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(Icon, {
     icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.UserIcon, {}),
-    color: light ? 'black' : 'white',
+    color: isLight ? 'black' : 'white',
     size: size / 2
   });
 }
 
 function Avatar({
   size = 40,
-  ...rest
+  base = 'body-small',
+  round,
+  light,
+  ...props
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, { ...rest,
-    size: size,
-    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, { ...rest,
-      size: size
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
+    $size: size,
+    $isRound: round,
+    $isLight: light,
+    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
+      size: size,
+      base: base,
+      isLight: light,
+      ...props
     })
   });
 }
@@ -2418,17 +2431,6 @@ const lateOceanColorPalette = {
   moonPurpleLight1: '#EDEBFC'
 };
 
-const avatarLateOceanTheme = {
-  default: {
-    color: lateOceanColorPalette.white,
-    backgroundColor: lateOceanColorPalette.lateOcean
-  },
-  light: {
-    color: lateOceanColorPalette.black1000,
-    backgroundColor: lateOceanColorPalette.black100
-  }
-};
-
 const colorsLateOceanTheme = {
   primary: lateOceanColorPalette.lateOcean,
   primaryLight: lateOceanColorPalette.lateOceanLight1,
@@ -2451,6 +2453,16 @@ const colorsLateOceanTheme = {
   }
 };
 
+const avatar = {
+  borderRadius: '10px',
+  default: {
+    backgroundColor: colorsLateOceanTheme.primary
+  },
+  light: {
+    backgroundColor: lateOceanColorPalette.black100
+  }
+};
+
 const buttonLateOceanTheme = {
   borderRadius: '30px',
   borderWidth: {
@@ -2833,7 +2845,7 @@ const theme = {
   palettes: {
     lateOcean: lateOceanColorPalette
   },
-  avatar: avatarLateOceanTheme,
+  avatar,
   button: buttonLateOceanTheme,
   card: cardLateOceanTheme,
   feedbackMessage: feedbackMessageLateOceanTheme,
@@ -3299,6 +3311,7 @@ exports.theme = theme;
 exports.useKittTheme = useKittTheme;
 exports.useMatchWindowSize = useMatchWindowSize;
 exports.useStoryBlockColor = useStoryBlockColor;
+exports.withTheme = withTheme;
 Object.keys(kittIcons).forEach(function (k) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = kittIcons[k];
 });