@ornikar/kitt-universal 3.3.0 → 3.7.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({
@@ -197,6 +199,20 @@ function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
   if (small && width >= KittBreakpoints.SMALL) return small;
   return base;
 }
+function getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypographyAncestor, {
+  base,
+  color
+}) {
+  // return the props set or undefined. In case of undefined, the value will be inherited from its parents.
+  if (hasTypographyAncestor) return {
+    base,
+    color
+  };
+  return {
+    base: base ?? 'body',
+    color: color ?? 'black'
+  };
+}
 function Typography({
   accessibilityRole,
   base,
@@ -207,17 +223,22 @@ function Typography({
   color,
   ...otherProps
 }) {
-  const isHeaderTypographyInContext = react$1.useContext(IsHeaderTypographyContext);
-  const typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
+  const isHeaderTypographyInContext = react.useContext(IsHeaderTypographyContext);
+  const hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
+  const {
+    base: baseOrDefaultToBody,
+    color: colorOrDefaultToBlack
+  } = getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypographyAncestor, {
+    base,
+    color
+  });
+  const typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(baseOrDefaultToBody, small, medium, large);
   const isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
-  const nonNullableVariant = 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
-
-  const colorWithDefaultToBlack = color ?? (isHeaderTypographyInContext !== undefined ? undefined : 'black');
-  const content = base ? /*#__PURE__*/jsxRuntime.jsx(IsHeaderTypographyContext.Provider, {
+  const nonNullableVariant = variant ?? (isHeader ? 'bold' : 'regular');
+  const content = baseOrDefaultToBody ? /*#__PURE__*/jsxRuntime.jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
     children: /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
-      $color: colorWithDefaultToBlack,
+      $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
@@ -225,7 +246,7 @@ function Typography({
       ...otherProps
     })
   }) : /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
-    $color: colorWithDefaultToBlack,
+    $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
     accessibilityRole: accessibilityRole || undefined,
@@ -290,31 +311,35 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-const getFirstCharacter = string => string ? string[0] : '';
-
-const getInitials = (firstname, lastname) => (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
+const getInitials = (firstname, lastname) => `${firstname[0]}${lastname[0]}`.toUpperCase();
 
 const StyledAvatarView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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;"], ({
-  round,
-  size
-}) => round ? size / 2 : 10, ({
+})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
   theme,
-  light
-}) => light ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
-  size
-}) => size, ({
-  size
-}) => size);
+  $isRound,
+  $size
+}) => {
+  if ($isRound) return `${$size / 2}px`;
+  return theme.kitt.avatar.borderRadius;
+}, ({
+  theme,
+  $isLight
+}) => $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size);
 
 function AvatarContent({
-  size = 40,
+  size,
   src,
   firstname,
   lastname,
-  light
+  alt,
+  base,
+  isLight
 }) {
   if (src) {
     return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Image, {
@@ -324,34 +349,43 @@ function AvatarContent({
       style: {
         width: size,
         height: size
-      }
+      },
+      accessibilityLabel: alt
     });
   }
 
   if (firstname && lastname) {
     return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body-small",
+      base: base,
       variant: "bold",
-      color: light ? 'black' : 'white',
+      color: isLight ? 'black' : 'white',
       children: getInitials(firstname, lastname)
     });
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(Icon, {
     icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.UserIcon, {}),
-    color: light ? 'black' : 'white',
+    color: isLight ? 'black' : 'white',
     size: size / 2
   });
 }
 
 function Avatar({
   size = 40,
-  ...rest
+  base = 'body-small',
+  round,
+  light,
+  ...props
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, { ...rest,
-    size: size,
-    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, { ...rest,
-      size: size
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
+    $size: size,
+    $isRound: round,
+    $isLight: light,
+    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
+      size: size,
+      base: base,
+      isLight: light,
+      ...props
     })
   });
 }
@@ -360,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: {
@@ -370,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],
@@ -451,7 +482,7 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react.styled("d
     }]
   }
 }));
