@ornikar/kitt-universal 3.2.0 → 3.6.0

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

@@ -194,34 +194,53 @@ function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
   if (small && width >= KittBreakpoints.SMALL) return small;
   return base;
 }
-function Typography(_ref3) {
-  var accessibilityRole = _ref3.accessibilityRole,
-      base = _ref3.base,
-      small = _ref3.small,
-      medium = _ref3.medium,
-      large = _ref3.large,
-      variant = _ref3.variant,
-      color = _ref3.color,
-      otherProps = _objectWithoutProperties(_ref3, _excluded$e);
+function getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypographyAncestor, _ref3) {
+  var base = _ref3.base,
+      color = _ref3.color;
+  // return the props set or undefined. In case of undefined, the value will be inherited from its parents.
+  if (hasTypographyAncestor) return {
+    base: base,
+    color: color
+  };
+  return {
+    base: base !== null && base !== void 0 ? base : 'body',
+    color: color !== null && color !== void 0 ? color : 'black'
+  };
+}
+function Typography(_ref4) {
+  var accessibilityRole = _ref4.accessibilityRole,
+      base = _ref4.base,
+      small = _ref4.small,
+      medium = _ref4.medium,
+      large = _ref4.large,
+      variant = _ref4.variant,
+      color = _ref4.color,
+      otherProps = _objectWithoutProperties(_ref4, _excluded$e);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
-  var typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
-  var isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
-  var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular'; // if isHeaderTypographyInContext exists, it means we are inside another typography so we don't want to
-  // redefine the color, just inherit from it
+  var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
 
-  var colorWithDefaultToBlack = color !== null && color !== void 0 ? color : isHeaderTypographyInContext !== undefined ? undefined : 'black';
-  var content = base ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
+  var _getTypographyInherit = getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypographyAncestor, {
+    base: base,
+    color: color
+  }),
+      baseOrDefaultToBody = _getTypographyInherit.base,
+      colorOrDefaultToBlack = _getTypographyInherit.color;
+
+  var typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(baseOrDefaultToBody, small, medium, large);
+  var isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
+  var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
+  var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
     children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$g({
-      $color: colorWithDefaultToBlack,
+      $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
   }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$g({
-    $color: colorWithDefaultToBlack,
+    $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
     accessibilityRole: accessibilityRole || undefined
@@ -283,46 +302,45 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$d = ["size"];
+var _excluded$d = ["size", "base", "round", "light"];
 
 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; }
 
-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$1(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;"], 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, {
@@ -332,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
   });
 }
@@ -355,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$d);
-
-  return /*#__PURE__*/jsx(StyledAvatarView, _objectSpread$f(_objectSpread$f({}, rest), {}, {
-    size: size,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$f(_objectSpread$f({}, 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$d);
+
+  return /*#__PURE__*/jsx(StyledAvatarView, {
+    $size: size,
+    $isRound: round,
+    $isLight: light,
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$f({
+      size: size,
+      base: base,
+      isLight: light
+    }, props))
+  });
 }
 
 function isSubtle(type) {
@@ -1237,7 +1264,8 @@ function TextArea(_ref) {
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(InputText, _objectSpread$9(_objectSpread$9({
-    multiline: true
+    multiline: true,
+    textAlignVertical: "top"
   }, props), {}, {
     type: "text",
     minHeight: theme.kitt.forms.input.textAreaMinHeight
@@ -1449,30 +1477,31 @@ var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled("div")({
       return theme.kitt.iconButton.scale.base.active;
     }],
     "p1nlccvg-4": [function (_ref5) {
-      var theme = _ref5.theme;
-      return theme.kitt.iconButton["default"].pressedBackgroundColor;
-    }],
-    "p1nlccvg-5": [function (_ref6) {
-      var theme = _ref6.theme;
-      return theme.kitt.iconButton.white.pressedBackgroundColor;
+      var theme = _ref5.theme,
+          $isWhite = _ref5.$isWhite;
+      var _theme$kitt$iconButto = theme.kitt.iconButton,
+          white = _theme$kitt$iconButto.white,
+          defaultIconButton = _theme$kitt$iconButto["default"];
+      if ($isWhite) return white.pressedBackgroundColor;
+      return defaultIconButton.pressedBackgroundColor;
     }]
   }
 }));
 var StyledPressableIconButton = /*#__PURE__*/styled$1(Pressable).withConfig({
   displayName: "PressableIconButton__StyledPressableIconButton",
   componentId: "kitt-universal__sc-1m6jo3s-0"
-})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref7) {
-  var theme = _ref7.theme;
+})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref6) {
+  var theme = _ref6.theme;
   return theme.kitt.iconButton.borderRadius;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.iconButton.width;
 }, function (_ref8) {
   var theme = _ref8.theme;
-  return theme.kitt.iconButton.width;
-}, function (_ref9) {
-  var theme = _ref9.theme;
   return theme.kitt.iconButton.height;
-}, function (_ref10) {
-  var theme = _ref10.theme,
-      disabled = _ref10.disabled;
+}, function (_ref9) {
+  var theme = _ref9.theme,
+      disabled = _ref9.disabled;
   var iconButton = theme.kitt.iconButton;
   var transition = iconButton.transition;
 
@@ -1482,13 +1511,13 @@ var StyledPressableIconButton = /*#__PURE__*/styled$1(Pressable).withConfig({
 
   return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n    ");
 });
-function PressableIconButton(_ref11) {
-  var color = _ref11.color,
-      props = _objectWithoutProperties(_ref11, _excluded$6);
+function PressableIconButton(_ref10) {
+  var color = _ref10.color,
+      props = _objectWithoutProperties(_ref10, _excluded$6);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
-    "data-color-white": color === 'white' ? true : undefined,
+    $isWhite: color === 'white',
     children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$7({}, props))
   });
 }
