@ornikar/kitt-universal 3.4.0 → 3.7.1

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

@@ -7,13 +7,14 @@ 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';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import Animated$1, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring } from 'react-native-reanimated';
+import Animated$1, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withRepeat, withTiming, Easing as Easing$1, interpolate } 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 { styled as styled$1 } from '@linaria/react';
+import { LinearGradient } from 'expo-linear-gradient';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { FormattedMessage } from 'react-intl';
 import { useFloating, offset, shift, flip } from '@floating-ui/react-native';
@@ -302,45 +303,44 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$c = ["size"];
+var _excluded$c = ["size", "base", "round", "light"];
 
 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$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] : '';
-};
-
 var getInitials = function (firstname, lastname) {
-  return (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
+  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 };
 
 var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
   displayName: "Avatar__StyledAvatarView"
-})(["border-radius:", "px;background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
-  var round = _ref.round,
-      size = _ref.size;
-  return round ? size / 2 : 10;
+})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
+  var theme = _ref.theme,
+      $isRound = _ref.$isRound,
+      $size = _ref.$size;
+  if ($isRound) return "".concat($size / 2, "px");
+  return theme.kitt.avatar.borderRadius;
 }, function (_ref2) {
   var theme = _ref2.theme,
-      light = _ref2.light;
-  return light ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar["default"].backgroundColor;
+      $isLight = _ref2.$isLight;
+  return $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar["default"].backgroundColor;
 }, function (_ref3) {
-  var size = _ref3.size;
-  return size;
+  var $size = _ref3.$size;
+  return $size;
 }, function (_ref4) {
-  var size = _ref4.size;
-  return size;
+  var $size = _ref4.$size;
+  return $size;
 });
 
 function AvatarContent(_ref5) {
-  var _ref5$size = _ref5.size,
-      size = _ref5$size === void 0 ? 40 : _ref5$size,
+  var size = _ref5.size,
       src = _ref5.src,
       firstname = _ref5.firstname,
       lastname = _ref5.lastname,
-      light = _ref5.light;
+      alt = _ref5.alt,
+      base = _ref5.base,
+      isLight = _ref5.isLight;
 
   if (src) {
     return /*#__PURE__*/jsx(Image, {
@@ -350,22 +350,23 @@ function AvatarContent(_ref5) {
       style: {
         width: size,
         height: size
-      }
+      },
+      accessibilityLabel: alt
     });
   }
 
   if (firstname && lastname) {
     return /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-small",
+      base: base,
       variant: "bold",
-      color: light ? 'black' : 'white',
+      color: isLight ? 'black' : 'white',
       children: getInitials(firstname, lastname)
     });
   }
 
   return /*#__PURE__*/jsx(Icon, {
     icon: /*#__PURE__*/jsx(UserIcon, {}),
-    color: light ? 'black' : 'white',
+    color: isLight ? 'black' : 'white',
     size: size / 2
   });
 }
