@ornikar/kitt-universal 3.6.0 → 3.7.0

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

@@ -5,7 +5,7 @@ export { useWindowDimensions as useWindowSize } from 'react-native';
 import { UserIcon, EyeIcon, EyeOffIcon, LoaderIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
 import styled$1, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, Children, useEffect } from 'react';
+import { forwardRef, cloneElement, useContext, createContext, useMemo, useState, Fragment, Children, useEffect } from 'react';
 import { styled } from '@linaria/react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -30,12 +30,14 @@ function _objectSpread$h(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$h({
+      ref: ref,
       theme: theme
     }, props));
-  };
+  });
 }
 
 var StyledSpinningIconContainer = withTheme( /*#__PURE__*/styled("div")({
@@ -413,97 +415,93 @@ var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled("div")({
       var $isStretch = _ref2.$isStretch;
       return $isStretch ? 'stretch' : 'baseline';
     }],
-    "a1vkj3mh-2": [function (_ref3) {
+    "a1vkj3mh-3": [function (_ref3) {
       var theme = _ref3.theme;
-      return theme.breakpoints.min.mediumBreakpoint;
-    }],
-    "a1vkj3mh-3": [function (_ref4) {
-      var theme = _ref4.theme;
       return theme.kitt.button.scale.medium.hover;
     }],
-    "a1vkj3mh-4": [function (_ref5) {
-      var theme = _ref5.theme,
-          $isDisabled = _ref5.$isDisabled;
+    "a1vkj3mh-4": [function (_ref4) {
+      var theme = _ref4.theme,
+          $isDisabled = _ref4.$isDisabled;
       return "scale(".concat($isDisabled ? 1 : theme.kitt.button.scale.base.active, ")");
     }],
-    "a1vkj3mh-5": [function (_ref6) {
-      var theme = _ref6.theme,
-          $type = _ref6.$type,
-          $isDisabled = _ref6.$isDisabled;
+    "a1vkj3mh-5": [function (_ref5) {
+      var theme = _ref5.theme,
+          $type = _ref5.$type,
+          $isDisabled = _ref5.$isDisabled;
       if ($isDisabled) return theme.kitt.button.disabled.hoverBackgroundColor;
       return theme.kitt.button[$type].hoverBackgroundColor;
     }],
-    "a1vkj3mh-6": [function (_ref7) {
-      var theme = _ref7.theme;
+    "a1vkj3mh-6": [function (_ref6) {
+      var theme = _ref6.theme;
       var _theme$kitt$button$tr = theme.kitt.button.transition,
           duration = _theme$kitt$button$tr.duration,
           timingFunction = _theme$kitt$button$tr.timingFunction;
       return "color, background, border-color, ".concat(duration, " ").concat(timingFunction);
     }],
-    "a1vkj3mh-7": [function (_ref8) {
-      var theme = _ref8.theme;
+    "a1vkj3mh-7": [function (_ref7) {
+      var theme = _ref7.theme;
       return theme.kitt.button.borderRadius;
     }],
-    "a1vkj3mh-8": [function (_ref9) {
-      var theme = _ref9.theme;
+    "a1vkj3mh-8": [function (_ref8) {
+      var theme = _ref8.theme;
       return "opacity ".concat(theme.kitt.button.transition.duration, " ").concat(theme.kitt.button.transition.timingFunction);
     }],
-    "a1vkj3mh-9": [function (_ref10) {
-      var $isDisabled = _ref10.$isDisabled;
+    "a1vkj3mh-9": [function (_ref9) {
+      var $isDisabled = _ref9.$isDisabled;
       return $isDisabled ? 1 : 0;
     }],
-    "a1vkj3mh-10": [function (_ref11) {
-      var theme = _ref11.theme;
+    "a1vkj3mh-10": [function (_ref10) {
+      var theme = _ref10.theme;
       return "-".concat(theme.kitt.button.borderWidth.disabled);
     }],
-    "a1vkj3mh-12": [function (_ref12) {
-      var theme = _ref12.theme;
+    "a1vkj3mh-12": [function (_ref11) {
+      var theme = _ref11.theme;
       return "calc(100% - ".concat(parseInt(theme.kitt.button.borderWidth.disabled, 10) * 0.5, "px)");
     }],
-    "a1vkj3mh-14": [function (_ref13) {
-      var theme = _ref13.theme;
+    "a1vkj3mh-14": [function (_ref12) {
+      var theme = _ref12.theme;
       return "".concat(theme.kitt.button.disabled.borderColor, " solid ").concat(theme.kitt.button.borderWidth.disabled);
     }],
-    "a1vkj3mh-15": [function (_ref14) {
-      var theme = _ref14.theme,
-          $type = _ref14.$type;
+    "a1vkj3mh-15": [function (_ref13) {
+      var theme = _ref13.theme,
+          $type = _ref13.$type;
       return "".concat(theme.kitt.button.borderWidth.focus, " solid ").concat(theme.kitt.button[$type].focusBorderColor);
     }],
-    "a1vkj3mh-16": [function (_ref15) {
-      var theme = _ref15.theme;
+    "a1vkj3mh-16": [function (_ref14) {
+      var theme = _ref14.theme;
       return "-".concat(theme.kitt.button.borderWidth.focus);
     }],
-    "a1vkj3mh-18": [function (_ref16) {
+    "a1vkj3mh-18": [function (_ref15) {
+      var theme = _ref15.theme,
+          $type = _ref15.$type,
+          $isDisabled = _ref15.$isDisabled;
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+      if (!isSubtle($type)) return 'inherit';
+      return theme.kitt.button[$type].color;
+    }],
+    "a1vkj3mh-19": [function (_ref16) {
       var theme = _ref16.theme,
           $type = _ref16.$type,
           $isDisabled = _ref16.$isDisabled;
       if ($isDisabled) return theme.kitt.typography.colors['black-light'];
       if (!isSubtle($type)) return 'inherit';
-      return theme.kitt.button[$type].color;
+      return theme.kitt.button[$type].hoverColor;
     }],
-    "a1vkj3mh-19": [function (_ref17) {
+    "a1vkj3mh-20": [function (_ref17) {
       var theme = _ref17.theme,
           $type = _ref17.$type,
           $isDisabled = _ref17.$isDisabled;
       if ($isDisabled) return theme.kitt.typography.colors['black-light'];
       if (!isSubtle($type)) return 'inherit';
-      return theme.kitt.button[$type].hoverColor;
-    }],
-    "a1vkj3mh-20": [function (_ref18) {
-      var theme = _ref18.theme,
-          $type = _ref18.$type,
-          $isDisabled = _ref18.$isDisabled;
-      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-      if (!isSubtle($type)) return 'inherit';
       return theme.kitt.button[$type].activeColor;
     }]
   }
 }));
-var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref19, ref) {
-  var $type = _ref19.$type,
-      $isStretch = _ref19.$isStretch,
-      disabled = _ref19.disabled,
-      props = _objectWithoutProperties(_ref19, _excluded$c);
+var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
+  var $type = _ref18.$type,
+      $isStretch = _ref18.$isStretch,
+      disabled = _ref18.disabled,
+      props = _objectWithoutProperties(_ref18, _excluded$c);
 
   return /*#__PURE__*/jsx(AnimatedButtonPressableContainer, {
     ref: ref,
@@ -1464,21 +1462,17 @@ var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled("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"];
@@ -1490,18 +1484,18 @@ var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled("div")({
 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 (_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;
   var transition = iconButton.transition;
 
@@ -1511,9 +1505,9 @@ var StyledPressableIconButton = /*#__PURE__*/styled$1(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,
@@ -3030,7 +3024,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,
@@ -3050,7 +3044,8 @@ var theme = {
   iconButton: iconButton,
   listItem: listItemLateOceanTheme,
   tooltip: tooltip,
-  skeleton: skeletonTheme
+  skeleton: skeletonTheme,
+  breakpoints: breakpoints
 };
 
 function TimePicker() {
@@ -3438,8 +3433,7 @@ function useKittTheme() {
   return useMemo(function () {
     return {
       kitt: theme,
-      responsive: createWindowSizeHelper(dimensions),
-      breakpoints: breakpoints
+      responsive: createWindowSizeHelper(dimensions)
     };
   }, [dimensions]);
 }