How to use the @patternfly/react-tokens.global_breakpoint_lg.value function in @patternfly/react-tokens

lg: global_BoxShadow_lg && global_BoxShadow_lg.var,
    lg_left: global_BoxShadow_lg_left && global_BoxShadow_lg_left.var,
    lg_right: global_BoxShadow_lg_right && global_BoxShadow_lg_right.var,
    lg_bottom: global_BoxShadow_lg_bottom && global_BoxShadow_lg_bottom.var,
    lg_top: global_BoxShadow_lg_top && global_BoxShadow_lg_top.var,
    inset: global_BoxShadow_inset && global_BoxShadow_inset.var
  }
};

export const StyledTheme = {
  // Array of viewport widths to use for min-width media queries
  // Need to use values here as it won't work otherwise. Can still be overridden by defining own theme with breakpoints.
  breakpoints: [
    global_breakpoint_sm && global_breakpoint_sm.value, // min-width 576px
    global_breakpoint_md && global_breakpoint_md.value, // min-width 768px
    global_breakpoint_lg && global_breakpoint_lg.value, // min-width 992px
    global_breakpoint_xl && global_breakpoint_xl.value // min-width 1200px
  ],

  // Array or Object: Values for borderRadius props
  radii: {
    sm: global_BorderRadius_sm && global_BorderRadius_sm.var,
    lg: global_BorderRadius_lg && global_BorderRadius_lg.var
  },

  // 	Array of numbers to use as a typographic scale
  fontSizes: [
    global_FontSize_xs && global_FontSize_xs.var,
    global_FontSize_sm && global_FontSize_sm.var,
    global_FontSize_md && global_FontSize_md.var,
    global_FontSize_lg && global_FontSize_lg.var,
    global_FontSize_xl && global_FontSize_xl.var,

isContentPopup = () => {
    const viewportSize = window.innerWidth;
    const lgBreakpointValue = parseInt(globalBreakpointLg.value);
    return viewportSize < lgBreakpointValue;
  };

Skip to Content
    
  );
  const [isMobileView, setIsMobileView] = React.useState(false);
  const [isNavOpenMobile, setIsNavOpenMobile] = React.useState(false);
  const onNavToggleMobile = () => {
    setIsNavOpenMobile(!isNavOpenMobile);
  };
  const [curViewportWidth, setCurViewportWidth] = React.useState(1024);
  const onPageResize = (props: { mobileView: boolean; windowSize: number }) => {
    setIsMobileView(props.mobileView);
    setCurViewportWidth(props.windowSize);
  };
  const [isTabletView, setIsTabletView] = React.useState(false);
  const LARGE_VIEWPORT_BREAKPOINT = parseInt(
    global_breakpoint_lg.value.substring(
      0,
      global_breakpoint_lg.value.indexOf('px')
    ),
    10
  );
  React.useEffect(() => {
    setIsTabletView(curViewportWidth <= LARGE_VIEWPORT_BREAKPOINT);
  }, [curViewportWidth]);
  return (

);
  const [isMobileView, setIsMobileView] = React.useState(false);
  const [isNavOpenMobile, setIsNavOpenMobile] = React.useState(false);
  const onNavToggleMobile = () => {
    setIsNavOpenMobile(!isNavOpenMobile);
  };
  const [curViewportWidth, setCurViewportWidth] = React.useState(1024);
  const onPageResize = (props: { mobileView: boolean; windowSize: number }) => {
    setIsMobileView(props.mobileView);
    setCurViewportWidth(props.windowSize);
  };
  const [isTabletView, setIsTabletView] = React.useState(false);
  const LARGE_VIEWPORT_BREAKPOINT = parseInt(
    global_breakpoint_lg.value.substring(
      0,
      global_breakpoint_lg.value.indexOf('px')
    ),
    10
  );
  React.useEffect(() => {
    setIsTabletView(curViewportWidth <= LARGE_VIEWPORT_BREAKPOINT);
  }, [curViewportWidth]);
  return (

export const globalBreakpoints = (breakpoint: string) => {
  const breakpoints: { [key: string]: number } = {
    md: parseInt(globalBreakpointMd.value),
    lg: parseInt(globalBreakpointLg.value),
    xl: parseInt(globalBreakpointXl.value),
    '2xl': parseInt(globalBreakpoint2xl.value)
  };
  return breakpoints[breakpoint];
};

export const DashboardGrid: React.FC = ({
  mainCards,
  leftCards = [],
  rightCards = [],
}) => {
  const [containerRef, width] = useRefWidth();
  const grid =
    width <= parseInt(breakpointLG.value, 10) ? (
      
        
          {mapCardsToGrid(mainCards, 'main', true)}
        
        
          {mapCardsToGrid(leftCards, 'left', true)}
        
        
          {mapCardsToGrid(rightCards, 'right', true)}
        
      
    ) : (
      
        
          {mapCardsToGrid(leftCards, 'left')}