-const AnimatedButtonPressable = /*#__PURE__*/react$1.forwardRef(({
+const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
   $type,
   $isStretch,
   disabled,
@@ -703,7 +734,7 @@ function ButtonContent({
   });
 }
 
-const Button = /*#__PURE__*/react$1.forwardRef(({
+const Button = /*#__PURE__*/react.forwardRef(({
   children,
   type = 'default',
   disabled,
@@ -785,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]);
@@ -887,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),
@@ -985,7 +1016,7 @@ const textContentTypeByType = {
   password: 'password',
   username: 'username'
 };
-const InputText = /*#__PURE__*/react$1.forwardRef(({
+const InputText = /*#__PURE__*/react.forwardRef(({
   id,
   minHeight = 0,
   type,
@@ -1143,6 +1174,7 @@ function TextArea({ ...props
   const theme = /*#__PURE__*/styled.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     multiline: true,
+    textAlignVertical: "top",
     ...props,
     type: "text",
     minHeight: theme.kitt.forms.input.textAreaMinHeight
@@ -1251,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
@@ -1311,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],
@@ -1328,11 +1357,16 @@ const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react.styled("div"
       theme
     }) => theme.kitt.iconButton.scale.base.active],
     "p1nlccvg-4": [({
-      theme
-    }) => theme.kitt.iconButton.default.pressedBackgroundColor],
-    "p1nlccvg-5": [({
-      theme
-    }) => theme.kitt.iconButton.white.pressedBackgroundColor]
+      theme,
+      $isWhite
+    }) => {
+      const {
+        white,
+        default: defaultIconButton
+      } = theme.kitt.iconButton;
+      if ($isWhite) return white.pressedBackgroundColor;
+      return defaultIconButton.pressedBackgroundColor;
+    }]
   }
 }));
 const StyledPressableIconButton = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
@@ -1371,7 +1405,7 @@ function PressableIconButton({
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
-    "data-color-white": color === 'white' ? true : undefined,
+    $isWhite: color === 'white',
     children: /*#__PURE__*/jsxRuntime.jsx(StyledPressableIconButton, { ...props
     })
   });
@@ -1534,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,
@@ -1562,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: {
@@ -1775,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",
@@ -1809,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, {
@@ -1894,6 +1928,83 @@ function Notification({
   });
 }
 
+const StyledSkeleton = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "StyledSkeleton",
+  class: "sc3upcl",
+  vars: {
+    "sc3upcl-0": [({
+      theme
+    }) => theme.kitt.skeleton.backgroundColor],
+    "sc3upcl-1": [({
+      $isLoading,
+      theme
+    }) => $isLoading ? `linear-gradient(
+      -90deg,
+      ${theme.kitt.skeleton.backgroundColor},
+      ${theme.kitt.skeleton.flareColor} 50%,
+      ${theme.kitt.skeleton.backgroundColor} 100%
+      )` : 'none'],
+    "sc3upcl-2": [({
+      $isLoading
+    }) => $isLoading ? '1s ease-in-out infinite' : 'none']
+  }
+}));
+function SkeletonContent({
+  isLoading
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSkeleton, {
+    $isLoading: isLoading
+  });
+}
+
+function Skeleton({
+  isLoading,
+  style
+}) {
+  const [width, setWidth] = react.useState(0);
+  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {
+    style: style,
+    onLayout: ({
+      nativeEvent
+    }) => setWidth(nativeEvent.layout.width),
+    children: /*#__PURE__*/jsxRuntime.jsx(SkeletonContent, {
+      isLoading: isLoading,
+      width: width
+    })
+  });
+}
+const Bar = /*#__PURE__*/styled__default(Skeleton).withConfig({
+  displayName: "Skeleton__Bar",
+  componentId: "kitt-universal__sc-1w5cm3i-0"
+})(["width:100%;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  theme
+}) => theme.kitt.spacing * 2, ({
+  theme
+}) => theme.kitt.spacing * 2);
+const Circle = /*#__PURE__*/styled__default(Skeleton).withConfig({
+  displayName: "Skeleton__Circle",
+  componentId: "kitt-universal__sc-1w5cm3i-1"
+})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 6);
+const Square = /*#__PURE__*/styled__default(Skeleton).withConfig({
+  displayName: "Skeleton__Square",
+  componentId: "kitt-universal__sc-1w5cm3i-2"
+})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 1.5);
+Skeleton.Bar = Bar;
+Skeleton.Circle = Circle;
+Skeleton.Square = Square;
+
 const Flex = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   shouldForwardProp: (prop, defaultValidatorFn) => !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop)
 }).withConfig({
@@ -1936,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({
@@ -2197,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
     }))
   });
@@ -2316,17 +2427,6 @@ const lateOceanColorPalette = {
   moonPurpleLight1: '#EDEBFC'
 };
 
-const avatarLateOceanTheme = {
-  default: {
-    color: lateOceanColorPalette.white,
-    backgroundColor: lateOceanColorPalette.lateOcean
-  },
-  light: {
-    color: lateOceanColorPalette.black1000,
-    backgroundColor: lateOceanColorPalette.black100
-  }
-};
-
 const colorsLateOceanTheme = {
   primary: lateOceanColorPalette.lateOcean,
   primaryLight: lateOceanColorPalette.lateOceanLight1,
@@ -2349,6 +2449,16 @@ const colorsLateOceanTheme = {
   }
 };
 
