@ornikar/kitt-universal 29.4.1-canary.cbb5dfd9b37cae9e4b2943cbcdd994e53c1d96d8.0 → 29.4.1

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

@@ -3080,6 +3080,7 @@ const getTypographyTypeWithAncestorValue = (type, typographyTypeInContext) => {
 
 const TypographyFamilyContext = /*#__PURE__*/react.createContext(null);
 const TypographyTypeContext = /*#__PURE__*/react.createContext(null);
+const TypographyVariantContext = /*#__PURE__*/react.createContext(undefined);
 const TypographyColorContext = /*#__PURE__*/react.createContext('black');
 function useTypographyColor() {
   return react.useContext(TypographyColorContext);
@@ -3205,24 +3206,36 @@ const TypographyBase = /*#__PURE__*/react.forwardRef(({
   ...otherProps
 }, ref) => {
   const sx = nativeBase.useSx();
+
+  // ancestors
   const typographyFamilyInContext = react.useContext(TypographyFamilyContext);
   const typographyTypeInContext = react.useContext(TypographyTypeContext);
-  const defaultColor = useTypographyDefaultColor();
+  const typographyVariantInContext = react.useContext(TypographyVariantContext);
+
+  // family
   const hasTypographyAncestor = typographyFamilyInContext !== null;
   const typographyType = getTypographyTypeWithAncestorValue(type, typographyTypeInContext);
   const baseOrDefaultToBody = typographyType.base ?? 'body-m';
   const typographyFamily = getTypographyFamilyWithAncestorValue(baseOrDefaultToBody, typographyFamilyInContext);
+
+  // size
   const fontSizeForNativeBase = createNativeBaseFontSize({
     ...type,
     base: baseOrDefaultToBody
   });
+
+  // weight
+
   const {
     webFontWeight,
     nativeFontFamily
   } = getUniversalFontWeight({
     ...type,
     base: baseOrDefaultToBody
-  }, variant, typographyFamily);
+  }, !variant && typographyType === typographyTypeInContext ? typographyVariantInContext : variant, typographyFamily);
+
+  // color
+  const defaultColor = useTypographyDefaultColor();
   const currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
   const currentColorValue = getTypographyColorValue(currentColor);
   const colorStyles = sx({
@@ -3247,11 +3260,14 @@ const TypographyBase = /*#__PURE__*/react.forwardRef(({
     ...colorStyles,
     ...otherProps
   });
-  const content = baseOrDefaultToBody ? /*#__PURE__*/jsxRuntime.jsx(TypographyFamilyContext.Provider, {
-    value: typographyFamily,
-    children: /*#__PURE__*/jsxRuntime.jsx(TypographyTypeContext.Provider, {
-      value: typographyType,
-      children: text
+  const content = baseOrDefaultToBody ? /*#__PURE__*/jsxRuntime.jsx(TypographyVariantContext.Provider, {
+    value: variant,
+    children: /*#__PURE__*/jsxRuntime.jsx(TypographyFamilyContext.Provider, {
+      value: typographyFamily,
+      children: /*#__PURE__*/jsxRuntime.jsx(TypographyTypeContext.Provider, {
+        value: typographyType,
+        children: text
+      })
     })
   }) : text;
   return color ? /*#__PURE__*/jsxRuntime.jsx(TypographyColorContext.Provider, {