How to use the theming.withTheme function in theming

colorTextPrimary: {theme.colorTextPrimary}
    <br>
    fontFamily: {theme.fontFamily}
    <br>
    lineHeightText: {theme.lineHeightText}
    <br>
  
);

// We're passing a default theme for Component that aren't wrapped in the ThemeProvider
ComponentWithTheme.defaultProps = {
  theme: tokens,
};

// Themed component cannot be used without ThemeProvider
const ThemedComponent = withTheme(ComponentWithTheme);
ThemedComponent.displayName = "ThemedComponent";

export { ThemedComponent as default, ComponentWithTheme as RawComponent };

const customTheme = {
  color: {
    primary: "red",
    secondary: "blue"
  }
};
type CustomTheme = typeof customTheme;

interface DemoBoxProps {
  text: string;
  theme: CustomTheme;
}
const DemoBox = ({ text, theme }: DemoBoxProps) => {
  return <div style="{{">{text}</div>;
};
const ThemedDemoBox = withTheme(DemoBox);
const renderDemoBox = () =&gt; ;

const App = () =&gt; {
  return (
    
      
    
  );
};

const AugmentedApp = () =&gt; {
  return (
    
       ({ ...outerTheme, augmented: true })}&gt;

import React from 'react'
import Base from '../src'
import { withTheme } from 'theming'

const Button = withTheme(({ theme, ...props }) =>