How to use the baseui.createTheme function in baseui

import { StatefulTextarea as Textarea } from 'baseui/textarea';
import { ToasterContainer, Toast, KIND as TOAST_KIND } from 'baseui/toast';
import { StatefulTooltip } from 'baseui/tooltip';
import {
    Label1,
    Label2,
    Caption1,
    Caption2,
    Paragraph1,
    Paragraph2,
} from 'baseui/typography';
import { PaymentCard, StatefulPaymentCard } from 'baseui/payment-card';
import { PhoneInput, StatefulPhoneInput, COUNTRIES } from 'baseui/phone-input';

// Base API
const newTheme = createTheme({...lightThemePrimitives}, {}); // $ExpectType Theme
createTheme({primary: 'red'}, {}); // $ExpectError

mergeOverrides({style: {}}, {props: {}});
mergeOverrides({style: {}}, 'hello'); // $ExpectError
mergeOverrides({style: {}}, {name: 'override'}); // $ExpectError

styled(StyledProgressSteps, { marginTop: '10px' });
styled(StyledProgressSteps, { marginTop: null }); // $ExpectError
styled(StyledProgressSteps, ({ $theme }) => ({ marginTop: '10px' }));
const StyledAnchor = styled('a', { marginTop: '10px' });
const NewStyledProgressSteps = styled(
    StyledProgressSteps,
    ({ $theme, $disabled }) => ({ marginTop: '10px' })
);

;

queryComplete(data) {
    const {children} = this.props;
    const {config} = data.site.siteMetadata;
    const {tableOfContents, allMarkdown} = data;

    // console.log('StaticQuery result', config, tableOfContents, allMarkdown);
    const themeFromConfig = ((config && config.THEME_OVERRIDES) || []).reduce(
      (prev, curr) => ({...prev, [curr.key]: curr.value}),
      {}
    );

    const theme = createTheme({...lightThemePrimitives, ...themeFromConfig});

    return (
      
        <div style="{{position:">{children}</div>
      
    );
  }

font450: { ...fontStyles }, // Radio
    font460: { ...fontStyles }, // Calendar header buttons
    font470: { ...fontStyles }, // Button
    font500: { ...fontStyles }, // Selected items in selectbox
    font600: {},
  },

  colors: {
    white: white,
    black: black,
    tickMarkFillDisabled: grayLighter,
    tickFillDisabled: gray,
  },
}

export const mainWidgetTheme = createTheme(mainThemePrimitives, themeOverrides)

export const sidebarWidgetTheme = createTheme(
  {
    ...mainThemePrimitives,

    // Override gray values based on what is actually used in BaseWeb, and the
    // way we want it to match our Bootstrap theme.
    mono100: white, // Popup menu
    mono200: white, // Text input, text area, selectbox
    mono300: white, // Disabled widget background
    mono400: grayLight, // Slider track
  },
  themeOverrides
)

// Log the widget theme just for debug purposes.

font470: { ...fontStyles }, // Button
    font500: { ...fontStyles }, // Selected items in selectbox
    font600: {},
  },

  colors: {
    white: white,
    black: black,
    tickMarkFillDisabled: grayLighter,
    tickFillDisabled: gray,
  },
}

export const mainWidgetTheme = createTheme(mainThemePrimitives, themeOverrides)

export const sidebarWidgetTheme = createTheme(
  {
    ...mainThemePrimitives,

    // Override gray values based on what is actually used in BaseWeb, and the
    // way we want it to match our Bootstrap theme.
    mono100: white, // Popup menu
    mono200: white, // Text input, text area, selectbox
    mono300: white, // Disabled widget background
    mono400: grayLight, // Slider track
  },
  themeOverrides
)

// Log the widget theme just for debug purposes.
logMessage("mainWidgetTheme", mainWidgetTheme)
logMessage("sidebarWidgetTheme", sidebarWidgetTheme)

import * as React from 'react';
import {StatefulPagination} from 'baseui/pagination';

import {createTheme, lightThemePrimitives} from 'baseui';
import {ThemeProvider} from 'baseui';
import ArrowLeft from 'baseui/icon/arrow-left';

const themeWithIcons = createTheme(
  {
    ...lightThemePrimitives,
  },
  {
    icons: {
      ChevronLeft: ArrowLeft,
    },
  },
);

export default () => (
  
    
  
);