How to use the @times-components/styleguide.editionBreakpoints.huge function in @times-components/styleguide

test() {
        const output = renderComponent(
          
        );

        expect(output).toMatchSnapshot();
      }
    }

it("huge", () => {
      testTile(TileG, editionBreakpoints.huge);
    });

it("huge", () => {
      testTile(TileAR, editionBreakpoints.huge);
    });

flexDirection: "row"
  },
  itemColSeparator: {
    borderColor: colours.functional.keyline,
    borderRightWidth: 1,
    borderStyle: "solid",
    marginTop: spacing(6),
    marginBottom: spacing(12)
  }
};

const stylesResolver = {
  [editionBreakpoints.small]: smallBreakpointStyles,
  [editionBreakpoints.medium]: mediumBreakpointStyles,
  [editionBreakpoints.wide]: wideBreakpointStyles,
  [editionBreakpoints.huge]: wideBreakpointStyles
};

export default breakpoint => stylesResolver[breakpoint];

{({ editionBreakpoint }) => {
      switch (editionBreakpoint) {
        case editionBreakpoints.small:
          return renderSmall(editionBreakpoint);
        case editionBreakpoints.medium:
          return {renderMedium(editionBreakpoint)};
        case editionBreakpoints.wide:
          return (
            
              {(renderWide && renderWide(editionBreakpoint)) ||
                (renderMedium && renderMedium(editionBreakpoint))}
            
          );
        case editionBreakpoints.huge:
          return (
            
              
                {(renderHuge && renderHuge(editionBreakpoint)) ||
                  (renderWide && renderWide(editionBreakpoint)) ||
                  (renderMedium && renderMedium(editionBreakpoint))}
              
            
          );
        default:
          return renderSmall(editionBreakpoint);
      }
    }}

import { spacing, editionBreakpoints } from "@times-components/styleguide";

const keylinePadding = {
  [editionBreakpoints.medium]: spacing(2),
  [editionBreakpoints.wide]: spacing(3),
  [editionBreakpoints.huge]: spacing(3)
};

const styles = breakpoint => ({
  container: {
    alignItems: "center",
    padding: spacing(2),
    paddingLeft: keylinePadding[breakpoint]
  },
  imageContainer: {
    width: "100%"
  }
});

export default styles;

};

const hugeBreakpointStyles = {
  ...wideBreakpointStyles,
  headline: {
    ...wideBreakpointStyles.headline,
    fontSize: 35,
    lineHeight: 35
  }
};

const stylesResolver = {
  [editionBreakpoints.small]: smallBreakpointStyles,
  [editionBreakpoints.medium]: mediumBreakpointStyles,
  [editionBreakpoints.wide]: wideBreakpointStyles,
  [editionBreakpoints.huge]: hugeBreakpointStyles
};

export default breakpoint => stylesResolver[breakpoint];

};

const wideBreakpointStyles = {
  ...defaultBreakpointStyles,
  container: {
    flex: 1,
    flexDirection: "row",
    paddingHorizontal: spacing(2),
    paddingVertical: spacing(1)
  }
};

const stylesResolver = {
  [editionBreakpoints.medium]: defaultBreakpointStyles,
  [editionBreakpoints.wide]: wideBreakpointStyles,
  [editionBreakpoints.huge]: wideBreakpointStyles
};

export default breakpoint => stylesResolver[breakpoint];

}
};

const wideBreakpointStyles = {
  ...mediumBreakpointStyles,
  container: {
    ...mediumBreakpointStyles.container,
    marginHorizontal: spacing(4)
  }
};

const breakPointsStyles = {
  [editionBreakpoints.small]: smallBreakpointStyles,
  [editionBreakpoints.medium]: mediumBreakpointStyles,
  [editionBreakpoints.wide]: wideBreakpointStyles,
  [editionBreakpoints.huge]: wideBreakpointStyles
};

export default breakpoint => breakPointsStyles[breakpoint];

relativeHorizontalOffset={crop.relativeHorizontalOffset}
          relativeVerticalOffset={crop.relativeVerticalOffset}
          style={styles.imageContainer}
          uri={crop.url}
          fill
          hasVideo={hasVideo}
        />
        
      
      {breakpoint !== editionBreakpoints.huge ? (
        
      ) : null}
    
  );
};