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

test() {
        const output = renderComponent(
          
        );

        expect(output).toMatchSnapshot();
      }
    },

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

test() {
        const output = renderComponent(
          
        );

        expect(output).toMatchSnapshot();
      }
    },

flex: 0.26
  },
  summaryContainer: {
    flex: 0.74,
    paddingRight: spacing(4)
  },
  headline: {
    ...mediumBreakpointStyles.headline,
    fontSize: 45,
    lineHeight: 45
  }
};

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

export default breakpoint => stylesResolver[breakpoint];

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

const separatorSpacingResolver = {
  [editionBreakpoints.small]: spacing(2),
  [editionBreakpoints.medium]: spacing(8),
  [editionBreakpoints.wide]: spacing(10),
  [editionBreakpoints.huge]: spacing(22.6)
};

export default breakpoint => ({
  listItemContainer: {
    paddingHorizontal: spacing(2),
    paddingVertical: spacing(2)
  },
  listItemSeparator: {
    backgroundColor: colours.functional.keyline,
    height: 1,
    marginHorizontal: separatorSpacingResolver[breakpoint]
  },
  puzzleBarArrow: {
    paddingLeft: spacing(2),
    paddingTop: spacing(1)

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

const wideBreakpointHeadlineStyles = {
  fontSize: 20,
  lineHeight: 20
};

const hugeBreakpointHeadlineStyles = {
  fontSize: 22,
  lineHeight: 22
};

const styleResolver = {
  [editionBreakpoints.wide]: wideBreakpointHeadlineStyles,
  [editionBreakpoints.huge]: hugeBreakpointHeadlineStyles
};
export default breakpoint => styleResolver[breakpoint];

}
};

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 hugeBreakpointStyles = {
  ...wideBreakpointStyles,
  headline: {
    ...wideBreakpointStyles.headline,
    fontSize: 20,
    lineHeight: 20
  }
};

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

export default breakpoint => stylesResolver[breakpoint];

const wideBreakpointStyle = {
  ...mediumBreakpointStyles,
  title: {
    ...mediumBreakpointStyles.title,
    marginBottom: 0
  },
  titleWrapper: {
    ...mediumBreakpointStyles.titleWrapper,
    marginBottom: spacing(2)
  }
};

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

export default breakpoint => styleResolver[breakpoint];

const TileAL = ({ onPress, tile, breakpoint = editionBreakpoints.wide }) => {
  const crop = getTileImage(tile, "crop32");
  const styles = stylesFactory(breakpoint);

  if (!crop) {
    return null;
  }

  const {
    article: { hasVideo }
  } = tile;

  return (