@ornikar/kitt-universal 3.1.0 → 3.5.0

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

@@ -27,8 +27,7 @@ const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 //     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
 //   };
 // }
-function withTheme( // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-WrappedComponent) {
+function withTheme(WrappedComponent) {
   return function (props) {
     const theme = /*#__PURE__*/styled.useTheme();
     return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
@@ -50,7 +49,7 @@ function SpinningIcon({
   });
 }
 
-const IconContainer$2 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+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:", ";"], ({
@@ -72,7 +71,7 @@ function Icon({
   const clonedIcon = /*#__PURE__*/react$1.cloneElement(icon, {
     color
   });
-  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$2, {
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
     align: align,
     size: size,
     color: color,
@@ -198,6 +197,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,
@@ -209,16 +222,21 @@ function Typography({
   ...otherProps
 }) {
   const isHeaderTypographyInContext = react$1.useContext(IsHeaderTypographyContext);
-  const typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
+  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,
@@ -226,7 +244,7 @@ function Typography({
       ...otherProps
     })
   }) : /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
-    $color: colorWithDefaultToBlack,
+    $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
     accessibilityRole: accessibilityRole || undefined,
@@ -357,79 +375,235 @@ function Avatar({
   });
 }
 
-function TypographyIconInheritColor(props) {
-  const color = useTypographyColor();
-  const theme = /*#__PURE__*/styled.useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Icon, { ...props,
-    color: theme.kitt.typography.colors[color]
-  });
+function isSubtle(type) {
+  return type.startsWith('subtle');
 }
 
+const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react.styled("div")({
+  name: "AnimatedButtonPressableContainer",
+  class: "a1vkj3mh",
+  vars: {
+    "a1vkj3mh-0": [({
+      $isStretch
+    }) => $isStretch ? 'inherit' : 'inline-flex'],
+    "a1vkj3mh-1": [({
+      $isStretch
+    }) => $isStretch ? 'stretch' : 'baseline'],
+    "a1vkj3mh-2": [({
+      theme
+    }) => theme.breakpoints.min.mediumBreakpoint],
+    "a1vkj3mh-3": [({
+      theme
+    }) => theme.kitt.button.scale.medium.hover],
+    "a1vkj3mh-4": [({
+      theme,
+      $isDisabled
+    }) => `scale(${$isDisabled ? 1 : theme.kitt.button.scale.base.active})`],
+    "a1vkj3mh-5": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.button.disabled.hoverBackgroundColor;
+      return theme.kitt.button[$type].hoverBackgroundColor;
+    }],
+    "a1vkj3mh-6": [({
+      theme
+    }) => {
+      const {
+        duration,
+        timingFunction
+      } = theme.kitt.button.transition;
+      return `color, background, border-color, ${duration} ${timingFunction}`;
+    }],
+    "a1vkj3mh-7": [({
+      theme
+    }) => theme.kitt.button.borderRadius],
+    "a1vkj3mh-8": [({
+      theme
+    }) => `opacity ${theme.kitt.button.transition.duration} ${theme.kitt.button.transition.timingFunction}`],
+    "a1vkj3mh-9": [({
+      $isDisabled
+    }) => $isDisabled ? 1 : 0],
+    "a1vkj3mh-10": [({
+      theme
+    }) => `-${theme.kitt.button.borderWidth.disabled}`],
+    "a1vkj3mh-12": [({
+      theme
+    }) => `calc(100% - ${parseInt(theme.kitt.button.borderWidth.disabled, 10) * 0.5}px)`],
+    "a1vkj3mh-14": [({
+      theme
+    }) => `${theme.kitt.button.disabled.borderColor} solid ${theme.kitt.button.borderWidth.disabled}`],
+    "a1vkj3mh-15": [({
+      theme,
+      $type
+    }) => `${theme.kitt.button.borderWidth.focus} solid ${theme.kitt.button[$type].focusBorderColor}`],
+    "a1vkj3mh-16": [({
+      theme
+    }) => `-${theme.kitt.button.borderWidth.focus}`],
+    "a1vkj3mh-18": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+      if (!isSubtle($type)) return 'inherit';
+      return theme.kitt.button[$type].color;
+    }],
+    "a1vkj3mh-19": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+      if (!isSubtle($type)) return 'inherit';
+      return theme.kitt.button[$type].hoverColor;
+    }],
+    "a1vkj3mh-20": [({
+      theme,
+      $type,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+      if (!isSubtle($type)) return 'inherit';
+      return theme.kitt.button[$type].activeColor;
+    }]
+  }
+}));
+const AnimatedButtonPressable = /*#__PURE__*/react$1.forwardRef(({
+  $type,
+  $isStretch,
+  disabled,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressableContainer, {
+    ref: ref,
+    $type: $type,
+    $isDisabled: !!disabled,
+    $isStretch: $isStretch,
+    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, {
+      disabled: disabled,
+      ...props
+    })
+  });
+});
+
+const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "BaseStyledButtonPressable",
+  componentId: "kitt-universal__sc-4k8lse-0"
+})(["position:relative;min-width:", ";max-width:", ";width:", ";min-height:", ";border-radius:", ";flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], ({
+  theme
+}) => theme.kitt.button.minWidth, ({
+  theme,
+  $isStretch
+}) => $isStretch ? '100%' : theme.kitt.button.maxWidth, ({
+  $isStretch
+}) => $isStretch ? '100%' : 'auto', ({
+  theme
+}) => theme.kitt.button.minHeight, ({
+  theme
+}) => theme.kitt.button.borderRadius, ({
+  theme,
+  $isDisabled,
+  $type
+}) => {
+  if ($isDisabled) return theme.kitt.button.disabled.backgroundColor;
+  return theme.kitt.button[$type].backgroundColor;
+}, ({
+  theme,
+  $isLarge,
+  $isDisabled
+}) => {
+  const {
+    large,
+    default: defaultPadding,
+    disabled: disabledPadding
+  } = theme.kitt.button.contentPadding;
+  if ($isLarge) return large;
+  if ($isDisabled) return disabledPadding;
+  return defaultPadding;
+});
+
 function TypographyIconSpecifiedColor({
   color,
-  ...otherProps
+  ...props
 }) {
   const theme = /*#__PURE__*/styled.useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Icon, { ...otherProps,
-    color: theme.kitt.typography.colors[color]
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, { ...props,
+    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
+  });
+}
+
+function TypographyIconInheritColor(props) {
+  const color = useTypographyColor();
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIconSpecifiedColor, {
+    color: color,
+    ...props
   });
 }
 
 function TypographyIcon({
   color,
-  ...otherProps
+  ...props
 }) {
   if (color) {
     return /*#__PURE__*/jsxRuntime.jsx(TypographyIconSpecifiedColor, {
       color: color,
-      ...otherProps
+      ...props
     });
   }
 
-  return /*#__PURE__*/jsxRuntime.jsx(TypographyIconInheritColor, { ...otherProps
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIconInheritColor, { ...props
   });
 }
 
-const getTextColorByType = (type, isPressed, disabled) => {
-  if (disabled) return 'black-light';
-
+const getTextColorByType = type => {
   switch (type) {
     case 'primary':
       return 'white';
 
+    case 'white':
+      return 'white';
+
     case 'subtle':
-      return isPressed ? 'primary-light' : 'primary';
+      return 'primary';
 
     case 'subtle-dark':
-      return isPressed ? 'black-light' : 'black';
+      return 'black';
 
-    case 'secondary':
     default:
       return 'black';
   }
 };
 
-const ButtonText = /*#__PURE__*/styled__default(Typography.Text).withConfig({
-  displayName: "ButtonContent__ButtonText",
+const StyledButtonText = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "ButtonContent__StyledButtonText",
   componentId: "kitt-universal__sc-dnyw3n-0"
-})(["text-align:center;"]);
-const Content$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "ButtonContent__Content",
+})(["text-align:center;", " ", ""], () => {
+  // Make the multilines case work properly on native
+  // Breaks the web implem
+  return undefined;
+}, ({
+  $type,
+  $isDisabled
+}) => {
+  /* For subltes button, color changes when hovered.
+   * We don't want to use a mouse event handler with a react state to handle it
+   * For this precise case, we've decided to work outside the typography logic
+   */
+  if ($isDisabled || !isSubtle($type)) return undefined;
+  return 'color: inherit';
+});
+const StyledIconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ButtonContent__StyledIconContainer",
   componentId: "kitt-universal__sc-dnyw3n-1"
