@ornikar/kitt-universal 3.6.0 → 3.7.0

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

@@ -1,6 +1,6 @@
 .ssn8o83{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}.ssn8o83 > svg{-webkit-animation:spin-ssn8o83 1.1s infinite linear;animation:spin-ssn8o83 1.1s infinite linear;}@-webkit-keyframes spin-ssn8o83{0%{-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg);}}@keyframes spin-ssn8o83{0%{-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg);}}
-.a1vkj3mh{width:auto;display:var(--a1vkj3mh-0);-webkit-align-self:var(--a1vkj3mh-1);-ms-flex-item-align:var(--a1vkj3mh-1);align-self:var(--a1vkj3mh-1);outline:none;}@media (var(--a1vkj3mh-2)){.kitt-hover .a1vkj3mh > * > *,.a1vkj3mh:hover > * > *{-webkit-transform:scale(var(--a1vkj3mh-3));-ms-transform:scale(var(--a1vkj3mh-3));transform:scale(var(--a1vkj3mh-3));}}.kitt-active .a1vkj3mh > * > *,.a1vkj3mh:active > * > *{-webkit-transform:var(--a1vkj3mh-4);-ms-transform:var(--a1vkj3mh-4);transform:var(--a1vkj3mh-4);}.kitt-active .a1vkj3mh > * > *,.a1vkj3mh:active > * > *,.kitt-hover .a1vkj3mh > * > *,.a1vkj3mh:hover > * > *{background:var(--a1vkj3mh-5);}.a1vkj3mh > * > *{-webkit-transform:scale(1) translateZ(0);-ms-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:var(--a1vkj3mh-6);transition:var(--a1vkj3mh-6);}.a1vkj3mh > * > *::after,.a1vkj3mh > * > *::before{content:'';position:absolute;border-radius:var(--a1vkj3mh-7);-webkit-transition:var(--a1vkj3mh-8);transition:var(--a1vkj3mh-8);}.a1vkj3mh > * > *::after{opacity:var(--a1vkj3mh-9);top:var(--a1vkj3mh-10);left:var(--a1vkj3mh-10);width:var(--a1vkj3mh-12);height:var(--a1vkj3mh-12);border:var(--a1vkj3mh-14);}.a1vkj3mh > * > *::before{opacity:0;border:var(--a1vkj3mh-15);width:100%;height:100%;top:var(--a1vkj3mh-16);left:var(--a1vkj3mh-16);}.kitt-focus .a1vkj3mh > *,.a1vkj3mh:focus > *,.a1vkj3mh > [data-focusvisible-polyfill]{outline:none;}.kitt-focus .a1vkj3mh > * > *::before,.a1vkj3mh:focus > * > *::before,.a1vkj3mh > [data-focusvisible-polyfill] > *::before{opacity:1;}.kitt-hover .a1vkj3mh > * > *::before,.a1vkj3mh:hover > * > *::before,.kitt-active .a1vkj3mh > * > *::before,.a1vkj3mh:active > * > *::before{opacity:0;}.a1vkj3mh > *{color:var(--a1vkj3mh-18);}.kitt-hover .a1vkj3mh > *,.a1vkj3mh:hover > *{color:var(--a1vkj3mh-19);}.kitt-active .a1vkj3mh > *,.a1vkj3mh:active > *{color:var(--a1vkj3mh-20);}
-@media (hover:none) and (pointer:coarse){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (var(--p1nlccvg-1)){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.p1nlccvg,.p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *,.p1nlccvg > *:focus,.kitt-focus .p1nlccvg > *,.p1nlccvg > [data-focusvisible-polyfill],.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{background-color:var(--p1nlccvg-4);}
+.a1vkj3mh{width:auto;display:var(--a1vkj3mh-0);-webkit-align-self:var(--a1vkj3mh-1);-ms-flex-item-align:var(--a1vkj3mh-1);align-self:var(--a1vkj3mh-1);outline:none;}@media (min-width:768px){.kitt-hover .a1vkj3mh > * > *,.a1vkj3mh:hover > * > *{-webkit-transform:scale(var(--a1vkj3mh-3));-ms-transform:scale(var(--a1vkj3mh-3));transform:scale(var(--a1vkj3mh-3));}}.kitt-active .a1vkj3mh > * > *,.a1vkj3mh:active > * > *{-webkit-transform:var(--a1vkj3mh-4);-ms-transform:var(--a1vkj3mh-4);transform:var(--a1vkj3mh-4);}.kitt-active .a1vkj3mh > * > *,.a1vkj3mh:active > * > *,.kitt-hover .a1vkj3mh > * > *,.a1vkj3mh:hover > * > *{background:var(--a1vkj3mh-5);}.a1vkj3mh > * > *{-webkit-transform:scale(1) translateZ(0);-ms-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:var(--a1vkj3mh-6);transition:var(--a1vkj3mh-6);}.a1vkj3mh > * > *::after,.a1vkj3mh > * > *::before{content:'';position:absolute;border-radius:var(--a1vkj3mh-7);-webkit-transition:var(--a1vkj3mh-8);transition:var(--a1vkj3mh-8);}.a1vkj3mh > * > *::after{opacity:var(--a1vkj3mh-9);top:var(--a1vkj3mh-10);left:var(--a1vkj3mh-10);width:var(--a1vkj3mh-12);height:var(--a1vkj3mh-12);border:var(--a1vkj3mh-14);}.a1vkj3mh > * > *::before{opacity:0;border:var(--a1vkj3mh-15);width:100%;height:100%;top:var(--a1vkj3mh-16);left:var(--a1vkj3mh-16);}.kitt-focus .a1vkj3mh > *,.a1vkj3mh:focus > *,.a1vkj3mh > [data-focusvisible-polyfill]{outline:none;}.kitt-focus .a1vkj3mh > * > *::before,.a1vkj3mh:focus > * > *::before,.a1vkj3mh > [data-focusvisible-polyfill] > *::before{opacity:1;}.kitt-hover .a1vkj3mh > * > *::before,.a1vkj3mh:hover > * > *::before,.kitt-active .a1vkj3mh > * > *::before,.a1vkj3mh:active > * > *::before{opacity:0;}.a1vkj3mh > *{color:var(--a1vkj3mh-18);}.kitt-hover .a1vkj3mh > *,.a1vkj3mh:hover > *{color:var(--a1vkj3mh-19);}.kitt-active .a1vkj3mh > *,.a1vkj3mh:active > *{color:var(--a1vkj3mh-20);}
+@media (hover:none) and (pointer:coarse){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (min-width:768px){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.p1nlccvg,.p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *,.p1nlccvg > *:focus,.kitt-focus .p1nlccvg > *,.p1nlccvg > [data-focusvisible-polyfill],.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{background-color:var(--p1nlccvg-4);}
 .l2im3sa{width:60px;height:60px;-webkit-transform:scale(-1) rotate(90deg);-ms-transform:scale(-1) rotate(90deg);transform:scale(-1) rotate(90deg);}@-webkit-keyframes LargeLoaderInit-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@keyframes LargeLoaderInit-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@-webkit-keyframes LargeLoaderOffset-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@keyframes LargeLoaderOffset-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@-webkit-keyframes LargeLoaderRotation-l2im3sa{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes LargeLoaderRotation-l2im3sa{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}.l2im3sa circle,.l2im3sa g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.l2im3sa circle{stroke-width:3px;stroke-dasharray:169.64px;stroke-dashoffset:169.64px;stroke-linecap:round;}.l2im3sa g[data-large-loader='base'] circle{stroke:var(--l2im3sa-0);-webkit-animation:LargeLoaderInit-l2im3sa 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;animation:LargeLoaderInit-l2im3sa 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;}.l2im3sa g[data-large-loader='fill']{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-animation:LargeLoaderRotation-l2im3sa 1.8s linear 0.5s infinite;animation:LargeLoaderRotation-l2im3sa 1.8s linear 0.5s infinite;}.l2im3sa g[data-large-loader='fill'] circle{stroke:var(--l2im3sa-1);-webkit-animation:LargeLoaderOffset-l2im3sa 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,LargeLoaderRotation-l2im3sa 2.16s linear 0.5s infinite;animation:LargeLoaderOffset-l2im3sa 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,LargeLoaderRotation-l2im3sa 2.16s linear 0.5s infinite;}
 .sc3upcl{background-color:var(--sc3upcl-0);position:relative;overflow:hidden;height:100%;width:100%;}@-webkit-keyframes flareTranslate-sc3upcl{from{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}to{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}@keyframes flareTranslate-sc3upcl{from{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}to{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}.sc3upcl::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background-image:var(--sc3upcl-1);-webkit-animation:var(--sc3upcl-2);animation:var(--sc3upcl-2);-webkit-animation-name:flareTranslate-sc3upcl;animation-name:flareTranslate-sc3upcl;}
 .tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:none;text-decoration:none;}.tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:var(--tcwz3nt-0);text-decoration:var(--tcwz3nt-0);}

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const BabelPluginStyledComponentsReactNative = require('react-native');
 const kittIcons = require('@ornikar/kitt-icons');
 const styled = require('styled-components/native');
-const react$1 = require('react');
-const react = require('@linaria/react');
+const react = require('react');
+const react$1 = require('@linaria/react');
 const jsxRuntime = require('react/jsx-runtime');
 const twemojiParser = require('twemoji-parser');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
@@ -28,16 +28,18 @@ const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 //   };
 // }
 function withTheme(WrappedComponent) {
-  return function (props) {
+  // eslint-disable-next-line prefer-arrow-callback
+  return /*#__PURE__*/react.forwardRef(function (props, ref) {
     const theme = /*#__PURE__*/styled.useTheme();
     return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
+      ref: ref,
       theme: theme,
       ...props
     });
-  };
+  });
 }
 
-const StyledSpinningIconContainer = withTheme( /*#__PURE__*/react.styled("div")({
+const StyledSpinningIconContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
   name: "StyledSpinningIconContainer",
   class: "ssn8o83"
 }));
@@ -68,7 +70,7 @@ function Icon({
   align,
   color
 }) {
-  const clonedIcon = /*#__PURE__*/react$1.cloneElement(icon, {
+  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
     color
   });
   return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
@@ -129,10 +131,10 @@ const KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-const IsHeaderTypographyContext = /*#__PURE__*/react$1.createContext(undefined);
-const TypographyColorContext = /*#__PURE__*/react$1.createContext('black');
+const IsHeaderTypographyContext = /*#__PURE__*/react.createContext(undefined);
+const TypographyColorContext = /*#__PURE__*/react.createContext('black');
 function useTypographyColor() {
-  return react$1.useContext(TypographyColorContext);
+  return react.useContext(TypographyColorContext);
 }
 const getTypographyTypeConfigKey = theme => {
   const isMediumOrAbove = theme.responsive.matchWindowSize({
@@ -221,7 +223,7 @@ function Typography({
   color,
   ...otherProps
 }) {
-  const isHeaderTypographyInContext = react$1.useContext(IsHeaderTypographyContext);
+  const isHeaderTypographyInContext = react.useContext(IsHeaderTypographyContext);
   const hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
   const {
     base: baseOrDefaultToBody,
@@ -392,7 +394,7 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react.styled("div")({
+const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
   name: "AnimatedButtonPressableContainer",
   class: "a1vkj3mh",
   vars: {
@@ -402,9 +404,6 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react.styled("d
     "a1vkj3mh-1": [({
       $isStretch
     }) => $isStretch ? 'stretch' : 'baseline'],
-    "a1vkj3mh-2": [({
-      theme
-    }) => theme.breakpoints.min.mediumBreakpoint],
     "a1vkj3mh-3": [({
       theme
     }) => theme.kitt.button.scale.medium.hover],
@@ -483,7 +482,7 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react.styled("d
     }]
   }
 }));
-const AnimatedButtonPressable = /*#__PURE__*/react$1.forwardRef(({
+const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
   $type,
   $isStretch,
   disabled,
@@ -735,7 +734,7 @@ function ButtonContent({
   });
 }
 
-const Button = /*#__PURE__*/react$1.forwardRef(({
+const Button = /*#__PURE__*/react.forwardRef(({
   children,
   type = 'default',
   disabled,
@@ -817,7 +816,7 @@ function Emoji({
   size,
   style
 }) {
-  const [emojiData] = react$1.useMemo(() => twemojiParser.parse(emoji, {
+  const [emojiData] = react.useMemo(() => twemojiParser.parse(emoji, {
     // on native plaforms, you can't display svg as Image
     assetType: 'svg'
   }), [emoji]);
@@ -919,8 +918,8 @@ function InputField({
 }
 
 const useInputText = () => {
-  const [isFocused, setIsFocused] = react$1.useState(false);
-  const [isPasswordVisible, setIsPasswordVisible] = react$1.useState(false);
+  const [isFocused, setIsFocused] = react.useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = react.useState(false);
   return {
     isFocused,
     handleInputFocus: () => setIsFocused(true),
@@ -1017,7 +1016,7 @@ const textContentTypeByType = {
   password: 'password',
   username: 'username'
 };
-const InputText = /*#__PURE__*/react$1.forwardRef(({
+const InputText = /*#__PURE__*/react.forwardRef(({
   id,
   minHeight = 0,
   type,
@@ -1284,8 +1283,8 @@ function FullScreenModalHeader({
     top
   } = reactNativeSafeAreaContext.useSafeAreaInsets();
   const dimensions = BabelPluginStyledComponentsReactNative.useWindowDimensions();
-  const [leftWidth, setLeftWidth] = react$1.useState(0);
-  const [rightWidth, setRightWidth] = react$1.useState(0);
+  const [leftWidth, setLeftWidth] = react.useState(0);
+  const [rightWidth, setRightWidth] = react.useState(0);
 
   const handleLayoutChange = (event, side) => {
     // Prevents react to nullify event on rerenders
@@ -1344,16 +1343,13 @@ function StyleWebWrapper({
   });
 }
 
-const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react.styled("div")({
+const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("div")({
   name: "PressableIconButtonWebWrapper",
   class: "p1nlccvg",
   vars: {
     "p1nlccvg-0": [({
       theme
     }) => theme.kitt.iconButton.scale.base.hover],
-    "p1nlccvg-1": [({
-      theme
-    }) => theme.breakpoints.min.mediumBreakpoint],
     "p1nlccvg-2": [({
       theme
     }) => theme.kitt.iconButton.scale.medium.hover],
@@ -1572,7 +1568,7 @@ function ListItem({
   onPress,
   ...rest
 }) {
-  const Wrapper = onPress ? BabelPluginStyledComponentsReactNative.Pressable : react$1.Fragment;
+  const Wrapper = onPress ? BabelPluginStyledComponentsReactNative.Pressable : react.Fragment;
   const wrapperProps = onPress ? {
     accessibilityRole: 'button',
     onPress,
@@ -1600,7 +1596,7 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-const LargeLoaderContainer = withTheme( /*#__PURE__*/react.styled("div")({
+const LargeLoaderContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
   name: "LargeLoaderContainer",
   class: "l2im3sa",
   vars: {
@@ -1813,7 +1809,7 @@ function ModalFooter({
   });
 }
 
-const OnCloseContext = /*#__PURE__*/react$1.createContext(() => {});
+const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
 
 const HeaderView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Header__HeaderView",
@@ -1847,7 +1843,7 @@ function ModalHeader({
   right,
   children
 }) {
-  const onClose = react$1.useContext(OnCloseContext);
+  const onClose = react.useContext(OnCloseContext);
   const isIconLeft = !!left;
   return /*#__PURE__*/jsxRuntime.jsxs(HeaderView, {
     children: [isIconLeft && /*#__PURE__*/jsxRuntime.jsx(LeftIconView, {
@@ -1932,7 +1928,7 @@ function Notification({
   });
 }
 
-const StyledSkeleton = withTheme( /*#__PURE__*/react.styled("div")({
+const StyledSkeleton = withTheme( /*#__PURE__*/react$1.styled("div")({
   name: "StyledSkeleton",
   class: "sc3upcl",
   vars: {
@@ -1965,7 +1961,7 @@ function Skeleton({
   isLoading,
   style
 }) {
-  const [width, setWidth] = react$1.useState(0);
+  const [width, setWidth] = react.useState(0);
   return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {
     style: style,
     onLayout: ({
@@ -2051,10 +2047,10 @@ const getTypographyColorFromBlockColor = (color = 'transparent') => {
   }
 };
 
-const StoryBlockBackgroundContext = /*#__PURE__*/react$1.createContext('transparent');
-const StoryBlockColorContext = /*#__PURE__*/react$1.createContext('black');
+const StoryBlockBackgroundContext = /*#__PURE__*/react.createContext('transparent');
+const StoryBlockColorContext = /*#__PURE__*/react.createContext('black');
 const useStoryBlockColor = color => {
-  const storyBlockColor = react$1.useContext(StoryBlockColorContext);
+  const storyBlockColor = react.useContext(StoryBlockColorContext);
   return color || storyBlockColor;
 };
 const StyledStoryBlockView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
@@ -2312,14 +2308,14 @@ function StoryGridRow({
 
   if (width < breakpointValue) {
     return /*#__PURE__*/jsxRuntime.jsx(SmallScreenRow, {
-      children: react$1.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(SmallScreenCol, {
+      children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(SmallScreenCol, {
         children: child
       }))
     });
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(FlexRow, {
-    children: react$1.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(FlexCol, {
+    children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(FlexCol, {
       children: child
     }))
   });
@@ -2837,7 +2833,7 @@ const 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
 
 const theme = {
   spacing: 4,
@@ -2857,7 +2853,8 @@ const theme = {
   iconButton,
   listItem: listItemLateOceanTheme,
   tooltip,
-  skeleton: skeletonTheme
+  skeleton: skeletonTheme,
+  breakpoints
 };
 
 function TimePicker() {
@@ -2982,7 +2979,7 @@ function Tooltip({
 }) {
   const theme = /*#__PURE__*/styled.useTheme();
   const padding = floatingPadding || theme.kitt.tooltip.floatingPadding;
-  const [visible, setVisible] = react$1.useState(Boolean(defaultVisible));
+  const [visible, setVisible] = react.useState(Boolean(defaultVisible));
   const {
     x,
     y,
@@ -2998,7 +2995,7 @@ function Tooltip({
     middleware: [reactDom.offset(padding), reactDom.shift(), reactDom.flip()]
   }); // Update on scroll and resize for all relevant nodes
 
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (!refs.reference.current || !refs.floating.current) {
       return () => undefined;
     }
@@ -3015,7 +3012,7 @@ function Tooltip({
       });
     };
   }, [refs.reference, refs.floating, update]);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (!onUpdate) return;
     onUpdate({
       x,
@@ -3099,7 +3096,7 @@ function TypographyEmoji({
   });
 }
 
-const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react.styled("span")({
+const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react$1.styled("span")({
   name: "TypographyLinkWebWrapper",
   class: "tcwz3nt",
   vars: {
@@ -3210,11 +3207,10 @@ function createWindowSizeHelper(dimensions) {
 
 function useKittTheme() {
   const dimensions = BabelPluginStyledComponentsReactNative.useWindowDimensions();
-  return react$1.useMemo(() => {
+  return react.useMemo(() => {
     return {
       kitt: theme,
-      responsive: createWindowSizeHelper(dimensions),
-      breakpoints
+      responsive: createWindowSizeHelper(dimensions)
     };
   }, [dimensions]);
 }