@ornikar/kitt-universal 5.0.0 → 6.0.0

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

@@ -1,6 +1,6 @@
-.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);}}
 .kitt-u_AnimatedButtonPressableContainer_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 .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:hover > * > *{-webkit-transform:scale(var(--a1vkj3mh-3));-ms-transform:scale(var(--a1vkj3mh-3));transform:scale(var(--a1vkj3mh-3));}}.kitt-active .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:active > * > *{-webkit-transform:var(--a1vkj3mh-4);-ms-transform:var(--a1vkj3mh-4);transform:var(--a1vkj3mh-4);}.kitt-active .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:active > * > *,.kitt-hover .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:hover > * > *{background:var(--a1vkj3mh-5);}.kitt-u_AnimatedButtonPressableContainer_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);}.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::after,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::before{content:'';position:absolute;border-radius:var(--a1vkj3mh-7);-webkit-transition:var(--a1vkj3mh-8);transition:var(--a1vkj3mh-8);}.kitt-u_AnimatedButtonPressableContainer_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);}.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::before{opacity:0;border:var(--a1vkj3mh-15);width:100%;height:100%;top:var(--a1vkj3mh-16);left:var(--a1vkj3mh-16);}.kitt-focus .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:focus > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > [data-focusvisible-polyfill]{outline:none;}.kitt-focus .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::before,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:focus > * > *::before,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > [data-focusvisible-polyfill] > *::before{opacity:1;}.kitt-hover .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::before,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:hover > * > *::before,.kitt-active .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::before,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:active > * > *::before{opacity:0;}.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > *{color:var(--a1vkj3mh-18);}.kitt-hover .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:hover > *{color:var(--a1vkj3mh-19);}.kitt-active .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:active > *{color:var(--a1vkj3mh-20);}
 .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_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;}

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

@@ -6,8 +6,8 @@ const BabelPluginStyledComponentsReactNative = require('react-native');
 const kittIcons = require('@ornikar/kitt-icons');
 const styled = require('styled-components/native');
 const react = require('react');
-const react$1 = require('@linaria/react');
 const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@linaria/react');
 const twemojiParser = require('twemoji-parser');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const reactDom = require('@floating-ui/react-dom');
@@ -17,56 +17,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
-// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
-// export function withTheme<Props extends { theme: DefaultTheme }, C>(
-//   WrappedComponent: ComponentType<Props> & C,
-// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
-//   return function ThemedComponent(props) {
-//     const theme = useTheme();
-//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
-//   };
-// }
-function withTheme(WrappedComponent) {
-  // 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$1.styled("div")({
-  name: "StyledSpinningIconContainer",
-  class: "kitt-u_StyledSpinningIconContainer_ssn8o83"
-}));
-function SpinningIcon({
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledSpinningIconContainer, {
-    children: children
-  });
-}
-
+const defaultIconSize = 20;
 const IconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
-  color
-}) => color, ({
-  size
-}) => size, ({
-  size
-}) => size, ({
-  align = 'auto'
-}) => align);
+  $color
+}) => $color, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size, ({
+  $align = 'auto'
+}) => $align);
 function Icon({
   icon,
-  size = 20,
-  spin,
+  size = defaultIconSize,
   align,
   color
 }) {
@@ -74,12 +40,10 @@ function Icon({
     color
   });
   return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
-    align: align,
-    size: size,
-    color: color,
-    children: spin ? /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
-      children: clonedIcon
-    }) : clonedIcon
+    $align: align,
+    $size: size,
+    $color: color,
+    children: clonedIcon
   });
 }
 
@@ -390,6 +354,28 @@ function Avatar({
   });
 }
 
+// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
+// export function withTheme<Props extends { theme: DefaultTheme }, C>(
+//   WrappedComponent: ComponentType<Props> & C,
+// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
+//   return function ThemedComponent(props) {
+//     const theme = useTheme();
+//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
+//   };
+// }
+function withTheme(WrappedComponent) {
+  // 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
+    });
+  });
+}
+
 function isSubtle(type) {
   return type.startsWith('subtle');
 }
@@ -625,7 +611,6 @@ const StyledIconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComp
 function ButtonIcon({
   icon,
   color,
-  spin,
   iconPosition,
   testID
 }) {
@@ -633,7 +618,6 @@ function ButtonIcon({
     $iconPosition: iconPosition,
     children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
       icon: icon,
-      spin: spin,
       testID: testID,
       color: color
     })
@@ -648,7 +632,6 @@ function ButtonContentChildren({
   type,
   icon,
   iconPosition,
-  iconSpin,
   isDisabled,
   color,
   children
@@ -662,9 +645,8 @@ function ButtonContentChildren({
   const isWebSubtle = isSubtle(type) && "web" === 'web' && !isDisabled;
 
   if (!children) {
-    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-      spin: iconSpin // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ,
+    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    , {
       icon: icon,
       color: isWebSubtle ? 'inherit' : color
     });
@@ -672,7 +654,6 @@ function ButtonContentChildren({
 
   const buttonIconSharedProps = {
     type,
-    spin: iconSpin,
     iconPosition,
     color: isWebSubtle ? 'inherit' : color
   };
@@ -742,7 +723,6 @@ const Button = /*#__PURE__*/react.forwardRef(({
   large,
   icon,
   iconPosition = 'left',
-  iconSpin,
   testID,
   href,
   hrefAttrs,
@@ -770,7 +750,6 @@ const Button = /*#__PURE__*/react.forwardRef(({
         isDisabled: disabled,
         icon: icon,
         iconPosition: iconPosition,
-        iconSpin: iconSpin,
         children: children
       }), null]
     })
@@ -931,9 +910,9 @@ const button = {
     }
   },
   contentPadding: {
-    default: '8px 16px 7px',
-    large: '12px 24px 11px',
-    disabled: '6px 14px 5px'
+    default: '7px 16px 7px',
+    large: '11px 24px 11px',
+    disabled: '5px 14px 5px'
   },
   transition: {
     duration: '200ms',
@@ -1441,7 +1420,7 @@ function useKittTheme() {
 const CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
   displayName: "Checkbox__CheckboxAndLabelPressableWrapper",
   componentId: "kitt-universal__sc-1sav1n6-0"
-})(["display:flex;flex-direction:row;align-items:center;"]);
+})(["display:flex;flex-direction:row;"]);
 const CheckboxContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "kitt-universal__sc-1sav1n6-1"
@@ -2231,6 +2210,29 @@ function FullScreenModal({
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
+const StyledSpinningIconContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "StyledSpinningIconContainer",
+  class: "kitt-u_StyledSpinningIconContainer_ssn8o83"
+}));
+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
+    })
+  });
+}
+
 function StyleWebWrapper({
   as,
   children,
@@ -2547,12 +2549,44 @@ function LargeLoader() {
   });
 }
 
+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
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-    spin: true,
+  return /*#__PURE__*/jsxRuntime.jsx(TypographySpinningIcon, {
     color: color,
     size: size,
     icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.LoaderIcon, {})
@@ -3722,6 +3756,7 @@ exports.Notification = Notification;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
 exports.Skeleton = Skeleton;
+exports.SpinningIcon = SpinningIcon;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
 exports.StoryContainer = StoryContainer;
@@ -3738,6 +3773,7 @@ exports.Typography = Typography;
 exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
+exports.TypographySpinningIcon = TypographySpinningIcon;
 exports.createWindowSizeHelper = createWindowSizeHelper;
 exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;