@ornikar/kitt-universal 3.3.0 → 3.4.0

package/dist/index-browser-all.es.web.js

@@ -194,34 +194,53 @@ function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
   if (small && width >= KittBreakpoints.SMALL) return small;
   return base;
 }
-function Typography(_ref3) {
-  var accessibilityRole = _ref3.accessibilityRole,
-      base = _ref3.base,
-      small = _ref3.small,
-      medium = _ref3.medium,
-      large = _ref3.large,
-      variant = _ref3.variant,
-      color = _ref3.color,
-      otherProps = _objectWithoutProperties(_ref3, _excluded$e);
+function getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypographyAncestor, _ref3) {
+  var base = _ref3.base,
+      color = _ref3.color;
+  // return the props set or undefined. In case of undefined, the value will be inherited from its parents.
+  if (hasTypographyAncestor) return {
+    base: base,
+    color: color
+  };
+  return {
+    base: base !== null && base !== void 0 ? base : 'body',
+    color: color !== null && color !== void 0 ? color : 'black'
+  };
+}
+function Typography(_ref4) {
+  var accessibilityRole = _ref4.accessibilityRole,
+      base = _ref4.base,
+      small = _ref4.small,
+      medium = _ref4.medium,
+      large = _ref4.large,
+      variant = _ref4.variant,
+      color = _ref4.color,
+      otherProps = _objectWithoutProperties(_ref4, _excluded$e);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
-  var typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
-  var isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
-  var nonNullableVariant = variant !== null && variant !== void 0 ? 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
+  var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
 
-  var colorWithDefaultToBlack = color !== null && color !== void 0 ? color : isHeaderTypographyInContext !== undefined ? undefined : 'black';
-  var content = base ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
+  var _getTypographyInherit = getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypographyAncestor, {
+    base: base,
+    color: color
+  }),
+      baseOrDefaultToBody = _getTypographyInherit.base,
+      colorOrDefaultToBlack = _getTypographyInherit.color;
+
+  var typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(baseOrDefaultToBody, small, medium, large);
+  var isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
+  var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
+  var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
     children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$g({
-      $color: colorWithDefaultToBlack,
+      $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
   }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$g({
-    $color: colorWithDefaultToBlack,
+    $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
     accessibilityRole: accessibilityRole || undefined
@@ -1449,30 +1468,31 @@ var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled("div")({
       return theme.kitt.iconButton.scale.base.active;
     }],
     "p1nlccvg-4": [function (_ref5) {
-      var theme = _ref5.theme;
-      return theme.kitt.iconButton["default"].pressedBackgroundColor;
-    }],
-    "p1nlccvg-5": [function (_ref6) {
-      var theme = _ref6.theme;
-      return theme.kitt.iconButton.white.pressedBackgroundColor;
+      var theme = _ref5.theme,
+          $isWhite = _ref5.$isWhite;
+      var _theme$kitt$iconButto = theme.kitt.iconButton,
+          white = _theme$kitt$iconButto.white,
+          defaultIconButton = _theme$kitt$iconButto["default"];
+      if ($isWhite) return white.pressedBackgroundColor;
+      return defaultIconButton.pressedBackgroundColor;
     }]
   }
 }));
 var StyledPressableIconButton = /*#__PURE__*/styled$1(Pressable).withConfig({
   displayName: "PressableIconButton__StyledPressableIconButton",
   componentId: "kitt-universal__sc-1m6jo3s-0"
-})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref7) {
-  var theme = _ref7.theme;
+})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref6) {
+  var theme = _ref6.theme;
   return theme.kitt.iconButton.borderRadius;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.iconButton.width;
 }, function (_ref8) {
   var theme = _ref8.theme;
-  return theme.kitt.iconButton.width;
-}, function (_ref9) {
-  var theme = _ref9.theme;
   return theme.kitt.iconButton.height;
-}, function (_ref10) {
-  var theme = _ref10.theme,
-      disabled = _ref10.disabled;
+}, function (_ref9) {
+  var theme = _ref9.theme,
+      disabled = _ref9.disabled;
   var iconButton = theme.kitt.iconButton;
   var transition = iconButton.transition;
 
@@ -1482,13 +1502,13 @@ var StyledPressableIconButton = /*#__PURE__*/styled$1(Pressable).withConfig({
 
   return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n    ");
 });
-function PressableIconButton(_ref11) {
-  var color = _ref11.color,
-      props = _objectWithoutProperties(_ref11, _excluded$6);
+function PressableIconButton(_ref10) {
+  var color = _ref10.color,
+      props = _objectWithoutProperties(_ref10, _excluded$6);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
-    "data-color-white": color === 'white' ? true : undefined,
+    $isWhite: color === 'white',
     children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$7({}, props))
   });
 }
