@ornikar/kitt-universal 6.1.0 → 7.0.0

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

@@ -2,6 +2,6 @@
 .kitt-u_InputTextContainer_i1encr9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}.kitt-u_InputTextContainer_i1encr9g > [data-focusvisible-polyfill]{outline:none;}.kitt-u_InputTextContainer_i1encr9g > *::-ms-clear,.kitt-u_InputTextContainer_i1encr9g > *::-ms-reveal{display:none;}.kitt-u_InputTextContainer_i1encr9g,.kitt-u_InputTextContainer_i1encr9g > *{cursor:var(--i1encr9g-0);}.kitt-u_InputTextContainer_i1encr9g > *{-webkit-transition:var(--i1encr9g-1);transition:var(--i1encr9g-1);}.kitt-u_InputTextContainer_i1encr9g:hover > *,.kitt-hover .kitt-u_InputTextContainer_i1encr9g > *{border-color:var(--i1encr9g-2);}.kitt-u_InputTextContainer_i1encr9g:focus > *,.kitt-u_InputTextContainer_i1encr9g > *:focus,.kitt-focus .kitt-u_InputTextContainer_i1encr9g > *{border-color:var(--i1encr9g-3);}
 .kitt-u_StyledSpinningIconContainer_ssn8o83{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}.kitt-u_StyledSpinningIconContainer_ssn8o83 > svg{-webkit-animation:spin-kitt-u_StyledSpinningIconContainer_ssn8o83 1.1s infinite linear;animation:spin-kitt-u_StyledSpinningIconContainer_ssn8o83 1.1s infinite linear;}@-webkit-keyframes spin-kitt-u_StyledSpinningIconContainer_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-kitt-u_StyledSpinningIconContainer_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);}}
 @media (hover:none) and (pointer:coarse){.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (min-width:768px){.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:active,.kitt-active .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:focus,.kitt-focus .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > [data-focusvisible-polyfill],.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:active,.kitt-active .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{background-color:var(--p1nlccvg-4);}
-.kitt-u_LargeLoaderContainer_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-kitt-u_LargeLoaderContainer_l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@keyframes LargeLoaderInit-kitt-u_LargeLoaderContainer_l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@-webkit-keyframes LargeLoaderOffset-kitt-u_LargeLoaderContainer_l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@keyframes LargeLoaderOffset-kitt-u_LargeLoaderContainer_l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@-webkit-keyframes LargeLoaderRotation-kitt-u_LargeLoaderContainer_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-kitt-u_LargeLoaderContainer_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);}}.kitt-u_LargeLoaderContainer_l2im3sa circle,.kitt-u_LargeLoaderContainer_l2im3sa g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.kitt-u_LargeLoaderContainer_l2im3sa circle{stroke-width:3px;stroke-dasharray:169.64px;stroke-dashoffset:169.64px;stroke-linecap:round;}.kitt-u_LargeLoaderContainer_l2im3sa g[data-large-loader='base'] circle{stroke:var(--l2im3sa-0);-webkit-animation:LargeLoaderInit-kitt-u_LargeLoaderContainer_l2im3sa 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;animation:LargeLoaderInit-kitt-u_LargeLoaderContainer_l2im3sa 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;}.kitt-u_LargeLoaderContainer_l2im3sa g[data-large-loader='fill']{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-animation:LargeLoaderRotation-kitt-u_LargeLoaderContainer_l2im3sa 1.8s linear 0.5s infinite;animation:LargeLoaderRotation-kitt-u_LargeLoaderContainer_l2im3sa 1.8s linear 0.5s infinite;}.kitt-u_LargeLoaderContainer_l2im3sa g[data-large-loader='fill'] circle{stroke:var(--l2im3sa-1);-webkit-animation:LargeLoaderOffset-kitt-u_LargeLoaderContainer_l2im3sa 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,LargeLoaderRotation-kitt-u_LargeLoaderContainer_l2im3sa 2.16s linear 0.5s infinite;animation:LargeLoaderOffset-kitt-u_LargeLoaderContainer_l2im3sa 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,LargeLoaderRotation-kitt-u_LargeLoaderContainer_l2im3sa 2.16s linear 0.5s infinite;}
+.kitt-u_PageLoaderContainer_ptkwz2j{width:60px;height:60px;-webkit-transform:scale(-1) rotate(90deg);-ms-transform:scale(-1) rotate(90deg);transform:scale(-1) rotate(90deg);}@-webkit-keyframes PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@keyframes PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@-webkit-keyframes PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@keyframes PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@-webkit-keyframes PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j{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 PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}.kitt-u_PageLoaderContainer_ptkwz2j circle,.kitt-u_PageLoaderContainer_ptkwz2j g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.kitt-u_PageLoaderContainer_ptkwz2j circle{stroke-width:3px;stroke-dasharray:169.64px;stroke-dashoffset:169.64px;stroke-linecap:round;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='base'] circle{stroke:var(--ptkwz2j-0);-webkit-animation:PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;animation:PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='fill']{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-animation:PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j 1.8s linear 0.5s infinite;animation:PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j 1.8s linear 0.5s infinite;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='fill'] circle{stroke:var(--ptkwz2j-1);-webkit-animation:PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j 2.16s linear 0.5s infinite;animation:PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j 2.16s linear 0.5s infinite;}
 .kitt-u_StyledSkeleton_sc3upcl{background-color:var(--sc3upcl-0);position:relative;overflow:hidden;height:100%;width:100%;}@-webkit-keyframes flareTranslate-kitt-u_StyledSkeleton_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-kitt-u_StyledSkeleton_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%);}}.kitt-u_StyledSkeleton_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-kitt-u_StyledSkeleton_sc3upcl;animation-name:flareTranslate-kitt-u_StyledSkeleton_sc3upcl;}
 .kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:hover,.kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:active,.kitt-hover .kitt-u_TypographyLinkWebWrapper_tcwz3nt > *{-webkit-text-decoration:none;text-decoration:none;}.kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:hover,.kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:active,.kitt-hover .kitt-u_TypographyLinkWebWrapper_tcwz3nt > *{-webkit-text-decoration:var(--tcwz3nt-0);text-decoration:var(--tcwz3nt-0);}

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