@@ -373,14 +374,22 @@ function AvatarContent(_ref5) {
 function Avatar(_ref6) {
   var _ref6$size = _ref6.size,
       size = _ref6$size === void 0 ? 40 : _ref6$size,
-      rest = _objectWithoutProperties(_ref6, _excluded$c);
-
-  return /*#__PURE__*/jsx(StyledAvatarView, _objectSpread$g(_objectSpread$g({}, rest), {}, {
-    size: size,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$g(_objectSpread$g({}, rest), {}, {
-      size: size
-    }))
-  }));
+      _ref6$base = _ref6.base,
+      base = _ref6$base === void 0 ? 'body-small' : _ref6$base,
+      round = _ref6.round,
+      light = _ref6.light,
+      props = _objectWithoutProperties(_ref6, _excluded$c);
+
+  return /*#__PURE__*/jsx(StyledAvatarView, {
+    $size: size,
+    $isRound: round,
+    $isLight: light,
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$g({
+      size: size,
+      base: base,
+      isLight: light
+    }, props))
+  });
 }
 
 var StyledPressable = /*#__PURE__*/styled.Pressable.withConfig({
@@ -781,7 +790,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var Container$6 = /*#__PURE__*/styled.View.withConfig({
+var Container$7 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Card__Container"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], function (_ref) {
   var theme = _ref.theme,
@@ -804,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$7, {
     type: type,
     children: children
   });
@@ -1027,7 +1036,7 @@ var Input = /*#__PURE__*/styled(TextInput).withConfig({
   var minHeight = _ref10.minHeight;
   return minHeight;
 });
-var Container$5 = /*#__PURE__*/styled.View.withConfig({
+var Container$6 = /*#__PURE__*/styled.View.withConfig({
   displayName: "InputText__Container"
 })(["margin-top:", ";margin-bottom:", ";"], function (_ref11) {
   var theme = _ref11.theme;
@@ -1103,7 +1112,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref15, ref) {
     isDisabled: disabled,
     formState: formState
   });
-  return /*#__PURE__*/jsxs(Container$5, {
+  return /*#__PURE__*/jsxs(Container$6, {
     children: [/*#__PURE__*/jsx(Input, _objectSpread$c(_objectSpread$c({
       ref: ref,
       nativeID: id,
@@ -1203,7 +1212,7 @@ var SelectedInnerRadio = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$4 = /*#__PURE__*/styled.Pressable.withConfig({
+var Container$5 = /*#__PURE__*/styled.Pressable.withConfig({
   displayName: "Radio__Container"
 })(["flex-direction:row;align-items:center;"]);
 var Text = /*#__PURE__*/styled(Typography.Text).withConfig({
@@ -1220,7 +1229,7 @@ function Radio(_ref16) {
       _ref16$disabled = _ref16.disabled,
       disabled = _ref16$disabled === void 0 ? false : _ref16$disabled,
       children = _ref16.children;
-  return /*#__PURE__*/jsxs(Container$4, {
+  return /*#__PURE__*/jsxs(Container$5, {
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
@@ -1249,7 +1258,8 @@ function TextArea(_ref) {
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(InputText, _objectSpread$b(_objectSpread$b({
-    multiline: true
+    multiline: true,
+    textAlignVertical: "top"
   }, props), {}, {
     type: "text",
     minHeight: theme.kitt.forms.input.textAreaMinHeight
@@ -1399,7 +1409,7 @@ function FullScreenModalHeader(_ref6) {
   });
 }
 
-var Container$3 = /*#__PURE__*/styled.View.withConfig({
+var Container$4 = /*#__PURE__*/styled.View.withConfig({
   displayName: "FullScreenModal__Container"
 })(["flex:1;background-color:", ";"], function (_ref) {
   var theme = _ref.theme;
@@ -1407,7 +1417,7 @@ var Container$3 = /*#__PURE__*/styled.View.withConfig({
 });
 function FullScreenModal(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/jsx(Container$3, {
+  return /*#__PURE__*/jsx(Container$4, {
     children: children
   });
 }
@@ -1445,12 +1455,14 @@ function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) {
 //   };
 // }
 function withTheme(WrappedComponent) {
-  return function (props) {
+  // eslint-disable-next-line prefer-arrow-callback
+  return /*#__PURE__*/forwardRef(function (props, ref) {
     var theme = /*#__PURE__*/useTheme();
     return /*#__PURE__*/jsx(WrappedComponent, _objectSpread$9({
+      ref: ref,
       theme: theme
     }, props));
-  };
+  });
 }
 
 var _excluded$6 = ["color"];
@@ -1466,21 +1478,17 @@ var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
       var theme = _ref.theme;
       return theme.kitt.iconButton.scale.base.hover;
     }],
-    "p1nlccvg-1": [function (_ref2) {
+    "p1nlccvg-2": [function (_ref2) {
       var theme = _ref2.theme;
-      return theme.breakpoints.min.mediumBreakpoint;
-    }],
-    "p1nlccvg-2": [function (_ref3) {
-      var theme = _ref3.theme;
       return theme.kitt.iconButton.scale.medium.hover;
     }],
-    "p1nlccvg-3": [function (_ref4) {
-      var theme = _ref4.theme;
+    "p1nlccvg-3": [function (_ref3) {
+      var theme = _ref3.theme;
       return theme.kitt.iconButton.scale.base.active;
     }],
-    "p1nlccvg-4": [function (_ref5) {
-      var theme = _ref5.theme,
-          $isWhite = _ref5.$isWhite;
+    "p1nlccvg-4": [function (_ref4) {
+      var theme = _ref4.theme,
+          $isWhite = _ref4.$isWhite;
       var _theme$kitt$iconButto = theme.kitt.iconButton,
           white = _theme$kitt$iconButto.white,
           defaultIconButton = _theme$kitt$iconButto["default"];
@@ -1491,18 +1499,18 @@ var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
 }));
 var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
   displayName: "PressableIconButton__StyledPressableIconButton"
-})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref6) {
-  var theme = _ref6.theme;
+})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref5) {
+  var theme = _ref5.theme;
   return theme.kitt.iconButton.borderRadius;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.kitt.iconButton.width;
 }, function (_ref7) {
   var theme = _ref7.theme;
-  return theme.kitt.iconButton.width;
-}, function (_ref8) {
-  var theme = _ref8.theme;
   return theme.kitt.iconButton.height;
-}, function (_ref9) {
-  var theme = _ref9.theme,
-      disabled = _ref9.disabled;
+}, function (_ref8) {
+  var theme = _ref8.theme,
+      disabled = _ref8.disabled;
   var iconButton = theme.kitt.iconButton;
 
   if (Platform.OS !== 'web') {
@@ -1517,9 +1525,9 @@ var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
 
   return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n    ");
 });
-function PressableIconButton(_ref10) {
-  var color = _ref10.color,
-      props = _objectWithoutProperties(_ref10, _excluded$6);
+function PressableIconButton(_ref9) {
+  var color = _ref9.color,
+      props = _objectWithoutProperties(_ref9, _excluded$6);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
@@ -1859,7 +1867,7 @@ function LargeLoader(_ref) {
 
 var xIconSize = 14;
 var mainIconSize = 20;
-var Container$2 = /*#__PURE__*/styled.View.withConfig({
+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,
@@ -1948,7 +1956,7 @@ function Message(_ref11) {
       onDismiss = _ref11.onDismiss,
       insets = _ref11.insets;
   var color = getColorByType(type);
-  return /*#__PURE__*/jsxs(Container$2, {
+  return /*#__PURE__*/jsxs(Container$3, {
     type: type,
     noRadius: noRadius,
     insets: insets,
@@ -2152,6 +2160,127 @@ function Notification(_ref) {
   });
 }
 
+var Container$2 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "SkeletonContent__Container"
+})(["background-color:", ";border-color:", ";height:100%;width:100%;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.skeleton.backgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.skeleton.flareColor;
+});
+var AnimatedLinearGradient = Animated$1.createAnimatedComponent(LinearGradient);
+function SkeletonContent(_ref3) {
+  var isLoading = _ref3.isLoading,
+      width = _ref3.width;
+  var theme = /*#__PURE__*/useTheme();
+  var sharedX = useSharedValue(0);
+  useEffect(function () {
+    if (isLoading) {
+      sharedX.value = withRepeat(withTiming(1, {
+        duration: theme.kitt.skeleton.animationDuration,
+        easing: Easing$1.inOut(Easing$1.ease)
+      }), -1);
+    }
+  }, [sharedX, width, isLoading, theme]);
+  var linearGradientStyle = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        transform: [{
+          translateX: interpolate(sharedX.value, [0, 1], [-width, width])
+        }]
+      };
+    };
+
+    _f._closure = {
+      interpolate: interpolate,
+      sharedX: sharedX,
+      width: width
+    };
+    _f.asString = "function _f(){const{interpolate,sharedX,width}=jsThis._closure;{return{transform:[{translateX:interpolate(sharedX.value,[0,1],[-width,width])}]};}}";
+    _f.__workletHash = 1670955855244;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Skeleton/SkeletonContent.tsx (41:47)";
+    _f.__optimalization = 3;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  return /*#__PURE__*/jsx(Container$2, {
+    children: /*#__PURE__*/jsx(AnimatedLinearGradient, {
+      colors: [theme.kitt.skeleton.backgroundColor, theme.kitt.skeleton.flareColor, theme.kitt.skeleton.backgroundColor],
+      locations: [0.1, 0.5, 0.9],
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 1,
+        y: 0
+      },
+      style: [StyleSheet.absoluteFill, linearGradientStyle]
+    })
+  });
+}
+
+function Skeleton(_ref) {
+  var isLoading = _ref.isLoading,
+      style = _ref.style;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  return /*#__PURE__*/jsx(View, {
+    style: style,
+    onLayout: function onLayout(_ref2) {
+      var nativeEvent = _ref2.nativeEvent;
+      return setWidth(nativeEvent.layout.width);
+    },
+    children: /*#__PURE__*/jsx(SkeletonContent, {
+      isLoading: isLoading,
+      width: width
+    })
+  });
+}
+var Bar = /*#__PURE__*/styled(Skeleton).withConfig({
+  displayName: "Skeleton__Bar"
+})(["width:100%;height:", "px;border-radius:", "px;overflow:hidden;"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.spacing * 2;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.spacing * 2;
+});
+var Circle = /*#__PURE__*/styled(Skeleton).withConfig({
+  displayName: "Skeleton__Circle"
+})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.spacing * 12;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.kitt.spacing * 12;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.spacing * 6;
+});
+var Square = /*#__PURE__*/styled(Skeleton).withConfig({
+  displayName: "Skeleton__Square"
+})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.kitt.spacing * 12;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.kitt.spacing * 12;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.kitt.spacing * 1.5;
+});
+Skeleton.Bar = Bar;
+Skeleton.Circle = Circle;
+Skeleton.Square = Square;
+
 var Flex = /*#__PURE__*/styled.View.withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
@@ -2585,17 +2714,6 @@ var lateOceanColorPalette = {
   moonPurpleLight1: '#EDEBFC'
 };
 
-var avatarLateOceanTheme = {
-  "default": {
-    color: lateOceanColorPalette.white,
-    backgroundColor: lateOceanColorPalette.lateOcean
-  },
-  light: {
-    color: lateOceanColorPalette.black1000,
-    backgroundColor: lateOceanColorPalette.black100
-  }
-};
-
 var colorsLateOceanTheme = {
   primary: lateOceanColorPalette.lateOcean,
   primaryLight: lateOceanColorPalette.lateOceanLight1,
@@ -2618,6 +2736,16 @@ var colorsLateOceanTheme = {
   }
 };
 
+var avatar = {
+  borderRadius: '10px',
+  "default": {
+    backgroundColor: colorsLateOceanTheme.primary
+  },
+  light: {
+    backgroundColor: lateOceanColorPalette.black100
+  }
+};
+
 var buttonLateOceanTheme = {
   borderRadius: '30px',
   borderWidth: {
@@ -2844,6 +2972,12 @@ var shadowsLateOceanTheme = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
 
+var skeletonTheme = {
+  backgroundColor: lateOceanColorPalette.black100,
+  flareColor: lateOceanColorPalette.black200,
+  animationDuration: 1000
+};
+
 var tagLateOceanTheme = {
   borderRadius: '10px',
   padding: '2px 12px',
@@ -2897,20 +3031,18 @@ var tooltip = {
 var calcLineHeight = function (fontSize, lineHeightMultiplier) {
   return Math.round(fontSize * lineHeightMultiplier);
 };
-
 var createTypographyTypeConfig = function (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) {
   return {
     baseAndSmall: {
       fontSize: "".concat(baseAndSmallFontSize, "px"),
-      lineHeight: "".concat(calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize), "px")
+      lineHeight: "".concat(calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier), "px")
     },
     mediumAndWide: {
       fontSize: "".concat(mediumAndWideFontSize, "px"),
-      lineHeight: "".concat(calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize), "px")
+      lineHeight: "".concat(calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier), "px")
     }
   };
 };
-
 var typographyLateOceanTheme = {
   colors: {
     black: lateOceanColorPalette.black1000,
@@ -2992,7 +3124,7 @@ var breakpoints = {
     wideBreakpoint: 'max-width: 1279px'
   }
 }; // eslint-disable-next-line unicorn/expiring-todo-comments
-// TODO : seperate brand co lor usage definition from proper theme definition and add t ypings - https://ornikar.atlassian.net/browse/CME-156
+// TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 
 var theme = {
   spacing: 4,
@@ -3000,7 +3132,7 @@ var theme = {
   palettes: {
     lateOcean: lateOceanColorPalette
   },
-  avatar: avatarLateOceanTheme,
+  avatar: avatar,
   button: buttonLateOceanTheme,
   card: cardLateOceanTheme,
   feedbackMessage: feedbackMessageLateOceanTheme,
@@ -3011,7 +3143,9 @@ var theme = {
   fullScreenModal: fullScreenModalLateOceanTheme,
   iconButton: iconButton,
   listItem: listItemLateOceanTheme,
-  tooltip: tooltip
+  tooltip: tooltip,
+  skeleton: skeletonTheme,
+  breakpoints: breakpoints
 };
 
 function Title(_ref) {
@@ -3517,12 +3651,19 @@ function useKittTheme() {
   return useMemo(function () {
     return {
       kitt: theme,
-      responsive: createWindowSizeHelper(dimensions),
-      breakpoints: breakpoints
+      responsive: createWindowSizeHelper(dimensions)
     };
   }, [dimensions]);
 }
 
+var hex2rgba = function (hex) {
+  var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var r = parseInt(hex.slice(1, 3), 16);
+  var g = parseInt(hex.slice(3, 5), 16);
+  var b = parseInt(hex.slice(5, 7), 16);
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+};
+
 function KittThemeProvider(_ref) {
   var children = _ref.children;
   var theme = useKittTheme();
@@ -3555,5 +3696,5 @@ function MatchWindowSize(_ref) {
   });
 }
 
-export { Avatar, Button, Card, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor };
+export { Avatar, Button, Card, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map