-})(["flex-direction:row;align-items:center;justify-content:center;flex:", ";"], ({
-  stretch,
-  iconOnly
-}) => `${stretch || iconOnly ? 1 : 0} 1 auto`);
-const IconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "ButtonContent__IconContainer",
-  componentId: "kitt-universal__sc-dnyw3n-2"
 })(["", ""], ({
   theme,
-  iconPosition
+  $iconPosition
 }) => {
-  const value = theme.kitt.spacing * 3;
+  const value = theme.kitt.spacing * 2;
 
-  if (iconPosition === 'left') {
+  if ($iconPosition === 'left') {
     return `margin: 0 ${value}px 0 0;`;
   }
 
@@ -438,150 +612,158 @@ const IconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponents
 
 function ButtonIcon({
   icon,
-  spin,
   color,
-  size,
+  spin,
   iconPosition,
   testID
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
-    iconPosition: iconPosition,
+  return /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer, {
+    $iconPosition: iconPosition,
     children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
       icon: icon,
       spin: spin,
-      color: color,
-      size: size,
-      testID: testID
+      testID: testID,
+      color: color
     })
   });
 }
 
-function ButtonContent({
+const StyledChildrenWithIcon = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ButtonContent__StyledChildrenWithIcon",
+  componentId: "kitt-universal__sc-dnyw3n-2"
+})(["align-items:center;justify-content:center;flex-direction:row;"]);
+function ButtonContentChildren({
   type,
-  isPressed,
-  stretch,
   icon,
   iconPosition,
   iconSpin,
-  disabled,
+  isDisabled,
+  color,
   children
 }) {
-  const color = getTextColorByType(type, Boolean(isPressed), Boolean(disabled));
-  const theme = /*#__PURE__*/styled.useTheme();
-  const sharedIconProps = {
-    spin: iconSpin,
-    color,
-    size: theme.kitt.button.iconSize
-  };
-
   if ((process.env.NODE_ENV !== "production")) {
     if (!(children || icon)) {
       throw new Error('kitt(Button): You should provide at least a children or a icon');
     }
   }
 
+  const isWebSubtle = isSubtle(type) && "web" === 'web' && !isDisabled;
+
   if (!children) {
-    return /*#__PURE__*/jsxRuntime.jsx(Content$1, {
-      iconOnly: true,
-      stretch: stretch,
-      children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, { ...sharedIconProps,
-        icon: icon
-      })
+    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+      spin: iconSpin // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      ,
+      icon: icon,
+      color: isWebSubtle ? 'inherit' : color
     });
   }
 
-  return /*#__PURE__*/jsxRuntime.jsxs(Content$1, {
-    stretch: stretch,
-    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, { ...sharedIconProps,
-      icon: icon,
-      iconPosition: iconPosition,
-      testID: "button-left-icon"
-    }) : null, /*#__PURE__*/jsxRuntime.jsx(ButtonText, {
+  const buttonIconSharedProps = {
+    type,
+    spin: iconSpin,
+    iconPosition,
+    color: isWebSubtle ? 'inherit' : color
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledChildrenWithIcon, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, { ...buttonIconSharedProps,
+      testID: "button-left-icon",
+      icon: icon
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(StyledButtonText, {
       base: "body",
-      color: color,
       variant: "bold",
+      $type: type,
+      $isDisabled: isDisabled // set to color: inherit via styled components
+      ,
+      color: isWebSubtle ? undefined : color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, { ...sharedIconProps,
-      icon: icon,
-      iconPosition: iconPosition
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, { ...buttonIconSharedProps,
+      icon: icon
     }) : null]
   });
 }
-
-const ButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
-  displayName: "ButtonPressable",
-  componentId: "kitt-universal__sc-7ckel6-0"
-})(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], ({
-  theme
-}) => theme.kitt.button.minWidth, ({
-  theme,
-  stretch
-}) => stretch ? 'auto' : theme.kitt.button.maxWidth, ({
-  stretch
-}) => stretch ? '100%' : 'auto', ({
-  theme
-}) => theme.kitt.button.minHeight, ({
-  theme,
-  isPressed,
-  disabled,
-  type
+const ButtonContentContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ButtonContent__ButtonContentContainer",
+  componentId: "kitt-universal__sc-dnyw3n-3"
+})(["line-height:16px;", " ", ";"], ({
+  $isStretch,
+  $isIconOnly
 }) => {
-  if (disabled) {
-    return theme.kitt.button[type].disabledBackgroundColor;
-  }
-
-  return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
+  return `
+      flex: ${$isStretch || $isIconOnly ? 1 : 0} 1 auto;
+    `;
 }, ({
-  theme
-}) => theme.kitt.button.contentPadding.default, ({
-  theme
-}) => theme.kitt.button.borderRadius, ({
-  theme,
-  disabled,
-  type
-}) => disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent', ({
-  theme
-}) => theme.kitt.button.borderWidth);
+  $isSubtle
+}) => {
+  if (!$isSubtle) return undefined; // Needed for subtle type
 
-function Button({
+  return 'color: inherit';
+});
+function ButtonContent({
+  type,
+  isDisabled,
+  $isStretch,
+  icon,
   children,
-  type = 'secondary',
+  ...props
+}) {
+  const color = isDisabled ? 'black-light' : getTextColorByType(type);
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonContentContainer, {
+    $isSubtle: isSubtle(type),
+    $isStretch: $isStretch,
+    $isIconOnly: Boolean(!children && icon),
+    children: /*#__PURE__*/jsxRuntime.jsx(ButtonContentChildren, {
+      icon: icon,
+      type: type,
+      isDisabled: isDisabled,
+      color: color,
+      ...props,
+      children: children
+    })
+  });
+}
+
+const Button = /*#__PURE__*/react$1.forwardRef(({
+  children,
+  type = 'default',
+  disabled,
+  stretch,
+  large,
   icon,
   iconPosition = 'left',
   iconSpin,
-  stretch,
-  disabled,
   testID,
   href,
   hrefAttrs,
+  accessibilityRole = 'button',
   onPress
-}) {
-  const [isPressed, setIsPressed] = react$1.useState(false);
-  const sharedProps = {
-    type,
-    stretch,
-    disabled
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(ButtonPressable // eslint-disable-next-line unicorn/expiring-todo-comments
-  // TODO: When designs are defined, update with the proper onPress styles to mimic TouchableHighlight
-  // underlayColor={globalTheme.button[type].pressedBackgroundColor}
-  , { ...sharedProps,
-    isPressed: isPressed,
-    accessibilityRole: "button",
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressable, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
     testID: testID,
     href: href,
     hrefAttrs: hrefAttrs,
+    disabled: disabled,
+    $isStretch: stretch,
+    $type: type,
     onPress: onPress,
-    onPressIn: () => setIsPressed(true),
-    onPressOut: () => setIsPressed(false),
-    children: /*#__PURE__*/jsxRuntime.jsx(ButtonContent, { ...sharedProps,
-      icon: icon,
-      iconPosition: iconPosition,
-      iconSpin: iconSpin,
-      children: children
+    children: /*#__PURE__*/jsxRuntime.jsxs(BaseStyledButtonPressable, {
+      $type: type,
+      $isStretch: stretch,
+      $isLarge: large,
+      $isDisabled: disabled,
+      children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
+        type: type,
+        $isStretch: stretch,
+        isDisabled: disabled,
+        icon: icon,
+        iconPosition: iconPosition,
+        iconSpin: iconSpin,
+        children: children
+      }), null]
     })
   });
-}
+});
 
 const Container$5 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Card__Container",