@@ -283,10 +283,11 @@ const StyledAvatarView = /*#__PURE__*/styled__default(BabelPluginStyledComponent
 })(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
   theme,
   $isRound,
-  $size
+  $size,
+  $sizeVariant
 }) => {
   if ($isRound) return `${$size / 2}px`;
-  return `${theme.kitt.avatar.borderRadius}px`;
+  return `${$sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius}px`;
 }, ({
   theme,
   $isLight
@@ -302,8 +303,8 @@ function AvatarContent({
   firstname,
   lastname,
   alt,
-  base,
-  isLight
+  isLight,
+  sizeVariant
 }) {
   if (src) {
     return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Image, {
@@ -320,8 +321,8 @@ function AvatarContent({
 
   if (firstname && lastname) {
     return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: base,
-      variant: "bold",
+      base: sizeVariant === 'large' ? 'body-large' : 'body',
+      variant: sizeVariant === 'large' ? 'bold' : 'regular',
       color: isLight ? 'black' : 'white',
       children: getInitials(firstname, lastname)
     });
@@ -336,19 +337,20 @@ function AvatarContent({
 
 function Avatar({
   size = 40,
-  base = 'body-small',
   round,
   light,
+  sizeVariant,
   ...props
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
+    $sizeVariant: sizeVariant,
     children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
       size: size,
-      base: base,
       isLight: light,
+      sizeVariant: sizeVariant,
       ...props
     })
   });
@@ -927,6 +929,9 @@ const avatar = {
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
+  },
+  large: {
+    borderRadius: 30
   }
 };
 
@@ -1314,6 +1319,10 @@ const listItem = {
   innerMargin: 8
 };
 
+const pageLoader = {
+  size: 60
+};
+
 const shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1404,19 +1413,20 @@ const theme = {
     lateOcean: lateOceanColorPalette
   },
   avatar,
+  breakpoints,
   button,
   card,
   feedbackMessage,
   forms,
-  typography,
-  tag,
-  shadows,
   fullScreenModal,
   iconButton,
   listItem,
-  tooltip,
+  pageLoader,
+  shadows,
   skeleton,
-  breakpoints
+  tag,
+  tooltip,
+  typography
 };
 
 function matchWindowSize({
@@ -2277,20 +2287,13 @@ const StyledSpinningIconContainer = withTheme( /*#__PURE__*/react$1.styled("div"
 }));
 function SpinningIcon({
   icon,
-  size = defaultIconSize,
-  align,
   color
 }) {
   const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
     color
   });
-  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
-    $align: align,
-    $size: size,
-    $color: color,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledSpinningIconContainer, {
-      children: clonedIcon
-    })
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSpinningIconContainer, {
+    children: clonedIcon
   });
 }
 
@@ -2572,85 +2575,12 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-const LargeLoaderContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
-  name: "LargeLoaderContainer",
-  class: "kitt-u_LargeLoaderContainer_l2im3sa",
-  vars: {
-    "l2im3sa-0": [({
-      theme
-    }) => theme.kitt.colors.separator],
-    "l2im3sa-1": [({
-      theme
-    }) => theme.kitt.colors.primary]
-  }
-}));
-function LargeLoader() {
-  return /*#__PURE__*/jsxRuntime.jsx(LargeLoaderContainer, {
-    children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
-      width: "60",
-      height: "60",
-      children: [/*#__PURE__*/jsxRuntime.jsx("g", {
-        "data-large-loader": "base",
-        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          cx: "30",
-          cy: "30",
-          r: "27",
-          fill: "none"
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx("g", {
-        "data-large-loader": "fill",
-        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          cx: "30",
-          cy: "30",
-          r: "27",
-          fill: "none"
-        })
-      })]
-    })
-  });
-}
-
-function TypographySpinningIconSpecifiedColor({
-  color,
-  ...props
-}) {
-  const theme = /*#__PURE__*/styled.useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, { ...props,
-    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
-  });
-}
-
-function TypographySpinningIconInheritColor(props) {
-  const color = useTypographyColor();
-  return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIconSpecifiedColor, {
-    color: color,
-    ...props
-  });
-}
-
-function TypographySpinningIcon({
-  color,
-  ...props
-}) {
-  if (color) {
-    return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIconSpecifiedColor, {
-      color: color,
-      ...props
-    });
-  }
-
-  return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIconInheritColor, { ...props
-  });
-}
-
-function Loader({
-  color = 'primary',
-  size = 20
+function LoaderIcon({
+  color
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIcon, {
+  return /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
     color: color,
-    size: size,
-    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.LoaderIcon, {})
+    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.ArcIcon, {})
   });
 }
 