+const avatar = {
+  borderRadius: '10px',
+  default: {
+    backgroundColor: colorsLateOceanTheme.primary
+  },
+  light: {
+    backgroundColor: lateOceanColorPalette.black100
+  }
+};
+
 const buttonLateOceanTheme = {
   borderRadius: '30px',
   borderWidth: {
@@ -2575,6 +2685,12 @@ const shadowsLateOceanTheme = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
 
+const skeletonTheme = {
+  backgroundColor: lateOceanColorPalette.black100,
+  flareColor: lateOceanColorPalette.black200,
+  animationDuration: 1000
+};
+
 const tagLateOceanTheme = {
   borderRadius: '10px',
   padding: '2px 12px',
@@ -2626,18 +2742,16 @@ const tooltip = {
 };
 
 const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-
 const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
   baseAndSmall: {
     fontSize: `${baseAndSmallFontSize}px`,
-    lineHeight: `${calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize)}px`
+    lineHeight: `${calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)}px`
   },
   mediumAndWide: {
     fontSize: `${mediumAndWideFontSize}px`,
-    lineHeight: `${calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize)}px`
+    lineHeight: `${calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)}px`
   }
 });
-
 const typographyLateOceanTheme = {
   colors: {
     black: lateOceanColorPalette.black1000,
@@ -2719,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,
@@ -2727,7 +2841,7 @@ const theme = {
   palettes: {
     lateOcean: lateOceanColorPalette
   },
-  avatar: avatarLateOceanTheme,
+  avatar,
   button: buttonLateOceanTheme,
   card: cardLateOceanTheme,
   feedbackMessage: feedbackMessageLateOceanTheme,
@@ -2738,7 +2852,9 @@ const theme = {
   fullScreenModal: fullScreenModalLateOceanTheme,
   iconButton,
   listItem: listItemLateOceanTheme,
-  tooltip
+  tooltip,
+  skeleton: skeletonTheme,
+  breakpoints
 };
 
 function TimePicker() {
@@ -2863,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,
@@ -2879,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;
     }
@@ -2896,7 +3012,7 @@ function Tooltip({
       });
     };
   }, [refs.reference, refs.floating, update]);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     if (!onUpdate) return;
     onUpdate({
       x,
@@ -2980,16 +3096,21 @@ function TypographyEmoji({
   });
 }
 
-const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react.styled("span")({
+const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react$1.styled("span")({
   name: "TypographyLinkWebWrapper",
-  class: "tcwz3nt"
+  class: "tcwz3nt",
+  vars: {
+    "tcwz3nt-0": [({
+      $hasNoUnderline
+    }) => $hasNoUnderline ? 'underline' : 'none']
+  }
 }));
 const StyledLink = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Text).withConfig({
   displayName: "TypographyLink__StyledLink",
   componentId: "kitt-universal__sc-1o1zy30-0"
 })(["text-decoration:", ";", ";", ";"], ({
-  $noUnderline
-}) => $noUnderline ? 'none' : 'underline', ({
+  $hasNoUnderline
+}) => $hasNoUnderline ? 'none' : 'underline', ({
   $disabled
 }) => {
   return `
@@ -3017,10 +3138,10 @@ function TypographyLink({
     accessibilityRole: "none",
     children: /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
       as: TypographyLinkWebWrapper,
-      "data-nounderline": noUnderline ? true : undefined,
+      $hasNoUnderline: noUnderline,
       children: /*#__PURE__*/jsxRuntime.jsx(StyledLink, {
         $disabled: disabled,
-        $noUnderline: noUnderline,
+        $hasNoUnderline: noUnderline,
         href: href,
         hrefAttrs: hrefAttrs,
         accessibilityRole: "link",
@@ -3086,15 +3207,21 @@ 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]);
 }
 
+const hex2rgba = (hex, alpha = 1) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
 function KittThemeProvider({
   children
 }) {
@@ -3155,6 +3282,7 @@ exports.Modal = Modal;
 exports.Notification = Notification;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
+exports.Skeleton = Skeleton;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
 exports.StoryContainer = StoryContainer;
@@ -3162,6 +3290,7 @@ exports.StoryDecorator = StoryDecorator;
 exports.StoryGrid = StoryGrid;
 exports.StorySection = StorySection;
 exports.StoryTitle = StoryTitle;
+exports.StyleWebWrapper = StyleWebWrapper;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
 exports.TimePicker = TimePicker;
@@ -3171,12 +3300,14 @@ exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.createWindowSizeHelper = createWindowSizeHelper;
+exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;
 exports.styledTextInputMixin = styledTextInputMixin;
 exports.theme = theme;
 exports.useKittTheme = useKittTheme;
 exports.useMatchWindowSize = useMatchWindowSize;
 exports.useStoryBlockColor = useStoryBlockColor;
+exports.withTheme = withTheme;
 Object.keys(kittIcons).forEach(function (k) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = kittIcons[k];
 });