How to use the bpk-component-icon.withAlignment function in bpk-component-icon

icon: ComponentsIcon,
  },
  GITHUB: {
    title: 'GitHub',
    link: 'https://github.com/Skyscanner/backpack',
    external: true,
  },
};

const BpkAlignedArrowDown = withAlignment(
  BpkLargeArrowDown,
  lineHeightLg,
  iconSizeLg,
);

const BpkAlignedArrowUp = withAlignment(
  BpkLargeArrowUp,
  lineHeightLg,
  iconSizeLg,
);

const omitActiveSection = activeSection => omit(sections, activeSection);

type SectionListItemProps = {
  link: string,
  external: boolean,
  navigateOnClick: boolean,
  title: string,
  onClick: () => mixed,
};

const SectionListItem = (props: SectionListItemProps) => {

link: ROUTES.STYLE_GUIDE,
    icon: StyleGuideIcon,
  },
  COMPONENTS: {
    title: 'Components',
    link: ROUTES.COMPONENTS,
    icon: ComponentsIcon,
  },
  GITHUB: {
    title: 'GitHub',
    link: 'https://github.com/Skyscanner/backpack',
    external: true,
  },
};

const BpkAlignedArrowDown = withAlignment(
  BpkLargeArrowDown,
  lineHeightLg,
  iconSizeLg,
);

const BpkAlignedArrowUp = withAlignment(
  BpkLargeArrowUp,
  lineHeightLg,
  iconSizeLg,
);

const omitActiveSection = activeSection => omit(sections, activeSection);