@@ -2823,12 +2753,13 @@ const OverlayPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponent
   backgroundColor: theme.kitt.colors.overlay.dark
 }));
 function Overlay({
-  onPress
+  onPress,
+  children
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(OverlayPressable, {
     accessibilityRole: "none",
     onPress: onPress,
-    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {})
+    children: children
   });
 }
 
@@ -2987,6 +2918,48 @@ function Notification({
   });
 }
 
+const PageLoaderContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "PageLoaderContainer",
+  class: "kitt-u_PageLoaderContainer_ptkwz2j",
+  vars: {
+    "ptkwz2j-0": [({
+      theme
+    }) => theme.kitt.colors.separator],
+    "ptkwz2j-1": [({
+      theme
+    }) => theme.kitt.colors.primary]
+  }
+}));
+function PageLoader() {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const {
+    size
+  } = theme.kitt.pageLoader;
+  return /*#__PURE__*/jsxRuntime.jsx(PageLoaderContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
+      width: size,
+      height: size,
+      children: [/*#__PURE__*/jsxRuntime.jsx("g", {
+        "data-large-loader": "base",
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "30",
+          cy: "30",
+          r: "27",
+          fill: "none"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("g", {
+        "data-large-loader": "fill",
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "30",
+          cy: "30",
+          r: "27",
+          fill: "none"
+        })
+      })]
+    })
+  });
+}
+
 const StyledSkeleton = withTheme( /*#__PURE__*/react$1.styled("div")({
   name: "StyledSkeleton",
   class: "kitt-u_StyledSkeleton_sc3upcl",
@@ -3807,13 +3780,14 @@ exports.KittBreakpointsMax = KittBreakpointsMax;
 exports.KittThemeDecorator = KittThemeDecorator;
 exports.KittThemeProvider = KittThemeProvider;
 exports.Label = Label;
-exports.LargeLoader = LargeLoader;
 exports.ListItem = ListItem;
-exports.Loader = Loader;
+exports.LoaderIcon = LoaderIcon;
 exports.MatchWindowSize = MatchWindowSize;
 exports.Message = Message;
 exports.Modal = Modal;
 exports.Notification = Notification;
+exports.Overlay = Overlay;
+exports.PageLoader = PageLoader;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
 exports.Skeleton = Skeleton;
@@ -3834,7 +3808,6 @@ exports.Typography = Typography;
 exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
-exports.TypographySpinningIcon = TypographySpinningIcon;
 exports.createWindowSizeHelper = createWindowSizeHelper;
 exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;