@ornikar/kitt-universal 3.3.0 → 3.4.0

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

@@ -1,5 +1,5 @@
 .ssn8o83{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}.ssn8o83 > svg{-webkit-animation:spin-ssn8o83 1.1s infinite linear;animation:spin-ssn8o83 1.1s infinite linear;}@-webkit-keyframes spin-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-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);}}
 .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 (var(--a1vkj3mh-2)){.kitt-hover .a1vkj3mh > * > *,.a1vkj3mh:hover > * > *{-webkit-transform:scale(var(--a1vkj3mh-3));-ms-transform:scale(var(--a1vkj3mh-3));transform:scale(var(--a1vkj3mh-3));}}.kitt-active .a1vkj3mh > * > *,.a1vkj3mh:active > * > *{-webkit-transform:var(--a1vkj3mh-4);-ms-transform:var(--a1vkj3mh-4);transform:var(--a1vkj3mh-4);}.kitt-active .a1vkj3mh > * > *,.a1vkj3mh:active > * > *,.kitt-hover .a1vkj3mh > * > *,.a1vkj3mh:hover > * > *{background:var(--a1vkj3mh-5);}.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);}.a1vkj3mh > * > *::after,.a1vkj3mh > * > *::before{content:'';position:absolute;border-radius:var(--a1vkj3mh-7);-webkit-transition:var(--a1vkj3mh-8);transition:var(--a1vkj3mh-8);}.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);}.a1vkj3mh > * > *::before{opacity:0;border:var(--a1vkj3mh-15);width:100%;height:100%;top:var(--a1vkj3mh-16);left:var(--a1vkj3mh-16);}.kitt-focus .a1vkj3mh > *,.a1vkj3mh:focus > *,.a1vkj3mh > [data-focusvisible-polyfill]{outline:none;}.kitt-focus .a1vkj3mh > * > *::before,.a1vkj3mh:focus > * > *::before,.a1vkj3mh > [data-focusvisible-polyfill] > *::before{opacity:1;}.kitt-hover .a1vkj3mh > * > *::before,.a1vkj3mh:hover > * > *::before,.kitt-active .a1vkj3mh > * > *::before,.a1vkj3mh:active > * > *::before{opacity:0;}.a1vkj3mh > *{color:var(--a1vkj3mh-18);}.kitt-hover .a1vkj3mh > *,.a1vkj3mh:hover > *{color:var(--a1vkj3mh-19);}.kitt-active .a1vkj3mh > *,.a1vkj3mh:active > *{color:var(--a1vkj3mh-20);}
-@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);}
+@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);}
 .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-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@keyframes LargeLoaderInit-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}}@-webkit-keyframes LargeLoaderOffset-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@keyframes LargeLoaderOffset-l2im3sa{0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}}@-webkit-keyframes LargeLoaderRotation-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-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);}}.l2im3sa circle,.l2im3sa g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.l2im3sa circle{stroke-width:3px;stroke-dasharray:169.64px;stroke-dashoffset:169.64px;stroke-linecap:round;}.l2im3sa g[data-large-loader='base'] circle{stroke:var(--l2im3sa-0);-webkit-animation:LargeLoaderInit-l2im3sa 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;animation:LargeLoaderInit-l2im3sa 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;}.l2im3sa g[data-large-loader='fill']{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-animation:LargeLoaderRotation-l2im3sa 1.8s linear 0.5s infinite;animation:LargeLoaderRotation-l2im3sa 1.8s linear 0.5s infinite;}.l2im3sa g[data-large-loader='fill'] circle{stroke:var(--l2im3sa-1);-webkit-animation:LargeLoaderOffset-l2im3sa 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,LargeLoaderRotation-l2im3sa 2.16s linear 0.5s infinite;animation:LargeLoaderOffset-l2im3sa 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,LargeLoaderRotation-l2im3sa 2.16s linear 0.5s infinite;}
-.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;}
+.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.web.js

@@ -197,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,
@@ -208,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,
@@ -225,7 +244,7 @@ function Typography({
       ...otherProps
     })
   }) : /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
-    $color: colorWithDefaultToBlack,
+    $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
     accessibilityRole: accessibilityRole || undefined,
@@ -1328,11 +1347,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 +1395,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
     })
   });
@@ -2982,14 +3006,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 `
@@ -3017,10 +3046,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",