How to use the @pluralsight/ps-design-system-core.layout.spacingLarge function in @pluralsight/ps-design-system-core

import { layout } from '@pluralsight/ps-design-system-core'

import { asideLayout as vars } from '../vars/index.js'

export default {
  '.psds-aside-layout': {
    display: 'flex'
  },
  [`.psds-aside-layout--aside-position-${vars.asidePositions.first}`]: {
    flexDirection: 'column'
  },
  [`.psds-aside-layout--aside-position-${vars.asidePositions.last}`]: {
    flexDirection: 'column-reverse'
  },
  [`.psds-aside-layout__aside--aside-position-${vars.asidePositions.first}`]: {
    marginBottom: layout.spacingLarge
  },
  [`.psds-aside-layout__aside--aside-position-${vars.asidePositions.last}`]: {
    marginTop: layout.spacingLarge
  },
  '@media (min-width: 769px)': {
    [`.psds-aside-layout--aside-position-${vars.asidePositions.first}`]: {
      flexDirection: 'row'
    },
    [`.psds-aside-layout--aside-position-${vars.asidePositions.last}`]: {
      flexDirection: 'row-reverse'
    },
    '.psds-aside-layout__aside': {
      width: 'calc(25%)'
    },
    [`.psds-aside-layout__aside--aside-position-${vars.asidePositions.first}`]: {
      marginBottom: 0,

[`.psds-aside-layout--aside-position-${vars.asidePositions.first}`]: {
      flexDirection: 'row'
    },
    [`.psds-aside-layout--aside-position-${vars.asidePositions.last}`]: {
      flexDirection: 'row-reverse'
    },
    '.psds-aside-layout__aside': {
      width: 'calc(25%)'
    },
    [`.psds-aside-layout__aside--aside-position-${vars.asidePositions.first}`]: {
      marginBottom: 0,
      marginRight: layout.spacingLarge
    },
    [`.psds-aside-layout__aside--aside-position-${vars.asidePositions.last}`]: {
      marginTop: 0,
      marginLeft: layout.spacingLarge
    },
    '.psds-aside-layout__main': {
      width: 'calc(75%)'
    }
  }
}

import { layout } from '@pluralsight/ps-design-system-core'

export default {
  '.psds-page-heading-layout': {
    padding: layout.spacingLarge
  },
  '.psds-page-heading-layout__actions': {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'left',
    flexWrap: 'wrap',

    '& > *': {
      marginRight: layout.spacingSmall,
      marginBottom: layout.spacingMedium
    }
  },
  '@media (min-width: 769px)': {
    '.psds-page-heading-layout__heading': {
      display: 'flex',
      alignItems: 'center'

export default {
  '.psds-aside-layout': {
    display: 'flex'
  },
  [`.psds-aside-layout--aside-position-${vars.asidePositions.first}`]: {
    flexDirection: 'column'
  },
  [`.psds-aside-layout--aside-position-${vars.asidePositions.last}`]: {
    flexDirection: 'column-reverse'
  },
  [`.psds-aside-layout__aside--aside-position-${vars.asidePositions.first}`]: {
    marginBottom: layout.spacingLarge
  },
  [`.psds-aside-layout__aside--aside-position-${vars.asidePositions.last}`]: {
    marginTop: layout.spacingLarge
  },
  '@media (min-width: 769px)': {
    [`.psds-aside-layout--aside-position-${vars.asidePositions.first}`]: {
      flexDirection: 'row'
    },
    [`.psds-aside-layout--aside-position-${vars.asidePositions.last}`]: {
      flexDirection: 'row-reverse'
    },
    '.psds-aside-layout__aside': {
      width: 'calc(25%)'
    },
    [`.psds-aside-layout__aside--aside-position-${vars.asidePositions.first}`]: {
      marginBottom: 0,
      marginRight: layout.spacingLarge
    },
    [`.psds-aside-layout__aside--aside-position-${vars.asidePositions.last}`]: {

justifyContent: 'left',
    flexWrap: 'wrap',

    '& > *': {
      marginRight: layout.spacingSmall,
      marginBottom: layout.spacingMedium
    }
  },
  '@media (min-width: 769px)': {
    '.psds-page-heading-layout__heading': {
      display: 'flex',
      alignItems: 'center'
    },
    '.psds-page-heading-layout__actions': {
      marginLeft: 'auto',
      paddingLeft: layout.spacingLarge,
      justifyContent: 'flex-end',
      alignItems: 'center',
      flexWrap: 'nowrap',

      '& > *': {
        marginRight: 0,
        marginBottom: 0
      },
      '& > * + *': {
        marginLeft: layout.spacingSmall
      }
    }
  }
}

import { layout } from '@pluralsight/ps-design-system-core'

export default {
  '.psds-page-width-layout': {
    marginLeft: 'auto',
    marginRight: 'auto',
    maxWidth: '1600px',
    paddingLeft: layout.spacingLarge,
    paddingRight: layout.spacingLarge
  },
  '@media (min-width: 769px)': {
    '.psds-page-width-layout': {
      paddingLeft: layout.spacingXLarge,
      paddingRight: layout.spacingXLarge
    }
  }
}

import { layout } from '@pluralsight/ps-design-system-core'

export default {
  '.psds-page-width-layout': {
    marginLeft: 'auto',
    marginRight: 'auto',
    maxWidth: '1600px',
    paddingLeft: layout.spacingLarge,
    paddingRight: layout.spacingLarge
  },
  '@media (min-width: 769px)': {
    '.psds-page-width-layout': {
      paddingLeft: layout.spacingXLarge,
      paddingRight: layout.spacingXLarge
    }
  }
}

import { layout } from '@pluralsight/ps-design-system-core'

import { equalColumnLayout as vars } from '../vars/index.js'

export default {
  '.psds-equal-column-layout': {
    display: 'flex',
    flexWrap: 'wrap',
    margin: `calc(${layout.spacingLarge} / -2)`
  },
  '.psds-equal-column-layout__column': {
    margin: `calc(${layout.spacingLarge} / 2)`
  },
  [`.psds-equal-column-layout__column--count-${vars.counts.two}`]: {
    width: '100%'
  },
  [`.psds-equal-column-layout__column--count-${vars.counts.three}`]: {
    width: '100%'
  },
  [`.psds-equal-column-layout__column--count-${vars.counts.four}`]: {
    width: `calc(50% - ${layout.spacingLarge})`
  },
  [`.psds-equal-column-layout__column--count-${vars.counts.six}`]: {
    width: `calc(50% - ${layout.spacingLarge})`
  },