@@ -3196,40 +3216,46 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled("span")({
   name: "TypographyLinkWebWrapper",
-  "class": "tcwz3nt"
+  "class": "tcwz3nt",
+  vars: {
+    "tcwz3nt-0": [function (_ref) {
+      var $hasNoUnderline = _ref.$hasNoUnderline;
+      return $hasNoUnderline ? 'underline' : 'none';
+    }]
+  }
 }));
 var StyledLink = /*#__PURE__*/styled$1(Text$1).withConfig({
   displayName: "TypographyLink__StyledLink",
   componentId: "kitt-universal__sc-1o1zy30-0"
-})(["text-decoration:", ";", ";", ";"], function (_ref) {
-  var $noUnderline = _ref.$noUnderline;
-  return $noUnderline ? 'none' : 'underline';
-}, function (_ref2) {
-  var $disabled = _ref2.$disabled;
-  return "\n      text-decoration-color: inherit;\n      transition: color 0.2s ease-in-out;\n      cursor: ".concat($disabled ? 'not-allowed' : 'pointer', ";\n    ");
+})(["text-decoration:", ";", ";", ";"], function (_ref2) {
+  var $hasNoUnderline = _ref2.$hasNoUnderline;
+  return $hasNoUnderline ? 'none' : 'underline';
 }, function (_ref3) {
-  var $disabled = _ref3.$disabled,
-      theme = _ref3.theme;
+  var $disabled = _ref3.$disabled;
+  return "\n      text-decoration-color: inherit;\n      transition: color 0.2s ease-in-out;\n      cursor: ".concat($disabled ? 'not-allowed' : 'pointer', ";\n    ");
+}, function (_ref4) {
+  var $disabled = _ref4.$disabled,
+      theme = _ref4.theme;
   if (!$disabled) return undefined;
   return "color: ".concat(theme.kitt.typography.link.disabledColor, ";");
 });
-function TypographyLink(_ref4) {
-  var children = _ref4.children,
-      disabled = _ref4.disabled,
-      noUnderline = _ref4.noUnderline,
-      href = _ref4.href,
-      hrefAttrs = _ref4.hrefAttrs,
-      onPress = _ref4.onPress,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$1);
+function TypographyLink(_ref5) {
+  var children = _ref5.children,
+      disabled = _ref5.disabled,
+      noUnderline = _ref5.noUnderline,
+      href = _ref5.href,
+      hrefAttrs = _ref5.hrefAttrs,
+      onPress = _ref5.onPress,
+      otherProps = _objectWithoutProperties(_ref5, _excluded$1);
 
   return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, otherProps), {}, {
     accessibilityRole: "none",
     children: /*#__PURE__*/jsx(StyleWebWrapper, {
       as: TypographyLinkWebWrapper,
-      "data-nounderline": noUnderline ? true : undefined,
+      $hasNoUnderline: noUnderline,
       children: /*#__PURE__*/jsx(StyledLink, {
         $disabled: disabled,
-        $noUnderline: noUnderline,
+        $hasNoUnderline: noUnderline,
         href: href,
         hrefAttrs: hrefAttrs,
         accessibilityRole: "link",