type SectionListItemProps = {
  link: string,
  external: boolean,

* See the License for the specific language governing permissions and
 * limitations under the License.
 */

import PropTypes from 'prop-types';
import React from 'react';
import AnimateHeight from 'bpk-animate-height';
import { cssModules } from 'bpk-react-utils';
import BpkSmallExclamationIcon from 'bpk-component-icon/sm/exclamation-circle';
import { withAlignment } from 'bpk-component-icon';
import { lineHeightBase, iconSizeSm } from 'bpk-tokens/tokens/base.es6';

import STYLES from './BpkFormValidation.scss';

const getClassName = cssModules(STYLES);
const AlignedExclamationIcon = withAlignment(
  BpkSmallExclamationIcon,
  lineHeightBase,
  iconSizeSm,
);

const BpkFormValidation = props => {
  const {
    children,
    expanded,
    isCheckbox,
    className,
    containerProps,
    ...rest
  } = props;

  const classNames = getClassName(

import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import Heading from '../../components/Heading';
import Paragraph from '../../components/Paragraph';
import IntroBlurb from '../../components/IntroBlurb';
import Code from '../../components/Code';
import CodeBlock from '../../components/CodeBlock';
import * as ROUTES from '../../constants/routes';

const AlignedBaseArrow = withAlignment(
  LongArrowRightIconSm,
  lineHeightBase,
  iconSizeSm,
);
const AlignedLargeArrow = withAlignment(
  LongArrowRightIcon,
  lineHeightLg,
  iconSizeLg,
);
const AlignedButtonArrow = withButtonAlignment(LongArrowRightIconSm);
const AlignedLargeButtonArrow = withLargeButtonAlignment(LongArrowRightIcon);
const AlignedSpan = withAlignment('span', iconSizeLg, lineHeightBase);
const AlignedSpanSmall = withAlignment('span', iconSizeLg, lineHeightSm);

const components = [
  {
    id: 'withinBase',
    title: 'Icon alignment within text with textStyle "base"',
    blurb: [
      
        Aligning an icon within text with textStyle "base" can be done

import * as ROUTES from '../../constants/routes';

const AlignedBaseArrow = withAlignment(
  LongArrowRightIconSm,
  lineHeightBase,
  iconSizeSm,
);
const AlignedLargeArrow = withAlignment(
  LongArrowRightIcon,
  lineHeightLg,
  iconSizeLg,
);
const AlignedButtonArrow = withButtonAlignment(LongArrowRightIconSm);
const AlignedLargeButtonArrow = withLargeButtonAlignment(LongArrowRightIcon);
const AlignedSpan = withAlignment('span', iconSizeLg, lineHeightBase);
const AlignedSpanSmall = withAlignment('span', iconSizeLg, lineHeightSm);

const components = [
  {
    id: 'withinBase',
    title: 'Icon alignment within text with textStyle "base"',
    blurb: [
      
        Aligning an icon within text with textStyle "base" can be done
        using
        <code>withAlignment</code>, providing suitable spacings (see the{' '}
        Typesetting section).
      ,
      Using the HOC is done as follows:,
      
        {`import LongArrowRightIconSm from 'bpk-component-icon/sm/long-arrow-right';
import { withAlignment } from 'bpk-component-icon';

import React from 'react';
import { cssModules } from 'bpk-react-utils';
import BpkRtlToggle from 'bpk-component-rtl-toggle';
import BpkGridToggle from 'bpk-component-grid-toggle';
import BpkThemeToggle from 'bpk-component-theme-toggle';
import BpkHeartIcon from 'bpk-component-icon/sm/heart';
import { withAlignment, withDescription } from 'bpk-component-icon';
import { lineHeightSm, iconSizeSm } from 'bpk-tokens/tokens/base.es6';
import BpkLink from 'bpk-component-link';

import STYLES from './Footer.scss';

const getClassName = cssModules(STYLES);

const AlignedHeart = withDescription(
  withAlignment(BpkHeartIcon, lineHeightSm, iconSizeSm),
  'love',
);

const Footer = () => (
  <div>
    <div>
      <span>
        Made with{' '}
         by{' '}
        
          Skyscanner
        {' '}
        © {new Date().getFullYear()}
      </span>
      <div>
        <div></div></div></div></div>

import BpkButton from 'bpk-component-button';
import BpkText from 'bpk-component-text';
import LongArrowRightIcon from 'bpk-component-icon/lg/long-arrow-right';
import LongArrowRightIconSm from 'bpk-component-icon/sm/long-arrow-right';
import AwardIcon from 'bpk-component-icon/lg/award';

import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import Heading from '../../components/Heading';
import Paragraph from '../../components/Paragraph';
import IntroBlurb from '../../components/IntroBlurb';
import Code from '../../components/Code';
import CodeBlock from '../../components/CodeBlock';
import * as ROUTES from '../../constants/routes';

const AlignedBaseArrow = withAlignment(
  LongArrowRightIconSm,
  lineHeightBase,
  iconSizeSm,
);
const AlignedLargeArrow = withAlignment(
  LongArrowRightIcon,
  lineHeightLg,
  iconSizeLg,
);
const AlignedButtonArrow = withButtonAlignment(LongArrowRightIconSm);
const AlignedLargeButtonArrow = withLargeButtonAlignment(LongArrowRightIcon);
const AlignedSpan = withAlignment('span', iconSizeLg, lineHeightBase);
const AlignedSpanSmall = withAlignment('span', iconSizeLg, lineHeightSm);

const components = [
  {

import CodeBlock from '../../components/CodeBlock';
import * as ROUTES from '../../constants/routes';

const AlignedBaseArrow = withAlignment(
  LongArrowRightIconSm,
  lineHeightBase,
  iconSizeSm,
);
const AlignedLargeArrow = withAlignment(
  LongArrowRightIcon,
  lineHeightLg,
  iconSizeLg,
);
const AlignedButtonArrow = withButtonAlignment(LongArrowRightIconSm);
const AlignedLargeButtonArrow = withLargeButtonAlignment(LongArrowRightIcon);
const AlignedSpan = withAlignment('span', iconSizeLg, lineHeightBase);
const AlignedSpanSmall = withAlignment('span', iconSizeLg, lineHeightSm);

const components = [
  {
    id: 'withinBase',
    title: 'Icon alignment within text with textStyle "base"',
    blurb: [
      
        Aligning an icon within text with textStyle "base" can be done
        using
        <code>withAlignment</code>, providing suitable spacings (see the{' '}
        Typesetting section).
      ,
      Using the HOC is done as follows:,
      
        {`import LongArrowRightIconSm from 'bpk-component-icon/sm/long-arrow-right';