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

},
  '.psds-text-input--disabled': {
    opacity: 0.5
  },

  // __field
  '.psds-text-input__field': {
    alignItems: 'center',
    background: colors.bone,
    borderRadius: '2px',
    color: colors.gray03,
    display: 'flex',
    fontWeight: type.fontWeightBook,
    height: '40px',
    minWidth: '192px',
    padding: `${layout.spacingXSmall} ${layout.spacingMedium}`,
    position: 'relative',
    width: '100%'
  },
  '.psds-text-input__field.psds-text-input--small': {
    height: '32px',
    padding: `6px ${layout.spacingXSmall}`
  },
  '.psds-text-input__field--w-after': {
    paddingRight: 0
  },
  '.psds-text-input__field-input': {
    width: '100%',
    background: 'none',
    border: 'none',
    color: 'inherit',
    fontSize: type.fontSizeSmall,

'.psds-date-picker__calendar__day--selected': {
    background: colors.blue,
    color: colors.white,

    '&:hover': { border: '3px solid transparent' }
  },

  // __calendar__skipped-day
  '.psds-date-picker__calendar__skipped-day': dayDimensions,

  // __calendar__switcher
  '.psds-date-picker__calendar__switcher': {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: layout.spacingMedium
  },

  // __calendar__switcher__month
  '.psds-date-picker__calendar__switcher__month': {
    fontSize: type.fontSizeSmall
  }
}

color: colors.gray05
  },
  [`.psds-date-picker__sub-field-divider--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01
  },

  // __field-container
  '.psds-date-picker__field-container': {
    position: 'relative',
    display: 'flex',
    borderRadius: '2px',
    alignItems: 'center',
    width: '100%',
    height: '40px',
    minWidth: `calc(192px + ${iconWidths.medium} + ${layout.spacingXSmall})`,
    padding: `0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall}) 0 ${layout.spacingMedium}`,
    background: colors.bone
  },
  [`.psds-date-picker__field-container.psds-theme--${themeNames.light}`]: {
    background: colors.white,
    border: `1px solid ${colors.gray02}`
  },
  [`.psds-date-picker__field-container--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01,
    background: colors.gray06,
    border: `1px solid ${colors.gray03}`
  },

  // __icon
  '.psds-date-picker__icon': {
    position: 'absolute',
    top: '0',

color: colors.gray05
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.left}`]: {
    padding: `0 ${layout.spacingMedium} 0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall})`
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.right}`]: {
    padding: `0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall}) 0 ${layout.spacingMedium}`
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.left}.psds-text-input--small`]: {
    padding: `0 ${layout.spacingXSmall} 0 ${parseInt(
      layout.spacingMedium,
      10
    ) + parseInt(iconWidths.medium, 10)}px`
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.right}.psds-text-input--small`]: {
    padding: `0 ${parseInt(layout.spacingMedium, 10) +
      parseInt(iconWidths.medium, 10)}px 0 ${layout.spacingXSmall}`
  },

  // __field-container
  '.psds-text-input__field-container': {
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    minWidth: `calc(192px + ${layout.spacingXSmall})`
  },

  // __icon
  '.psds-text-input__icon': {
    position: 'absolute',
    left: layout.spacingXSmall,
    top: '50%',

'.psds-date-picker__calendar': ({ slide }) => ({
    position: 'relative',
    zIndex: '0',
    width: '286px',
    maxHeight: '352px',
    background: colors.white,
    color: colors.gray03,
    borderRadius: '2px',
    padding: `${layout.spacingMedium} ${layout.spacingLarge}`,
    fontSize: type.fontSizeXSmall,
    fontWeight: type.fontWeightMedium,
    boxShadow: `0 2px 4px ${transparentize(0.5, colors.black)}`,
    opacity: 0,
    transform: `translateY(calc(-1 * ${layout.spacingXSmall}))`,
    animation: `${slide || 'psds-date-picker__calendar__keyframes__slide'} ${
      motion.speedNormal
    } forwards`
  }),

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'
    },
    '.psds-page-heading-layout__actions': {
      marginLeft: 'auto',
      paddingLeft: layout.spacingLarge,
      justifyContent: 'flex-end',
      alignItems: 'center',
      flexWrap: 'nowrap',

      '& > *': {
        marginRight: 0,

},
  '.psds-text-area--disabled': {
    opacity: 0.5
  },

  '.psds-text-area__field': {
    position: 'relative',
    minHeight: '104px',
    width: '100%',
    borderRadius: '2px',
    background: colors.bone,
    fontSize: type.fontSizeSmall,
    lineHeight: type.lineHeightStandard,
    fontWeight: type.fontWeightBook,
    color: colors.gray03,
    padding: `${layout.spacingXSmall} ${layout.spacingMedium}`,
    border: 'none'
  },
  '.psds-text-area__field:focus': {
    outline: 'none'
  },
  [`.psds-text-area__field.psds-theme--${themeNames.light}:focus`]: {
    border: '1px solid transparent'
  },
  [`.psds-text-area__field--error.psds-theme--${themeNames.light}`]: {
    border: '1px solid transparent'
  },
  [`.psds-text-area__field.psds-theme--${themeNames.light}`]: {
    background: colors.white,
    border: `1px solid ${colors.gray02}`
  },