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

},
  [`.psds-tab__list.psds-theme--${themeNames.light}`]: {
    borderBottom: `1px solid ${core.colors.gray02}`
  },
  [`.psds-tab__list.psds-theme--${themeDefaultName}`]: {
    borderBottom: `1px solid ${core.colors.gray04}`
  },

  '.psds-tab__slider': {
    position: 'absolute',
    top: 0,
    left: 0,
    display: 'flex',
    height: '64px',
    transform: 'translateX(0)',
    transition: `transform ${core.motion.speedFast} ease-in-out`
  },

  '.psds-tab__overflow-button': {
    position: 'absolute',
    top: 0,
    display: 'flex',
    alignItems: 'center',
    height: 'calc(100% + 1px)',
    width: '64px',
    color: core.colors.white,
    border: 0,
    zIndex: 1,
    cursor: 'pointer',
    outline: 'none',

    // __icon

'.psds-card__action-bar--fullOverlay.psds-card__action-bar--no-actionBarVisible': {
    background: 'none'
  },
  '.psds-card__action-bar--actionBarVisible': {
    opacity: 1
  },

  // __action-bar__button
  '.psds-card__action-bar__button': {
    fontSize: core.type.fontSizeXSmall,
    padding: 0,
    cursor: 'pointer',
    border: 'none',
    color: transparentize(0.2, core.colors.white),
    background: 'none',
    transition: `all ${core.motion.speedNormal}`,

    '&:hover, &:active': {
      color: core.colors.white
    },
    '& + &': {
      marginLeft: core.layout.spacingSmall
    }
  },
  // __action-bar__button--disabled
  '.psds-card__action-bar__button--disabled': {
    color: core.colors.gray02,
    background: core.colors.gray03,

    '&:hover': {
      color: core.colors.gray02,
      background: core.colors.gray03

},
  [`.psds-note__action-bar.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray03
  },
  '.psds-note__action-bar--action-bar-visible': {
    opacity: 1
  },
  '.psds-note__action-bar--meta-sibling': {
    marginLeft: core.layout.spacingMedium
  },

  '.psds-note__action': {
    ...resetButton,
    cursor: 'pointer',
    fontSize: core.type.fontSizeXSmall,
    transition: `all ${core.motion.speedNormal}`,

    '&:hover, &:active': { color: core.colors.white },
    '& + &': { marginLeft: core.layout.spacingSmall }
  },
  [`.psds-note__action.psds-theme--${themeNames.light}`]: {
    '&:hover, &:active': { color: core.colors.gray03 }
  },

  '.psds-note__aside': {
    marginRight: core.layout.spacingMedium
  },

  '.psds-note__contents': {
    flex: 1,
    paddingTop: core.layout.spacingXXSmall,
    maxWidth: '100%',

decorator: ({ themeName }) => {
    const base = css({
      overflow: 'auto',
      width: '100%',
      height: '100vh',
      transition: `background ${core.motion.speedNormal}`,
      backgroundSize: 'cover',
      background: 'transparent'
    })

    const theme = css(
      themeName === names.dark && { background: core.colors.gray06 },
      themeName === names.light && { background: core.colors.bone }
    )

    return compose(
      base,
      theme
    )
  }
}

'.psds-actionmenu': ({ slide }) => ({
    position: 'absolute',
    display: 'inline-block',
    marginLeft: 0,
    background: core.colors.white,
    borderRadius: '2px',
    padding: `${vars.style.menuPaddingVert} 0`,
    minWidth: '160px',
    maxWidth: '320px',
    listStyle: 'none',
    boxShadow: `0 2px 4px rgba(0, 0, 0, 0.5)`,
    fontSize: core.type.fontSizeSmall,
    opacity: 0,
    animation: `${slide || 'psds-actionmenu__keyframes__slide'} ${
      core.motion.speedNormal
    } forwards`
  }),

alignItems: 'flex-start',
    display: 'flex',
    fontWeight: core.type.fontWeightBook,
    lineHeight: core.type.lineHeightStandard,
    padding: `${core.layout.spacingLarge} ${core.layout.spacingMedium}`
  },
  [`.psds-note.psds-theme--${themeNames.light}`]: {
    borderColor: core.colors.gray01
  },

  '.psds-note__action-bar': {
    color: core.colors.gray02,
    display: 'flex',
    marginLeft: 'auto',
    opacity: 0,
    transition: `opacity ${core.motion.speedNormal}`
  },
  [`.psds-note__action-bar.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray03
  },
  '.psds-note__action-bar--action-bar-visible': {
    opacity: 1
  },
  '.psds-note__action-bar--meta-sibling': {
    marginLeft: core.layout.spacingMedium
  },

  '.psds-note__action': {
    ...resetButton,
    cursor: 'pointer',
    fontSize: core.type.fontSizeXSmall,
    transition: `all ${core.motion.speedNormal}`,

align-items: center;
          height: 69px;
          background: ${core.colors.bone};
        }
        .burger {
          position: absolute;
          top: 0;
          left: 0;
          height: 69px;
          text-align: center;
          width: calc(${core.layout.spacingLarge} * 3);
          border: 0;
          background: none;
          cursor: pointer;
          color: ${core.colors.gray03};
          transition: all ${core.motion.speedXFast} linear;
        }
        .burger:hover,
        .burger:focus {
          color: ${core.colors.black};
        }
        .burger:focus {
          outline: 1px solid ${core.colors.black};
        }
        .title {
          text-align: center;
          flex: 1;
          line-height: 0;
        }
        @media screen and (min-width: 769px) {
          .bar {
            display: none;

'.psds-button': {
    position: 'relative',
    display: 'inline-flex',
    justifyContent: 'center',
    alignItems: 'stretch',
    padding: `${core.layout.spacingSmall} ${core.layout.spacingMedium}`,
    border: 0,
    borderRadius: '2px',
    fontSize: core.type.fontSizeSmall,
    fontWeight: core.type.fontWeightMedium,
    textAlign: 'center',
    color: core.colors.white,
    background: core.colors.orange,
    whiteSpace: 'nowrap',
    textDecoration: 'none',
    transition: `all ${core.motion.speedNormal}`,
    verticalAlign: 'middle',

    '&:not([disabled]):hover': {
      background: core.colors.orangeLight,
      cursor: 'pointer'
    },
    '&:focus': {
      outline: 'none',

      '&:before': {
        content: ' ',
        position: 'absolute',
        top: '-4px',
        left: '-4px',
        right: '-4px',
        bottom: '-4px',

<style>{`
          .task {
            text-decoration: none;
            color: inherit;
            display: block;
            width: 100%;
            margin: calc(${core.layout.spacingMedium} / 2);
            background: ${core.colors.bone};
            padding: ${core.layout.spacingMedium};
            border-radius: 12px;
            border: 2px solid transparent;
            transition: all ${core.motion.speedNormal};
            overflow: hidden;
          }
          .task:focus,
          .task:hover {
            border: 2px solid ${core.colors.gray01};
            outline: none;
            background: ${core.colors.white};
          }
          .meta {
            display: flex;
          }
          @media screen and (min-width: 1000px) {
            .task {
              width: calc(33.333% - ${core.layout.spacingMedium});
            }
          }</style>

'.psds-carousel__pages': {
    ...resetList,
    ...resetFocus,
    display: 'flex',
    width: '100%',
    overflow: 'hidden'
  },

  '.psds-carousel__page': {
    alignItems: 'flex-start',
    display: 'flex',
    flex: '1 0 100%',
    margin: `0 calc(${core.layout.spacingSmall}/2)`,
    pointerEvents: 'none',
    transition: `transform ${core.motion.speedXSlow} ease-in-out`,

    '&:first-child': { marginLeft: 0 },
    '&:last-child': { marginRight: 0 }
  },

  '.psds-carousel__page--active': { pointerEvents: 'auto' },

  '.psds-carousel__item': {
    margin: `0 calc(${core.layout.spacingSmall}/2)`,
    flex: '1 1 100%',
    width: 0,
    minWidth: 0,

    '&:first-child': { marginLeft: 0 },
    '&:last-child': { marginRight: 0 }
  },