@ornikar/kitt-universal 3.3.0 → 3.4.0

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

@@ -1,2 +1,2 @@
-@media (hover:none) and (pointer:coarse){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (var(--p1nlccvg-1)){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *,.p1nlccvg > *:focus,.kitt-focus .p1nlccvg > *,.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{background-color:var(--p1nlccvg-4);}.p1nlccvg[data-color-white=true] > *:hover,.kitt-hover .p1nlccvg[data-color-white] > *,.p1nlccvg[data-color-white=true] > *:focus,.kitt-focus .p1nlccvg[data-color-white=true] > *,.p1nlccvg[data-color-white=true] > *:active,.kitt-active .p1nlccvg[data-color-white=true] > *{background-color:var(--p1nlccvg-5);}
-.tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:none;text-decoration:none;}.tcwz3nt[data-nounderline] > *:hover,.tcwz3nt[data-nounderline] > *:active,.kitt-hover .tcwz3nt[data-nounderline] > *{-webkit-text-decoration:underline;text-decoration:underline;}
+@media (hover:none) and (pointer:coarse){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (var(--p1nlccvg-1)){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.p1nlccvg,.p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *,.p1nlccvg > *:focus,.kitt-focus .p1nlccvg > *,.p1nlccvg > [data-focusvisible-polyfill],.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{background-color:var(--p1nlccvg-4);}
+.tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:none;text-decoration:none;}.tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:var(--tcwz3nt-0);text-decoration:var(--tcwz3nt-0);}

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

@@ -204,6 +204,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,
@@ -215,16 +229,21 @@ function Typography({
   ...otherProps
 }) {
   const isHeaderTypographyInContext = react.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,
@@ -232,7 +251,7 @@ function Typography({
       ...otherProps
     })
   }) : /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
-    $color: colorWithDefaultToBlack,
+    $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
     accessibilityRole: accessibilityRole || undefined,
@@ -1390,11 +1409,16 @@ const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("di
       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.Pressable.withConfig({
@@ -1438,7 +1462,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
     })
   });
@@ -3249,14 +3273,19 @@ function TypographyEmoji({
 
 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.Text.withConfig({
   displayName: "TypographyLink__StyledLink",
   componentId: "kitt-universal__sc-1o1zy30-0"
 })(["text-decoration:", ";", ";", ";"], ({
-  $noUnderline
-}) => $noUnderline ? 'none' : 'underline', ({
+  $hasNoUnderline
+}) => $hasNoUnderline ? 'none' : 'underline', ({
   $disabled
 }) => {
   if (reactNative.Platform.OS !== 'web') return undefined;
@@ -3285,10 +3314,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",