@@ -980,6 +1162,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
@@ -1165,11 +1348,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({
@@ -1208,7 +1396,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
     })
   });
@@ -1731,6 +1919,83 @@ function Notification({
   });
 }
 
+const StyledSkeleton = withTheme( /*#__PURE__*/react.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$1.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({
@@ -2164,47 +2429,98 @@ const avatarLateOceanTheme = {
   }
 };
 
+const colorsLateOceanTheme = {
+  primary: lateOceanColorPalette.lateOcean,
+  primaryLight: lateOceanColorPalette.lateOceanLight1,
+  accent: lateOceanColorPalette.warmEmbrace,
+  accentLight: lateOceanColorPalette.warmEmbraceLight1,
+  success: lateOceanColorPalette.viride,
+  correct: lateOceanColorPalette.viride,
+  danger: lateOceanColorPalette.englishVermillon,
+  separator: lateOceanColorPalette.black100,
+  hover: lateOceanColorPalette.black100,
+  black: lateOceanColorPalette.black1000,
+  uiBackground: lateOceanColorPalette.black25,
+  uiBackgroundLight: lateOceanColorPalette.white,
+  transparent: lateOceanColorPalette.transparent,
+  disabled: lateOceanColorPalette.black50,
+  overlay: {
+    dark: 'rgba(41, 48, 51, 0.25)',
+    light: 'rgba(255, 255, 255, 0.90)',
+    fullscreenLoader: 'rgba(0, 0, 0, 0.25)'
+  }
+};
+
 const buttonLateOceanTheme = {
   borderRadius: '30px',
-  borderWidth: '2px',
-  minHeight: '42px',
+  borderWidth: {
+    disabled: '2px',
+    focus: '3px'
+  },
+  minHeight: '40px',
   minWidth: '40px',
   maxWidth: '335px',
-  iconSize: 18,
+  scale: {
+    base: {
+      default: 1,
+      hover: 0.95,
+      active: 0.95
+    },
+    medium: {
+      hover: 1.05
+    }
+  },
   contentPadding: {
-    default: '8px 16px'
+    default: '8px 16px 7px',
+    large: '12px 24px 11px',
+    disabled: '6px 14px 5px'
   },
-  primary: {
-    backgroundColor: lateOceanColorPalette.lateOcean,
-    disabledBackgroundColor: lateOceanColorPalette.black50,
-    pressedBackgroundColor: lateOceanColorPalette.lateOceanLight1,
-    disabledBorderColor: lateOceanColorPalette.black100
+  transition: {
+    duration: '200ms',
+    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
   },
-  secondary: {
+  default: {
     backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    disabledBackgroundColor: lateOceanColorPalette.black50,
     pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-    disabledBorderColor: lateOceanColorPalette.black100
+    hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+    focusBorderColor: 'rgba(0, 0, 0, 0.1)'
   },
-  subtle: {
-    backgroundColor: lateOceanColorPalette.transparent,
-    disabledBackgroundColor: lateOceanColorPalette.transparent,
-    pressedBackgroundColor: lateOceanColorPalette.transparent,
-    disabledBorderColor: lateOceanColorPalette.transparent
-  },
-  'subtle-dark': {
-    backgroundColor: lateOceanColorPalette.transparent,
-    disabledBackgroundColor: lateOceanColorPalette.transparent,
-    pressedBackgroundColor: lateOceanColorPalette.transparent,
-    disabledBorderColor: lateOceanColorPalette.transparent
+  primary: {
+    backgroundColor: colorsLateOceanTheme.primary,
+    pressedBackgroundColor: colorsLateOceanTheme.primaryLight,
+    hoverBackgroundColor: colorsLateOceanTheme.primaryLight,
+    focusBorderColor: 'rgba(76, 52, 224, 0.2)'
   },
   white: {
     backgroundColor: 'rgba(255, 255, 255, 0.05)',
-    disabledBackgroundColor: lateOceanColorPalette.transparent,
-    hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
     pressedBackgroundColor: 'rgba(255, 255, 255, 0.1)',
-    focusBorderColor: 'rgba(255, 255, 255, 0.1)',
-    disabledBorderColor: lateOceanColorPalette.transparent
+    hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
+    focusBorderColor: 'rgba(255, 255, 255, 0.1)'
+  },
+  subtle: {
+    backgroundColor: colorsLateOceanTheme.transparent,
+    pressedBackgroundColor: colorsLateOceanTheme.transparent,
+    hoverBackgroundColor: colorsLateOceanTheme.transparent,
+    focusBorderColor: 'rgba(76, 52, 224, 0.2)',
+    color: colorsLateOceanTheme.primary,
+    hoverColor: 'rgba(76, 52, 224, 0.8)',
+    activeColor: 'rgba(76, 52, 224, 0.8)'
+  },
+  'subtle-dark': {
+    backgroundColor: colorsLateOceanTheme.transparent,
+    pressedBackgroundColor: colorsLateOceanTheme.transparent,
+    hoverBackgroundColor: colorsLateOceanTheme.transparent,
+    focusBorderColor: 'rgba(0, 0, 0, 0.1)',
+    color: colorsLateOceanTheme.black,
+    hoverColor: 'rgba(0, 0, 0, 0.8)',
+    activeColor: 'rgba(0, 0, 0, 0.8)'
+  },
+  disabled: {
+    backgroundColor: colorsLateOceanTheme.disabled,
+    pressedBackgroundColor: colorsLateOceanTheme.disabled,
+    hoverBackgroundColor: colorsLateOceanTheme.disabled,
+    focusBorderColor: lateOceanColorPalette.black100,
+    borderColor: lateOceanColorPalette.black100
   }
 };
 
@@ -2226,26 +2542,6 @@ const cardLateOceanTheme = {
   }
 };
 
-const colorsLateOceanTheme = {
-  primary: lateOceanColorPalette.lateOcean,
-  primaryLight: lateOceanColorPalette.lateOceanLight1,
-  accent: lateOceanColorPalette.warmEmbrace,
-  accentLight: lateOceanColorPalette.warmEmbraceLight1,
-  success: lateOceanColorPalette.viride,
-  correct: lateOceanColorPalette.viride,
-  danger: lateOceanColorPalette.englishVermillon,
-  separator: lateOceanColorPalette.black100,
-  hover: lateOceanColorPalette.black100,
-  black: lateOceanColorPalette.black1000,
-  uiBackground: lateOceanColorPalette.black25,
-  uiBackgroundLight: lateOceanColorPalette.white,
-  overlay: {
-    dark: 'rgba(41, 48, 51, 0.25)',
-    light: 'rgba(255, 255, 255, 0.90)',
-    fullscreenLoader: 'rgba(0, 0, 0, 0.25)'
-  }
-};
-
 const feedbackMessageLateOceanTheme = {
   backgroundColors: {
     success: lateOceanColorPalette.viride,
@@ -2359,11 +2655,11 @@ const iconButton = {
   },
   disabled: {
     scale: 1,
-    backgroundColor: buttonLateOceanTheme.secondary.disabledBackgroundColor,
-    borderColor: buttonLateOceanTheme.secondary.disabledBorderColor
+    backgroundColor: buttonLateOceanTheme.disabled.backgroundColor,
+    borderColor: buttonLateOceanTheme.disabled.borderColor
   },
   default: {
-    pressedBackgroundColor: buttonLateOceanTheme.secondary.pressedBackgroundColor
+    pressedBackgroundColor: buttonLateOceanTheme.default.pressedBackgroundColor
   },
   white: {
     pressedBackgroundColor: buttonLateOceanTheme.white.hoverBackgroundColor
@@ -2381,6 +2677,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',
@@ -2432,18 +2734,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,
@@ -2525,7 +2825,7 @@ const breakpoints = {
     wideBreakpoint: 'max-width: 1279px'
   }
 }; // eslint-disable-next-line unicorn/expiring-todo-comments
-// TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
+// TODO : seperate brand co lor usage definition from proper theme definition and add t ypings - https://ornikar.atlassian.net/browse/CME-156
 
 const theme = {
   spacing: 4,
@@ -2544,7 +2844,8 @@ const theme = {
   fullScreenModal: fullScreenModalLateOceanTheme,
   iconButton,
   listItem: listItemLateOceanTheme,
-  tooltip
+  tooltip,
+  skeleton: skeletonTheme
 };
 
 function TimePicker() {
@@ -2788,14 +3089,19 @@ function TypographyEmoji({
 
 const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react.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 `
@@ -2823,10 +3129,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",
@@ -2841,23 +3147,35 @@ function TypographyLink({
   });
 }
 
-function matchWindowSize(currentWidth, {
+function matchWindowSize({
+  width,
+  height
+}, {
   minWidth,
-  maxWidth
+  maxWidth,
+  minHeight,
+  maxHeight
 }) {
-  return currentWidth >= minWidth && (!maxWidth || currentWidth <= maxWidth);
+  const hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
+  const hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
+  return hasWidthMatched && hasHeightMatched;
 }
 function useMatchWindowSize(options) {
   const {
-    width
+    width,
+    height
   } = BabelPluginStyledComponentsReactNative.useWindowDimensions();
-  return matchWindowSize(width, options);
+  return matchWindowSize({
+    width,
+    height
+  }, options);
 }
 
-function createWindowSizeHelper(currentWidth) {
+// eslint-disable-next-line no-restricted-imports
+function createWindowSizeHelper(dimensions) {
   return {
-    matchWindowSize: options => matchWindowSize(currentWidth, options),
-    ifWindowSizeMatches: (options, valueIfTrue, valueIfFalse) => matchWindowSize(currentWidth, options) ? valueIfTrue : valueIfFalse,
+    matchWindowSize: options => matchWindowSize(dimensions, options),
+    ifWindowSizeMatches: (options, valueIfTrue, valueIfFalse) => matchWindowSize(dimensions, options) ? valueIfTrue : valueIfFalse,
     mapWindowWidth: (...widthList) => {
       if ((process.env.NODE_ENV !== "production")) {
         widthList.slice(1).forEach(([minWidth], index) => {
@@ -2869,7 +3187,7 @@ function createWindowSizeHelper(currentWidth) {
         });
       }
 
-      const found = widthList.find(([minWidth, value]) => matchWindowSize(currentWidth, {
+      const found = widthList.find(([minWidth, value]) => matchWindowSize(dimensions, {
         minWidth: Number(minWidth)
       }));
       if (!found) return null;
@@ -2879,18 +3197,23 @@ function createWindowSizeHelper(currentWidth) {
 }
 
 function useKittTheme() {
-  const {
-    width
-  } = BabelPluginStyledComponentsReactNative.useWindowDimensions();
+  const dimensions = BabelPluginStyledComponentsReactNative.useWindowDimensions();
   return react$1.useMemo(() => {
     return {
       kitt: theme,
-      responsive: createWindowSizeHelper(width),
+      responsive: createWindowSizeHelper(dimensions),
       breakpoints
     };
-  }, [width]);
+  }, [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
 }) {
@@ -2951,6 +3274,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;
@@ -2958,6 +3282,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;
@@ -2967,6 +3292,7 @@ exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.createWindowSizeHelper = createWindowSizeHelper;
+exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;
 exports.styledTextInputMixin = styledTextInputMixin;
 exports.theme = theme;