@@ -2061,6 +2090,93 @@ function Notification(_ref) {
   });
 }
 
+var StyledSkeleton = withTheme( /*#__PURE__*/styled("div")({
+  name: "StyledSkeleton",
+  "class": "sc3upcl",
+  vars: {
+    "sc3upcl-0": [function (_ref) {
+      var theme = _ref.theme;
+      return theme.kitt.skeleton.backgroundColor;
+    }],
+    "sc3upcl-1": [function (_ref2) {
+      var $isLoading = _ref2.$isLoading,
+          theme = _ref2.theme;
+      return $isLoading ? "linear-gradient(\n      -90deg,\n      ".concat(theme.kitt.skeleton.backgroundColor, ",\n      ").concat(theme.kitt.skeleton.flareColor, " 50%,\n      ").concat(theme.kitt.skeleton.backgroundColor, " 100%\n      )") : 'none';
+    }],
+    "sc3upcl-2": [function (_ref3) {
+      var $isLoading = _ref3.$isLoading;
+      return $isLoading ? '1s ease-in-out infinite' : 'none';
+    }]
+  }
+}));
+function SkeletonContent(_ref4) {
+  var isLoading = _ref4.isLoading;
+  return /*#__PURE__*/jsx(StyledSkeleton, {
+    $isLoading: isLoading
+  });
+}
+
+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$1(Skeleton).withConfig({
+  displayName: "Skeleton__Bar",
+  componentId: "kitt-universal__sc-1w5cm3i-0"
+})(["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$1(Skeleton).withConfig({
+  displayName: "Skeleton__Circle",
+  componentId: "kitt-universal__sc-1w5cm3i-1"
+})(["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$1(Skeleton).withConfig({
+  displayName: "Skeleton__Square",
+  componentId: "kitt-universal__sc-1w5cm3i-2"
+})(["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$1(View).withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
@@ -2504,17 +2620,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,
@@ -2537,6 +2642,16 @@ var colorsLateOceanTheme = {
   }
 };
 
+var avatar = {
+  borderRadius: '10px',
+  "default": {
+    backgroundColor: colorsLateOceanTheme.primary
+  },
+  light: {
+    backgroundColor: lateOceanColorPalette.black100
+  }
+};
+
 var buttonLateOceanTheme = {
   borderRadius: '30px',
   borderWidth: {
@@ -2763,6 +2878,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',
@@ -2816,20 +2937,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,
@@ -2919,7 +3038,7 @@ var theme = {
   palettes: {
     lateOcean: lateOceanColorPalette
   },
-  avatar: avatarLateOceanTheme,
+  avatar: avatar,
   button: buttonLateOceanTheme,
   card: cardLateOceanTheme,
   feedbackMessage: feedbackMessageLateOceanTheme,
@@ -2930,7 +3049,8 @@ var theme = {
   fullScreenModal: fullScreenModalLateOceanTheme,
   iconButton: iconButton,
   listItem: listItemLateOceanTheme,
-  tooltip: tooltip
+  tooltip: tooltip,
+  skeleton: skeletonTheme
 };
 
 function TimePicker() {
@@ -3196,40 +3316,46 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled("span")({
   name: "TypographyLinkWebWrapper",
-  "class": "tcwz3nt"
+  "class": "tcwz3nt",
+  vars: {
+    "tcwz3nt-0": [function (_ref) {
+      var $hasNoUnderline = _ref.$hasNoUnderline;
+      return $hasNoUnderline ? 'underline' : 'none';
+    }]
+  }
 }));
 var StyledLink = /*#__PURE__*/styled$1(Text$1).withConfig({
   displayName: "TypographyLink__StyledLink",
   componentId: "kitt-universal__sc-1o1zy30-0"
-})(["text-decoration:", ";", ";", ";"], function (_ref) {
-  var $noUnderline = _ref.$noUnderline;
-  return $noUnderline ? 'none' : 'underline';
-}, function (_ref2) {
-  var $disabled = _ref2.$disabled;
-  return "\n      text-decoration-color: inherit;\n      transition: color 0.2s ease-in-out;\n      cursor: ".concat($disabled ? 'not-allowed' : 'pointer', ";\n    ");
+})(["text-decoration:", ";", ";", ";"], function (_ref2) {
+  var $hasNoUnderline = _ref2.$hasNoUnderline;
+  return $hasNoUnderline ? 'none' : 'underline';
 }, function (_ref3) {
-  var $disabled = _ref3.$disabled,
-      theme = _ref3.theme;
+  var $disabled = _ref3.$disabled;
+  return "\n      text-decoration-color: inherit;\n      transition: color 0.2s ease-in-out;\n      cursor: ".concat($disabled ? 'not-allowed' : 'pointer', ";\n    ");
+}, function (_ref4) {
+  var $disabled = _ref4.$disabled,
+      theme = _ref4.theme;
   if (!$disabled) return undefined;
   return "color: ".concat(theme.kitt.typography.link.disabledColor, ";");
 });
-function TypographyLink(_ref4) {
-  var children = _ref4.children,
-      disabled = _ref4.disabled,
-      noUnderline = _ref4.noUnderline,
-      href = _ref4.href,
-      hrefAttrs = _ref4.hrefAttrs,
-      onPress = _ref4.onPress,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$1);
+function TypographyLink(_ref5) {
+  var children = _ref5.children,
+      disabled = _ref5.disabled,
+      noUnderline = _ref5.noUnderline,
+      href = _ref5.href,
+      hrefAttrs = _ref5.hrefAttrs,
+      onPress = _ref5.onPress,
+      otherProps = _objectWithoutProperties(_ref5, _excluded$1);
 
   return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, otherProps), {}, {
     accessibilityRole: "none",
     children: /*#__PURE__*/jsx(StyleWebWrapper, {
       as: TypographyLinkWebWrapper,
-      "data-nounderline": noUnderline ? true : undefined,
+      $hasNoUnderline: noUnderline,
       children: /*#__PURE__*/jsx(StyledLink, {
         $disabled: disabled,
-        $noUnderline: noUnderline,
+        $hasNoUnderline: noUnderline,
         href: href,
         hrefAttrs: hrefAttrs,
         accessibilityRole: "link",
@@ -3244,25 +3370,35 @@ function TypographyLink(_ref4) {
   }));
 }
 
-function matchWindowSize(currentWidth, _ref) {
-  var minWidth = _ref.minWidth,
-      maxWidth = _ref.maxWidth;
-  return currentWidth >= minWidth && (!maxWidth || currentWidth <= maxWidth);
+function matchWindowSize(_ref, _ref2) {
+  var width = _ref.width,
+      height = _ref.height;
+  var minWidth = _ref2.minWidth,
+      maxWidth = _ref2.maxWidth,
+      minHeight = _ref2.minHeight,
+      maxHeight = _ref2.maxHeight;
+  var hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
+  var hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
+  return hasWidthMatched && hasHeightMatched;
 }
 function useMatchWindowSize(options) {
   var _useWindowDimensions = useWindowDimensions(),
-      width = _useWindowDimensions.width;
+      width = _useWindowDimensions.width,
+      height = _useWindowDimensions.height;
 
-  return matchWindowSize(width, options);
+  return matchWindowSize({
+    width: width,
+    height: height
+  }, options);
 }
 
-function createWindowSizeHelper(currentWidth) {
+function createWindowSizeHelper(dimensions) {
   return {
     matchWindowSize: function matchWindowSize$1(options) {
-      return matchWindowSize(currentWidth, options);
+      return matchWindowSize(dimensions, options);
     },
     ifWindowSizeMatches: function ifWindowSizeMatches(options, valueIfTrue, valueIfFalse) {
-      return matchWindowSize(currentWidth, options) ? valueIfTrue : valueIfFalse;
+      return matchWindowSize(dimensions, options) ? valueIfTrue : valueIfFalse;
     },
     mapWindowWidth: function mapWindowWidth() {
       for (var _len = arguments.length, widthList = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -3287,7 +3423,7 @@ function createWindowSizeHelper(currentWidth) {
             minWidth = _ref4[0];
             _ref4[1];
 
-        return matchWindowSize(currentWidth, {
+        return matchWindowSize(dimensions, {
           minWidth: Number(minWidth)
         });
       });
@@ -3298,18 +3434,24 @@ function createWindowSizeHelper(currentWidth) {
 }
 
 function useKittTheme() {
-  var _useWindowSize = useWindowDimensions(),
-      width = _useWindowSize.width;
-
+  var dimensions = useWindowDimensions();
   return useMemo(function () {
     return {
       kitt: theme,
-      responsive: createWindowSizeHelper(width),
+      responsive: createWindowSizeHelper(dimensions),
       breakpoints: breakpoints
     };
-  }, [width]);
+  }, [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();
@@ -3342,5 +3484,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.web.js.map